@fluid-topics/ft-infinite-scroll 1.2.4 → 1.2.6
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.
|
@@ -38,12 +38,14 @@ export declare class FtInfiniteScroll<T> extends FtLitElement implements FtInfin
|
|
|
38
38
|
private renderItemContainer;
|
|
39
39
|
private prepareRenderIfNeeded;
|
|
40
40
|
private inRenderRange;
|
|
41
|
+
isRendered(item: T): boolean;
|
|
41
42
|
private scrollDebouncer;
|
|
42
43
|
private scrollDoneDebouncer;
|
|
43
44
|
resetScroll(findScrollableParent?: boolean): void;
|
|
44
45
|
private resolveScrollToIndex;
|
|
45
46
|
private getItem;
|
|
46
47
|
private scrollToTarget;
|
|
48
|
+
private onScrollIntoView;
|
|
47
49
|
private getOffset;
|
|
48
50
|
appendItems(...items: Array<T>): void;
|
|
49
51
|
prependItems(...items: Array<T>): void;
|
|
@@ -144,7 +144,7 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
144
144
|
}
|
|
145
145
|
render() {
|
|
146
146
|
return html `
|
|
147
|
-
<div class="items-container ${this.internalScroll ? "scrollable" : ""}" tabindex="-1">
|
|
147
|
+
<div @scroll-into-view="${this.onScrollIntoView}" class="items-container ${this.internalScroll ? "scrollable" : ""}" tabindex="-1">
|
|
148
148
|
${repeat(this.items, (item, index) => this.getItemKey(item, index), (item, index) => this.renderItemContainer(item, index))}
|
|
149
149
|
</div>
|
|
150
150
|
`;
|
|
@@ -182,6 +182,9 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
182
182
|
inRenderRange(index) {
|
|
183
183
|
return index >= this.visibleItems[0] - this.renderBeforeFirst && index <= last(this.visibleItems) + this.renderAfterLast;
|
|
184
184
|
}
|
|
185
|
+
isRendered(item) {
|
|
186
|
+
return this.renderedIndexes.has(this.items.indexOf(item));
|
|
187
|
+
}
|
|
185
188
|
resetScroll(findScrollableParent = true) {
|
|
186
189
|
this.shouldRestoreScroll = false;
|
|
187
190
|
this.intersectionObserver.disconnect();
|
|
@@ -230,6 +233,16 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
230
233
|
}
|
|
231
234
|
this.scrollRestorationItem = index >= 0 ? index : undefined;
|
|
232
235
|
}
|
|
236
|
+
onScrollIntoView(e) {
|
|
237
|
+
var _a;
|
|
238
|
+
this.scrollDebouncer.cancel();
|
|
239
|
+
const targetOffset = this.getOffset(e.target);
|
|
240
|
+
const itemContainerIndex = (_a = e.composedPath()
|
|
241
|
+
.find((elt) => typeof elt.matches == "function" && elt.matches(".item-container"))) === null || _a === void 0 ? void 0 : _a.getAttribute("data-item-index");
|
|
242
|
+
this.scrollRestorationItem = itemContainerIndex == null ? this.scrollRestorationItem : +itemContainerIndex;
|
|
243
|
+
this.scrollRestorationOffset = targetOffset - this.getOffset(this.scrollRestorationItem);
|
|
244
|
+
this.scrollable.scrollTop = targetOffset;
|
|
245
|
+
}
|
|
233
246
|
getOffset(target) {
|
|
234
247
|
let el = typeof target === "number" ? this.getItem(target) : target;
|
|
235
248
|
return el ? scrollHelper.getAbsoluteScrollOffset(this.scrollable, el) : 0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(()=>{var
|
|
1
|
+
"use strict";(()=>{var H=Object.create;var y=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var b=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports);var q=(l,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of L(e))!k.call(l,i)&&i!==t&&y(l,i,{get:()=>e[i],enumerable:!(s=M(e,i))||s.enumerable});return l};var m=(l,e,t)=>(t=l!=null?H(j(l)):{},q(e||!l||!l.__esModule?y(t,"default",{value:l,enumerable:!0}):t,l));var u=b((U,O)=>{O.exports=ftGlobals.wcUtils});var g=b((P,R)=>{R.exports=ftGlobals.lit});var w=b((K,x)=>{x.exports=ftGlobals.litDecorators});var A=b((Z,_)=>{_.exports=ftGlobals.litRepeat});var V=b((W,C)=>{C.exports=ftGlobals.litUnsafeHTML});var $=m(u());var f=m(g()),h=m(w()),N=m(A()),o=m(u()),F=m(V());var E=m(g()),p=m(u()),I={padding:p.FtCssVariableFactory.create("--ft-infinite-scroll-padding","","SIZE","0"),itemsGap:p.FtCssVariableFactory.create("--ft-infinite-scroll-items-gap","","SIZE","4px"),itemContainerMinHeight:p.FtCssVariableFactory.create("--ft-infinite-scroll-item-container-min-height","","SIZE",".1px")},D=E.css`
|
|
2
2
|
.items-container {
|
|
3
3
|
padding: ${I.padding};
|
|
4
4
|
outline: none;
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
display: flow-root;
|
|
29
29
|
min-height: ${I.itemContainerMinHeight};
|
|
30
30
|
}
|
|
31
|
-
`;var a=function(l,e,t,s){var i=arguments.length,r=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(l,e,t,s);else for(var d=l.length-1;d>=0;d--)(c=l[d])&&(r=(i<3?c(r):i>3?c(e,t,r):c(e,t))||r);return i>3&&r&&Object.defineProperty(e,t,r),r},T=class extends CustomEvent{constructor(e,t){super("visible-items-change",{detail:{visibleIndexes:e,visibleItems:t}})}},
|
|
32
|
-
<div class="items-container ${this.internalScroll?"scrollable":""}" tabindex="-1">
|
|
31
|
+
`;var a=function(l,e,t,s){var i=arguments.length,r=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(l,e,t,s);else for(var d=l.length-1;d>=0;d--)(c=l[d])&&(r=(i<3?c(r):i>3?c(e,t,r):c(e,t))||r);return i>3&&r&&Object.defineProperty(e,t,r),r},T=class extends CustomEvent{constructor(e,t){super("visible-items-change",{detail:{visibleIndexes:e,visibleItems:t}})}},S=class extends Event{constructor(){super("scrolled-to-target")}},G=l=>(l??[])[(l??[]).length-1],n=class extends o.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>f.html``,this.getItemKey=(e,t)=>`${t} - ${JSON.stringify(e)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.ensureScrollToTarget=!1,this.visibleItems=[],this.scrolledToTarget=!1,this.scrolling=!1,this.renderApprovalTimeouts=[],this.renderedIndexes=new Set,this.scrollDebouncer=new o.Debouncer(5),this.scrollDoneDebouncer=new o.Debouncer(10),this.onVisibilityChange=e=>{let t=new Set(this.visibleItems),s=new Set;for(let i of e){let r=+i.target.getAttribute("data-item-index");i.intersectionRect.height>0?(t.add(r),s.add(r)):s.has(r)||t.delete(r)}this.visibleItems=[...t].sort((i,r)=>i-r)},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.scrollingDebouncer=new o.Debouncer(50),this.ignoreNextScrollEvent=!1,this.scrollListener=()=>{var e;let t=this.ignoreNextScrollEvent;this.ignoreNextScrollEvent=!1,t||(this.scrolling=!0,this.scrollingDebouncer.run(()=>this.scrolling=!1));let s=this.scrollable.scrollTop,i=s-((e=this.lastScrollTop)!==null&&e!==void 0?e:0);if(this.lastScrollTop=s,this.scrolledToTarget&&(this.restoreScrollIfNeeded(t?0:i),!t||this.scrollRestorationItem==null)){let r=this.searchFirstVisibleItem(s,this.itemsContainer.children);this.scrollRestorationItem=r?+r.getAttribute("data-item-index"):void 0,this.scrollRestorationOffset=s-this.getOffset(r)}},this.restoreScrollIfNeeded=(e=0)=>{var t;let s=this.scrollable.scrollHeight,i=s-((t=this.lastScrollHeight)!==null&&t!==void 0?t:s);if(this.lastScrollHeight=s,i!==0&&this.scrolledToTarget&&this.scrollRestorationItem!=null&&this.scrollRestorationOffset!=null&&!(this.scrollRestorationItem===0&&this.scrollRestorationOffset<0)){let r=this.getItem(this.scrollRestorationItem),c=this.getOffset(r),d=(0,o.minmax)(this.scrollRestorationItem===0?-c:1,this.scrollRestorationOffset,r.clientHeight-1),v=c+d+e-this.scrollable.scrollTop;(Math.abs(i-v)<4||Math.abs(v)>5)&&(this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop+=v)}},this._shouldRestoreScroll=!1,this.scrollAdjustment=()=>{this.restoreScrollIfNeeded(),this.shouldRestoreScroll&&requestAnimationFrame(this.scrollAdjustment)},this.onMutation=()=>{for(let e of this.itemsContainer.children)this.intersectionObserver.observe(e)},this.mutationObserver=new MutationObserver(this.onMutation),this.resetVisibleItemsDebouncer=new o.Debouncer(10)}get scrollable(){var e;return(e=this._scrollable)!==null&&e!==void 0?e:document.body}set scrollable(e){var t,s,i;this._scrollable!==e&&(this._scrollable&&(this._scrollable.removeEventListener("scroll",this.scrollListener),this.initialOverflowAnchorValue&&(this._scrollable.style.overflowAnchor=this.initialOverflowAnchorValue),o.scrollHelper.release(this,this._scrollable)),this._scrollable=o.scrollHelper.lock(this,e),e&&!this._scrollable&&console.error("Scrollable parent is already locked",this,e),(t=this._scrollable)===null||t===void 0||t.addEventListener("scroll",this.scrollListener),this.lastScrollTop=(s=this._scrollable)===null||s===void 0?void 0:s.scrollTop,this.lastScrollHeight=(i=this._scrollable)===null||i===void 0?void 0:i.scrollHeight,this._scrollable&&(this.initialOverflowAnchorValue=getComputedStyle(this._scrollable).overflowAnchor,this._scrollable.style.overflowAnchor="none"))}render(){return f.html`
|
|
32
|
+
<div @scroll-into-view="${this.onScrollIntoView}" class="items-container ${this.internalScroll?"scrollable":""}" tabindex="-1">
|
|
33
33
|
${(0,N.repeat)(this.items,(e,t)=>this.getItemKey(e,t),(e,t)=>this.renderItemContainer(e,t))}
|
|
34
34
|
</div>
|
|
35
35
|
`}renderItemContainer(e,t){this.prepareRenderIfNeeded(t);let s=this.scrolledToTarget&&this.visibleItems.includes(t),i=this.renderedIndexes.has(t);return f.html`
|
|
@@ -38,4 +38,4 @@
|
|
|
38
38
|
data-item-index="${t}">
|
|
39
39
|
${i?(()=>{let c=this.renderItem(e,t);return typeof c=="string"?(0,F.unsafeHTML)(c):c})():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.renderedIndexes.add(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=G(this.visibleItems)+this.renderAfterLast}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.renderedIndexes.add(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}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 r=Math.floor((i-s)/2)+s,c=t[r],d=this.getOffset(c);return d>e?this.searchFirstVisibleItem(e,t,s,r-1):d+c.clientHeight<e?this.searchFirstVisibleItem(e,t,r+1,i):c}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.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
|
|
41
|
+
`}prepareRenderIfNeeded(e){let t=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!t&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.renderedIndexes.add(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=G(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.renderedIndexes.add(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=this.getOffset(e.target),i=(t=e.composedPath().find(r=>typeof r.matches=="function"&&r.matches(".item-container")))===null||t===void 0?void 0:t.getAttribute("data-item-index");this.scrollRestorationItem=i==null?this.scrollRestorationItem:+i,this.scrollRestorationOffset=s-this.getOffset(this.scrollRestorationItem),this.scrollable.scrollTop=s}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 r=Math.floor((i-s)/2)+s,c=t[r],d=this.getOffset(c);return d>e?this.searchFirstVisibleItem(e,t,s,r-1):d+c.clientHeight<e?this.searchFirstVisibleItem(e,t,r+1,i):c}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.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)}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.scrolling)),this.cancelableDispatchEvent.then(()=>this.dispatchEvent(new T(this.visibleItems,this.visibleItems.map(t=>this.items[t])))).catch(()=>null)}};n.styles=D;a([(0,h.property)({type:Array})],n.prototype,"items",void 0);a([(0,h.property)({attribute:!1})],n.prototype,"renderItem",void 0);a([(0,h.property)({attribute:!1})],n.prototype,"getItemKey",void 0);a([(0,h.property)({type:Object})],n.prototype,"scrollToItem",void 0);a([(0,h.property)({type:Number})],n.prototype,"scrollToIndex",void 0);a([(0,h.property)({type:Boolean})],n.prototype,"internalScroll",void 0);a([(0,h.property)({type:Number})],n.prototype,"renderBeforeFirst",void 0);a([(0,h.property)({type:Number})],n.prototype,"renderAfterLast",void 0);a([(0,h.property)({type:Boolean})],n.prototype,"ensureScrollToTarget",void 0);a([(0,h.state)({hasChanged(l,e){return l!=null&&e==null||l.length!==e.length||l[0]!==e[0]}})],n.prototype,"visibleItems",void 0);a([(0,h.query)(".scrollable")],n.prototype,"internalScrollable",void 0);a([(0,h.query)(".items-container")],n.prototype,"itemsContainer",void 0);a([(0,h.state)()],n.prototype,"scrolledToTarget",void 0);a([(0,h.state)()],n.prototype,"scrolling",void 0);a([(0,h.state)({hasChanged:o.hasChanged})],n.prototype,"renderedIndexes",void 0);(0,$.customElement)("ft-infinite-scroll")(n);})();
|
|
@@ -78,7 +78,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
|
|
|
78
78
|
min-height: ${$n.itemContainerMinHeight};
|
|
79
79
|
}
|
|
80
80
|
`;var K=function(o,e,r,n){var a=arguments.length,i=a<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,r):n,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,r,n);else for(var d=o.length-1;d>=0;d--)(s=o[d])&&(i=(a<3?s(i):a>3?s(e,r,i):s(e,r))||i);return a>3&&i&&Object.defineProperty(e,r,i),i},Bn=class extends CustomEvent{constructor(e,r){super("visible-items-change",{detail:{visibleIndexes:e,visibleItems:r}})}},Wn=class extends Event{constructor(){super("scrolled-to-target")}},Bd=o=>(o??[])[(o??[]).length-1],H=class extends J{constructor(){super(...arguments),this.items=[],this.renderItem=()=>Tt``,this.getItemKey=(e,r)=>`${r} - ${JSON.stringify(e)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.ensureScrollToTarget=!1,this.visibleItems=[],this.scrolledToTarget=!1,this.scrolling=!1,this.renderApprovalTimeouts=[],this.renderedIndexes=new Set,this.scrollDebouncer=new ie(5),this.scrollDoneDebouncer=new ie(10),this.onVisibilityChange=e=>{let r=new Set(this.visibleItems),n=new Set;for(let a of e){let i=+a.target.getAttribute("data-item-index");a.intersectionRect.height>0?(r.add(i),n.add(i)):n.has(i)||r.delete(i)}this.visibleItems=[...r].sort((a,i)=>a-i)},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.scrollingDebouncer=new ie(50),this.ignoreNextScrollEvent=!1,this.scrollListener=()=>{var e;let r=this.ignoreNextScrollEvent;this.ignoreNextScrollEvent=!1,r||(this.scrolling=!0,this.scrollingDebouncer.run(()=>this.scrolling=!1));let n=this.scrollable.scrollTop,a=n-((e=this.lastScrollTop)!==null&&e!==void 0?e:0);if(this.lastScrollTop=n,this.scrolledToTarget&&(this.restoreScrollIfNeeded(r?0:a),!r||this.scrollRestorationItem==null)){let i=this.searchFirstVisibleItem(n,this.itemsContainer.children);this.scrollRestorationItem=i?+i.getAttribute("data-item-index"):void 0,this.scrollRestorationOffset=n-this.getOffset(i)}},this.restoreScrollIfNeeded=(e=0)=>{var r;let n=this.scrollable.scrollHeight,a=n-((r=this.lastScrollHeight)!==null&&r!==void 0?r:n);if(this.lastScrollHeight=n,a!==0&&this.scrolledToTarget&&this.scrollRestorationItem!=null&&this.scrollRestorationOffset!=null&&!(this.scrollRestorationItem===0&&this.scrollRestorationOffset<0)){let i=this.getItem(this.scrollRestorationItem),s=this.getOffset(i),d=Ke(this.scrollRestorationItem===0?-s:1,this.scrollRestorationOffset,i.clientHeight-1),l=s+d+e-this.scrollable.scrollTop;(Math.abs(a-l)<4||Math.abs(l)>5)&&(this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop+=l)}},this._shouldRestoreScroll=!1,this.scrollAdjustment=()=>{this.restoreScrollIfNeeded(),this.shouldRestoreScroll&&requestAnimationFrame(this.scrollAdjustment)},this.onMutation=()=>{for(let e of this.itemsContainer.children)this.intersectionObserver.observe(e)},this.mutationObserver=new MutationObserver(this.onMutation),this.resetVisibleItemsDebouncer=new ie(10)}get scrollable(){var e;return(e=this._scrollable)!==null&&e!==void 0?e:document.body}set scrollable(e){var r,n,a;this._scrollable!==e&&(this._scrollable&&(this._scrollable.removeEventListener("scroll",this.scrollListener),this.initialOverflowAnchorValue&&(this._scrollable.style.overflowAnchor=this.initialOverflowAnchorValue),yt.release(this,this._scrollable)),this._scrollable=yt.lock(this,e),e&&!this._scrollable&&console.error("Scrollable parent is already locked",this,e),(r=this._scrollable)===null||r===void 0||r.addEventListener("scroll",this.scrollListener),this.lastScrollTop=(n=this._scrollable)===null||n===void 0?void 0:n.scrollTop,this.lastScrollHeight=(a=this._scrollable)===null||a===void 0?void 0:a.scrollHeight,this._scrollable&&(this.initialOverflowAnchorValue=getComputedStyle(this._scrollable).overflowAnchor,this._scrollable.style.overflowAnchor="none"))}render(){return Tt`
|
|
81
|
-
<div class="items-container ${this.internalScroll?"scrollable":""}" tabindex="-1">
|
|
81
|
+
<div @scroll-into-view="${this.onScrollIntoView}" class="items-container ${this.internalScroll?"scrollable":""}" tabindex="-1">
|
|
82
82
|
${no(this.items,(e,r)=>this.getItemKey(e,r),(e,r)=>this.renderItemContainer(e,r))}
|
|
83
83
|
</div>
|
|
84
84
|
`}renderItemContainer(e,r){this.prepareRenderIfNeeded(r);let n=this.scrolledToTarget&&this.visibleItems.includes(r),a=this.renderedIndexes.has(r);return Tt`
|
|
@@ -87,7 +87,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
|
|
|
87
87
|
data-item-index="${r}">
|
|
88
88
|
${a?(()=>{let s=this.renderItem(e,r);return typeof s=="string"?co(s):s})():W}
|
|
89
89
|
</div>
|
|
90
|
-
`}prepareRenderIfNeeded(e){let r=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!r&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.renderedIndexes.add(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=Bd(this.visibleItems)+this.renderAfterLast}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=yt.findFirstScrollableParent(this.itemsContainer));let r=this.resolveScrollToIndex();this.renderedIndexes.add(r),this.scrollToTarget(r),this.scrollDoneDebouncer.run(()=>{this.ensureScrollToTarget&&r>=0&&this.scrollDebouncer.run(()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(r))>5&&this.scrollToTarget(r)},500),this.scrollToTarget(r),this.scrolledToTarget=!0,this.shouldRestoreScroll=!0,this.resetIntersectionObserver()})}resolveScrollToIndex(){var e;let r=(e=this.scrollToIndex)!==null&&e!==void 0?e:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;return r>=this.items.length?-1:r}getItem(e){var r,n,a;return(n=(r=this.shadowRoot)===null||r===void 0?void 0:r.querySelector(`#item-${e}`))!==null&&n!==void 0?n:(a=this.shadowRoot)===null||a===void 0?void 0:a.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}getOffset(e){let r=typeof e=="number"?this.getItem(e):e;return r?yt.getAbsoluteScrollOffset(this.scrollable,r):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,r,n,a){if(n=n??0,a=a??r.length-1,a<=n)return r[n];let i=Math.floor((a-n)/2)+n,s=r[i],d=this.getOffset(s);return d>e?this.searchFirstVisibleItem(e,r,n,i-1):d+s.clientHeight<e?this.searchFirstVisibleItem(e,r,i+1,a):s}get shouldRestoreScroll(){return this._shouldRestoreScroll}set shouldRestoreScroll(e){let r=e&&!this._shouldRestoreScroll;this._shouldRestoreScroll=e,r&&requestAnimationFrame(this.scrollAdjustment)}update(e){super.update(e),e.has("items")&&(this.renderedIndexes=new Set,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 Wn)}onVisibleItemsChange(){this.visibleItems.every((r,n)=>this.visibleItems[n+1]==null||r+1===this.visibleItems[n+1])||Ve(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=kt(So(()=>!this.scrolling)),this.cancelableDispatchEvent.then(()=>this.dispatchEvent(new Bn(this.visibleItems,this.visibleItems.map(r=>this.items[r])))).catch(()=>null)}};H.styles=Bs;K([M({type:Array})],H.prototype,"items",void 0);K([M({attribute:!1})],H.prototype,"renderItem",void 0);K([M({attribute:!1})],H.prototype,"getItemKey",void 0);K([M({type:Object})],H.prototype,"scrollToItem",void 0);K([M({type:Number})],H.prototype,"scrollToIndex",void 0);K([M({type:Boolean})],H.prototype,"internalScroll",void 0);K([M({type:Number})],H.prototype,"renderBeforeFirst",void 0);K([M({type:Number})],H.prototype,"renderAfterLast",void 0);K([M({type:Boolean})],H.prototype,"ensureScrollToTarget",void 0);K([ve({hasChanged(o,e){return o!=null&&e==null||o.length!==e.length||o[0]!==e[0]}})],H.prototype,"visibleItems",void 0);K([Or(".scrollable")],H.prototype,"internalScrollable",void 0);K([Or(".items-container")],H.prototype,"itemsContainer",void 0);K([ve()],H.prototype,"scrolledToTarget",void 0);K([ve()],H.prototype,"scrolling",void 0);K([ve({hasChanged:Ge})],H.prototype,"renderedIndexes",void 0);Eo("ft-infinite-scroll")(H);})();
|
|
90
|
+
`}prepareRenderIfNeeded(e){let r=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!r&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.renderedIndexes.add(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=Bd(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=yt.findFirstScrollableParent(this.itemsContainer));let r=this.resolveScrollToIndex();this.renderedIndexes.add(r),this.scrollToTarget(r),this.scrollDoneDebouncer.run(()=>{this.ensureScrollToTarget&&r>=0&&this.scrollDebouncer.run(()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(r))>5&&this.scrollToTarget(r)},500),this.scrollToTarget(r),this.scrolledToTarget=!0,this.shouldRestoreScroll=!0,this.resetIntersectionObserver()})}resolveScrollToIndex(){var e;let r=(e=this.scrollToIndex)!==null&&e!==void 0?e:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;return r>=this.items.length?-1:r}getItem(e){var r,n,a;return(n=(r=this.shadowRoot)===null||r===void 0?void 0:r.querySelector(`#item-${e}`))!==null&&n!==void 0?n:(a=this.shadowRoot)===null||a===void 0?void 0:a.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 r;this.scrollDebouncer.cancel();let n=this.getOffset(e.target),a=(r=e.composedPath().find(i=>typeof i.matches=="function"&&i.matches(".item-container")))===null||r===void 0?void 0:r.getAttribute("data-item-index");this.scrollRestorationItem=a==null?this.scrollRestorationItem:+a,this.scrollRestorationOffset=n-this.getOffset(this.scrollRestorationItem),this.scrollable.scrollTop=n}getOffset(e){let r=typeof e=="number"?this.getItem(e):e;return r?yt.getAbsoluteScrollOffset(this.scrollable,r):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,r,n,a){if(n=n??0,a=a??r.length-1,a<=n)return r[n];let i=Math.floor((a-n)/2)+n,s=r[i],d=this.getOffset(s);return d>e?this.searchFirstVisibleItem(e,r,n,i-1):d+s.clientHeight<e?this.searchFirstVisibleItem(e,r,i+1,a):s}get shouldRestoreScroll(){return this._shouldRestoreScroll}set shouldRestoreScroll(e){let r=e&&!this._shouldRestoreScroll;this._shouldRestoreScroll=e,r&&requestAnimationFrame(this.scrollAdjustment)}update(e){super.update(e),e.has("items")&&(this.renderedIndexes=new Set,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 Wn)}onVisibleItemsChange(){this.visibleItems.every((r,n)=>this.visibleItems[n+1]==null||r+1===this.visibleItems[n+1])||Ve(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=kt(So(()=>!this.scrolling)),this.cancelableDispatchEvent.then(()=>this.dispatchEvent(new Bn(this.visibleItems,this.visibleItems.map(r=>this.items[r])))).catch(()=>null)}};H.styles=Bs;K([M({type:Array})],H.prototype,"items",void 0);K([M({attribute:!1})],H.prototype,"renderItem",void 0);K([M({attribute:!1})],H.prototype,"getItemKey",void 0);K([M({type:Object})],H.prototype,"scrollToItem",void 0);K([M({type:Number})],H.prototype,"scrollToIndex",void 0);K([M({type:Boolean})],H.prototype,"internalScroll",void 0);K([M({type:Number})],H.prototype,"renderBeforeFirst",void 0);K([M({type:Number})],H.prototype,"renderAfterLast",void 0);K([M({type:Boolean})],H.prototype,"ensureScrollToTarget",void 0);K([ve({hasChanged(o,e){return o!=null&&e==null||o.length!==e.length||o[0]!==e[0]}})],H.prototype,"visibleItems",void 0);K([Or(".scrollable")],H.prototype,"internalScrollable",void 0);K([Or(".items-container")],H.prototype,"itemsContainer",void 0);K([ve()],H.prototype,"scrolledToTarget",void 0);K([ve()],H.prototype,"scrolling",void 0);K([ve({hasChanged:Ge})],H.prototype,"renderedIndexes",void 0);Eo("ft-infinite-scroll")(H);})();
|
|
91
91
|
/*! Bundled license information:
|
|
92
92
|
|
|
93
93
|
@webcomponents/scoped-custom-element-registry/src/scoped-custom-element-registry.js:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-infinite-scroll",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.6",
|
|
4
4
|
"description": "An infinite scroller.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-wc-utils": "1.2.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "1.2.6",
|
|
23
23
|
"lit": "3.1.0"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "6e3206b79d8e76e981cb3f36a80f90a13cc09116"
|
|
26
26
|
}
|