@fluid-topics/ft-reader-content 0.3.66 → 0.3.68
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,4 +1,4 @@
|
|
|
1
|
-
!function(t,e,i,s,r,n){var o=function(t,e,i,s){for(var r,n=arguments.length,o=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(n<3?r(o):n>3?r(e,i,o):r(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o};class l extends Event{constructor(){super("register-ft-reader-component",{bubbles:!0,composed:!0})}}class h extends(function(t){class e extends t{constructor(){super(...arguments),this.registerIntervalReader=0}setReaderStateManager(t){this.clearStateManager(),this.stateManager=t,this.addStore(t.store,"reader")}clearStateManager(){this.stateManager&&(this.removeStore("reader"),this.stateManager=void 0)}get service(){var t;return null===(t=this.stateManager)||void 0===t?void 0:t.service}connectedCallback(){super.connectedCallback(),this.registerIntervalReader=window.setInterval((()=>this.tryToRegisterToContext()),50)}tryToRegisterToContext(){null!=this.stateManager?window.clearInterval(this.registerIntervalReader):this.dispatchEvent(new l)}disconnectedCallback(){super.disconnectedCallback(),this.clearStateManager()}}return o([s.state()],e.prototype,"stateManager",void 0),e}(e.FtLitElementRedux)){}const a=e.FtCssVariableFactory.create("--ft-infinite-scroll-padding","SIZE","0"),d=i.css`
|
|
1
|
+
!function(t,e,i,s,r,n){var o=function(t,e,i,s){for(var r,n=arguments.length,o=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(n<3?r(o):n>3?r(e,i,o):r(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o};class l extends Event{constructor(){super("register-ft-reader-component",{bubbles:!0,composed:!0})}}class h extends(function(t){class e extends t{constructor(){super(...arguments),this.registerIntervalReader=0}setReaderStateManager(t){this.clearStateManager(),this.stateManager=t,this.addStore(t.store,"reader")}clearStateManager(){this.stateManager&&(this.removeStore("reader"),this.stateManager=void 0)}get service(){var t;return null===(t=this.stateManager)||void 0===t?void 0:t.service}connectedCallback(){super.connectedCallback(),this.registerIntervalReader=window.setInterval((()=>this.tryToRegisterToContext()),50)}tryToRegisterToContext(){null!=this.stateManager?window.clearInterval(this.registerIntervalReader):this.dispatchEvent(new l)}disconnectedCallback(){super.disconnectedCallback(),this.clearStateManager()}}return o([s.state()],e.prototype,"stateManager",void 0),e}(e.FtLitElementRedux)){}const a=e.FtCssVariableFactory.create("--ft-infinite-scroll-padding","SIZE","0"),d=e.FtCssVariableFactory.create("--ft-infinite-scroll-items-gap","SIZE","4px"),c=i.css`
|
|
2
2
|
.items-container {
|
|
3
3
|
position: relative;
|
|
4
4
|
padding: ${a};
|
|
@@ -19,19 +19,24 @@
|
|
|
19
19
|
We add a gap between items to be sure to hide the content above the targeted item
|
|
20
20
|
When a div is visible (even by a fraction of a pixel) if its height changes
|
|
21
21
|
the browser will try to keep the scroll stable in relation to the first visible element
|
|
22
|
-
By adding this gap we ensure that the previous item will be fully hidden
|
|
22
|
+
By adding this gap we ensure that the previous item will be fully hidden
|
|
23
|
+
and even if its size changes, it will not impact the scroll offset
|
|
23
24
|
*/
|
|
24
|
-
margin-top:
|
|
25
|
+
margin-top: ${d};
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
.resizable:not(.rendered) {
|
|
28
29
|
width: 0;
|
|
29
30
|
}
|
|
30
31
|
|
|
32
|
+
.resizable > * {
|
|
33
|
+
min-height: .1px;
|
|
34
|
+
}
|
|
35
|
+
|
|
31
36
|
.rendered {
|
|
32
37
|
display: flow-root;
|
|
33
38
|
}
|
|
34
|
-
`;var
|
|
39
|
+
`;var v=function(t,e,i,s){for(var r,n=arguments.length,o=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(n<3?r(o):n>3?r(e,i,o):r(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o};class u extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class f extends Event{constructor(){super("scrolled-to-target")}}class p extends e.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>i.html``,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=>{var e;this.triggerFindScrollableParent(),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,r=i.contentRect.height;if(this.alreadyRenderedIndexes.has(t)){if(this.scrollable){"none"===(null!==(e=getComputedStyle(this.scrollable).overflowAnchor)&&void 0!==e?e:"none")&&this.getOffset(i.target.parentElement)+s<this.scrollable.scrollTop&&(this.scrollable.scrollTop+=Math.ceil(r-s))}i.target.parentElement.style.height=r+"px"}}},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`
|
|
35
40
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
36
41
|
tabindex="-1"
|
|
37
42
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
@@ -45,13 +50,13 @@
|
|
|
45
50
|
${r?(()=>{const s=this.renderItem(t,e);return"string"==typeof s?i.html`${n.unsafeHTML(s)}`:s})():null}
|
|
46
51
|
</div>
|
|
47
52
|
</div>
|
|
48
|
-
`}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.onMutation(),this.scrollDoneDebouncer.run((()=>{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: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.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]})}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,r=this.elementCanScroll(t);if(t.clientHeight&&t.clientHeight<t.scrollHeight&&r){e=t;break}r&&(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}}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.dispatchEvent(new
|
|
49
|
-
`,
|
|
50
|
-
`;var
|
|
53
|
+
`}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.onMutation(),this.scrollDoneDebouncer.run((()=>{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: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.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,r=this.elementCanScroll(t);if(t.clientHeight&&t.clientHeight<t.scrollHeight&&r){e=t;break}r&&(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}}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.dispatchEvent(new u(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&(null!=this.scrollToItem||null!=this.scrollToIndex)&&this.dispatchEvent(new f)}}p.styles=c,v([s.property({type:Array})],p.prototype,"items",void 0),v([s.property({attribute:!1})],p.prototype,"renderItem",void 0),v([s.property({type:Object})],p.prototype,"scrollToItem",void 0),v([s.property({type:Number})],p.prototype,"scrollToIndex",void 0),v([s.property({type:Boolean})],p.prototype,"internalScroll",void 0),v([s.property({type:Number})],p.prototype,"renderBeforeFirst",void 0),v([s.property({type:Number})],p.prototype,"renderAfterLast",void 0),v([s.state({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],p.prototype,"visibleItems",void 0),v([s.query(".scrollable")],p.prototype,"internalScrollable",void 0),v([s.query(".items-container")],p.prototype,"itemsContainer",void 0),v([s.state()],p.prototype,"scrolledToTarget",void 0),e.customElement("ft-infinite-scroll")(p);const b=i.css`
|
|
54
|
+
`,m=i.css`
|
|
55
|
+
`;var g=function(t,e,i,s){for(var r,n=arguments.length,o=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(n<3?r(o):n>3?r(e,i,o):r(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o};class x extends h{constructor(){super(...arguments),this.disableContextInteractions=!1,this.registeredComponents=[]}render(){return i.html`
|
|
51
56
|
<article id=${this.tocId}>
|
|
52
57
|
<slot @register-ft-reader-topic-component=${this.registerComponent}></slot>
|
|
53
58
|
</article>
|
|
54
|
-
`}registerComponent(t){t.stopPropagation();const e=t.composedPath()[0];this.register(e)}register(t){this.registeredComponents.push(t),t.tocNode=this.tocNode,t.disableContextInteractions=this.disableContextInteractions}updated(t){super.updated(t),["mapId","tocId","stateManager"].some((e=>t.has(e)))&&this.setTocNode(),t.has("tocNode")&&this.registeredComponents.forEach((t=>t.tocNode=this.tocNode))}async setTocNode(){var t;this.tocNode=void 0,this.tocNode=this.mapId&&this.tocId?await(null===(t=this.service)||void 0===t?void 0:t.getTocNode(this.tocId)):void 0}disconnectedCallback(){super.disconnectedCallback(),this.registeredComponents=[]}}
|
|
59
|
+
`}registerComponent(t){t.stopPropagation();const e=t.composedPath()[0];this.register(e)}register(t){this.registeredComponents.push(t),t.tocNode=this.tocNode,t.disableContextInteractions=this.disableContextInteractions}updated(t){super.updated(t),["mapId","tocId","stateManager"].some((e=>t.has(e)))&&this.setTocNode(),t.has("tocNode")&&this.registeredComponents.forEach((t=>t.tocNode=this.tocNode))}async setTocNode(){var t;this.tocNode=void 0,this.tocNode=this.mapId&&this.tocId?await(null===(t=this.service)||void 0===t?void 0:t.getTocNode(this.tocId)):void 0}disconnectedCallback(){super.disconnectedCallback(),this.registeredComponents=[]}}x.styles=m,g([e.redux((t=>{var e;return null===(e=t.map)||void 0===e?void 0:e.id}))],x.prototype,"mapId",void 0),g([s.property()],x.prototype,"tocId",void 0),g([s.property({type:Boolean})],x.prototype,"disableContextInteractions",void 0),g([s.state()],x.prototype,"tocNode",void 0),e.customElement("ft-reader-topic-context")(x);var w=function(t,e,i,s){for(var r,n=arguments.length,o=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(n<3?r(o):n>3?r(e,i,o):r(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o};class I extends h{constructor(){super(...arguments),this.renderTopic=()=>i.html`
|
|
55
60
|
<ft-reader-topic-title></ft-reader-topic-title>
|
|
56
61
|
<ft-reader-topic-content></ft-reader-topic-content>
|
|
57
62
|
`,this.disableContextInteractions=!1,this.renderBeforeFirst=5,this.renderAfterLast=10,this.visibleTopicsDebouncer=new e.Debouncer(100)}render(){var t;const e=(null===(t=this.currentPage)||void 0===t?void 0:t.topics)||[];return 0===e.length?i.nothing:i.html`
|
|
@@ -70,4 +75,4 @@
|
|
|
70
75
|
<ft-reader-topic-context tocId="${t}" ?disableContextInteractions=${this.disableContextInteractions}>
|
|
71
76
|
${this.renderTopic(t,e)}
|
|
72
77
|
</ft-reader-topic-context>
|
|
73
|
-
`}getScrollTarget(){var t,e,i,s,r;if(this.disableContextInteractions)return null;const n=null!==(s=null===(t=this.visibleTopics)||void 0===t?void 0:t.includes(null!==(i=null===(e=this.scrollTarget)||void 0===e?void 0:e.tocId)&&void 0!==i?i:""))&&void 0!==s&&s;return!(null===(r=this.scrollTarget)||void 0===r?void 0:r.tocId)||n&&null!=this.scrollTarget.section?null:this.scrollTarget.tocId}visibleTopicChange(t){this.disableContextInteractions||this.visibleTopicsDebouncer.run((()=>{var e;return null===(e=this.stateManager)||void 0===e?void 0:e.setVisibleTopics(t.detail.visibleItems)}))}onScrollDone(){var t,e;this.disableContextInteractions||null!=(null===(t=this.scrollTarget)||void 0===t?void 0:t.section)||null===(e=this.stateManager)||void 0===e||e.scrollDone()}}I.elementDefinitions={"ft-infinite-scroll":p},I.styles=
|
|
78
|
+
`}getScrollTarget(){var t,e,i,s,r;if(this.disableContextInteractions)return null;const n=null!==(s=null===(t=this.visibleTopics)||void 0===t?void 0:t.includes(null!==(i=null===(e=this.scrollTarget)||void 0===e?void 0:e.tocId)&&void 0!==i?i:""))&&void 0!==s&&s;return!(null===(r=this.scrollTarget)||void 0===r?void 0:r.tocId)||n&&null!=this.scrollTarget.section?null:this.scrollTarget.tocId}visibleTopicChange(t){this.disableContextInteractions||this.visibleTopicsDebouncer.run((()=>{var e;return null===(e=this.stateManager)||void 0===e?void 0:e.setVisibleTopics(t.detail.visibleItems)}))}onScrollDone(){var t,e;this.disableContextInteractions||null!=(null===(t=this.scrollTarget)||void 0===t?void 0:t.section)||null===(e=this.stateManager)||void 0===e||e.scrollDone()}}I.elementDefinitions={"ft-infinite-scroll":p},I.styles=b,w([s.property()],I.prototype,"renderTopic",void 0),w([s.property({type:Boolean})],I.prototype,"disableContextInteractions",void 0),w([e.redux()],I.prototype,"currentPage",void 0),w([e.redux()],I.prototype,"scrollTarget",void 0),w([e.redux()],I.prototype,"visibleTopics",void 0),w([e.redux((t=>{var e,i;return null!==(i=null===(e=t.configuration)||void 0===e?void 0:e.loadBeforeFirstVisibleTopic)&&void 0!==i?i:5}))],I.prototype,"renderBeforeFirst",void 0),w([e.redux((t=>{var e,i;return null!==(i=null===(e=t.configuration)||void 0===e?void 0:e.loadAfterLastVisibleTopic)&&void 0!==i?i:5}))],I.prototype,"renderAfterLast",void 0),w([s.query(".ft-reader-content")],I.prototype,"container",void 0),e.customElement("ft-reader-content")(I),t.FtReaderContent=I,t.FtReaderContentCssVariables={},t.styles=b,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML);
|
|
@@ -127,7 +127,7 @@ function(t){return class extends t{createRenderRoot(){const t=this.constructor,{
|
|
|
127
127
|
* Copyright 2017 Google LLC
|
|
128
128
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
129
129
|
*/
|
|
130
|
-
class Lt extends Rt{constructor(t){if(super(t),this.it=V,t.type!==Nt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===V||null==t)return this._t=void 0,this.it=t;if(t===J)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:[]}}}Lt.directiveName="unsafeHTML",Lt.resultType=1;const Bt=Et(Lt),_t=ft.create("--ft-infinite-scroll-padding","SIZE","0"),Wt=v`
|
|
130
|
+
class Lt extends Rt{constructor(t){if(super(t),this.it=V,t.type!==Nt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===V||null==t)return this._t=void 0,this.it=t;if(t===J)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:[]}}}Lt.directiveName="unsafeHTML",Lt.resultType=1;const Bt=Et(Lt),_t=ft.create("--ft-infinite-scroll-padding","SIZE","0"),Wt=ft.create("--ft-infinite-scroll-items-gap","SIZE","4px"),Kt=v`
|
|
131
131
|
.items-container {
|
|
132
132
|
position: relative;
|
|
133
133
|
padding: ${_t};
|
|
@@ -148,19 +148,24 @@ class Lt extends Rt{constructor(t){if(super(t),this.it=V,t.type!==Nt)throw Error
|
|
|
148
148
|
We add a gap between items to be sure to hide the content above the targeted item
|
|
149
149
|
When a div is visible (even by a fraction of a pixel) if its height changes
|
|
150
150
|
the browser will try to keep the scroll stable in relation to the first visible element
|
|
151
|
-
By adding this gap we ensure that the previous item will be fully hidden
|
|
151
|
+
By adding this gap we ensure that the previous item will be fully hidden
|
|
152
|
+
and even if its size changes, it will not impact the scroll offset
|
|
152
153
|
*/
|
|
153
|
-
margin-top:
|
|
154
|
+
margin-top: ${Wt};
|
|
154
155
|
}
|
|
155
156
|
|
|
156
157
|
.resizable:not(.rendered) {
|
|
157
158
|
width: 0;
|
|
158
159
|
}
|
|
159
160
|
|
|
161
|
+
.resizable > * {
|
|
162
|
+
min-height: .1px;
|
|
163
|
+
}
|
|
164
|
+
|
|
160
165
|
.rendered {
|
|
161
166
|
display: flow-root;
|
|
162
167
|
}
|
|
163
|
-
`;var
|
|
168
|
+
`;var Pt=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};class Dt extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class zt extends Event{constructor(){super("scrolled-to-target")}}class Ht extends bt{constructor(){super(...arguments),this.items=[],this.renderItem=()=>Z``,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=>{var e;this.triggerFindScrollableParent(),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;if(this.alreadyRenderedIndexes.has(t)){if(this.scrollable){"none"===(null!==(e=getComputedStyle(this.scrollable).overflowAnchor)&&void 0!==e?e:"none")&&this.getOffset(i.target.parentElement)+s<this.scrollable.scrollTop&&(this.scrollable.scrollTop+=Math.ceil(n-s))}i.target.parentElement.style.height=n+"px"}}},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 Z`
|
|
164
169
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
165
170
|
tabindex="-1"
|
|
166
171
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
@@ -174,13 +179,13 @@ class Lt extends Rt{constructor(t){if(super(t),this.it=V,t.type!==Nt)throw Error
|
|
|
174
179
|
${s?(()=>{const i=this.renderItem(t,e);return"string"==typeof i?Z`${Bt(i)}`:i})():null}
|
|
175
180
|
</div>
|
|
176
181
|
</div>
|
|
177
|
-
`}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.onMutation(),this.scrollDoneDebouncer.run((()=>{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: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.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]})}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}}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.dispatchEvent(new
|
|
178
|
-
`,
|
|
179
|
-
`;var
|
|
182
|
+
`}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.onMutation(),this.scrollDoneDebouncer.run((()=>{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: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.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}}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.dispatchEvent(new Dt(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&(null!=this.scrollToItem||null!=this.scrollToIndex)&&this.dispatchEvent(new zt)}}Ht.styles=Kt,Pt([s({type:Array})],Ht.prototype,"items",void 0),Pt([s({attribute:!1})],Ht.prototype,"renderItem",void 0),Pt([s({type:Object})],Ht.prototype,"scrollToItem",void 0),Pt([s({type:Number})],Ht.prototype,"scrollToIndex",void 0),Pt([s({type:Boolean})],Ht.prototype,"internalScroll",void 0),Pt([s({type:Number})],Ht.prototype,"renderBeforeFirst",void 0),Pt([s({type:Number})],Ht.prototype,"renderAfterLast",void 0),Pt([n({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],Ht.prototype,"visibleItems",void 0),Pt([r(".scrollable")],Ht.prototype,"internalScrollable",void 0),Pt([r(".items-container")],Ht.prototype,"itemsContainer",void 0),Pt([n()],Ht.prototype,"scrolledToTarget",void 0),a("ft-infinite-scroll")(Ht);const Zt=v`
|
|
183
|
+
`,Jt=v`
|
|
184
|
+
`;var Vt=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};class qt extends $t{constructor(){super(...arguments),this.disableContextInteractions=!1,this.registeredComponents=[]}render(){return Z`
|
|
180
185
|
<article id=${this.tocId}>
|
|
181
186
|
<slot @register-ft-reader-topic-component=${this.registerComponent}></slot>
|
|
182
187
|
</article>
|
|
183
|
-
`}registerComponent(t){t.stopPropagation();const e=t.composedPath()[0];this.register(e)}register(t){this.registeredComponents.push(t),t.tocNode=this.tocNode,t.disableContextInteractions=this.disableContextInteractions}updated(t){super.updated(t),["mapId","tocId","stateManager"].some((e=>t.has(e)))&&this.setTocNode(),t.has("tocNode")&&this.registeredComponents.forEach((t=>t.tocNode=this.tocNode))}async setTocNode(){var t;this.tocNode=void 0,this.tocNode=this.mapId&&this.tocId?await(null===(t=this.service)||void 0===t?void 0:t.getTocNode(this.tocId)):void 0}disconnectedCallback(){super.disconnectedCallback(),this.registeredComponents=[]}}
|
|
188
|
+
`}registerComponent(t){t.stopPropagation();const e=t.composedPath()[0];this.register(e)}register(t){this.registeredComponents.push(t),t.tocNode=this.tocNode,t.disableContextInteractions=this.disableContextInteractions}updated(t){super.updated(t),["mapId","tocId","stateManager"].some((e=>t.has(e)))&&this.setTocNode(),t.has("tocNode")&&this.registeredComponents.forEach((t=>t.tocNode=this.tocNode))}async setTocNode(){var t;this.tocNode=void 0,this.tocNode=this.mapId&&this.tocId?await(null===(t=this.service)||void 0===t?void 0:t.getTocNode(this.tocId)):void 0}disconnectedCallback(){super.disconnectedCallback(),this.registeredComponents=[]}}qt.styles=Jt,Vt([xt((t=>{var e;return null===(e=t.map)||void 0===e?void 0:e.id}))],qt.prototype,"mapId",void 0),Vt([s()],qt.prototype,"tocId",void 0),Vt([s({type:Boolean})],qt.prototype,"disableContextInteractions",void 0),Vt([n()],qt.prototype,"tocNode",void 0),a("ft-reader-topic-context")(qt);var Xt=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};class Gt extends $t{constructor(){super(...arguments),this.renderTopic=()=>Z`
|
|
184
189
|
<ft-reader-topic-title></ft-reader-topic-title>
|
|
185
190
|
<ft-reader-topic-content></ft-reader-topic-content>
|
|
186
191
|
`,this.disableContextInteractions=!1,this.renderBeforeFirst=5,this.renderAfterLast=10,this.visibleTopicsDebouncer=new e(100)}render(){var t;const e=(null===(t=this.currentPage)||void 0===t?void 0:t.topics)||[];return 0===e.length?V:Z`
|
|
@@ -199,4 +204,4 @@ class Lt extends Rt{constructor(t){if(super(t),this.it=V,t.type!==Nt)throw Error
|
|
|
199
204
|
<ft-reader-topic-context tocId="${t}" ?disableContextInteractions=${this.disableContextInteractions}>
|
|
200
205
|
${this.renderTopic(t,e)}
|
|
201
206
|
</ft-reader-topic-context>
|
|
202
|
-
`}getScrollTarget(){var t,e,i,s,n;if(this.disableContextInteractions)return null;const r=null!==(s=null===(t=this.visibleTopics)||void 0===t?void 0:t.includes(null!==(i=null===(e=this.scrollTarget)||void 0===e?void 0:e.tocId)&&void 0!==i?i:""))&&void 0!==s&&s;return!(null===(n=this.scrollTarget)||void 0===n?void 0:n.tocId)||r&&null!=this.scrollTarget.section?null:this.scrollTarget.tocId}visibleTopicChange(t){this.disableContextInteractions||this.visibleTopicsDebouncer.run((()=>{var e;return null===(e=this.stateManager)||void 0===e?void 0:e.setVisibleTopics(t.detail.visibleItems)}))}onScrollDone(){var t,e;this.disableContextInteractions||null!=(null===(t=this.scrollTarget)||void 0===t?void 0:t.section)||null===(e=this.stateManager)||void 0===e||e.scrollDone()}}
|
|
207
|
+
`}getScrollTarget(){var t,e,i,s,n;if(this.disableContextInteractions)return null;const r=null!==(s=null===(t=this.visibleTopics)||void 0===t?void 0:t.includes(null!==(i=null===(e=this.scrollTarget)||void 0===e?void 0:e.tocId)&&void 0!==i?i:""))&&void 0!==s&&s;return!(null===(n=this.scrollTarget)||void 0===n?void 0:n.tocId)||r&&null!=this.scrollTarget.section?null:this.scrollTarget.tocId}visibleTopicChange(t){this.disableContextInteractions||this.visibleTopicsDebouncer.run((()=>{var e;return null===(e=this.stateManager)||void 0===e?void 0:e.setVisibleTopics(t.detail.visibleItems)}))}onScrollDone(){var t,e;this.disableContextInteractions||null!=(null===(t=this.scrollTarget)||void 0===t?void 0:t.section)||null===(e=this.stateManager)||void 0===e||e.scrollDone()}}Gt.elementDefinitions={"ft-infinite-scroll":Ht},Gt.styles=Zt,Xt([s()],Gt.prototype,"renderTopic",void 0),Xt([s({type:Boolean})],Gt.prototype,"disableContextInteractions",void 0),Xt([xt()],Gt.prototype,"currentPage",void 0),Xt([xt()],Gt.prototype,"scrollTarget",void 0),Xt([xt()],Gt.prototype,"visibleTopics",void 0),Xt([xt((t=>{var e,i;return null!==(i=null===(e=t.configuration)||void 0===e?void 0:e.loadBeforeFirstVisibleTopic)&&void 0!==i?i:5}))],Gt.prototype,"renderBeforeFirst",void 0),Xt([xt((t=>{var e,i;return null!==(i=null===(e=t.configuration)||void 0===e?void 0:e.loadAfterLastVisibleTopic)&&void 0!==i?i:5}))],Gt.prototype,"renderAfterLast",void 0),Xt([r(".ft-reader-content")],Gt.prototype,"container",void 0),a("ft-reader-content")(Gt),t.FtReaderContent=Gt,t.FtReaderContentCssVariables={},t.styles=Zt,Object.defineProperty(t,"i",{value:!0})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-reader-content",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.68",
|
|
4
4
|
"description": "Main content for integrated reader",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-infinite-scroll": "0.3.
|
|
23
|
-
"@fluid-topics/ft-reader-topic-content": "0.3.
|
|
24
|
-
"@fluid-topics/ft-reader-topic-context": "0.3.
|
|
25
|
-
"@fluid-topics/ft-reader-topic-title": "0.3.
|
|
26
|
-
"@fluid-topics/ft-wc-utils": "0.3.
|
|
22
|
+
"@fluid-topics/ft-infinite-scroll": "0.3.68",
|
|
23
|
+
"@fluid-topics/ft-reader-topic-content": "0.3.68",
|
|
24
|
+
"@fluid-topics/ft-reader-topic-context": "0.3.68",
|
|
25
|
+
"@fluid-topics/ft-reader-topic-title": "0.3.68",
|
|
26
|
+
"@fluid-topics/ft-wc-utils": "0.3.68",
|
|
27
27
|
"lit": "2.2.8"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "58305116f36902ddf19fada77dfcba24243c5ac5"
|
|
30
30
|
}
|