@fluid-topics/ft-reader-content 1.1.41 → 1.1.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,7 +9,7 @@ import { property, query } from "lit/decorators.js";
9
9
  import { Debouncer, redux } from "@fluid-topics/ft-wc-utils";
10
10
  import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
11
11
  import { FtInfiniteScroll } from "@fluid-topics/ft-infinite-scroll";
12
- import { styles } from "./ft-reader-content.css";
12
+ import { styles } from "./ft-reader-content.styles";
13
13
  import "@fluid-topics/ft-reader-topic-context";
14
14
  class FtReaderContent extends FtReaderComponent {
15
15
  constructor() {
@@ -40,7 +40,7 @@
40
40
  data-item-index="${i}">
41
41
  ${r?(()=>{const e=this.renderItem(t,i);return"string"==typeof e?n.unsafeHTML(e):e})():e.nothing}
42
42
  </div>
43
- `}prepareRenderIfNeeded(t){const i=null!=this.renderApprovalTimeouts[t];this.inRenderRange(t)&&!i&&(this.renderApprovalTimeouts[t]=setTimeout((()=>{this.inRenderRange(t)?this.renderedIndexes.add(t):this.renderApprovalTimeouts[t]=void 0,this.requestUpdate()}),300))}inRenderRange(t){return t>=this.visibleItems[0]-this.renderBeforeFirst&&t<=(null!=(i=this.visibleItems)?i:[])[(null!=i?i:[]).length-1]+this.renderAfterLast;var i}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.itemsResizeObserver.disconnect(),this.scrollableResizeObserver.disconnect(),this.visibleItems=[];const t=this.resolveScrollToIndex();this.renderedIndexes.add(t),this.scrollToTarget(t),this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{this.scrollToTarget(t),this.onMutation(),this.scrollDoneDebouncer.run((()=>{this.ensureScrollToTarget&&t>=0&&this.scrollDebouncer.run((()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(t))>5&&this.scrollToTarget(t)}),500),this.scrolledToTarget=!0}))}))}resolveScrollToIndex(){var t;let i=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;return i>=this.items.length?-1:i}getItem(t){var i,e,s;return null!==(e=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(`#item-${t}`))&&void 0!==e?e:null===(s=this.shadowRoot)||void 0===s?void 0:s.querySelector("#item-0")}scrollToTarget(t){t<=0?(this.scrollable.scrollTop=0,this.scrollRestorationOffset=-this.getOffset(t)):(this.scrollable.scrollTop=this.getOffset(t),this.scrollRestorationOffset=0),this.scrollRestorationItem=t>=0?t:void 0}getOffset(t){var i;let e=0,s="number"==typeof t?this.getItem(t):t;for(;s&&s.offsetParent!==this.scrollable.offsetParent;)e+=s.offsetTop,s=s.offsetParent;return e+(null!==(i=null==s?void 0:s.offsetTop)&&void 0!==i?i:0)-this.scrollable.offsetTop}getLastKnownHeight(t){var i;return+(null!==(i=null==t?void 0:t.getAttribute("data-last-known-height"))&&void 0!==i?i:1e3)}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.triggerFindScrollableParent(),this.initIntersectionObserver(),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}initIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1,1]})}triggerFindScrollableParent(){var t;null===(t=this.itemsContainer)||void 0===t||t.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){var i;let e,s;t.stopPropagation();for(let i of t.composedPath()){const t=i,r=this.elementCanScroll(t);if(r&&t.clientHeight&&t.clientHeight<t.scrollHeight){e=t;break}r&&(s=t)}let r=e||s;r!==this.firstScrollableParent&&(null===(i=this.firstScrollableParent)||void 0===i||i.removeEventListener("scroll",this.scrollListener),null==r||r.addEventListener("scroll",this.scrollListener),this.firstScrollableParent=r,this.initIntersectionObserver(),this.resetScroll())}elementCanScroll(t){try{return["auto","scroll"].includes(getComputedStyle(t).overflowY)}catch(t){return!1}}searchFirstVisibleItem(t,i,e){if(i=null!=i?i:0,(e=null!=e?e:t.length-1)<=i)return t[i];const s=Math.floor((e-i)/2)+i,r=t[s];return this.getOffset(r)>this.scrollable.scrollTop?this.searchFirstVisibleItem(t,i,s-1):this.getOffset(r)+this.getLastKnownHeight(r)<this.scrollable.scrollTop?this.searchFirstVisibleItem(t,s+1,e):r}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.itemsResizeObserver.disconnect(),this.scrollableResizeObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.resetScroll()}update(t){super.update(t),t.has("items")&&(this.renderedIndexes=new Set,this.renderApprovalTimeouts=[]),!t.has("scrollToItem")&&!t.has("scrollToIndex")||null==this.scrollToItem&&null==this.scrollToIndex||this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.onVisibleItemsChange(),t.has("scrolledToTarget")&&this.scrolledToTarget&&(null!=this.scrollToItem||null!=this.scrollToIndex)&&this.dispatchEvent(new m)}onVisibleItemsChange(){this.visibleItems.every(((t,i)=>null==this.visibleItems[i+1]||t+1===this.visibleItems[i+1]))||i.deepEqual(this.visibleItems,this.lastNotOkVisibleItems)?(this.resetVisibleItemsDebouncer.cancel(),this.dispatchVisibleItemsEvent()):this.resetVisibleItemsDebouncer.run((()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.initIntersectionObserver(),this.onMutation()}))}dispatchVisibleItemsEvent(){var t;null===(t=this.cancelableDispatchEvent)||void 0===t||t.cancel(),this.cancelableDispatchEvent=i.cancelable(i.waitUntil((()=>!this.scrolling))),this.cancelableDispatchEvent.then((()=>this.dispatchEvent(new b(this.visibleItems,this.visibleItems.map((t=>this.items[t])))))).catch((()=>null))}}g.styles=f,p([s.property({type:Array})],g.prototype,"items",void 0),p([s.property({attribute:!1})],g.prototype,"renderItem",void 0),p([s.property({attribute:!1})],g.prototype,"getItemKey",void 0),p([s.property({type:Object})],g.prototype,"scrollToItem",void 0),p([s.property({type:Number})],g.prototype,"scrollToIndex",void 0),p([s.property({type:Boolean})],g.prototype,"internalScroll",void 0),p([s.property({type:Number})],g.prototype,"renderBeforeFirst",void 0),p([s.property({type:Number})],g.prototype,"renderAfterLast",void 0),p([s.property({type:Boolean})],g.prototype,"ensureScrollToTarget",void 0),p([s.state({hasChanged:(t,i)=>null!=t&&null==i||t.length!==i.length||t[0]!==i[0]})],g.prototype,"visibleItems",void 0),p([s.query(".scrollable")],g.prototype,"internalScrollable",void 0),p([s.query(".items-container")],g.prototype,"itemsContainer",void 0),p([s.state()],g.prototype,"scrolledToTarget",void 0),p([s.state()],g.prototype,"scrolling",void 0),p([s.state({hasChanged:(t,e)=>!i.deepEqual(t,e)})],g.prototype,"renderedIndexes",void 0),i.customElement("ft-infinite-scroll")(g);const I=e.css`
43
+ `}prepareRenderIfNeeded(t){const i=null!=this.renderApprovalTimeouts[t];this.inRenderRange(t)&&!i&&(this.renderApprovalTimeouts[t]=setTimeout((()=>{this.inRenderRange(t)?this.renderedIndexes.add(t):this.renderApprovalTimeouts[t]=void 0,this.requestUpdate()}),300))}inRenderRange(t){return t>=this.visibleItems[0]-this.renderBeforeFirst&&t<=(null!=(i=this.visibleItems)?i:[])[(null!=i?i:[]).length-1]+this.renderAfterLast;var i}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.itemsResizeObserver.disconnect(),this.scrollableResizeObserver.disconnect(),this.visibleItems=[];const t=this.resolveScrollToIndex();this.renderedIndexes.add(t),this.scrolledToTarget=!1,this.scrollToTarget(t),this.onMutation(),this.scrollDoneDebouncer.run((()=>{this.ensureScrollToTarget&&t>=0&&this.scrollDebouncer.run((()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(t))>5&&this.scrollToTarget(t)}),500),this.scrolledToTarget=!0}))}resolveScrollToIndex(){var t;let i=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;return i>=this.items.length?-1:i}getItem(t){var i,e,s;return null!==(e=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(`#item-${t}`))&&void 0!==e?e:null===(s=this.shadowRoot)||void 0===s?void 0:s.querySelector("#item-0")}scrollToTarget(t){t<=0?(this.scrollable.scrollTop=0,this.scrollRestorationOffset=-this.getOffset(t)):(this.scrollable.scrollTop=this.getOffset(t),this.scrollRestorationOffset=0),this.scrollRestorationItem=t>=0?t:void 0}getOffset(t){var i;let e=0,s="number"==typeof t?this.getItem(t):t;for(;s&&s.offsetParent!==this.scrollable.offsetParent;)e+=s.offsetTop,s=s.offsetParent;return e+(null!==(i=null==s?void 0:s.offsetTop)&&void 0!==i?i:0)-this.scrollable.offsetTop}getLastKnownHeight(t){var i;return+(null!==(i=null==t?void 0:t.getAttribute("data-last-known-height"))&&void 0!==i?i:1e3)}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.triggerFindScrollableParent(),this.initIntersectionObserver(),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0}),this.resetScroll()}),0)}initIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1,1]})}triggerFindScrollableParent(){var t;null===(t=this.itemsContainer)||void 0===t||t.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){var i;let e,s;t.stopPropagation();for(let i of t.composedPath()){const t=i,r=this.elementCanScroll(t);if(r&&t.clientHeight&&t.clientHeight<t.scrollHeight){e=t;break}r&&(s=t)}let r=e||s;r!==this.firstScrollableParent&&(null===(i=this.firstScrollableParent)||void 0===i||i.removeEventListener("scroll",this.scrollListener),null==r||r.addEventListener("scroll",this.scrollListener),this.firstScrollableParent=r,this.initIntersectionObserver(),this.resetScroll())}elementCanScroll(t){try{return["auto","scroll"].includes(getComputedStyle(t).overflowY)}catch(t){return!1}}searchFirstVisibleItem(t,i,e){if(i=null!=i?i:0,(e=null!=e?e:t.length-1)<=i)return t[i];const s=Math.floor((e-i)/2)+i,r=t[s];return this.getOffset(r)>this.scrollable.scrollTop?this.searchFirstVisibleItem(t,i,s-1):this.getOffset(r)+this.getLastKnownHeight(r)<this.scrollable.scrollTop?this.searchFirstVisibleItem(t,s+1,e):r}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.itemsResizeObserver.disconnect(),this.scrollableResizeObserver.disconnect(),this.mutationObserver.disconnect()}update(t){super.update(t),t.has("items")&&(this.renderedIndexes=new Set,this.renderApprovalTimeouts=[]),!t.has("scrollToItem")&&!t.has("scrollToIndex")||null==this.scrollToItem&&null==this.scrollToIndex||this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.onVisibleItemsChange(),t.has("scrolledToTarget")&&this.scrolledToTarget&&(null!=this.scrollToItem||null!=this.scrollToIndex)&&this.dispatchEvent(new m)}onVisibleItemsChange(){this.visibleItems.every(((t,i)=>null==this.visibleItems[i+1]||t+1===this.visibleItems[i+1]))||i.deepEqual(this.visibleItems,this.lastNotOkVisibleItems)?(this.resetVisibleItemsDebouncer.cancel(),this.dispatchVisibleItemsEvent()):this.resetVisibleItemsDebouncer.run((()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.initIntersectionObserver(),this.onMutation()}))}dispatchVisibleItemsEvent(){var t;null===(t=this.cancelableDispatchEvent)||void 0===t||t.cancel(),this.cancelableDispatchEvent=i.cancelable(i.waitUntil((()=>!this.scrolling))),this.cancelableDispatchEvent.then((()=>this.dispatchEvent(new b(this.visibleItems,this.visibleItems.map((t=>this.items[t])))))).catch((()=>null))}}g.styles=f,p([s.property({type:Array})],g.prototype,"items",void 0),p([s.property({attribute:!1})],g.prototype,"renderItem",void 0),p([s.property({attribute:!1})],g.prototype,"getItemKey",void 0),p([s.property({type:Object})],g.prototype,"scrollToItem",void 0),p([s.property({type:Number})],g.prototype,"scrollToIndex",void 0),p([s.property({type:Boolean})],g.prototype,"internalScroll",void 0),p([s.property({type:Number})],g.prototype,"renderBeforeFirst",void 0),p([s.property({type:Number})],g.prototype,"renderAfterLast",void 0),p([s.property({type:Boolean})],g.prototype,"ensureScrollToTarget",void 0),p([s.state({hasChanged:(t,i)=>null!=t&&null==i||t.length!==i.length||t[0]!==i[0]})],g.prototype,"visibleItems",void 0),p([s.query(".scrollable")],g.prototype,"internalScrollable",void 0),p([s.query(".items-container")],g.prototype,"itemsContainer",void 0),p([s.state()],g.prototype,"scrolledToTarget",void 0),p([s.state()],g.prototype,"scrolling",void 0),p([s.state({hasChanged:(t,e)=>!i.deepEqual(t,e)})],g.prototype,"renderedIndexes",void 0),i.customElement("ft-infinite-scroll")(g);const I=e.css`
44
44
  `,w=e.css`
45
45
  `;var x=function(t,i,e,s){for(var r,n=arguments.length,o=n<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(n<3?r(o):n>3?r(i,e,o):r(i,e))||o);return n>3&&o&&Object.defineProperty(i,e,o),o};class T extends a{constructor(){super(...arguments),this.disableContextInteractions=!1,this.registeredComponents=[]}render(){return e.html`
46
46
  <article id=${this.tocId}>