@fluid-topics/ft-infinite-scroll 0.1.5 → 0.1.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.
|
@@ -8,7 +8,7 @@ import { css, html } from "lit";
|
|
|
8
8
|
import { property, query, state } from "lit/decorators.js";
|
|
9
9
|
import { repeat } from "lit/directives/repeat.js";
|
|
10
10
|
import { customElement, FtCssVariable, FtLitElement, isSafari } from "@fluid-topics/ft-wc-utils";
|
|
11
|
-
import { unsafeHTML } from "lit
|
|
11
|
+
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
12
12
|
export const FtInfiniteScrollCssVariables = {
|
|
13
13
|
padding: FtCssVariable.create("--ft-infinite-scroll-padding", "SIZE", "0"),
|
|
14
14
|
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
!function(t,i,s,e,l,h){var o=function(t,i,s,e){for(var l,h=arguments.length,o=h<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,r=t.length-1;r>=0;r--)(l=t[r])&&(o=(h<3?l(o):h>3?l(i,s,o):l(i,s))||o);return h>3&&o&&Object.defineProperty(i,s,o),o};const r={padding:l.FtCssVariable.create("--ft-infinite-scroll-padding","SIZE","0")};class n extends CustomEvent{constructor(t,i){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:i}})}}t.FtInfiniteScroll=class extends l.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>i.html``,this.internalScrollToIndex=0,this.visibleItems=[],this.scrolledToTarget=!1,this.onVisibilityChange=t=>{const i=t.filter((t=>t.isIntersecting)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),s=t.filter((t=>!t.isIntersecting)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),e=[...this.visibleItems].filter((t=>!s.includes(t)));this.visibleItems=[...i,...e].sort(((t,i)=>t-i))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{let i=0;for(const s of t){let t=s.target.parentElement.clientHeight,e=s.contentRect.height;s.target.classList.contains("visible")&&(s.target.parentElement.style.height=e+"px",i+=s.target.parentElement.offsetTop<this.scrollable.scrollTop?t-e:0)}l.isSafari&&(this.scrollable.scrollTop-=i)},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.scrollable.children].forEach((t=>{this.intersectionObserver.observe(t),this.resizeObserver.observe(t.children.item(0))}))},this.mutationObserver=new MutationObserver(this.onMutation)}getStyles(){return i.css`
|
|
2
|
+
.scrollable {
|
|
3
|
+
height: 100%;
|
|
4
|
+
overflow-y: auto;
|
|
5
|
+
position: relative;
|
|
6
|
+
padding: ${r.padding};
|
|
7
|
+
outline: none;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.item-container {
|
|
11
|
+
height: 100%;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.resizable:not(.visible) {
|
|
15
|
+
width: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.resizable:not(.visible) > * {
|
|
19
|
+
display: none;
|
|
20
|
+
}
|
|
21
|
+
`}getTemplate(){return i.html`
|
|
22
|
+
<div class="scrollable" tabindex="-1">
|
|
23
|
+
${e.repeat(this.items,((t,i)=>this.renderItemContainer(t,i)))}
|
|
24
|
+
</div>
|
|
25
|
+
`}renderItemContainer(t,s){const e=this.scrolledToTarget&&(this.visibleItems.includes(s)||this.visibleItems[0]===s+1||(l=this.visibleItems)[l.length-1]===s-1);var l;return i.html`
|
|
26
|
+
<div id="item-${s}"
|
|
27
|
+
class="item-container"
|
|
28
|
+
data-item-index="${s}">
|
|
29
|
+
<div class="resizable ${e?"visible":""}">
|
|
30
|
+
${e?(()=>{const e=this.renderItem(t,s);return"string"==typeof e?i.html`${h.unsafeHTML(e)}`:e})():null}
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
`}resetScroll(){var t;this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.internalScrollToIndex=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):0,(this.internalScrollToIndex<0||this.internalScrollToIndex>=this.items.length)&&(this.internalScrollToIndex=0),this.scrolledToTarget=!1}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable}),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.scrollable,{childList:!0})}),0)}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("scrollToItem")||t.has("scrollToIndex"))&&this.resetScroll()}updated(t){super.updated(t),this.scrolledToTarget||setTimeout((()=>{var t;if(0===this.internalScrollToIndex)this.scrollable.scrollTop=0;else{let i=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(`#item-${this.internalScrollToIndex}`);this.scrollable.scrollTop=i.offsetTop}this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),50)}),50),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new n(this.visibleItems,this.visibleItems.map((t=>this.items[t]))))}},o([s.property({type:Array})],t.FtInfiniteScroll.prototype,"items",void 0),o([s.property({attribute:!1})],t.FtInfiniteScroll.prototype,"renderItem",void 0),o([s.property({type:Object})],t.FtInfiniteScroll.prototype,"scrollToItem",void 0),o([s.property({type:Number})],t.FtInfiniteScroll.prototype,"scrollToIndex",void 0),o([s.state()],t.FtInfiniteScroll.prototype,"visibleItems",void 0),o([s.query(".scrollable")],t.FtInfiniteScroll.prototype,"scrollable",void 0),o([s.state()],t.FtInfiniteScroll.prototype,"scrolledToTarget",void 0),t.FtInfiniteScroll=o([l.customElement("ft-infinite-scroll")],t.FtInfiniteScroll),t.FtInfiniteScrollCssVariables=r,t.VisibleItemsChangeEvent=n,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.wcUtils,ftGlobals.litUnsafeHTML);
|
|
@@ -65,12 +65,58 @@ const lt=2,at=t=>(...i)=>({_$litDirective$:t,values:i});class ht{constructor(t){
|
|
|
65
65
|
* Copyright 2021 Google LLC
|
|
66
66
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
67
67
|
*/
|
|
68
|
-
function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:i,elementDefinitions:e,shadowRootOptions:s}=t;e&&!i&&(t.registry=new CustomElementRegistry,Object.entries(e).forEach((([i,e])=>t.registry.define(i,e))));const n=this.renderOptions.creationScope=this.attachShadow({...s,customElements:t.registry});return l(n,this.constructor.elementStyles),n}}}(it)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),A
|
|
68
|
+
function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:i,elementDefinitions:e,shadowRootOptions:s}=t;e&&!i&&(t.registry=new CustomElementRegistry,Object.entries(e).forEach((([i,e])=>t.registry.define(i,e))));const n=this.renderOptions.creationScope=this.attachShadow({...s,customElements:t.registry});return l(n,this.constructor.elementStyles),n}}}(it)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),A`
|
|
69
|
+
${t.map((t=>A`
|
|
70
|
+
<style>${t}</style>
|
|
71
|
+
`))}
|
|
72
|
+
${this.getTemplate()}
|
|
73
|
+
`}adoptedCallback(){Object.getPrototypeOf(this)!==this.constructorName&&Object.setPrototypeOf(this,this.proto)}updated(t){super.updated(t),setTimeout((()=>this.contentAvailableCallback(t)),0)}contentAvailableCallback(t){}}var xt,gt,Ot;r`
|
|
74
|
+
.ft-no-text-select {
|
|
75
|
+
-webkit-touch-callout: none;
|
|
76
|
+
-webkit-user-select: none;
|
|
77
|
+
-khtml-user-select: none;
|
|
78
|
+
-moz-user-select: none;
|
|
79
|
+
-ms-user-select: none;
|
|
80
|
+
user-select: none;
|
|
81
|
+
}
|
|
82
|
+
`;const Rt=navigator.vendor&&!!navigator.vendor.match(/apple/i)||"[object SafariRemoteNotification]"===(null!==(Ot=null===(gt=null===(xt=window.safari)||void 0===xt?void 0:xt.pushNotification)||void 0===gt?void 0:gt.toString())&&void 0!==Ot?Ot:"");
|
|
69
83
|
/**
|
|
70
84
|
* @license
|
|
71
85
|
* Copyright 2017 Google LLC
|
|
72
86
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
73
|
-
*/class Nt extends ht{constructor(t){if(super(t),this.it=_,t.type!==lt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===_||null==t)return this.vt=void 0,this.it=t;if(t===L)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this.vt;this.it=t;const i=[t];return i.raw=i,this.vt={_$litType$:this.constructor.resultType,strings:i,values:[]}}}Nt.directiveName="unsafeHTML",Nt.resultType=1;const Et=at(Nt);var Ct=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};const St={padding:wt.create("--ft-infinite-scroll-padding","SIZE","0")};class Mt extends CustomEvent{constructor(t,i){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:i}})}}var $t;t.FtInfiniteScroll=class extends yt{constructor(){super(...arguments),this.items=[],this.renderItem=()=>A``,this.internalScrollToIndex=0,this.visibleItems=[],this.scrolledToTarget=!1,this.onVisibilityChange=t=>{const i=t.filter((t=>t.isIntersecting)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),e=t.filter((t=>!t.isIntersecting)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!e.includes(t)));this.visibleItems=[...i,...s].sort(((t,i)=>t-i))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{let i=0;for(const e of t){let t=e.target.parentElement.clientHeight,s=e.contentRect.height;e.target.classList.contains("visible")&&(e.target.parentElement.style.height=s+"px",i+=e.target.parentElement.offsetTop<this.scrollable.scrollTop?t-s:0)}Rt&&(this.scrollable.scrollTop-=i)},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.scrollable.children].forEach((t=>{this.intersectionObserver.observe(t),this.resizeObserver.observe(t.children.item(0))}))},this.mutationObserver=new MutationObserver(this.onMutation)}getStyles(){return r
|
|
87
|
+
*/class Nt extends ht{constructor(t){if(super(t),this.it=_,t.type!==lt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===_||null==t)return this.vt=void 0,this.it=t;if(t===L)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this.vt;this.it=t;const i=[t];return i.raw=i,this.vt={_$litType$:this.constructor.resultType,strings:i,values:[]}}}Nt.directiveName="unsafeHTML",Nt.resultType=1;const Et=at(Nt);var Ct=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};const St={padding:wt.create("--ft-infinite-scroll-padding","SIZE","0")};class Mt extends CustomEvent{constructor(t,i){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:i}})}}var $t;t.FtInfiniteScroll=class extends yt{constructor(){super(...arguments),this.items=[],this.renderItem=()=>A``,this.internalScrollToIndex=0,this.visibleItems=[],this.scrolledToTarget=!1,this.onVisibilityChange=t=>{const i=t.filter((t=>t.isIntersecting)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),e=t.filter((t=>!t.isIntersecting)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!e.includes(t)));this.visibleItems=[...i,...s].sort(((t,i)=>t-i))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{let i=0;for(const e of t){let t=e.target.parentElement.clientHeight,s=e.contentRect.height;e.target.classList.contains("visible")&&(e.target.parentElement.style.height=s+"px",i+=e.target.parentElement.offsetTop<this.scrollable.scrollTop?t-s:0)}Rt&&(this.scrollable.scrollTop-=i)},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.scrollable.children].forEach((t=>{this.intersectionObserver.observe(t),this.resizeObserver.observe(t.children.item(0))}))},this.mutationObserver=new MutationObserver(this.onMutation)}getStyles(){return r`
|
|
88
|
+
.scrollable {
|
|
89
|
+
height: 100%;
|
|
90
|
+
overflow-y: auto;
|
|
91
|
+
position: relative;
|
|
92
|
+
padding: ${St.padding};
|
|
93
|
+
outline: none;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.item-container {
|
|
97
|
+
height: 100%;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.resizable:not(.visible) {
|
|
101
|
+
width: 0;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.resizable:not(.visible) > * {
|
|
105
|
+
display: none;
|
|
106
|
+
}
|
|
107
|
+
`}getTemplate(){return A`
|
|
108
|
+
<div class="scrollable" tabindex="-1">
|
|
109
|
+
${mt(this.items,((t,i)=>this.renderItemContainer(t,i)))}
|
|
110
|
+
</div>
|
|
111
|
+
`}renderItemContainer(t,i){const e=this.scrolledToTarget&&(this.visibleItems.includes(i)||this.visibleItems[0]===i+1||(s=this.visibleItems)[s.length-1]===i-1);var s;return A`
|
|
112
|
+
<div id="item-${i}"
|
|
113
|
+
class="item-container"
|
|
114
|
+
data-item-index="${i}">
|
|
115
|
+
<div class="resizable ${e?"visible":""}">
|
|
116
|
+
${e?(()=>{const e=this.renderItem(t,i);return"string"==typeof e?A`${Et(e)}`:e})():null}
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
`}resetScroll(){var t;this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.internalScrollToIndex=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):0,(this.internalScrollToIndex<0||this.internalScrollToIndex>=this.items.length)&&(this.internalScrollToIndex=0),this.scrolledToTarget=!1}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable}),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.scrollable,{childList:!0})}),0)}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("scrollToItem")||t.has("scrollToIndex"))&&this.resetScroll()}updated(t){super.updated(t),this.scrolledToTarget||setTimeout((()=>{var t;if(0===this.internalScrollToIndex)this.scrollable.scrollTop=0;else{let i=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(`#item-${this.internalScrollToIndex}`);this.scrollable.scrollTop=i.offsetTop}this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),50)}),50),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new Mt(this.visibleItems,this.visibleItems.map((t=>this.items[t]))))}},Ct([nt({type:Array})],t.FtInfiniteScroll.prototype,"items",void 0),Ct([nt({attribute:!1})],t.FtInfiniteScroll.prototype,"renderItem",void 0),Ct([nt({type:Object})],t.FtInfiniteScroll.prototype,"scrollToItem",void 0),Ct([nt({type:Number})],t.FtInfiniteScroll.prototype,"scrollToIndex",void 0),Ct([ot()],t.FtInfiniteScroll.prototype,"visibleItems",void 0),Ct([
|
|
74
120
|
/**
|
|
75
121
|
* @license
|
|
76
122
|
* Copyright 2017 Google LLC
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-infinite-scroll",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.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.1.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "^0.1.8",
|
|
23
23
|
"lit": "^2.0.2"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "45fdf008556920bbd5fcc2e766c273aed959178d"
|
|
26
26
|
}
|