@fluid-topics/ft-reader-metadata 1.1.26 → 1.1.28

package/build/ft-reader-metadata.css.js

@@ -5,4 +5,17 @@ export const styles = css `
     :host {
         display: inline-block;
     }
+
+    .ft-reader-metadata--container {
+        position: relative;
+    }
+
+    .ft-reader-metadata--container ft-chip {
+        cursor: pointer;
+    }
+
+    a {
+        all: unset;
+        position: relative;
+    }
 `;

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

@@ -1,15 +1,28 @@
+import { PropertyValues } from "lit";
 import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtReaderMetadataProperties } from "./ft-reader-metadata.properties";
-import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtReaderComponent, FtReaderStateManager } from "@fluid-topics/ft-reader-context/build/registration";
 export declare class FtReaderMetadata extends FtReaderComponent implements FtReaderMetadataProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
     key?: string;
+    useForSwitchingToRelatives: boolean;
     editorMode: boolean;
     private metadata?;
+    private mapRelatives?;
+    private map?;
+    private relativeTopicPivotMetadata?;
+    private relatives;
+    setReaderStateManager(readerStateManager: FtReaderStateManager): void;
     protected render(): import("lit").TemplateResult<1>;
     private renderContent;
+    private renderSwitchToRelatives;
+    private renderRelativeItem;
+    private renderRelativeItemValue;
     private hideIfEmpty;
     private get valueText();
     private get tooltipText();
+    private addTopicPivotCommand;
+    private setRelatives;
+    protected update(props: PropertyValues): void;
 }

package/build/ft-reader-metadata.js

@@ -5,29 +5,47 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { redux, reduxReactive } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-reader-metadata.css";
 import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
 import { FtChip } from "@fluid-topics/ft-chip";
