@fluid-topics/ft-infinite-scroll 1.1.28 → 1.1.30
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.
|
@@ -56,9 +56,11 @@ export declare class FtInfiniteScroll<T> extends FtLitElement implements FtInfin
|
|
|
56
56
|
private ignoreNextScrollEvent;
|
|
57
57
|
private scrollListener;
|
|
58
58
|
private elementCanScroll;
|
|
59
|
-
private
|
|
59
|
+
private onItemsResize;
|
|
60
|
+
private restoreScroll;
|
|
60
61
|
private searchFirstVisibleItem;
|
|
61
|
-
private
|
|
62
|
+
private itemsResizeObserver;
|
|
63
|
+
private scrollableResizeObserver;
|
|
62
64
|
private onMutation;
|
|
63
65
|
private mutationObserver;
|
|
64
66
|
disconnectedCallback(): void;
|
|
@@ -66,30 +66,37 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
66
66
|
this.scrollingDebouncer.run(() => this.scrolling = false);
|
|
67
67
|
}
|
|
68
68
|
this.ignoreNextScrollEvent = false;
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
if (this.scrolledToTarget) {
|
|
70
|
+
const scrollRestorationElement = this.searchFirstVisibleItem(this.itemsContainer.children);
|
|
71
|
+
this.scrollRestorationItem = scrollRestorationElement ? +scrollRestorationElement.getAttribute("data-item-index") : undefined;
|
|
72
|
+
this.scrollRestorationOffset = this.scrollable.scrollTop - this.getOffset(scrollRestorationElement);
|
|
73
|
+
}
|
|
72
74
|
};
|
|
73
|
-
this.
|
|
75
|
+
this.onItemsResize = (resizables) => {
|
|
74
76
|
for (const resizable of resizables) {
|
|
75
77
|
if (resizable.contentRect.height > 0) {
|
|
76
78
|
resizable.target.setAttribute("data-last-known-height", "" + resizable.contentRect.height);
|
|
77
79
|
}
|
|
78
80
|
}
|
|
81
|
+
this.restoreScroll();
|
|
82
|
+
};
|
|
83
|
+
this.restoreScroll = () => {
|
|
79
84
|
if (this.scrollRestorationItem != null && this.scrollRestorationOffset != null && this.scrolledToTarget) {
|
|
80
|
-
this.ignoreNextScrollEvent = true;
|
|
81
85
|
const scrollRestorationElement = this.getItem(this.scrollRestorationItem);
|
|
82
86
|
const scrollTarget = this.getOffset(scrollRestorationElement);
|
|
83
87
|
const offset = minmax(this.scrollRestorationItem === 0 ? -scrollTarget : 0, this.scrollRestorationOffset, this.getLastKnownHeight(scrollRestorationElement) + 1);
|
|
88
|
+
this.ignoreNextScrollEvent = true;
|
|
84
89
|
this.scrollable.scrollTop = scrollTarget + offset;
|
|
85
90
|
}
|
|
86
91
|
};
|
|
87
|
-
this.
|
|
92
|
+
this.itemsResizeObserver = new ResizeObserver(this.onItemsResize);
|
|
93
|
+
this.scrollableResizeObserver = new ResizeObserver(this.restoreScroll);
|
|
88
94
|
this.onMutation = () => {
|
|
89
95
|
[...this.itemsContainer.children].forEach((item) => {
|
|
90
96
|
this.intersectionObserver.observe(item);
|
|
91
|
-
this.
|
|
97
|
+
this.itemsResizeObserver.observe(item);
|
|
92
98
|
});
|
|
99
|
+
this.scrollableResizeObserver.observe(this.scrollable);
|
|
93
100
|
};
|
|
94
101
|
this.mutationObserver = new MutationObserver(this.onMutation);
|
|
95
102
|
this.resetVisibleItemsDebouncer = new Debouncer(10);
|
|
@@ -143,48 +150,50 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
143
150
|
resetScroll() {
|
|
144
151
|
this.triggerFindScrollableParent();
|
|
145
152
|
this.intersectionObserver.disconnect();
|
|
146
|
-
this.
|
|
153
|
+
this.itemsResizeObserver.disconnect();
|
|
154
|
+
this.scrollableResizeObserver.disconnect();
|
|
147
155
|
this.visibleItems = [];
|
|
148
156
|
this.scrolledToTarget = false;
|
|
149
157
|
this.scrollDebouncer.run(() => {
|
|
150
158
|
var _a;
|
|
151
|
-
let
|
|
152
|
-
if (
|
|
153
|
-
|
|
159
|
+
let targetIndex = (_a = this.scrollToIndex) !== null && _a !== void 0 ? _a : (this.scrollToItem ? this.items.indexOf(this.scrollToItem) : -1);
|
|
160
|
+
if (targetIndex >= this.items.length) {
|
|
161
|
+
targetIndex = -1;
|
|
154
162
|
}
|
|
155
|
-
|
|
156
|
-
this.scrollToTarget(target);
|
|
163
|
+
this.scrollToTarget(targetIndex);
|
|
157
164
|
this.scrollDoneDebouncer.run(() => {
|
|
158
|
-
this.scrollRestorationItem = internalScrollToIndex >= 0 ? internalScrollToIndex : undefined;
|
|
159
|
-
this.scrollRestorationOffset = internalScrollToIndex === 0 ? -this.getOffset(target) : 0;
|
|
160
165
|
this.onMutation();
|
|
161
|
-
if (
|
|
162
|
-
this.renderedIndexes.add(
|
|
166
|
+
if (targetIndex >= 0) {
|
|
167
|
+
this.renderedIndexes.add(targetIndex);
|
|
168
|
+
this.scrollDebouncer.run(() => {
|
|
169
|
+
if (Math.abs(this.scrollable.scrollTop - this.getOffset(targetIndex)) > 5) {
|
|
170
|
+
this.scrollToTarget(targetIndex);
|
|
171
|
+
}
|
|
172
|
+
}, 500);
|
|
163
173
|
}
|
|
164
174
|
this.scrolledToTarget = true;
|
|
165
175
|
});
|
|
166
176
|
});
|
|
167
177
|
}
|
|
168
178
|
getItem(index) {
|
|
169
|
-
var _a;
|
|
170
|
-
return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#item-${index}`);
|
|
179
|
+
var _a, _b, _c;
|
|
180
|
+
return ((_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#item-${index}`)) !== null && _b !== void 0 ? _b : (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`#item-0`));
|
|
171
181
|
}
|
|
172
|
-
scrollToTarget(
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
this.scrollable.scrollTop = this.getOffset(target);
|
|
181
|
-
}
|
|
182
|
+
scrollToTarget(index) {
|
|
183
|
+
if (index <= 0) {
|
|
184
|
+
this.scrollable.scrollTop = 0;
|
|
185
|
+
this.scrollRestorationOffset = -this.getOffset(index);
|
|
186
|
+
}
|
|
187
|
+
else {
|
|
188
|
+
this.scrollable.scrollTop = this.getOffset(index);
|
|
189
|
+
this.scrollRestorationOffset = 0;
|
|
182
190
|
}
|
|
191
|
+
this.scrollRestorationItem = index >= 0 ? index : undefined;
|
|
183
192
|
}
|
|
184
193
|
getOffset(target) {
|
|
185
194
|
var _a;
|
|
186
195
|
let offset = 0;
|
|
187
|
-
let el = target;
|
|
196
|
+
let el = typeof target === "number" ? this.getItem(target) : target;
|
|
188
197
|
while (el && el.offsetParent !== this.scrollable.offsetParent) {
|
|
189
198
|
offset += el.offsetTop;
|
|
190
199
|
el = el.offsetParent;
|
|
@@ -229,7 +238,7 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
229
238
|
for (let target of e.composedPath()) {
|
|
230
239
|
const element = target;
|
|
231
240
|
const mayScroll = this.elementCanScroll(element);
|
|
232
|
-
const definitelyScrolls = element.clientHeight && element.clientHeight < element.scrollHeight
|
|
241
|
+
const definitelyScrolls = mayScroll && element.clientHeight && element.clientHeight < element.scrollHeight;
|
|
233
242
|
if (definitelyScrolls) {
|
|
234
243
|
scrollable = element;
|
|
235
244
|
break;
|
|
@@ -274,7 +283,8 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
274
283
|
disconnectedCallback() {
|
|
275
284
|
super.disconnectedCallback();
|
|
276
285
|
this.intersectionObserver.disconnect();
|
|
277
|
-
this.
|
|
286
|
+
this.itemsResizeObserver.disconnect();
|
|
287
|
+
this.scrollableResizeObserver.disconnect();
|
|
278
288
|
this.mutationObserver.disconnect();
|
|
279
289
|
}
|
|
280
290
|
firstUpdated(_changedProperties) {
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
display: flow-root;
|
|
29
29
|
min-height: ${l.itemContainerMinHeight};
|
|
30
30
|
}
|
|
31
|
-
`;var o=function(t,i,e,s){for(var h,n=arguments.length,l=n<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,r=t.length-1;r>=0;r--)(h=t[r])&&(l=(n<3?h(l):n>3?h(i,e,l):h(i,e))||l);return n>3&&l&&Object.defineProperty(i,e,l),l};class a extends CustomEvent{constructor(t,i){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:i}})}}class d extends Event{constructor(){super("scrolled-to-target")}}class c extends i.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>e.html``,this.getItemKey=(t,i)=>`${i} - ${JSON.stringify(t)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.scrolling=!1,this.renderApprovalTimeouts=[],this.renderedIndexes=new Set,this.scrollDebouncer=new i.Debouncer(5),this.scrollDoneDebouncer=new i.Debouncer(10),this.onVisibilityChange=t=>{let i=new Set(this.visibleItems),e=new Set;for(let s of t){let t=+s.target.attributes.getNamedItem("data-item-index").value;s.intersectionRect.height>0?(i.add(t),e.add(t)):e.has(t)||i.delete(t)}this.visibleItems=[...i].sort(((t,i)=>t-i))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.scrollingDebouncer=new i.Debouncer(50),this.ignoreNextScrollEvent=!1,this.scrollListener=()=>{this.ignoreNextScrollEvent||(this.scrolling=!0,this.scrollingDebouncer.run((()=>this.scrolling=!1))),this.ignoreNextScrollEvent=!1
|
|
31
|
+
`;var o=function(t,i,e,s){for(var h,n=arguments.length,l=n<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,r=t.length-1;r>=0;r--)(h=t[r])&&(l=(n<3?h(l):n>3?h(i,e,l):h(i,e))||l);return n>3&&l&&Object.defineProperty(i,e,l),l};class a extends CustomEvent{constructor(t,i){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:i}})}}class d extends Event{constructor(){super("scrolled-to-target")}}class c extends i.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>e.html``,this.getItemKey=(t,i)=>`${i} - ${JSON.stringify(t)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.scrolling=!1,this.renderApprovalTimeouts=[],this.renderedIndexes=new Set,this.scrollDebouncer=new i.Debouncer(5),this.scrollDoneDebouncer=new i.Debouncer(10),this.onVisibilityChange=t=>{let i=new Set(this.visibleItems),e=new Set;for(let s of t){let t=+s.target.attributes.getNamedItem("data-item-index").value;s.intersectionRect.height>0?(i.add(t),e.add(t)):e.has(t)||i.delete(t)}this.visibleItems=[...i].sort(((t,i)=>t-i))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.scrollingDebouncer=new i.Debouncer(50),this.ignoreNextScrollEvent=!1,this.scrollListener=()=>{if(this.ignoreNextScrollEvent||(this.scrolling=!0,this.scrollingDebouncer.run((()=>this.scrolling=!1))),this.ignoreNextScrollEvent=!1,this.scrolledToTarget){const t=this.searchFirstVisibleItem(this.itemsContainer.children);this.scrollRestorationItem=t?+t.getAttribute("data-item-index"):void 0,this.scrollRestorationOffset=this.scrollable.scrollTop-this.getOffset(t)}},this.onItemsResize=t=>{for(const i of t)i.contentRect.height>0&&i.target.setAttribute("data-last-known-height",""+i.contentRect.height);this.restoreScroll()},this.restoreScroll=()=>{if(null!=this.scrollRestorationItem&&null!=this.scrollRestorationOffset&&this.scrolledToTarget){const t=this.getItem(this.scrollRestorationItem),e=this.getOffset(t),s=i.minmax(0===this.scrollRestorationItem?-e:0,this.scrollRestorationOffset,this.getLastKnownHeight(t)+1);this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop=e+s}},this.itemsResizeObserver=new ResizeObserver(this.onItemsResize),this.scrollableResizeObserver=new ResizeObserver(this.restoreScroll),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.intersectionObserver.observe(t),this.itemsResizeObserver.observe(t)})),this.scrollableResizeObserver.observe(this.scrollable)},this.mutationObserver=new MutationObserver(this.onMutation),this.resetVisibleItemsDebouncer=new i.Debouncer(10)}get scrollable(){var t;return null!==(t=this.internalScroll?this.internalScrollable:this.firstScrollableParent)&&void 0!==t?t:document.body}render(){return e.html`
|
|
32
32
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
33
33
|
tabindex="-1"
|
|
34
34
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
@@ -40,4 +40,4 @@
|
|
|
40
40
|
data-item-index="${i}">
|
|
41
41
|
${h?(()=>{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.
|
|
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=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t;let i=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;i>=this.items.length&&(i=-1),this.scrollToTarget(i),this.scrollDoneDebouncer.run((()=>{this.onMutation(),i>=0&&(this.renderedIndexes.add(i),this.scrollDebouncer.run((()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(i))>5&&this.scrollToTarget(i)}),500)),this.scrolledToTarget=!0}))}))}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,h=this.elementCanScroll(t);if(h&&t.clientHeight&&t.clientHeight<t.scrollHeight){e=t;break}h&&(s=t)}let h=e||s;h!==this.firstScrollableParent&&(null===(i=this.firstScrollableParent)||void 0===i||i.removeEventListener("scroll",this.scrollListener),null==h||h.addEventListener("scroll",this.scrollListener),this.firstScrollableParent=h,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,h=t[s];return this.getOffset(h)>this.scrollable.scrollTop?this.searchFirstVisibleItem(t,i,s-1):this.getOffset(h)+this.getLastKnownHeight(h)<this.scrollable.scrollTop?this.searchFirstVisibleItem(t,s+1,e):h}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 d)}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 a(this.visibleItems,this.visibleItems.map((t=>this.items[t])))))).catch((()=>null))}}c.styles=r,o([s.property({type:Array})],c.prototype,"items",void 0),o([s.property({attribute:!1})],c.prototype,"renderItem",void 0),o([s.property({attribute:!1})],c.prototype,"getItemKey",void 0),o([s.property({type:Object})],c.prototype,"scrollToItem",void 0),o([s.property({type:Number})],c.prototype,"scrollToIndex",void 0),o([s.property({type:Boolean})],c.prototype,"internalScroll",void 0),o([s.property({type:Number})],c.prototype,"renderBeforeFirst",void 0),o([s.property({type:Number})],c.prototype,"renderAfterLast",void 0),o([s.state({hasChanged:(t,i)=>null!=t&&null==i||t.length!==i.length||t[0]!==i[0]})],c.prototype,"visibleItems",void 0),o([s.query(".scrollable")],c.prototype,"internalScrollable",void 0),o([s.query(".items-container")],c.prototype,"itemsContainer",void 0),o([s.state()],c.prototype,"scrolledToTarget",void 0),o([s.state()],c.prototype,"scrolling",void 0),o([s.state({hasChanged:(t,e)=>!i.deepEqual(t,e)})],c.prototype,"renderedIndexes",void 0),i.customElement("ft-infinite-scroll")(c),t.FtInfiniteScroll=c,t.FtInfiniteScrollCssVariables=l,t.ScrolledToTargetEvent=d,t.VisibleItemsChangeEvent=a,t.styles=r}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML);
|
|
@@ -166,7 +166,7 @@ class ne extends Vo{constructor(t){if(super(t),this.et=ot,t.type!==Yo)throw Erro
|
|
|
166
166
|
display: flow-root;
|
|
167
167
|
min-height: ${se.itemContainerMinHeight};
|
|
168
168
|
}
|
|
169
|
-
`;var le=function(t,o,e,r){for(var i,n=arguments.length,a=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,s=t.length-1;s>=0;s--)(i=t[s])&&(a=(n<3?i(a):n>3?i(o,e,a):i(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};class he extends CustomEvent{constructor(t,o){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:o}})}}class pe extends Event{constructor(){super("scrolled-to-target")}}class fe extends Ao{constructor(){super(...arguments),this.items=[],this.renderItem=()=>no``,this.getItemKey=(t,o)=>`${o} - ${JSON.stringify(t)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.scrolling=!1,this.renderApprovalTimeouts=[],this.renderedIndexes=new Set,this.scrollDebouncer=new r(5),this.scrollDoneDebouncer=new r(10),this.onVisibilityChange=t=>{let o=new Set(this.visibleItems),e=new Set;for(let r of t){let t=+r.target.attributes.getNamedItem("data-item-index").value;r.intersectionRect.height>0?(o.add(t),e.add(t)):e.has(t)||o.delete(t)}this.visibleItems=[...o].sort(((t,o)=>t-o))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.scrollingDebouncer=new r(50),this.ignoreNextScrollEvent=!1,this.scrollListener=()=>{this.ignoreNextScrollEvent||(this.scrolling=!0,this.scrollingDebouncer.run((()=>this.scrolling=!1))),this.ignoreNextScrollEvent=!1
|
|
169
|
+
`;var le=function(t,o,e,r){for(var i,n=arguments.length,a=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,s=t.length-1;s>=0;s--)(i=t[s])&&(a=(n<3?i(a):n>3?i(o,e,a):i(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};class he extends CustomEvent{constructor(t,o){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:o}})}}class pe extends Event{constructor(){super("scrolled-to-target")}}class fe extends Ao{constructor(){super(...arguments),this.items=[],this.renderItem=()=>no``,this.getItemKey=(t,o)=>`${o} - ${JSON.stringify(t)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.scrolling=!1,this.renderApprovalTimeouts=[],this.renderedIndexes=new Set,this.scrollDebouncer=new r(5),this.scrollDoneDebouncer=new r(10),this.onVisibilityChange=t=>{let o=new Set(this.visibleItems),e=new Set;for(let r of t){let t=+r.target.attributes.getNamedItem("data-item-index").value;r.intersectionRect.height>0?(o.add(t),e.add(t)):e.has(t)||o.delete(t)}this.visibleItems=[...o].sort(((t,o)=>t-o))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.scrollingDebouncer=new r(50),this.ignoreNextScrollEvent=!1,this.scrollListener=()=>{if(this.ignoreNextScrollEvent||(this.scrolling=!0,this.scrollingDebouncer.run((()=>this.scrolling=!1))),this.ignoreNextScrollEvent=!1,this.scrolledToTarget){const t=this.searchFirstVisibleItem(this.itemsContainer.children);this.scrollRestorationItem=t?+t.getAttribute("data-item-index"):void 0,this.scrollRestorationOffset=this.scrollable.scrollTop-this.getOffset(t)}},this.onItemsResize=t=>{for(const o of t)o.contentRect.height>0&&o.target.setAttribute("data-last-known-height",""+o.contentRect.height);this.restoreScroll()},this.restoreScroll=()=>{if(null!=this.scrollRestorationItem&&null!=this.scrollRestorationOffset&&this.scrolledToTarget){const r=this.getItem(this.scrollRestorationItem),i=this.getOffset(r),n=(t=0===this.scrollRestorationItem?-i:0,o=this.scrollRestorationOffset,e=this.getLastKnownHeight(r)+1,Math.min(Math.max(t,o),e));this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop=i+n}var t,o,e},this.itemsResizeObserver=new ResizeObserver(this.onItemsResize),this.scrollableResizeObserver=new ResizeObserver(this.restoreScroll),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.intersectionObserver.observe(t),this.itemsResizeObserver.observe(t)})),this.scrollableResizeObserver.observe(this.scrollable)},this.mutationObserver=new MutationObserver(this.onMutation),this.resetVisibleItemsDebouncer=new r(10)}get scrollable(){var t;return null!==(t=this.internalScroll?this.internalScrollable:this.firstScrollableParent)&&void 0!==t?t:document.body}render(){return no`
|
|
170
170
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
171
171
|
tabindex="-1"
|
|
172
172
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
@@ -178,4 +178,4 @@ class ne extends Vo{constructor(t){if(super(t),this.et=ot,t.type!==Yo)throw Erro
|
|
|
178
178
|
data-item-index="${o}">
|
|
179
179
|
${r?(()=>{const e=this.renderItem(t,o);return"string"==typeof e?ae(e):e})():so}
|
|
180
180
|
</div>
|
|
181
|
-
`}prepareRenderIfNeeded(t){const o=null!=this.renderApprovalTimeouts[t];this.inRenderRange(t)&&!o&&(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!=(o=this.visibleItems)?o:[])[(null!=o?o:[]).length-1]+this.renderAfterLast;var o}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.
|
|
181
|
+
`}prepareRenderIfNeeded(t){const o=null!=this.renderApprovalTimeouts[t];this.inRenderRange(t)&&!o&&(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!=(o=this.visibleItems)?o:[])[(null!=o?o:[]).length-1]+this.renderAfterLast;var o}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.itemsResizeObserver.disconnect(),this.scrollableResizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t;let o=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;o>=this.items.length&&(o=-1),this.scrollToTarget(o),this.scrollDoneDebouncer.run((()=>{this.onMutation(),o>=0&&(this.renderedIndexes.add(o),this.scrollDebouncer.run((()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(o))>5&&this.scrollToTarget(o)}),500)),this.scrolledToTarget=!0}))}))}getItem(t){var o,e,r;return null!==(e=null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(`#item-${t}`))&&void 0!==e?e:null===(r=this.shadowRoot)||void 0===r?void 0:r.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 o;let e=0,r="number"==typeof t?this.getItem(t):t;for(;r&&r.offsetParent!==this.scrollable.offsetParent;)e+=r.offsetTop,r=r.offsetParent;return e+(null!==(o=null==r?void 0:r.offsetTop)&&void 0!==o?o:0)-this.scrollable.offsetTop}getLastKnownHeight(t){var o;return+(null!==(o=null==t?void 0:t.getAttribute("data-last-known-height"))&&void 0!==o?o: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 o;let e,r;t.stopPropagation();for(let o of t.composedPath()){const t=o,i=this.elementCanScroll(t);if(i&&t.clientHeight&&t.clientHeight<t.scrollHeight){e=t;break}i&&(r=t)}let i=e||r;i!==this.firstScrollableParent&&(null===(o=this.firstScrollableParent)||void 0===o||o.removeEventListener("scroll",this.scrollListener),null==i||i.addEventListener("scroll",this.scrollListener),this.firstScrollableParent=i,this.initIntersectionObserver(),this.resetScroll())}elementCanScroll(t){try{return["auto","scroll"].includes(getComputedStyle(t).overflowY)}catch(t){return!1}}searchFirstVisibleItem(t,o,e){if(o=null!=o?o:0,(e=null!=e?e:t.length-1)<=o)return t[o];const r=Math.floor((e-o)/2)+o,i=t[r];return this.getOffset(i)>this.scrollable.scrollTop?this.searchFirstVisibleItem(t,o,r-1):this.getOffset(i)+this.getLastKnownHeight(i)<this.scrollable.scrollTop?this.searchFirstVisibleItem(t,r+1,e):i}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 pe)}onVisibleItemsChange(){const t=this.visibleItems.every(((t,o)=>null==this.visibleItems[o+1]||t+1===this.visibleItems[o+1]));t||K(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,o;null===(t=this.cancelableDispatchEvent)||void 0===t||t.cancel(),this.cancelableDispatchEvent=(o=k((()=>!this.scrolling)),new e(((t,e)=>o.then(t).catch(e)))),this.cancelableDispatchEvent.then((()=>this.dispatchEvent(new he(this.visibleItems,this.visibleItems.map((t=>this.items[t])))))).catch((()=>null))}}var de;fe.styles=ce,le([E({type:Array})],fe.prototype,"items",void 0),le([E({attribute:!1})],fe.prototype,"renderItem",void 0),le([E({attribute:!1})],fe.prototype,"getItemKey",void 0),le([E({type:Object})],fe.prototype,"scrollToItem",void 0),le([E({type:Number})],fe.prototype,"scrollToIndex",void 0),le([E({type:Boolean})],fe.prototype,"internalScroll",void 0),le([E({type:Number})],fe.prototype,"renderBeforeFirst",void 0),le([E({type:Number})],fe.prototype,"renderAfterLast",void 0),le([R({hasChanged:(t,o)=>null!=t&&null==o||t.length!==o.length||t[0]!==o[0]})],fe.prototype,"visibleItems",void 0),le([W(".scrollable")],fe.prototype,"internalScrollable",void 0),le([W(".items-container")],fe.prototype,"itemsContainer",void 0),le([R()],fe.prototype,"scrolledToTarget",void 0),le([R()],fe.prototype,"scrolling",void 0),le([R({hasChanged:(t,o)=>!K(t,o)})],fe.prototype,"renderedIndexes",void 0),(de="ft-infinite-scroll",t=>{window.customElements.get(de)||window.customElements.define(de,t)})(fe),t.FtInfiniteScroll=fe,t.FtInfiniteScrollCssVariables=se,t.ScrolledToTargetEvent=pe,t.VisibleItemsChangeEvent=he,t.styles=ce}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-infinite-scroll",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.30",
|
|
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.1.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "1.1.30",
|
|
23
23
|
"lit": "3.1.0"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "2eadc3ab5cdc677c1db2564a74d18440cd553d42"
|
|
26
26
|
}
|