@fluid-topics/ft-reader-toc 1.1.99 → 1.1.101

package/build/ft-reader-toc.d.ts

@@ -21,6 +21,7 @@ export declare class FtReaderToc extends FtReaderComponent implements FtReaderTo
     collapseAllIcon: string;
     expandAllIcon: string;
     autoCollapse: boolean;
+    scrollCurrentTopicIntoView: boolean;
     scope: FtReaderTocProperties["scope"];
     empty: boolean;
     labels: FtReaderTocLabels;
@@ -36,6 +37,7 @@ export declare class FtReaderToc extends FtReaderComponent implements FtReaderTo
     private nodesToExpandExist;
     get isCurrentPageToc(): boolean;
     protected update(changedProperties: PropertyValues): void;
+    protected contentAvailableCallback(props: PropertyValues): void;
     protected render(): TemplateResult<1>;
     private renderExpandCollapseAll;
     private renderNode;

package/build/ft-reader-toc.js

@@ -9,7 +9,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { property, state } from "lit/decorators.js";
-import { hasChanged, jsonProperty, ParametrizedLabelResolver, redux } from "@fluid-topics/ft-wc-utils";
+import { hasChanged, jsonProperty, ParametrizedLabelResolver, redux, scrollHelper } from "@fluid-topics/ft-wc-utils";
 import { FtReaderComponent, } from "@fluid-topics/ft-reader-context/build/registration";
 import { FtTypography } from "@fluid-topics/ft-typography";
 import { FtReaderInternalLink } from "@fluid-topics/ft-reader-internal-link";
@@ -35,6 +35,7 @@ class FtReaderToc extends FtReaderComponent {
         this.collapseAllIcon = "ICON_COLLAPSE";
         this.expandAllIcon = "ICON_EXPAND";
         this.autoCollapse = false;
+        this.scrollCurrentTopicIntoView = false;
         this.scope = "pages";
         this.empty = true;
         this.labels = {};
@@ -63,6 +64,16 @@ class FtReaderToc extends FtReaderComponent {
         }
         this.empty = ((_c = this.toc) !== null && _c !== void 0 ? _c : []).length === 0;
     }
