@fluid-topics/ft-reader-saved-bookmarks 1.3.14

package/README.md

@@ -0,0 +1,19 @@
+Display the list of saved bookmarks
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-reader-saved-bookmarks
+yarn add @fluid-topics/ft-reader-saved-bookmarks
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-reader-saved-bookmarks"
+
+function render() {
+    return html` <ft-reader-saved-bookmarks foo="bar"></ft-reader-saved-bookmarks> `
+}
+```

package/build/FtReaderSavedBookmarksMessages.d.ts

@@ -0,0 +1,7 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtReaderSavedBookmarksMessages extends I18nMessages {
+    bookmarks(): string;
+    bookmarkMissingFromToc(): string;
+}
+export declare const readerSavedBookmarksMessagesI18nMessageContext: I18nMessageContext<FtReaderSavedBookmarksMessages>;
+export declare const defaultReaderSavedBookmarksMessages: DefaultI18nMessages<FtReaderSavedBookmarksMessages>;

package/build/FtReaderSavedBookmarksMessages.js

@@ -0,0 +1,6 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const readerSavedBookmarksMessagesI18nMessageContext = I18nMessageContext.build("readerSavedBookmarksComponent");
+export const defaultReaderSavedBookmarksMessages = {
+    bookmarks: "Bookmarks",
+    bookmarkMissingFromToc: "This bookmark refer to a topic that no longer exists.",
+};

package/build/ft-reader-saved-bookmarks.d.ts

@@ -0,0 +1,19 @@
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtReaderSavedBookmarksProperties } from "./ft-reader-saved-bookmarks.properties";
+import { FtReaderComponent, FtReaderState } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtBookmark } from "@fluid-topics/public-api";
+declare const FtReaderSavedBookmarks_base: typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtReaderSavedBookmarks extends FtReaderSavedBookmarks_base implements FtReaderSavedBookmarksProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    name: string;
+    bookmarks: Array<FtBookmark>;
+    remainingTocIdsInBookmarks: Array<string>;
+    private mapId?;
+    constructor();
+    get bookmarksTocIds(): string[];
+    static filterRemainingTocIdsInBookmarks(s: FtReaderState, self: FtReaderSavedBookmarks): string[] | undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    private isAbsentFromToc;
+}
+export {};

package/build/ft-reader-saved-bookmarks.js

@@ -0,0 +1,99 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { redux, screenReaderStyles } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-reader-saved-bookmarks.styles";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+import { repeat } from "lit/directives/repeat.js";
+import { classMap } from "lit/directives/class-map.js";
+import { when } from "lit/directives/when.js";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { ftUserAssetsStore } from "@fluid-topics/ft-app-context/build/redux-stores/FtUserAssetsStore";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { defaultReaderSavedBookmarksMessages, readerSavedBookmarksMessagesI18nMessageContext } from "./FtReaderSavedBookmarksMessages";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+class FtReaderSavedBookmarks extends withI18n(FtReaderComponent) {
+    constructor() {
+        super();
+        this.name = "";
+        this.bookmarks = [];
+        this.remainingTocIdsInBookmarks = [];
+        this.addStore(ftUserAssetsStore);
+        this.addI18nContext(readerSavedBookmarksMessagesI18nMessageContext, defaultReaderSavedBookmarksMessages);
+    }
+    get bookmarksTocIds() {
+        return this.bookmarks.map((b) => b.tocId);
+    }
+    static filterRemainingTocIdsInBookmarks(s, self) {
+        var _a;
+        return (_a = s.toc) === null || _a === void 0 ? void 0 : _a.filter((tocNode) => self.bookmarksTocIds.indexOf(tocNode.tocId) >= 0).map((tocNode) => tocNode.tocId);
+    }
+    render() {
+        return html `
+            <div part="container" class="ft-reader-saved-bookmarks">
+                <span id="context" class="sr-only">${readerSavedBookmarksMessagesI18nMessageContext.messages.bookmarks()}</span>
+                <span id="missing-context" class="sr-only">${readerSavedBookmarksMessagesI18nMessageContext.messages.bookmarkMissingFromToc()}</span>
+                ${repeat(this.bookmarks, (bookmark) => bookmark.id, (bookmark, index) => {
+            const isAbsent = this.isAbsentFromToc(bookmark);
+            const classes = {
+                strikethrough: isAbsent,
+            };
+            return html `
+                            <div part="bookmark" class="${classMap(classes)}">
+                                <a part="link"
+                                   href="${isAbsent ? "#" : bookmark.readerUrl}"
+                                   aria-disabled="${isAbsent}"
+                                   aria-labelledby="context ${"content-" + index} ${isAbsent ? "missing-context" : ""}">
+                                    <ft-ripple part="ripple link-ripple"></ft-ripple>
+                                    <ft-typography id="${"content-" + index}" part="name" variant="${FtTypographyVariants.body2semibold}">
+                                        ${bookmark.title}
+                                    </ft-typography>
+                                    ${when(isAbsent, () => html `
+                                        <ft-tooltip text="${readerSavedBookmarksMessagesI18nMessageContext.messages.bookmarkMissingFromToc()}" delay="500" position="bottom" aria-hidden>
+                                            <ft-icon value="${FtIcons.INFO}"></ft-icon>
+                                        </ft-tooltip>
+                                    `)}
+                                </a>
+                            </div>
+                        `;
+        })}
+            </div>
+        `;
+    }
+    isAbsentFromToc(bookmark) {
+        return this.remainingTocIdsInBookmarks.indexOf(bookmark.tocId) < 0;
+    }
+}
+FtReaderSavedBookmarks.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+    "ft-icon": FtIcon,
+    "ft-tooltip": FtTooltip,
+};
+FtReaderSavedBookmarks.styles = [styles, screenReaderStyles];
+__decorate([
+    property()
+], FtReaderSavedBookmarks.prototype, "name", void 0);
+__decorate([
+    redux({
+        store: ftUserAssetsStore.name,
+        selector: (s, self) => { var _a, _b; return (_b = (_a = s.bookmarks) === null || _a === void 0 ? void 0 : _a.filter((b) => b.mapId === self.mapId)) !== null && _b !== void 0 ? _b : []; },
+    })
+], FtReaderSavedBookmarks.prototype, "bookmarks", void 0);
+__decorate([
+    redux({
+        store: "reader",
+        selector: FtReaderSavedBookmarks.filterRemainingTocIdsInBookmarks,
+    })
+], FtReaderSavedBookmarks.prototype, "remainingTocIdsInBookmarks", void 0);
+__decorate([
+    redux({ store: "reader" })
+], FtReaderSavedBookmarks.prototype, "mapId", void 0);
+export { FtReaderSavedBookmarks };