@fluid-topics/ft-infinite-scroll 1.0.24 → 1.0.26
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.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare const FtInfiniteScrollCssVariables: {
|
|
2
2
|
padding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
3
3
|
itemsGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
4
|
+
itemContainerMinHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
4
5
|
};
|
|
5
6
|
export declare const styles: import("lit").CSSResult;
|
|
@@ -3,6 +3,12 @@ import { FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
|
|
|
3
3
|
export const FtInfiniteScrollCssVariables = {
|
|
4
4
|
padding: FtCssVariableFactory.create("--ft-infinite-scroll-padding", "SIZE", "0"),
|
|
5
5
|
itemsGap: FtCssVariableFactory.create("--ft-infinite-scroll-items-gap", "SIZE", "4px"),
|
|
6
|
+
/*
|
|
7
|
+
If 0px : the item is not "visible" and the scroll does not work
|
|
8
|
+
If > 1px : Can break some particular implementation where we would have empty items and it would lead to a big gap.
|
|
9
|
+
We want to make it configurable for implementations where content is loaded asynchronously in item.
|
|
10
|
+
*/
|
|
11
|
+
itemContainerMinHeight: FtCssVariableFactory.create("--ft-infinite-scroll-item-container-min-height", "SIZE", ".1px"),
|
|
6
12
|
};
|
|
7
13
|
// language=CSS
|
|
8
14
|
export const styles = css `
|
|
@@ -41,7 +47,7 @@ export const styles = css `
|
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
.item-container, .resizable.rendered {
|
|
44
|
-
min-height: .
|
|
50
|
+
min-height: ${FtInfiniteScrollCssVariables.itemContainerMinHeight}
|
|
45
51
|
}
|
|
46
52
|
|
|
47
53
|
.rendered {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!function(t,e,i,s,l
|
|
1
|
+
!function(t,e,i,s,n,l){const r={padding:e.FtCssVariableFactory.create("--ft-infinite-scroll-padding","SIZE","0"),itemsGap:e.FtCssVariableFactory.create("--ft-infinite-scroll-items-gap","SIZE","4px"),itemContainerMinHeight:e.FtCssVariableFactory.create("--ft-infinite-scroll-item-container-min-height","SIZE",".1px")},h=i.css`
|
|
2
2
|
.items-container {
|
|
3
3
|
position: relative;
|
|
4
4
|
padding: ${r.padding};
|
|
@@ -34,24 +34,24 @@
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.item-container, .resizable.rendered {
|
|
37
|
-
min-height: .
|
|
37
|
+
min-height: ${r.itemContainerMinHeight}
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.rendered {
|
|
41
41
|
display: flow-root;
|
|
42
42
|
}
|
|
43
|
-
`;var o=function(t,e,i,s){for(var l
|
|
43
|
+
`;var o=function(t,e,i,s){for(var n,l=arguments.length,r=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,h=t.length-1;h>=0;h--)(n=t[h])&&(r=(l<3?n(r):l>3?n(e,i,r):n(e,i))||r);return l>3&&r&&Object.defineProperty(e,i,r),r};class a extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class d extends Event{constructor(){super("scrolled-to-target")}}class c extends e.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>i.html``,this.getItemKey=(t,e)=>`${e} - ${JSON.stringify(t)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e.Debouncer(5),this.scrollDoneDebouncer=new e.Debouncer(10),this.onVisibilityChange=t=>{let e=new Set(this.visibleItems),i=new Set;for(let s of t){let t=+s.target.attributes.getNamedItem("data-item-index").value;s.intersectionRect.height>0?(e.add(t),i.add(t)):i.has(t)||e.delete(t)}this.visibleItems=[...e].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let e=this.searchFirstVisibleItem([...this.itemsContainer.children]),i=this.scrollable.scrollTop-this.getOffset(e);for(const e of t){const t=+e.target.parentElement.getAttribute("data-item-index");(this.alreadyRenderedIndexes.has(t)||e.target.classList.contains("rendered"))&&setTimeout((()=>e.target.parentElement.style.height=e.target.clientHeight+"px"),0)}setTimeout((()=>{null!=e&&null!=i&&this.scrolledToTarget&&(this.scrollable.scrollTop=this.getOffset(e)+Math.min(i,e.clientHeight))}),0)},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 e.Debouncer(10)}get scrollable(){var t;return null!==(t=this.internalScroll?this.internalScrollable:this.firstScrollableParent)&&void 0!==t?t:document.body}render(){return i.html`
|
|
44
44
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
45
45
|
tabindex="-1"
|
|
46
46
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
47
|
-
${
|
|
47
|
+
${n.repeat(this.items,((t,e)=>this.getItemKey(t,e)),((t,e)=>this.renderItemContainer(t,e)))}
|
|
48
48
|
</div>
|
|
49
|
-
`}renderItemContainer(t,e){const s=this.scrolledToTarget&&this.visibleItems.includes(e),
|
|
49
|
+
`}renderItemContainer(t,e){const s=this.scrolledToTarget&&this.visibleItems.includes(e),n=this.alreadyRenderedIndexes.has(e)||this.scrolledToTarget&&e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=(null!=(r=this.visibleItems)?r:[])[(null!=r?r:[]).length-1]+this.renderAfterLast;var r;n&&this.alreadyRenderedIndexes.add(e);return i.html`
|
|
50
50
|
<div id="item-${e}"
|
|
51
51
|
class="item-container ${s?"visible":""}"
|
|
52
52
|
data-item-index="${e}">
|
|
53
|
-
<div class="resizable ${s?"visible":""} ${
|
|
54
|
-
${
|
|
53
|
+
<div class="resizable ${s?"visible":""} ${n?"rendered":""}">
|
|
54
|
+
${n?(()=>{const s=this.renderItem(t,e);return"string"==typeof s?i.html`${l.unsafeHTML(s)}`:s})():null}
|
|
55
55
|
</div>
|
|
56
56
|
</div>
|
|
57
|
-
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t;let e=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;e>=this.items.length&&(e=-1);let i=this.getItem(e);this.scrollToTarget(i),this.scrollDoneDebouncer.run((()=>{this.onMutation(),this.scrolledToTarget=!0}))}))}getItem(t){var e;return null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${t}`)}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable&&0===i?this.scrollable.scrollTop=0:this.scrollable.scrollTop=this.getOffset(t)}}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}getBottomOffset(t){var e;return this.getOffset(t)+(null!==(e=null==t?void 0:t.clientHeight)&&void 0!==e?e: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 e,i;t.stopPropagation();for(let s of t.composedPath()){const t=s,
|
|
57
|
+
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t;let e=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;e>=this.items.length&&(e=-1);let i=this.getItem(e);this.scrollToTarget(i),this.scrollDoneDebouncer.run((()=>{this.onMutation(),this.scrolledToTarget=!0}))}))}getItem(t){var e;return null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${t}`)}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable&&0===i?this.scrollable.scrollTop=0:this.scrollable.scrollTop=this.getOffset(t)}}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}getBottomOffset(t){var e;return this.getOffset(t)+(null!==(e=null==t?void 0:t.clientHeight)&&void 0!==e?e: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 e,i;t.stopPropagation();for(let s of t.composedPath()){const t=s,n=this.elementCanScroll(t);if(t.clientHeight&&t.clientHeight<t.scrollHeight&&n){e=t;break}n&&(i=t)}let s=e||i;s!==this.firstScrollableParent&&(this.firstScrollableParent=s,this.initIntersectionObserver(),this.resetScroll())}elementCanScroll(t){try{return["auto","scroll"].includes(getComputedStyle(t).overflowY)}catch(t){return!1}}searchFirstVisibleItem(t,e,i){if(e=null!=e?e:0,(i=null!=i?i:t.length-1)-e<=0)return t[e];const s=Math.floor((i-e)/2)+e;return this.getOffset(t[s])>this.scrollable.scrollTop?this.searchFirstVisibleItem(t,e,s-1):this.getBottomOffset(t[s])<this.scrollable.scrollTop?this.searchFirstVisibleItem(t,s+1,i):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,e)=>null==this.visibleItems[e+1]||t+1===this.visibleItems[e+1]))||e.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,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[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),e.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);
|
|
@@ -57,7 +57,7 @@ const h=window,a=h.ShadowRoot&&(void 0===h.ShadyCSS||h.ShadyCSS.nativeShadow)&&"
|
|
|
57
57
|
* Copyright 2017 Google LLC
|
|
58
58
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
59
59
|
*/
|
|
60
|
-
var S;E.finalized=!0,E.elementProperties=new Map,E.elementStyles=[],E.shadowRootOptions={mode:"open"},null==g||g({ReactiveElement:E}),(null!==(m=x.reactiveElementVersions)&&void 0!==m?m:x.reactiveElementVersions=[]).push("1.6.1");const $=window,R=$.trustedTypes,M=R?R.createPolicy("lit-html",{createHTML:t=>t}):void 0,k="$lit$",U=`lit$${(Math.random()+"").slice(9)}$`,A="?"+U,F=`<${A}>`,T=document,L=()=>T.createComment(""),j=t=>null===t||"object"!=typeof t&&"function"!=typeof t,I=Array.isArray,_=t=>I(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),B="[ \t\n\f\r]",W=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,K=/-->/g,P=/>/g,z=RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),D=/'/g,H=/"/g,
|
|
60
|
+
var S;E.finalized=!0,E.elementProperties=new Map,E.elementStyles=[],E.shadowRootOptions={mode:"open"},null==g||g({ReactiveElement:E}),(null!==(m=x.reactiveElementVersions)&&void 0!==m?m:x.reactiveElementVersions=[]).push("1.6.1");const $=window,R=$.trustedTypes,M=R?R.createPolicy("lit-html",{createHTML:t=>t}):void 0,k="$lit$",U=`lit$${(Math.random()+"").slice(9)}$`,A="?"+U,F=`<${A}>`,T=document,L=()=>T.createComment(""),j=t=>null===t||"object"!=typeof t&&"function"!=typeof t,I=Array.isArray,_=t=>I(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),B="[ \t\n\f\r]",W=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,K=/-->/g,P=/>/g,z=RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),D=/'/g,H=/"/g,Z=/^(?:script|style|textarea|title)$/i,V=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),J=Symbol.for("lit-noChange"),q=Symbol.for("lit-nothing"),G=new WeakMap,X=T.createTreeWalker(T,129,null,!1),Q=(t,e)=>{const i=t.length-1,s=[];let n,o=2===e?"<svg>":"",r=W;for(let e=0;e<i;e++){const i=t[e];let l,h,a=-1,c=0;for(;c<i.length&&(r.lastIndex=c,h=r.exec(i),null!==h);)c=r.lastIndex,r===W?"!--"===h[1]?r=K:void 0!==h[1]?r=P:void 0!==h[2]?(Z.test(h[2])&&(n=RegExp("</"+h[2],"g")),r=z):void 0!==h[3]&&(r=z):r===z?">"===h[0]?(r=null!=n?n:W,a=-1):void 0===h[1]?a=-2:(a=r.lastIndex-h[2].length,l=h[1],r=void 0===h[3]?z:'"'===h[3]?H:D):r===H||r===D?r=z:r===K||r===P?r=W:(r=z,n=void 0);const u=r===z&&t[e+1].startsWith("/>")?" ":"";o+=r===W?i+F:a>=0?(s.push(l),i.slice(0,a)+k+i.slice(a)+U+u):i+U+(-2===a?(s.push(void 0),e):u)}const l=o+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==M?M.createHTML(l):l,s]};class Y{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let n=0,o=0;const r=t.length-1,l=this.parts,[h,a]=Q(t,e);if(this.el=Y.createElement(h,i),X.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=X.nextNode())&&l.length<r;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith(k)||e.startsWith(U)){const i=a[o++];if(t.push(e),void 0!==i){const t=s.getAttribute(i.toLowerCase()+k).split(U),e=/([.?@])?(.*)/.exec(i);l.push({type:1,index:n,name:e[2],strings:t,ctor:"."===e[1]?nt:"?"===e[1]?rt:"@"===e[1]?lt:st})}else l.push({type:6,index:n})}for(const e of t)s.removeAttribute(e)}if(Z.test(s.tagName)){const t=s.textContent.split(U),e=t.length-1;if(e>0){s.textContent=R?R.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],L()),X.nextNode(),l.push({type:2,index:++n});s.append(t[e],L())}}}else if(8===s.nodeType)if(s.data===A)l.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(U,t+1));)l.push({type:7,index:n}),t+=U.length-1}n++}}static createElement(t,e){const i=T.createElement("template");return i.innerHTML=t,i}}function tt(t,e,i=t,s){var n,o,r,l;if(e===J)return e;let h=void 0!==s?null===(n=i._$Co)||void 0===n?void 0:n[s]:i._$Cl;const a=j(e)?void 0:e._$litDirective$;return(null==h?void 0:h.constructor)!==a&&(null===(o=null==h?void 0:h._$AO)||void 0===o||o.call(h,!1),void 0===a?h=void 0:(h=new a(t),h._$AT(t,i,s)),void 0!==s?(null!==(r=(l=i)._$Co)&&void 0!==r?r:l._$Co=[])[s]=h:i._$Cl=h),void 0!==h&&(e=tt(t,h._$AS(t,e.values),h,s)),e}class et{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var e;const{el:{content:i},parts:s}=this._$AD,n=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:T).importNode(i,!0);X.currentNode=n;let o=X.nextNode(),r=0,l=0,h=s[0];for(;void 0!==h;){if(r===h.index){let e;2===h.type?e=new it(o,o.nextSibling,this,t):1===h.type?e=new h.ctor(o,h.name,h.strings,this,t):6===h.type&&(e=new ht(o,this,t)),this._$AV.push(e),h=s[++l]}r!==(null==h?void 0:h.index)&&(o=X.nextNode(),r++)}return n}v(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class it{constructor(t,e,i,s){var n;this.type=2,this._$AH=q,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cp=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._$Cp}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=tt(this,t,e),j(t)?t===q||null==t||""===t?(this._$AH!==q&&this._$AR(),this._$AH=q):t!==this._$AH&&t!==J&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):_(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==q&&j(this._$AH)?this._$AA.nextSibling.data=t:this.$(T.createTextNode(t)),this._$AH=t}g(t){var e;const{values:i,_$litType$:s}=t,n="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=Y.createElement(s.h,this.options)),s);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===n)this._$AH.v(i);else{const t=new et(n,this),e=t.u(this.options);t.v(i),this.$(e),this._$AH=t}}_$AC(t){let e=G.get(t.strings);return void 0===e&&G.set(t.strings,e=new Y(t)),e}T(t){I(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 it(this.k(L()),this.k(L()),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._$Cp=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class st{constructor(t,e,i,s,n){this.type=1,this._$AH=q,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=q}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=tt(this,t,e,0),o=!j(t)||t!==this._$AH&&t!==J,o&&(this._$AH=t);else{const s=t;let r,l;for(t=n[0],r=0;r<n.length-1;r++)l=tt(this,s[i+r],e,r),l===J&&(l=this._$AH[r]),o||(o=!j(l)||l!==this._$AH[r]),l===q?t=q:t!==q&&(t+=(null!=l?l:"")+n[r+1]),this._$AH[r]=l}o&&!s&&this.j(t)}j(t){t===q?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class nt extends st{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===q?void 0:t}}const ot=R?R.emptyScript:"";class rt extends st{constructor(){super(...arguments),this.type=4}j(t){t&&t!==q?this.element.setAttribute(this.name,ot):this.element.removeAttribute(this.name)}}class lt extends st{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=tt(this,t,e,0))&&void 0!==i?i:q)===J)return;const s=this._$AH,n=t===q&&s!==q||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,o=t!==q&&(s===q||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 ht{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){tt(this,t)}}const at={O:k,P:U,A,C:1,M:Q,L:et,D:_,R:tt,I:it,V:st,H:rt,N:lt,U:nt,F:ht},ct=$.litHtmlPolyfillSupport;null==ct||ct(Y,it),(null!==(S=$.litHtmlVersions)&&void 0!==S?S:$.litHtmlVersions=[]).push("2.7.3");
|
|
61
61
|
/**
|
|
62
62
|
* @license
|
|
63
63
|
* Copyright 2017 Google LLC
|
|
@@ -117,7 +117,7 @@ const Et=2,St=t=>(...e)=>({_$litDirective$:t,values:e});class $t{constructor(t){
|
|
|
117
117
|
* Copyright 2017 Google LLC
|
|
118
118
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
119
119
|
*/
|
|
120
|
-
class jt extends $t{constructor(t){if(super(t),this.et=q,t.type!==Et)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===q||null==t)return this.ft=void 0,this.et=t;if(t===J)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.et)return this.ft;this.et=t;const e=[t];return e.raw=e,this.ft={_$litType$:this.constructor.resultType,strings:e,values:[]}}}jt.directiveName="unsafeHTML",jt.resultType=1;const It=St(jt),_t={padding:vt.create("--ft-infinite-scroll-padding","SIZE","0"),itemsGap:vt.create("--ft-infinite-scroll-items-gap","SIZE","4px")},Bt=f`
|
|
120
|
+
class jt extends $t{constructor(t){if(super(t),this.et=q,t.type!==Et)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===q||null==t)return this.ft=void 0,this.et=t;if(t===J)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.et)return this.ft;this.et=t;const e=[t];return e.raw=e,this.ft={_$litType$:this.constructor.resultType,strings:e,values:[]}}}jt.directiveName="unsafeHTML",jt.resultType=1;const It=St(jt),_t={padding:vt.create("--ft-infinite-scroll-padding","SIZE","0"),itemsGap:vt.create("--ft-infinite-scroll-items-gap","SIZE","4px"),itemContainerMinHeight:vt.create("--ft-infinite-scroll-item-container-min-height","SIZE",".1px")},Bt=f`
|
|
121
121
|
.items-container {
|
|
122
122
|
position: relative;
|
|
123
123
|
padding: ${_t.padding};
|
|
@@ -153,24 +153,24 @@ class jt extends $t{constructor(t){if(super(t),this.et=q,t.type!==Et)throw Error
|
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
.item-container, .resizable.rendered {
|
|
156
|
-
min-height: .
|
|
156
|
+
min-height: ${_t.itemContainerMinHeight}
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
.rendered {
|
|
160
160
|
display: flow-root;
|
|
161
161
|
}
|
|
162
|
-
`;var Wt=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};class Kt extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class Pt extends Event{constructor(){super("scrolled-to-target")}}class zt extends Ot{constructor(){super(...arguments),this.items=[],this.renderItem=()=>
|
|
162
|
+
`;var Wt=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};class Kt extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class Pt extends Event{constructor(){super("scrolled-to-target")}}class zt extends Ot{constructor(){super(...arguments),this.items=[],this.renderItem=()=>V``,this.getItemKey=(t,e)=>`${e} - ${JSON.stringify(t)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e(5),this.scrollDoneDebouncer=new e(10),this.onVisibilityChange=t=>{let e=new Set(this.visibleItems),i=new Set;for(let s of t){let t=+s.target.attributes.getNamedItem("data-item-index").value;s.intersectionRect.height>0?(e.add(t),i.add(t)):i.has(t)||e.delete(t)}this.visibleItems=[...e].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let e=this.searchFirstVisibleItem([...this.itemsContainer.children]),i=this.scrollable.scrollTop-this.getOffset(e);for(const e of t){const t=+e.target.parentElement.getAttribute("data-item-index");(this.alreadyRenderedIndexes.has(t)||e.target.classList.contains("rendered"))&&setTimeout((()=>e.target.parentElement.style.height=e.target.clientHeight+"px"),0)}setTimeout((()=>{null!=e&&null!=i&&this.scrolledToTarget&&(this.scrollable.scrollTop=this.getOffset(e)+Math.min(i,e.clientHeight))}),0)},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 e(10)}get scrollable(){var t;return null!==(t=this.internalScroll?this.internalScrollable:this.firstScrollableParent)&&void 0!==t?t:document.body}render(){return V`
|
|
163
163
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
164
164
|
tabindex="-1"
|
|
165
165
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
166
166
|
${Lt(this.items,((t,e)=>this.getItemKey(t,e)),((t,e)=>this.renderItemContainer(t,e)))}
|
|
167
167
|
</div>
|
|
168
|
-
`}renderItemContainer(t,e){const i=this.scrolledToTarget&&this.visibleItems.includes(e),s=this.alreadyRenderedIndexes.has(e)||this.scrolledToTarget&&e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=(null!=(n=this.visibleItems)?n:[])[(null!=n?n:[]).length-1]+this.renderAfterLast;var n;s&&this.alreadyRenderedIndexes.add(e);return
|
|
168
|
+
`}renderItemContainer(t,e){const i=this.scrolledToTarget&&this.visibleItems.includes(e),s=this.alreadyRenderedIndexes.has(e)||this.scrolledToTarget&&e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=(null!=(n=this.visibleItems)?n:[])[(null!=n?n:[]).length-1]+this.renderAfterLast;var n;s&&this.alreadyRenderedIndexes.add(e);return V`
|
|
169
169
|
<div id="item-${e}"
|
|
170
170
|
class="item-container ${i?"visible":""}"
|
|
171
171
|
data-item-index="${e}">
|
|
172
172
|
<div class="resizable ${i?"visible":""} ${s?"rendered":""}">
|
|
173
|
-
${s?(()=>{const i=this.renderItem(t,e);return"string"==typeof i?
|
|
173
|
+
${s?(()=>{const i=this.renderItem(t,e);return"string"==typeof i?V`${It(i)}`:i})():null}
|
|
174
174
|
</div>
|
|
175
175
|
</div>
|
|
176
176
|
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t;let e=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;e>=this.items.length&&(e=-1);let i=this.getItem(e);this.scrollToTarget(i),this.scrollDoneDebouncer.run((()=>{this.onMutation(),this.scrolledToTarget=!0}))}))}getItem(t){var e;return null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${t}`)}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable&&0===i?this.scrollable.scrollTop=0:this.scrollable.scrollTop=this.getOffset(t)}}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}getBottomOffset(t){var e;return this.getOffset(t)+(null!==(e=null==t?void 0:t.clientHeight)&&void 0!==e?e: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 e,i;t.stopPropagation();for(let s of t.composedPath()){const t=s,n=this.elementCanScroll(t);if(t.clientHeight&&t.clientHeight<t.scrollHeight&&n){e=t;break}n&&(i=t)}let s=e||i;s!==this.firstScrollableParent&&(this.firstScrollableParent=s,this.initIntersectionObserver(),this.resetScroll())}elementCanScroll(t){try{return["auto","scroll"].includes(getComputedStyle(t).overflowY)}catch(t){return!1}}searchFirstVisibleItem(t,e,i){if(e=null!=e?e:0,(i=null!=i?i:t.length-1)-e<=0)return t[e];const s=Math.floor((i-e)/2)+e;return this.getOffset(t[s])>this.scrollable.scrollTop?this.searchFirstVisibleItem(t,e,s-1):this.getBottomOffset(t[s])<this.scrollable.scrollTop?this.searchFirstVisibleItem(t,s+1,i):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 Pt)}onVisibleItemsChange(){const t=this.visibleItems.every(((t,e)=>null==this.visibleItems[e+1]||t+1===this.visibleItems[e+1]));t||l(this.visibleItems,this.lastNotOkVisibleItems)?(this.resetVisibleItemsDebouncer.cancel(),this.dispatchEvent(new Kt(this.visibleItems,this.visibleItems.map((t=>this.items[t]))))):this.resetVisibleItemsDebouncer.run((()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.initIntersectionObserver(),this.onMutation()}))}}var Dt;zt.styles=Bt,Wt([s({type:Array})],zt.prototype,"items",void 0),Wt([s({attribute:!1})],zt.prototype,"renderItem",void 0),Wt([s({attribute:!1})],zt.prototype,"getItemKey",void 0),Wt([s({type:Object})],zt.prototype,"scrollToItem",void 0),Wt([s({type:Number})],zt.prototype,"scrollToIndex",void 0),Wt([s({type:Boolean})],zt.prototype,"internalScroll",void 0),Wt([s({type:Number})],zt.prototype,"renderBeforeFirst",void 0),Wt([s({type:Number})],zt.prototype,"renderAfterLast",void 0),Wt([n({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],zt.prototype,"visibleItems",void 0),Wt([o(".scrollable")],zt.prototype,"internalScrollable",void 0),Wt([o(".items-container")],zt.prototype,"itemsContainer",void 0),Wt([n()],zt.prototype,"scrolledToTarget",void 0),(Dt="ft-infinite-scroll",t=>{window.customElements.get(Dt)||window.customElements.define(Dt,t)})(zt),t.FtInfiniteScroll=zt,t.FtInfiniteScrollCssVariables=_t,t.ScrolledToTargetEvent=Pt,t.VisibleItemsChangeEvent=Kt,t.styles=Bt}({});
|
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.26",
|
|
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.26",
|
|
23
23
|
"lit": "2.7.2"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "c7cb9f427774f5e53e8badbc05fc1024c737d7bc"
|
|
26
26
|
}
|