+import { FtFloatingMenu, FtFloatingMenuItem } from "@fluid-topics/ft-floating-menu";
+import { getResultUrl } from "@fluid-topics/ft-search-result-context/build/utils";
+import { repeat } from "lit/directives/repeat.js";
+import { FtRipple } from "@fluid-topics/ft-ripple";
 class FtReaderMetadata extends FtReaderComponent {
     constructor() {
         super(...arguments);
+        this.useForSwitchingToRelatives = false;
         this.editorMode = false;
+        this.relatives = [];
+    }
+    setReaderStateManager(readerStateManager) {
+        var _a;
+        super.setReaderStateManager(readerStateManager);
+        if (this.key && this.useForSwitchingToRelatives) {
+            readerStateManager.registerMetadataForSwitchToRelatives(this.key);
+        }
+        (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.store.eventBus.addEventListener("clustering-helper-created", this.setRelatives);
     }
     render() {
         return html `
             <ft-tooltip text="${this.tooltipText}">
-                <ft-chip>
-                    ${this.renderContent()}
-                </ft-chip>
+                ${this.useForSwitchingToRelatives && this.metadata && this.metadata.values.length > 0
+            ? this.renderSwitchToRelatives()
+            : html `
+                            <ft-chip>
+                                ${this.renderContent()}
+                            </ft-chip>
+                        `}
             </ft-tooltip>
             ${this.hideIfEmpty()}
         `;
     }
     renderContent() {
-        if (this.metadata) {
+        if (this.metadata && this.metadata.values.length > 0) {
             return html `${this.valueText}`;
         }
         if (this.editorMode) {
@@ -40,8 +58,35 @@ class FtReaderMetadata extends FtReaderComponent {
         }
         return nothing;
     }
+    renderSwitchToRelatives() {
+        return html `
+            <div class="ft-reader-metadata--container">
+                <ft-floating-menu text="Toggle collapsible" trailingIcon>
+                    <ft-chip trailingIcon icon="thin_arrow" slot="toggle" clickable>
+                        ${this.renderContent()}
+                    </ft-chip>
+
+                    ${repeat(this.relatives, relative => relative.metadata.value, relative => this.renderRelativeItem(relative.result, relative.metadata))}
+                </ft-floating-menu>
+            </div>
+        `;
+    }
+    renderRelativeItem(result, metadata) {
+        return html `
+            <a href=${getResultUrl(result)} @click=${(e) => this.addTopicPivotCommand(e, result)}>
+                <ft-ripple></ft-ripple>
+                <ft-floating-menu-item value="${metadata.value}" notFocusable="true">
+                    ${this.renderRelativeItemValue(metadata.value, metadata.displayValue)}
+                </ft-floating-menu-item>
+            </a>
+        `;
+    }
+    renderRelativeItemValue(value, displayValue) {
+        return value === displayValue ? value : html `
+            <ft-tooltip text="${value}">${displayValue}</ft-tooltip>`;
+    }
     hideIfEmpty() {
-        if (!this.editorMode && !this.metadata) {
+        if (!this.editorMode && (!this.metadata || this.metadata.values.length == 0)) {
             return html `
                 <style>
                     :host {
@@ -60,20 +105,81 @@ class FtReaderMetadata extends FtReaderComponent {
         var _a, _b;
         return this.metadata ? `${(_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.metadata.key}: ${this.valueText}` : "";
     }
+    addTopicPivotCommand(e, result) {
+        var _a, _b;
+        const currentTocId = this.stateManager.store.getState().visibleTopics[0];
+        if (!e.ctrlKey && !e.metaKey && currentTocId) {
+            e.stopPropagation();
+            e.preventDefault();
+            const tocNode = (_a = this.service) === null || _a === void 0 ? void 0 : _a.getTocNodeNow(currentTocId);
+            (_b = this.service) === null || _b === void 0 ? void 0 : _b.getTopicInfo(tocNode).then((topicInfo) => {
+                var _a, _b;
+                const topicPivotMetadataValue = topicInfo === null || topicInfo === void 0 ? void 0 : topicInfo.metadata.find((metadata) => metadata.key == this.relativeTopicPivotMetadata);
+                (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.navigateToRelativeTopicIfFound((_b = result.map) === null || _b === void 0 ? void 0 : _b.mapId, topicPivotMetadataValue);
+            });
+        }
+    }
+    setRelatives() {
+        var _a;
+        if (this.metadata && this.mapRelatives) {
+            this.relatives = this.stateManager.clusteringHelper.computeClustersItemsForMetadata(this.key, ((_a = this.map) === null || _a === void 0 ? void 0 : _a.lang) || "en");
+        }
+    }
+    update(props) {
+        var _a, _b, _c, _d;
+        super.update(props);
+        if ((props.has("metadata") || props.has("mapRelatives"))) {
+            this.setRelatives();
+        }
+        if (props.has("key") && this.useForSwitchingToRelatives) {
+            if (props.get("key")) {
+                (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.unregisterMetadataForSwitchToRelatives(props.get("key"));
+            }
+            if (this.key) {
+                (_b = this.stateManager) === null || _b === void 0 ? void 0 : _b.registerMetadataForSwitchToRelatives(this.key);
+            }
+        }
+        if (props.has("useForSwitchingToRelatives") && this.key) {
+            if (this.useForSwitchingToRelatives) {
+                (_c = this.stateManager) === null || _c === void 0 ? void 0 : _c.registerMetadataForSwitchToRelatives(this.key);
+            }
+            else {
+                (_d = this.stateManager) === null || _d === void 0 ? void 0 : _d.unregisterMetadataForSwitchToRelatives(this.key);
+            }
+        }
+    }
 }
 FtReaderMetadata.elementDefinitions = {
-    "ft-tooltip": FtTooltip,
     "ft-chip": FtChip,
+    "ft-floating-menu": FtFloatingMenu,
+    "ft-floating-menu-item": FtFloatingMenuItem,
+    "ft-ripple": FtRipple,
+    "ft-tooltip": FtTooltip,
 };
 FtReaderMetadata.styles = styles;
 __decorate([
     property(),
     reduxReactive()
 ], FtReaderMetadata.prototype, "key", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderMetadata.prototype, "useForSwitchingToRelatives", void 0);
 __decorate([
     property({ attribute: false })
 ], FtReaderMetadata.prototype, "editorMode", void 0);
 __decorate([
     redux({ selector: (s, e) => { var _a, _b; return (_b = (_a = s.map) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.find(m => m.key === e.key); } })
 ], FtReaderMetadata.prototype, "metadata", void 0);
+__decorate([
+    redux({ selector: (s) => s.relatives })
+], FtReaderMetadata.prototype, "mapRelatives", void 0);
+__decorate([
+    redux()
+], FtReaderMetadata.prototype, "map", void 0);
+__decorate([
+    redux({ selector: (s) => { var _a; return (_a = s.configuration) === null || _a === void 0 ? void 0 : _a.relativeTopicPivotMetadata; } })
+], FtReaderMetadata.prototype, "relativeTopicPivotMetadata", void 0);
+__decorate([
+    state()
+], FtReaderMetadata.prototype, "relatives", void 0);
 export { FtReaderMetadata };