+    contentAvailableCallback(props) {
+        var _a, _b;
+        super.contentAvailableCallback(props);
+        if (this.scrollCurrentTopicIntoView && props.has("highlightedTocIds") && this.highlightedTocIds && ((_a = this.highlightedTocIds) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            const target = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`[tocId="${this.highlightedTocIds[0]}"]`);
+            if (target) {
+                scrollHelper.scrollIntoViewIfPossible(target, { behavior: "smooth", position: .25 });
+            }
+        }
+    }
     render() {
         var _a;
         const classes = {
@@ -84,18 +95,16 @@ class FtReaderToc extends FtReaderComponent {
         return this.expandCollapseAll && !this.expanded && this.nodesToExpandExist ? html `
             <div part="expand-collapse-all-container"
                  class="ft-reader-toc-expand-collapse-all-container ft-reader-toc-expand-collapse-all-${this.expandCollapseAllAlignment}">
-                <ft-button
-                        part="expand-collapse-all"
-                        class="ft-reader-toc--expand-collapse-all-button"
-                        iconVariant="${this.expandCollapseAllIconVariant}"
-                        icon="${this.expandCollapseAllHideIcon ? "" : (this.expandAll
+                <ft-button part="expand-collapse-all"
+                           class="ft-reader-toc--expand-collapse-all-button"
+                           iconVariant="${this.expandCollapseAllIconVariant}"
+                           icon="${this.expandCollapseAllHideIcon ? "" : (this.expandAll
             ? (this.collapseAllIcon || "ICON_COLLAPSE")
             : (this.expandAllIcon || "ICON_EXPAND"))}"
-                        label="${this.labelResolver.resolve(this.expandAll ? "collapseAllLong" : "expandAllLong")}"
-                        tooltipPosition="${this.getExpandCollapseAllTooltipPosition()}"
-                        ?trailingIcon=${this.expandCollapseAllTrailingIcon}
-                        @click=${() => this.toggleExpandCollapseAll()}
-                >
+                           label="${this.labelResolver.resolve(this.expandAll ? "collapseAllLong" : "expandAllLong")}"
+                           tooltipPosition="${this.getExpandCollapseAllTooltipPosition()}"
+                           ?trailingIcon=${this.expandCollapseAllTrailingIcon}
+                           @click=${() => this.toggleExpandCollapseAll()}>
                     ${this.expandCollapseAllHideLabel ? "" : this.labelResolver.resolve(this.expandAll ? "collapseAll" : "expandAll")}
                 </ft-button>
             </div>
@@ -115,44 +124,40 @@ class FtReaderToc extends FtReaderComponent {
             <div class="ft-reader-toc--node ${isHighlighted ? "ft-reader-toc--node-highlighted" : ""}">
                 <div class="ft-reader-toc--link-container" data-depth="${node.depth}" style=${styleMap(styles)}>
                     ${this.nodesToExpandExist && !this.expanded ? html `
-                                <div class="ft-reader-toc--toggle-container">
-                                    ${canDisplayChildren ? html `
-                                                <ft-button
-                                                        part="expand-collapse-node"
-                                                        class="ft-reader-toc--tree-node-button"
-                                                        round hideTooltip
-                                                        ?dense=${this.viewportSize !== FtSizeCategory.S}
-                                                        label="${this.labelResolver.resolve(isExpanded
+                            <div class="ft-reader-toc--toggle-container">
+                                ${canDisplayChildren ? html `
+                                        <ft-button part="expand-collapse-node"
+                                                   class="ft-reader-toc--tree-node-button"
+                                                   round hideTooltip
+                                                   ?dense=${this.viewportSize !== FtSizeCategory.S}
+                                                   label="${this.labelResolver.resolve(isExpanded
             ? "collapse"
             : "expand", node.title)}"
-                                                        .iconVariant="${this.iconVariant}"
-                                                        icon="${isExpanded
+                                                   .iconVariant="${this.iconVariant}"
+                                                   icon="${isExpanded
             ? (this.collapseIcon || "MINUS")
             : (this.expandIcon || "PLUS")}"
-                                                        @click=${() => this.manuallyToggle(node.tocId, isExpanded)}
-                                                        data-expand-node="${node.tocId}"
-                                                        aria-controls="${node.tocId}-children"
-                                                        aria-expanded="${isExpanded}"
-                                                >
-                                                </ft-button>
-                                            ` : this.getLeafNodeIcon()}
-                                </div>
-                            ` : !canDisplayChildren ? this.getLeafNodeIcon() : nothing}
-                    <ft-reader-internal-link
-                            part="node-link"
-                            tocId="${node.tocId}"
-                            removeStyle>
+                                                   @click=${() => this.manuallyToggle(node.tocId, isExpanded)}
+                                                   data-expand-node="${node.tocId}"
+                                                   aria-controls="${node.tocId}-children"
+                                                   aria-expanded="${isExpanded}">
+                                        </ft-button>
+                                    ` : this.getLeafNodeIcon()}
+                            </div>
+                        ` : !canDisplayChildren ? this.getLeafNodeIcon() : nothing}
+                    <ft-reader-internal-link part="node-link"
+                                             tocId="${node.tocId}"
+                                             removeStyle>
                         <ft-typography part="node-label" variant="body2">${node.title}</ft-typography>
                     </ft-reader-internal-link>
                 </div>
                 ${canDisplayChildren ? html `
-                            <div class="ft-reader-toc--node-children" id="${node.tocId}-children"
-                                 ?hidden=${!isExpanded}>
-                                ${isExpanded
-            ? repeat(node.children, (child) => child.tocId, child => this.renderNode(child))
-            : nothing}
-                            </div>
-                        ` : nothing}
+                        <div id="${node.tocId}-children"
+                             class="ft-reader-toc--node-children"
+                             ?hidden=${!isExpanded}>
+                            ${repeat(isExpanded ? node.children : [], (child) => child.tocId, child => this.renderNode(child))}
+                        </div>
+                    ` : nothing}
             </div>
         `;
     }
@@ -201,7 +206,11 @@ class FtReaderToc extends FtReaderComponent {
     }
     getLeafNodeIcon() {
         return html `
-            <ft-icon class="ft-reader-toc--leaf-node-icon" part="leaf-node-icon" .variant="${this.leafNodeIconVariant}" .value="${this.leafNodeIcon}"></ft-icon>`;
+            <ft-icon class="ft-reader-toc--leaf-node-icon"
+                     part="leaf-node-icon"
+                     .variant="${this.leafNodeIconVariant}"
+                     .value="${this.leafNodeIcon}"></ft-icon>
+        `;
     }
 }
 FtReaderToc.elementDefinitions = {
@@ -258,6 +267,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtReaderToc.prototype, "autoCollapse", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderToc.prototype, "scrollCurrentTopicIntoView", void 0);
 __decorate([
     property()
 ], FtReaderToc.prototype, "scope", void 0);