@fluid-topics/ft-infinite-scroll 0.3.7 → 0.3.8
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.
|
@@ -37,6 +37,8 @@ export declare class FtInfiniteScroll<T> extends FtLitElement implements FtInfin
|
|
|
37
37
|
private renderItemContainer;
|
|
38
38
|
private scrollDebouncer;
|
|
39
39
|
resetScroll(): void;
|
|
40
|
+
private scrollToTarget;
|
|
41
|
+
private getOffset;
|
|
40
42
|
appendItems(...items: Array<T>): void;
|
|
41
43
|
prependItems(...items: Array<T>): void;
|
|
42
44
|
private onVisibilityChange;
|
|
@@ -52,17 +52,18 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
52
52
|
this.onResize = (resizables) => {
|
|
53
53
|
this.triggerFindScrollableParent();
|
|
54
54
|
let diff = 0;
|
|
55
|
+
resizables = resizables.sort((a, b) => a.contentRect.top - b.contentRect.top);
|
|
55
56
|
for (const resizable of resizables) {
|
|
56
57
|
const index = +resizable.target.parentElement.getAttribute("data-item-index");
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
const oldHeight = resizable.target.parentElement.clientHeight;
|
|
59
|
+
const newHeight = resizable.contentRect.height;
|
|
59
60
|
if (this.alreadyRenderedIndexes.has(index)) {
|
|
60
61
|
resizable.target.parentElement.style.height = newHeight + "px";
|
|
61
|
-
diff +=
|
|
62
|
+
diff += this.scrollable && this.getOffset(resizable.target.parentElement) < this.scrollable.scrollTop + diff ? newHeight - oldHeight : 0;
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
65
|
if (this.scrollable && isSafari) {
|
|
65
|
-
this.scrollable.scrollTop
|
|
66
|
+
this.scrollable.scrollTop += diff;
|
|
66
67
|
}
|
|
67
68
|
};
|
|
68
69
|
this.resizeObserver = new ResizeObserver(this.onResize);
|
|
@@ -121,15 +122,35 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
121
122
|
internalScrollToIndex = -1;
|
|
122
123
|
}
|
|
123
124
|
let target = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`#item-${internalScrollToIndex}`);
|
|
124
|
-
|
|
125
|
-
target.scrollIntoView({ block: "start" });
|
|
126
|
-
}
|
|
125
|
+
this.scrollToTarget(target);
|
|
127
126
|
this.onMutation();
|
|
128
127
|
setTimeout(() => {
|
|
129
128
|
this.scrolledToTarget = true;
|
|
130
129
|
}, 10);
|
|
131
130
|
});
|
|
132
131
|
}
|
|
132
|
+
scrollToTarget(target) {
|
|
133
|
+
var _a;
|
|
134
|
+
if (target) {
|
|
135
|
+
let index = +((_a = target.getAttribute("data-item-index")) !== null && _a !== void 0 ? _a : "0");
|
|
136
|
+
if (this.scrollable) {
|
|
137
|
+
this.scrollable.scrollTop = index > 0 ? this.getOffset(target) + 1 : 0;
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
target.scrollIntoView({ block: "start" });
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
getOffset(target) {
|
|
145
|
+
var _a;
|
|
146
|
+
let offset = 0;
|
|
147
|
+
let el = target;
|
|
148
|
+
while (el && el.offsetParent !== this.scrollable.offsetParent) {
|
|
149
|
+
offset += el.offsetTop;
|
|
150
|
+
el = el.offsetParent;
|
|
151
|
+
}
|
|
152
|
+
return offset + ((_a = el === null || el === void 0 ? void 0 : el.offsetTop) !== null && _a !== void 0 ? _a : 0) - this.scrollable.offsetTop;
|
|
153
|
+
}
|
|
133
154
|
appendItems(...items) {
|
|
134
155
|
this.items = [...this.items, ...items];
|
|
135
156
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!function(t,e,i,s,l,n){var r=function(t,e,i,s){for(var l,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,o=t.length-1;o>=0;o--)(l=t[o])&&(r=(n<3?l(r):n>3?l(e,i,r):l(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};const o={padding:e.FtCssVariableFactory.create("--ft-infinite-scroll-padding","SIZE","0")};class h extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class a extends Event{constructor(){super("scrolled-to-target")}}class d extends e.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>i.html``,this.internalScroll=!1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e.Debouncer(5),this.onVisibilityChange=t=>{const e=t.filter((t=>t.intersectionRect.height>1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),i=t.filter((t=>t.intersectionRect.height<=1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!i.includes(t)));this.visibleItems=[...e,...s].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let i=0;for(const e of t){const t=+e.target.parentElement.getAttribute("data-item-index")
|
|
1
|
+
!function(t,e,i,s,l,n){var r=function(t,e,i,s){for(var l,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,o=t.length-1;o>=0;o--)(l=t[o])&&(r=(n<3?l(r):n>3?l(e,i,r):l(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};const o={padding:e.FtCssVariableFactory.create("--ft-infinite-scroll-padding","SIZE","0")};class h extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class a extends Event{constructor(){super("scrolled-to-target")}}class d extends e.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>i.html``,this.internalScroll=!1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e.Debouncer(5),this.onVisibilityChange=t=>{const e=t.filter((t=>t.intersectionRect.height>1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),i=t.filter((t=>t.intersectionRect.height<=1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!i.includes(t)));this.visibleItems=[...e,...s].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let i=0;t=t.sort(((t,e)=>t.contentRect.top-e.contentRect.top));for(const e of t){const t=+e.target.parentElement.getAttribute("data-item-index"),s=e.target.parentElement.clientHeight,l=e.contentRect.height;this.alreadyRenderedIndexes.has(t)&&(e.target.parentElement.style.height=l+"px",i+=this.scrollable&&this.getOffset(e.target.parentElement)<this.scrollable.scrollTop+i?l-s:0)}this.scrollable&&e.isSafari&&(this.scrollable.scrollTop+=i)},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.intersectionObserver.observe(t),this.resizeObserver.observe(t.children.item(0))}))},this.mutationObserver=new MutationObserver(this.onMutation)}get scrollable(){return this.internalScroll?this.internalScrollable:this.firstScrollableParent}render(){return i.html`
|
|
2
2
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
3
3
|
tabindex="-1"
|
|
4
4
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
${l?(()=>{const s=this.renderItem(t,e);return"string"==typeof s?i.html`${n.unsafeHTML(s)}`:s})():null}
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
|
-
`}resetScroll(){this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t,e;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 s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${i}`);
|
|
15
|
+
`}resetScroll(){this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t,e;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 s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${i}`);this.scrollToTarget(s),this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),10)}))}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable?this.scrollable.scrollTop=i>0?this.getOffset(t)+1:0:t.scrollIntoView({block:"start"})}}getOffset(t){var e;let i=0,s=t;for(;s&&s.offsetParent!==this.scrollable.offsetParent;)i+=s.offsetTop,s=s.offsetParent;return i+(null!==(e=null==s?void 0:s.offsetTop)&&void 0!==e?e:0)-this.scrollable.offsetTop}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{rootMargin:"-2px",threshold:[0,.01,.1]}),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}triggerFindScrollableParent(){this.itemsContainer.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){t.stopPropagation();for(let e of t.composedPath()){const t=e;if(t.clientHeight&&t.clientHeight<t.scrollHeight&&["auto","scroll"].includes(getComputedStyle(t).overflowY)){this.firstScrollableParent=t;break}}}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"))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new h(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&this.dispatchEvent(new a)}}d.styles=i.css`
|
|
16
16
|
.items-container {
|
|
17
17
|
position: relative;
|
|
18
18
|
padding: ${o.padding};
|
|
@@ -57,7 +57,7 @@ const l=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShad
|
|
|
57
57
|
* Copyright 2017 Google LLC
|
|
58
58
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
59
59
|
*/
|
|
60
|
-
var N;O.finalized=!0,O.elementProperties=new Map,O.elementStyles=[],O.shadowRootOptions={mode:"open"},null==x||x({ReactiveElement:O}),(null!==(v=globalThis.reactiveElementVersions)&&void 0!==v?v:globalThis.reactiveElementVersions=[]).push("1.3.4");const E=globalThis.trustedTypes,$=E?E.createPolicy("lit-html",{createHTML:t=>t}):void 0,C=`lit$${(Math.random()+"").slice(9)}$`,R="?"+C,S=`<${R}>`,M=document,U=(t="")=>M.createComment(t),k=t=>null===t||"object"!=typeof t&&"function"!=typeof t,
|
|
60
|
+
var N;O.finalized=!0,O.elementProperties=new Map,O.elementStyles=[],O.shadowRootOptions={mode:"open"},null==x||x({ReactiveElement:O}),(null!==(v=globalThis.reactiveElementVersions)&&void 0!==v?v:globalThis.reactiveElementVersions=[]).push("1.3.4");const E=globalThis.trustedTypes,$=E?E.createPolicy("lit-html",{createHTML:t=>t}):void 0,C=`lit$${(Math.random()+"").slice(9)}$`,R="?"+C,S=`<${R}>`,M=document,U=(t="")=>M.createComment(t),k=t=>null===t||"object"!=typeof t&&"function"!=typeof t,T=Array.isArray,A=t=>T(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),F=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,L=/-->/g,_=/>/g,j=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),B=/'/g,I=/"/g,W=/^(?:script|style|textarea|title)$/i,K=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),D=Symbol.for("lit-noChange"),H=Symbol.for("lit-nothing"),P=new WeakMap,z=M.createTreeWalker(M,129,null,!1),Z=(t,e)=>{const i=t.length-1,s=[];let n,o=2===e?"<svg>":"",r=F;for(let e=0;e<i;e++){const i=t[e];let l,a,h=-1,c=0;for(;c<i.length&&(r.lastIndex=c,a=r.exec(i),null!==a);)c=r.lastIndex,r===F?"!--"===a[1]?r=L:void 0!==a[1]?r=_:void 0!==a[2]?(W.test(a[2])&&(n=RegExp("</"+a[2],"g")),r=j):void 0!==a[3]&&(r=j):r===j?">"===a[0]?(r=null!=n?n:F,h=-1):void 0===a[1]?h=-2:(h=r.lastIndex-a[2].length,l=a[1],r=void 0===a[3]?j:'"'===a[3]?I:B):r===I||r===B?r=j:r===L||r===_?r=F:(r=j,n=void 0);const d=r===j&&t[e+1].startsWith("/>")?" ":"";o+=r===F?i+S:h>=0?(s.push(l),i.slice(0,h)+"$lit$"+i.slice(h)+C+d):i+C+(-2===h?(s.push(void 0),e):d)}const l=o+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==$?$.createHTML(l):l,s]};class J{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let n=0,o=0;const r=t.length-1,l=this.parts,[a,h]=Z(t,e);if(this.el=J.createElement(a,i),z.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=z.nextNode())&&l.length<r;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(C)){const i=h[o++];if(t.push(e),void 0!==i){const t=s.getAttribute(i.toLowerCase()+"$lit$").split(C),e=/([.?@])?(.*)/.exec(i);l.push({type:1,index:n,name:e[2],strings:t,ctor:"."===e[1]?Q:"?"===e[1]?tt:"@"===e[1]?et:G})}else l.push({type:6,index:n})}for(const e of t)s.removeAttribute(e)}if(W.test(s.tagName)){const t=s.textContent.split(C),e=t.length-1;if(e>0){s.textContent=E?E.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],U()),z.nextNode(),l.push({type:2,index:++n});s.append(t[e],U())}}}else if(8===s.nodeType)if(s.data===R)l.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(C,t+1));)l.push({type:7,index:n}),t+=C.length-1}n++}}static createElement(t,e){const i=M.createElement("template");return i.innerHTML=t,i}}function V(t,e,i=t,s){var n,o,r,l;if(e===D)return e;let a=void 0!==s?null===(n=i._$Cl)||void 0===n?void 0:n[s]:i._$Cu;const h=k(e)?void 0:e._$litDirective$;return(null==a?void 0:a.constructor)!==h&&(null===(o=null==a?void 0:a._$AO)||void 0===o||o.call(a,!1),void 0===h?a=void 0:(a=new h(t),a._$AT(t,i,s)),void 0!==s?(null!==(r=(l=i)._$Cl)&&void 0!==r?r:l._$Cl=[])[s]=a:i._$Cu=a),void 0!==a&&(e=V(t,a._$AS(t,e.values),a,s)),e}class q{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:i},parts:s}=this._$AD,n=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:M).importNode(i,!0);z.currentNode=n;let o=z.nextNode(),r=0,l=0,a=s[0];for(;void 0!==a;){if(r===a.index){let e;2===a.type?e=new X(o,o.nextSibling,this,t):1===a.type?e=new a.ctor(o,a.name,a.strings,this,t):6===a.type&&(e=new it(o,this,t)),this.v.push(e),a=s[++l]}r!==(null==a?void 0:a.index)&&(o=z.nextNode(),r++)}return n}m(t){let e=0;for(const i of this.v)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class X{constructor(t,e,i,s){var n;this.type=2,this._$AH=H,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$C_=null===(n=null==s?void 0:s.isConnected)||void 0===n||n}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$C_}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=V(this,t,e),k(t)?t===H||null==t||""===t?(this._$AH!==H&&this._$AR(),this._$AH=H):t!==this._$AH&&t!==D&&this.T(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.k(t):A(t)?this.S(t):this.T(t)}j(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.j(t))}T(t){this._$AH!==H&&k(this._$AH)?this._$AA.nextSibling.data=t:this.k(M.createTextNode(t)),this._$AH=t}$(t){var e;const{values:i,_$litType$:s}=t,n="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=J.createElement(s.h,this.options)),s);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===n)this._$AH.m(i);else{const t=new q(n,this),e=t.p(this.options);t.m(i),this.k(e),this._$AH=t}}_$AC(t){let e=P.get(t.strings);return void 0===e&&P.set(t.strings,e=new J(t)),e}S(t){T(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const n of t)s===e.length?e.push(i=new X(this.j(U()),this.j(U()),this,this.options)):i=e[s],i._$AI(n),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$C_=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class G{constructor(t,e,i,s,n){this.type=1,this._$AH=H,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=H}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,s){const n=this.strings;let o=!1;if(void 0===n)t=V(this,t,e,0),o=!k(t)||t!==this._$AH&&t!==D,o&&(this._$AH=t);else{const s=t;let r,l;for(t=n[0],r=0;r<n.length-1;r++)l=V(this,s[i+r],e,r),l===D&&(l=this._$AH[r]),o||(o=!k(l)||l!==this._$AH[r]),l===H?t=H:t!==H&&(t+=(null!=l?l:"")+n[r+1]),this._$AH[r]=l}o&&!s&&this.P(t)}P(t){t===H?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class Q extends G{constructor(){super(...arguments),this.type=3}P(t){this.element[this.name]=t===H?void 0:t}}const Y=E?E.emptyScript:"";class tt extends G{constructor(){super(...arguments),this.type=4}P(t){t&&t!==H?this.element.setAttribute(this.name,Y):this.element.removeAttribute(this.name)}}class et extends G{constructor(t,e,i,s,n){super(t,e,i,s,n),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=V(this,t,e,0))&&void 0!==i?i:H)===D)return;const s=this._$AH,n=t===H&&s!==H||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,o=t!==H&&(s===H||n);n&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class it{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){V(this,t)}}const st={A:"$lit$",C,M:R,L:1,R:Z,V:q,D:A,I:V,H:X,N:G,U:tt,B:et,F:Q,W:it},nt=window.litHtmlPolyfillSupport;
|
|
61
61
|
/**
|
|
62
62
|
* @license
|
|
63
63
|
* Copyright 2017 Google LLC
|
|
@@ -104,7 +104,7 @@ function(t){return class extends t{createRenderRoot(){const t=this.constructor,{
|
|
|
104
104
|
* Copyright 2017 Google LLC
|
|
105
105
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
106
106
|
*/
|
|
107
|
-
class Rt extends xt{constructor(t){if(super(t),this.it=H,t.type!==bt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===H||null==t)return this._t=void 0,this.it=t;if(t===D)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}Rt.directiveName="unsafeHTML",Rt.resultType=1;const St=mt(Rt);var Mt=function(t,e,i,s){for(var n,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(e,i,r):n(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};const Ut={padding:ht.create("--ft-infinite-scroll-padding","SIZE","0")};class kt extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class
|
|
107
|
+
class Rt extends xt{constructor(t){if(super(t),this.it=H,t.type!==bt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===H||null==t)return this._t=void 0,this.it=t;if(t===D)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}Rt.directiveName="unsafeHTML",Rt.resultType=1;const St=mt(Rt);var Mt=function(t,e,i,s){for(var n,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(e,i,r):n(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};const Ut={padding:ht.create("--ft-infinite-scroll-padding","SIZE","0")};class kt extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class Tt extends Event{constructor(){super("scrolled-to-target")}}class At extends ft{constructor(){super(...arguments),this.items=[],this.renderItem=()=>K``,this.internalScroll=!1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e(5),this.onVisibilityChange=t=>{const e=t.filter((t=>t.intersectionRect.height>1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),i=t.filter((t=>t.intersectionRect.height<=1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!i.includes(t)));this.visibleItems=[...e,...s].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let e=0;t=t.sort(((t,e)=>t.contentRect.top-e.contentRect.top));for(const i of t){const t=+i.target.parentElement.getAttribute("data-item-index"),s=i.target.parentElement.clientHeight,n=i.contentRect.height;this.alreadyRenderedIndexes.has(t)&&(i.target.parentElement.style.height=n+"px",e+=this.scrollable&&this.getOffset(i.target.parentElement)<this.scrollable.scrollTop+e?n-s:0)}this.scrollable&&vt&&(this.scrollable.scrollTop+=e)},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.intersectionObserver.observe(t),this.resizeObserver.observe(t.children.item(0))}))},this.mutationObserver=new MutationObserver(this.onMutation)}get scrollable(){return this.internalScroll?this.internalScrollable:this.firstScrollableParent}render(){return K`
|
|
108
108
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
109
109
|
tabindex="-1"
|
|
110
110
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
@@ -118,7 +118,7 @@ class Rt extends xt{constructor(t){if(super(t),this.it=H,t.type!==bt)throw Error
|
|
|
118
118
|
${s?(()=>{const i=this.renderItem(t,e);return"string"==typeof i?K`${St(i)}`:i})():null}
|
|
119
119
|
</div>
|
|
120
120
|
</div>
|
|
121
|
-
`}resetScroll(){this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t,e;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 s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${i}`);
|
|
121
|
+
`}resetScroll(){this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t,e;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 s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${i}`);this.scrollToTarget(s),this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),10)}))}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable?this.scrollable.scrollTop=i>0?this.getOffset(t)+1:0:t.scrollIntoView({block:"start"})}}getOffset(t){var e;let i=0,s=t;for(;s&&s.offsetParent!==this.scrollable.offsetParent;)i+=s.offsetTop,s=s.offsetParent;return i+(null!==(e=null==s?void 0:s.offsetTop)&&void 0!==e?e:0)-this.scrollable.offsetTop}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{rootMargin:"-2px",threshold:[0,.01,.1]}),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}triggerFindScrollableParent(){this.itemsContainer.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){t.stopPropagation();for(let e of t.composedPath()){const t=e;if(t.clientHeight&&t.clientHeight<t.scrollHeight&&["auto","scroll"].includes(getComputedStyle(t).overflowY)){this.firstScrollableParent=t;break}}}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"))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new kt(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&this.dispatchEvent(new Tt)}}var Ft;At.styles=u`
|
|
122
122
|
.items-container {
|
|
123
123
|
position: relative;
|
|
124
124
|
padding: ${Ut.padding};
|
|
@@ -151,4 +151,4 @@ class Rt extends xt{constructor(t){if(super(t),this.it=H,t.type!==bt)throw Error
|
|
|
151
151
|
.resizable:not(.rendered) {
|
|
152
152
|
width: 0;
|
|
153
153
|
}
|
|
154
|
-
`,Mt([s({type:Array})],
|
|
154
|
+
`,Mt([s({type:Array})],At.prototype,"items",void 0),Mt([s({attribute:!1})],At.prototype,"renderItem",void 0),Mt([s({type:Object})],At.prototype,"scrollToItem",void 0),Mt([s({type:Number})],At.prototype,"scrollToIndex",void 0),Mt([s({type:Boolean})],At.prototype,"internalScroll",void 0),Mt([n({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],At.prototype,"visibleItems",void 0),Mt([o(".scrollable")],At.prototype,"internalScrollable",void 0),Mt([o(".items-container")],At.prototype,"itemsContainer",void 0),Mt([n()],At.prototype,"scrolledToTarget",void 0),(Ft="ft-infinite-scroll",t=>{window.customElements.get(Ft)||window.customElements.define(Ft,t)})(At),t.FtInfiniteScroll=At,t.FtInfiniteScrollCssVariables=Ut,t.ScrolledToTargetEvent=Tt,t.VisibleItemsChangeEvent=kt,Object.defineProperty(t,"i",{value:!0})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-infinite-scroll",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.8",
|
|
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": "0.3.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "0.3.8",
|
|
23
23
|
"lit": "2.2.8"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "1f42b53be98492f7b9c614f005535bdacc0229a1"
|
|
26
26
|
}
|