@fluid-topics/ft-infinite-scroll 1.0.61 → 1.0.63
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.
|
@@ -26,6 +26,7 @@ export declare class FtInfiniteScroll<T> extends FtLitElement implements FtInfin
|
|
|
26
26
|
internalScrollable?: HTMLDivElement;
|
|
27
27
|
itemsContainer: HTMLDivElement;
|
|
28
28
|
scrolledToTarget: boolean;
|
|
29
|
+
private scrolling;
|
|
29
30
|
private firstScrollableParent?;
|
|
30
31
|
private alreadyRenderedIndexes;
|
|
31
32
|
private get scrollable();
|
|
@@ -46,6 +47,8 @@ export declare class FtInfiniteScroll<T> extends FtLitElement implements FtInfin
|
|
|
46
47
|
private initIntersectionObserver;
|
|
47
48
|
private triggerFindScrollableParent;
|
|
48
49
|
private findScrollableParent;
|
|
50
|
+
private scrollingDebouncer;
|
|
51
|
+
private scrollListener;
|
|
49
52
|
private elementCanScroll;
|
|
50
53
|
private onResize;
|
|
51
54
|
private searchFirstVisibleItem;
|
|
@@ -37,6 +37,7 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
37
37
|
this.renderAfterLast = 1;
|
|
38
38
|
this.visibleItems = [];
|
|
39
39
|
this.scrolledToTarget = false;
|
|
40
|
+
this.scrolling = false;
|
|
40
41
|
this.alreadyRenderedIndexes = new Set();
|
|
41
42
|
this.scrollDebouncer = new Debouncer(5);
|
|
42
43
|
this.scrollDoneDebouncer = new Debouncer(10);
|
|
@@ -56,6 +57,13 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
56
57
|
this.visibleItems = [...visibleItems].sort((a, b) => a - b);
|
|
57
58
|
};
|
|
58
59
|
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange);
|
|
60
|
+
this.scrollingDebouncer = new Debouncer(100);
|
|
61
|
+
this.scrollListener = () => {
|
|
62
|
+
this.scrolling = true;
|
|
63
|
+
this.scrollingDebouncer.run(() => {
|
|
64
|
+
this.scrolling = false;
|
|
65
|
+
});
|
|
66
|
+
};
|
|
59
67
|
this.onResize = (resizables) => {
|
|
60
68
|
this.triggerFindScrollableParent();
|
|
61
69
|
let scrollRestorationItem = this.searchFirstVisibleItem([...this.itemsContainer.children]);
|
|
@@ -94,7 +102,7 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
94
102
|
`;
|
|
95
103
|
}
|
|
96
104
|
renderItemContainer(item, index) {
|
|
97
|
-
const isVisible = this.scrolledToTarget && this.visibleItems.includes(index);
|
|
105
|
+
const isVisible = !this.scrolling && this.scrolledToTarget && this.visibleItems.includes(index);
|
|
98
106
|
const isRendered = this.alreadyRenderedIndexes.has(index) || (this.scrolledToTarget && (index >= this.visibleItems[0] - this.renderBeforeFirst && index <= last(this.visibleItems) + this.renderAfterLast));
|
|
99
107
|
if (isRendered) {
|
|
100
108
|
this.alreadyRenderedIndexes.add(index);
|
|
@@ -194,6 +202,7 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
194
202
|
(_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event("find-scrollable-parent", { composed: true }));
|
|
195
203
|
}
|
|
196
204
|
findScrollableParent(e) {
|
|
205
|
+
var _a;
|
|
197
206
|
e.stopPropagation();
|
|
198
207
|
let scrollable, maybeScrollable;
|
|
199
208
|
for (let target of e.composedPath()) {
|
|
@@ -210,6 +219,8 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
210
219
|
}
|
|
211
220
|
let newScrollable = scrollable || maybeScrollable;
|
|
212
221
|
if (newScrollable !== this.firstScrollableParent) {
|
|
222
|
+
(_a = this.firstScrollableParent) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.scrollListener);
|
|
223
|
+
newScrollable === null || newScrollable === void 0 ? void 0 : newScrollable.addEventListener("scroll", this.scrollListener);
|
|
213
224
|
this.firstScrollableParent = newScrollable;
|
|
214
225
|
this.initIntersectionObserver();
|
|
215
226
|
this.resetScroll();
|
|
@@ -326,4 +337,7 @@ __decorate([
|
|
|
326
337
|
__decorate([
|
|
327
338
|
state()
|
|
328
339
|
], FtInfiniteScroll.prototype, "scrolledToTarget", void 0);
|
|
340
|
+
__decorate([
|
|
341
|
+
state()
|
|
342
|
+
], FtInfiniteScroll.prototype, "scrolling", void 0);
|
|
329
343
|
export { FtInfiniteScroll };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!function(t,e,
|
|
1
|
+
!function(t,i,e,s,l,n){const r={padding:i.FtCssVariableFactory.create("--ft-infinite-scroll-padding","","SIZE","0"),itemsGap:i.FtCssVariableFactory.create("--ft-infinite-scroll-items-gap","","SIZE","4px"),itemContainerMinHeight:i.FtCssVariableFactory.create("--ft-infinite-scroll-item-container-min-height","","SIZE",".1px")},h=e.css`
|
|
2
2
|
.items-container {
|
|
3
3
|
position: relative;
|
|
4
4
|
padding: ${r.padding};
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
.rendered {
|
|
38
38
|
display: flow-root;
|
|
39
39
|
}
|
|
40
|
-
`;var o=function(t,e,
|
|
40
|
+
`;var o=function(t,i,e,s){for(var l,n=arguments.length,r=n<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,h=t.length-1;h>=0;h--)(l=t[h])&&(r=(n<3?l(r):n>3?l(i,e,r):l(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};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.alreadyRenderedIndexes=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(100),this.scrollListener=()=>{this.scrolling=!0,this.scrollingDebouncer.run((()=>{this.scrolling=!1}))},this.onResize=t=>{this.triggerFindScrollableParent();let i=this.searchFirstVisibleItem([...this.itemsContainer.children]),e=this.scrollable.scrollTop-this.getOffset(i);for(const i of t){const t=+i.target.parentElement.getAttribute("data-item-index");(this.alreadyRenderedIndexes.has(t)||i.target.classList.contains("rendered"))&&(i.target.parentElement.style.height=i.target.clientHeight+"px")}null!=i&&null!=e&&this.scrolledToTarget&&(this.scrollable.scrollTop=this.getOffset(i)+Math.min(e,i.clientHeight))},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.resizeObserver.observe(t.children.item(0)),this.intersectionObserver.observe(t)}))},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`
|
|
41
41
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
42
42
|
tabindex="-1"
|
|
43
43
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
44
|
-
${
|
|
44
|
+
${l.repeat(this.items,((t,i)=>this.getItemKey(t,i)),((t,i)=>this.renderItemContainer(t,i)))}
|
|
45
45
|
</div>
|
|
46
|
-
`}renderItemContainer(t,
|
|
47
|
-
<div id="item-${
|
|
46
|
+
`}renderItemContainer(t,i){const s=!this.scrolling&&this.scrolledToTarget&&this.visibleItems.includes(i),l=this.alreadyRenderedIndexes.has(i)||this.scrolledToTarget&&i>=this.visibleItems[0]-this.renderBeforeFirst&&i<=(null!=(r=this.visibleItems)?r:[])[(null!=r?r:[]).length-1]+this.renderAfterLast;var r;l&&this.alreadyRenderedIndexes.add(i);return e.html`
|
|
47
|
+
<div id="item-${i}"
|
|
48
48
|
class="item-container ${s?"visible":""}"
|
|
49
|
-
data-item-index="${
|
|
50
|
-
<div class="resizable ${s?"visible":""} ${
|
|
51
|
-
${
|
|
49
|
+
data-item-index="${i}">
|
|
50
|
+
<div class="resizable ${s?"visible":""} ${l?"rendered":""}">
|
|
51
|
+
${l?(()=>{const s=this.renderItem(t,i);return"string"==typeof s?e.html`${n.unsafeHTML(s)}`:s})():null}
|
|
52
52
|
</div>
|
|
53
53
|
</div>
|
|
54
|
-
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t;let
|
|
54
|
+
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.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);let e=this.getItem(i);this.scrollToTarget(e),this.scrollDoneDebouncer.run((()=>{this.onMutation(),this.scrolledToTarget=!0}))}))}getItem(t){var i;return null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(`#item-${t}`)}scrollToTarget(t){var i;if(t){let e=+(null!==(i=t.getAttribute("data-item-index"))&&void 0!==i?i:"0");this.scrollable&&0===e?this.scrollable.scrollTop=0:this.scrollable.scrollTop=this.getOffset(t)}}getOffset(t){var i;let e=0,s=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}getBottomOffset(t){var i;return this.getOffset(t)+(null!==(i=null==t?void 0:t.clientHeight)&&void 0!==i?i:0)}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,l=this.elementCanScroll(t);if(t.clientHeight&&t.clientHeight<t.scrollHeight&&l){e=t;break}l&&(s=t)}let l=e||s;l!==this.firstScrollableParent&&(null===(i=this.firstScrollableParent)||void 0===i||i.removeEventListener("scroll",this.scrollListener),null==l||l.addEventListener("scroll",this.scrollListener),this.firstScrollableParent=l,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<=0)return t[i];const s=Math.floor((e-i)/2)+i;return this.getOffset(t[s])>this.scrollable.scrollTop?this.searchFirstVisibleItem(t,i,s-1):this.getBottomOffset(t[s])<this.scrollable.scrollTop?this.searchFirstVisibleItem(t,s+1,e):t[s]}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.resetScroll()}update(t){super.update(t),t.has("items")&&(this.alreadyRenderedIndexes=new Set),!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.dispatchEvent(new a(this.visibleItems,this.visibleItems.map((t=>this.items[t]))))):this.resetVisibleItemsDebouncer.run((()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.initIntersectionObserver(),this.onMutation()}))}}c.styles=h,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),i.customElement("ft-infinite-scroll")(c),t.FtInfiniteScroll=c,t.FtInfiniteScrollCssVariables=r,t.ScrolledToTargetEvent=d,t.VisibleItemsChangeEvent=a,t.styles=h}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML);
|
|
@@ -156,13 +156,13 @@ class $t extends Lt{constructor(t){if(super(t),this.et=V,t.type!==Et)throw Error
|
|
|
156
156
|
.rendered {
|
|
157
157
|
display: flow-root;
|
|
158
158
|
}
|
|
159
|
-
`;var jt=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class Tt extends CustomEvent{constructor(t,o){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:o}})}}class Ht extends Event{constructor(){super("scrolled-to-target")}}class Pt extends xt{constructor(){super(...arguments),this.items=[],this.renderItem=()=>_``,this.getItemKey=(t,o)=>`${o} - ${JSON.stringify(t)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new o(5),this.scrollDoneDebouncer=new o(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.onResize=t=>{this.triggerFindScrollableParent();let o=this.searchFirstVisibleItem([...this.itemsContainer.children]),e=this.scrollable.scrollTop-this.getOffset(o);for(const o of t){const t=+o.target.parentElement.getAttribute("data-item-index");(this.alreadyRenderedIndexes.has(t)||o.target.classList.contains("rendered"))&&(o.target.parentElement.style.height=o.target.clientHeight+"px")}null!=o&&null!=e&&this.scrolledToTarget&&(this.scrollable.scrollTop=this.getOffset(o)+Math.min(e,o.clientHeight))},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.resizeObserver.observe(t.children.item(0)),this.intersectionObserver.observe(t)}))},this.mutationObserver=new MutationObserver(this.onMutation),this.resetVisibleItemsDebouncer=new o(10)}get scrollable(){var t;return null!==(t=this.internalScroll?this.internalScrollable:this.firstScrollableParent)&&void 0!==t?t:document.body}render(){return _`
|
|
159
|
+
`;var jt=function(t,o,e,r){for(var i,a=arguments.length,n=a<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(a<3?i(n):a>3?i(o,e,n):i(o,e))||n);return a>3&&n&&Object.defineProperty(o,e,n),n};class Tt extends CustomEvent{constructor(t,o){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:o}})}}class Ht extends Event{constructor(){super("scrolled-to-target")}}class Pt extends xt{constructor(){super(...arguments),this.items=[],this.renderItem=()=>_``,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.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new o(5),this.scrollDoneDebouncer=new o(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 o(100),this.scrollListener=()=>{this.scrolling=!0,this.scrollingDebouncer.run((()=>{this.scrolling=!1}))},this.onResize=t=>{this.triggerFindScrollableParent();let o=this.searchFirstVisibleItem([...this.itemsContainer.children]),e=this.scrollable.scrollTop-this.getOffset(o);for(const o of t){const t=+o.target.parentElement.getAttribute("data-item-index");(this.alreadyRenderedIndexes.has(t)||o.target.classList.contains("rendered"))&&(o.target.parentElement.style.height=o.target.clientHeight+"px")}null!=o&&null!=e&&this.scrolledToTarget&&(this.scrollable.scrollTop=this.getOffset(o)+Math.min(e,o.clientHeight))},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.resizeObserver.observe(t.children.item(0)),this.intersectionObserver.observe(t)}))},this.mutationObserver=new MutationObserver(this.onMutation),this.resetVisibleItemsDebouncer=new o(10)}get scrollable(){var t;return null!==(t=this.internalScroll?this.internalScrollable:this.firstScrollableParent)&&void 0!==t?t:document.body}render(){return _`
|
|
160
160
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
161
161
|
tabindex="-1"
|
|
162
162
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
163
163
|
${Mt(this.items,((t,o)=>this.getItemKey(t,o)),((t,o)=>this.renderItemContainer(t,o)))}
|
|
164
164
|
</div>
|
|
165
|
-
`}renderItemContainer(t,o){const e
|
|
165
|
+
`}renderItemContainer(t,o){const e=!this.scrolling&&this.scrolledToTarget&&this.visibleItems.includes(o),r=this.alreadyRenderedIndexes.has(o)||this.scrolledToTarget&&o>=this.visibleItems[0]-this.renderBeforeFirst&&o<=(null!=(i=this.visibleItems)?i:[])[(null!=i?i:[]).length-1]+this.renderAfterLast;var i;r&&this.alreadyRenderedIndexes.add(o);return _`
|
|
166
166
|
<div id="item-${o}"
|
|
167
167
|
class="item-container ${e?"visible":""}"
|
|
168
168
|
data-item-index="${o}">
|
|
@@ -170,4 +170,4 @@ class $t extends Lt{constructor(t){if(super(t),this.et=V,t.type!==Et)throw Error
|
|
|
170
170
|
${r?(()=>{const e=this.renderItem(t,o);return"string"==typeof e?_`${zt(e)}`:e})():null}
|
|
171
171
|
</div>
|
|
172
172
|
</div>
|
|
173
|
-
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.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);let e=this.getItem(o);this.scrollToTarget(e),this.scrollDoneDebouncer.run((()=>{this.onMutation(),this.scrolledToTarget=!0}))}))}getItem(t){var o;return null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(`#item-${t}`)}scrollToTarget(t){var o;if(t){let e=+(null!==(o=t.getAttribute("data-item-index"))&&void 0!==o?o:"0");this.scrollable&&0===e?this.scrollable.scrollTop=0:this.scrollable.scrollTop=this.getOffset(t)}}getOffset(t){var o;let e=0,r=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}getBottomOffset(t){var o;return this.getOffset(t)+(null!==(o=null==t?void 0:t.clientHeight)&&void 0!==o?o:0)}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){let
|
|
173
|
+
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.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);let e=this.getItem(o);this.scrollToTarget(e),this.scrollDoneDebouncer.run((()=>{this.onMutation(),this.scrolledToTarget=!0}))}))}getItem(t){var o;return null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(`#item-${t}`)}scrollToTarget(t){var o;if(t){let e=+(null!==(o=t.getAttribute("data-item-index"))&&void 0!==o?o:"0");this.scrollable&&0===e?this.scrollable.scrollTop=0:this.scrollable.scrollTop=this.getOffset(t)}}getOffset(t){var o;let e=0,r=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}getBottomOffset(t){var o;return this.getOffset(t)+(null!==(o=null==t?void 0:t.clientHeight)&&void 0!==o?o:0)}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(t.clientHeight&&t.clientHeight<t.scrollHeight&&i){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<=0)return t[o];const r=Math.floor((e-o)/2)+o;return this.getOffset(t[r])>this.scrollable.scrollTop?this.searchFirstVisibleItem(t,o,r-1):this.getBottomOffset(t[r])<this.scrollable.scrollTop?this.searchFirstVisibleItem(t,r+1,e):t[r]}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.resetScroll()}update(t){super.update(t),t.has("items")&&(this.alreadyRenderedIndexes=new Set),!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 Ht)}onVisibleItemsChange(){const t=this.visibleItems.every(((t,o)=>null==this.visibleItems[o+1]||t+1===this.visibleItems[o+1]));t||l(this.visibleItems,this.lastNotOkVisibleItems)?(this.resetVisibleItemsDebouncer.cancel(),this.dispatchEvent(new Tt(this.visibleItems,this.visibleItems.map((t=>this.items[t]))))):this.resetVisibleItemsDebouncer.run((()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.initIntersectionObserver(),this.onMutation()}))}}var _t;Pt.styles=Gt,jt([r({type:Array})],Pt.prototype,"items",void 0),jt([r({attribute:!1})],Pt.prototype,"renderItem",void 0),jt([r({attribute:!1})],Pt.prototype,"getItemKey",void 0),jt([r({type:Object})],Pt.prototype,"scrollToItem",void 0),jt([r({type:Number})],Pt.prototype,"scrollToIndex",void 0),jt([r({type:Boolean})],Pt.prototype,"internalScroll",void 0),jt([r({type:Number})],Pt.prototype,"renderBeforeFirst",void 0),jt([r({type:Number})],Pt.prototype,"renderAfterLast",void 0),jt([i({hasChanged:(t,o)=>null!=t&&null==o||t.length!==o.length||t[0]!==o[0]})],Pt.prototype,"visibleItems",void 0),jt([a(".scrollable")],Pt.prototype,"internalScrollable",void 0),jt([a(".items-container")],Pt.prototype,"itemsContainer",void 0),jt([i()],Pt.prototype,"scrolledToTarget",void 0),jt([i()],Pt.prototype,"scrolling",void 0),(_t="ft-infinite-scroll",t=>{window.customElements.get(_t)||window.customElements.define(_t,t)})(Pt),t.FtInfiniteScroll=Pt,t.FtInfiniteScrollCssVariables=Dt,t.ScrolledToTargetEvent=Ht,t.VisibleItemsChangeEvent=Tt,t.styles=Gt}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-infinite-scroll",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.63",
|
|
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.0.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "1.0.63",
|
|
23
23
|
"lit": "2.7.2"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "020d13bf82a28437f4d7a7395ad9b628bc4342f1"
|
|
26
26
|
}
|