@fluid-topics/ft-infinite-scroll 1.2.35 → 1.2.37
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.
|
@@ -371,7 +371,7 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
371
371
|
dispatchVisibleItemsEvent() {
|
|
372
372
|
var _a;
|
|
373
373
|
(_a = this.cancelableDispatchEvent) === null || _a === void 0 ? void 0 : _a.cancel();
|
|
374
|
-
this.cancelableDispatchEvent = cancelable(waitUntil(() => !this.scrolling));
|
|
374
|
+
this.cancelableDispatchEvent = cancelable(waitUntil(() => this.scrolledToTarget && !this.scrolling));
|
|
375
375
|
this.cancelableDispatchEvent
|
|
376
376
|
.then(() => this.dispatchEvent(new VisibleItemsChangeEvent(this.visibleItems, this.visibleItems.map(index => this.items[index]))))
|
|
377
377
|
.catch(() => null);
|
|
@@ -38,4 +38,4 @@
|
|
|
38
38
|
data-item-index="${t}">
|
|
39
39
|
${i?(()=>{let h=this.renderItem(e,t);return typeof h=="string"?(0,F.unsafeHTML)(h):h})():f.nothing}
|
|
40
40
|
</div>
|
|
41
|
-
`}prepareRenderIfNeeded(e){let t=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!t&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.addRenderedIndex(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}addRenderedIndex(e){e>=0&&!this.renderedIndexes.has(e)&&this.renderedIndexes.add(e)}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=B(this.visibleItems)+this.renderAfterLast}isRendered(e){return this.renderedIndexes.has(this.items.indexOf(e))}resetScroll(e=!0){this.shouldRestoreScroll=!1,this.intersectionObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.internalScroll&&this.scrollable!==this.internalScrollable?this.scrollable=this.internalScrollable:!this.internalScroll&&e&&(this.scrollable=o.scrollHelper.findFirstScrollableParent(this.itemsContainer));let t=this.resolveScrollToIndex();this.addRenderedIndex(t),this.scrollToTarget(t),this.scrollDoneDebouncer.run(()=>{this.ensureScrollToTarget&&t>=0&&this.scrollDebouncer.run(()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(t))>5&&this.scrollToTarget(t)},500),this.scrollToTarget(t),this.scrolledToTarget=!0,this.shouldRestoreScroll=!0,this.resetIntersectionObserver()})}resolveScrollToIndex(){var e;let t=(e=this.scrollToIndex)!==null&&e!==void 0?e:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;return t>=this.items.length?-1:t}getItem(e){var t,s,i;return(s=(t=this.shadowRoot)===null||t===void 0?void 0:t.querySelector(`#item-${e}`))!==null&&s!==void 0?s:(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector("#item-0")}scrollToTarget(e){e<=0?(this.scrollable.scrollTop=0,this.scrollRestorationOffset=-this.getOffset(e)):(this.scrollable.scrollTop=this.getOffset(e),this.scrollRestorationOffset=0),this.scrollRestorationItem=e>=0?e:void 0}onScrollIntoView(e){var t;this.scrollDebouncer.cancel();let s=e.composedPath()[0],i=this.getOffset(s),l=(t=e.composedPath().find(h=>typeof h.matches=="function"&&h.matches(".item-container")))===null||t===void 0?void 0:t.getAttribute("data-item-index");this.scrollRestorationItem=l==null?this.scrollRestorationItem:+l,this.scrollRestorationOffset=i-this.getOffset(this.scrollRestorationItem),this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop=i}getOffset(e){let t=typeof e=="number"?this.getItem(e):e;return t?o.scrollHelper.getAbsoluteScrollOffset(this.scrollable,t):0}appendItems(...e){this.items=[...this.items,...e]}prependItems(...e){this.items=[...e,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0}),this.resetScroll()},0)}disconnectedCallback(){super.disconnectedCallback(),this.scrollable=void 0,this.intersectionObserver.disconnect(),this.mutationObserver.disconnect(),this.shouldRestoreScroll=!1}resetIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1,1]}),this.onMutation()}searchFirstVisibleItem(e,t,s,i){if(s=s??0,i=i??t.length-1,i<=s)return t[s];let l=Math.floor((i-s)/2)+s,h=t[l],d=this.getOffset(h);return d>e?this.searchFirstVisibleItem(e,t,s,l-1):d+h.clientHeight<e?this.searchFirstVisibleItem(e,t,l+1,i):h}get shouldRestoreScroll(){return this._shouldRestoreScroll}set shouldRestoreScroll(e){let t=e&&!this._shouldRestoreScroll;this._shouldRestoreScroll=e,t&&requestAnimationFrame(this.scrollAdjustment)}update(e){super.update(e),e.has("items")&&(this.renderedIndexes=new Set,this.lastRenderedItemsLength=0,this.renderApprovalTimeouts=[]),((e.has("scrollToItem")||e.has("scrollToIndex"))&&(this.scrollToItem!=null||this.scrollToIndex!=null)||e.has("internalScroll"))&&this.resetScroll()}updated(e){super.updated(e),(e.has("visibleItems")||e.has("items"))&&this.onVisibleItemsChange(),e.has("scrolledToTarget")&&this.scrolledToTarget&&(this.scrollToItem!=null||this.scrollToIndex!=null)&&this.dispatchEvent(new S)}contentAvailableCallback(e){var t,s;super.contentAvailableCallback(e);let i=[...(s=(t=this.shadowRoot)===null||t===void 0?void 0:t.querySelectorAll(".item-container.rendered"))!==null&&s!==void 0?s:[]].map(l=>+l.getAttribute("data-item-index"));this.lastRenderedItemsLength!==i.length&&(this.dispatchRenderedItemsChangeEvent(i),this.lastRenderedItemsLength=i.length)}dispatchRenderedItemsChangeEvent(e){let t=e??[...this.renderedIndexes].sort((s,i)=>s-i);this.dispatchEvent(new R(t,t.map(s=>this.items[s])))}onVisibleItemsChange(){this.visibleItems.every((t,s)=>this.visibleItems[s+1]==null||t+1===this.visibleItems[s+1])||(0,o.deepEqual)(this.visibleItems,this.lastNotOkVisibleItems)?(this.resetVisibleItemsDebouncer.cancel(),this.dispatchVisibleItemsEvent()):this.resetVisibleItemsDebouncer.run(()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.resetIntersectionObserver()})}dispatchVisibleItemsEvent(){var e;(e=this.cancelableDispatchEvent)===null||e===void 0||e.cancel(),this.cancelableDispatchEvent=(0,o.cancelable)((0,o.waitUntil)(()
|
|
41
|
+
`}prepareRenderIfNeeded(e){let t=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!t&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.addRenderedIndex(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}addRenderedIndex(e){e>=0&&!this.renderedIndexes.has(e)&&this.renderedIndexes.add(e)}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=B(this.visibleItems)+this.renderAfterLast}isRendered(e){return this.renderedIndexes.has(this.items.indexOf(e))}resetScroll(e=!0){this.shouldRestoreScroll=!1,this.intersectionObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.internalScroll&&this.scrollable!==this.internalScrollable?this.scrollable=this.internalScrollable:!this.internalScroll&&e&&(this.scrollable=o.scrollHelper.findFirstScrollableParent(this.itemsContainer));let t=this.resolveScrollToIndex();this.addRenderedIndex(t),this.scrollToTarget(t),this.scrollDoneDebouncer.run(()=>{this.ensureScrollToTarget&&t>=0&&this.scrollDebouncer.run(()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(t))>5&&this.scrollToTarget(t)},500),this.scrollToTarget(t),this.scrolledToTarget=!0,this.shouldRestoreScroll=!0,this.resetIntersectionObserver()})}resolveScrollToIndex(){var e;let t=(e=this.scrollToIndex)!==null&&e!==void 0?e:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;return t>=this.items.length?-1:t}getItem(e){var t,s,i;return(s=(t=this.shadowRoot)===null||t===void 0?void 0:t.querySelector(`#item-${e}`))!==null&&s!==void 0?s:(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector("#item-0")}scrollToTarget(e){e<=0?(this.scrollable.scrollTop=0,this.scrollRestorationOffset=-this.getOffset(e)):(this.scrollable.scrollTop=this.getOffset(e),this.scrollRestorationOffset=0),this.scrollRestorationItem=e>=0?e:void 0}onScrollIntoView(e){var t;this.scrollDebouncer.cancel();let s=e.composedPath()[0],i=this.getOffset(s),l=(t=e.composedPath().find(h=>typeof h.matches=="function"&&h.matches(".item-container")))===null||t===void 0?void 0:t.getAttribute("data-item-index");this.scrollRestorationItem=l==null?this.scrollRestorationItem:+l,this.scrollRestorationOffset=i-this.getOffset(this.scrollRestorationItem),this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop=i}getOffset(e){let t=typeof e=="number"?this.getItem(e):e;return t?o.scrollHelper.getAbsoluteScrollOffset(this.scrollable,t):0}appendItems(...e){this.items=[...this.items,...e]}prependItems(...e){this.items=[...e,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0}),this.resetScroll()},0)}disconnectedCallback(){super.disconnectedCallback(),this.scrollable=void 0,this.intersectionObserver.disconnect(),this.mutationObserver.disconnect(),this.shouldRestoreScroll=!1}resetIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1,1]}),this.onMutation()}searchFirstVisibleItem(e,t,s,i){if(s=s??0,i=i??t.length-1,i<=s)return t[s];let l=Math.floor((i-s)/2)+s,h=t[l],d=this.getOffset(h);return d>e?this.searchFirstVisibleItem(e,t,s,l-1):d+h.clientHeight<e?this.searchFirstVisibleItem(e,t,l+1,i):h}get shouldRestoreScroll(){return this._shouldRestoreScroll}set shouldRestoreScroll(e){let t=e&&!this._shouldRestoreScroll;this._shouldRestoreScroll=e,t&&requestAnimationFrame(this.scrollAdjustment)}update(e){super.update(e),e.has("items")&&(this.renderedIndexes=new Set,this.lastRenderedItemsLength=0,this.renderApprovalTimeouts=[]),((e.has("scrollToItem")||e.has("scrollToIndex"))&&(this.scrollToItem!=null||this.scrollToIndex!=null)||e.has("internalScroll"))&&this.resetScroll()}updated(e){super.updated(e),(e.has("visibleItems")||e.has("items"))&&this.onVisibleItemsChange(),e.has("scrolledToTarget")&&this.scrolledToTarget&&(this.scrollToItem!=null||this.scrollToIndex!=null)&&this.dispatchEvent(new S)}contentAvailableCallback(e){var t,s;super.contentAvailableCallback(e);let i=[...(s=(t=this.shadowRoot)===null||t===void 0?void 0:t.querySelectorAll(".item-container.rendered"))!==null&&s!==void 0?s:[]].map(l=>+l.getAttribute("data-item-index"));this.lastRenderedItemsLength!==i.length&&(this.dispatchRenderedItemsChangeEvent(i),this.lastRenderedItemsLength=i.length)}dispatchRenderedItemsChangeEvent(e){let t=e??[...this.renderedIndexes].sort((s,i)=>s-i);this.dispatchEvent(new R(t,t.map(s=>this.items[s])))}onVisibleItemsChange(){this.visibleItems.every((t,s)=>this.visibleItems[s+1]==null||t+1===this.visibleItems[s+1])||(0,o.deepEqual)(this.visibleItems,this.lastNotOkVisibleItems)?(this.resetVisibleItemsDebouncer.cancel(),this.dispatchVisibleItemsEvent()):this.resetVisibleItemsDebouncer.run(()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.resetIntersectionObserver()})}dispatchVisibleItemsEvent(){var e;(e=this.cancelableDispatchEvent)===null||e===void 0||e.cancel(),this.cancelableDispatchEvent=(0,o.cancelable)((0,o.waitUntil)(()=>this.scrolledToTarget&&!this.scrolling)),this.cancelableDispatchEvent.then(()=>this.dispatchEvent(new T(this.visibleItems,this.visibleItems.map(t=>this.items[t])))).catch(()=>null)}};n.styles=L;c([(0,a.property)({type:Array})],n.prototype,"items",void 0);c([(0,a.property)({attribute:!1})],n.prototype,"renderItem",void 0);c([(0,a.property)({attribute:!1})],n.prototype,"getItemKey",void 0);c([(0,a.property)({type:Object})],n.prototype,"scrollToItem",void 0);c([(0,a.property)({type:Number})],n.prototype,"scrollToIndex",void 0);c([(0,a.property)({type:Boolean})],n.prototype,"internalScroll",void 0);c([(0,a.property)({type:Number})],n.prototype,"renderBeforeFirst",void 0);c([(0,a.property)({type:Number})],n.prototype,"renderAfterLast",void 0);c([(0,a.property)({type:Boolean})],n.prototype,"ensureScrollToTarget",void 0);c([(0,a.state)({hasChanged(r,e){return r!=null&&e==null||r.length!==e.length||r[0]!==e[0]}})],n.prototype,"visibleItems",void 0);c([(0,a.query)(".scrollable")],n.prototype,"internalScrollable",void 0);c([(0,a.query)(".items-container")],n.prototype,"itemsContainer",void 0);c([(0,a.state)()],n.prototype,"scrolledToTarget",void 0);c([(0,a.state)()],n.prototype,"scrolling",void 0);(0,$.customElement)("ft-infinite-scroll")(n);})();
|