@file-viewer/web 2.0.9 → 2.0.11

package/dist/element.js

@@ -0,0 +1,466 @@
+import { fileViewerCoreRendererRegistry } from '@file-viewer/core';
+import { mountViewer as mountCoreViewer, } from './controller.js';
+export const FILE_VIEWER_ELEMENT_TAG = 'flyfish-file-viewer';
+const ElementBase = (typeof HTMLElement === 'undefined'
+    ? class {
+    }
+    : HTMLElement);
+const observedAttributes = [
+    'src',
+    'url',
+    'filename',
+    'name',
+    'type',
+    'size',
+    'theme',
+    'toolbar',
+    'toolbar-position',
+    'watermark',
+    'search',
+    'options',
+];
+const parseBooleanLike = (value) => {
+    if (value === null) {
+        return undefined;
+    }
+    const normalized = value.trim().toLowerCase();
+    if (!normalized || ['true', '1', 'yes', 'on'].includes(normalized)) {
+        return true;
+    }
+    if (['false', '0', 'no', 'off'].includes(normalized)) {
+        return false;
+    }
+    return undefined;
+};
+const parseNumberLike = (value) => {
+    if (value === null || value.trim() === '') {
+        return undefined;
+    }
+    const numeric = Number(value);
+    return Number.isFinite(numeric) ? numeric : undefined;
+};
+const parseJsonObject = (value) => {
+    if (!value) {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    if (!trimmed || (trimmed[0] !== '{' && trimmed[0] !== '[')) {
+        return undefined;
+    }
+    try {
+        return JSON.parse(trimmed);
+    }
+    catch (error) {
+        console.warn('[file-viewer-web] Failed to parse JSON attribute.', error);
+        return undefined;
+    }
+};
+const mergeViewerOptions = (...optionsList) => {
+    const validOptions = optionsList.filter(Boolean);
+    if (!validOptions.length) {
+        return undefined;
+    }
+    return Object.assign({}, ...validOptions);
+};
+const mergeMountOptions = (current, next) => ({
+    ...current,
+    ...next,
+    options: next.options === undefined
+        ? current.options
+        : mergeViewerOptions(current.options, next.options),
+});
+const callUnique = (callbacks, argument) => {
+    for (const callback of new Set(callbacks.filter(Boolean))) {
+        callback === null || callback === void 0 ? void 0 : callback(argument);
+    }
+};
+const toKebabEventName = (event) => `viewer-${event.type}`;
+export class FileViewerElement extends ElementBase {
+    constructor() {
+        super(...arguments);
+        this.mountNode = null;
+        this.controller = null;
+        this.pendingUpdate = false;
+        this.mountOptions = {};
+        this.internalCoreOptions = {};
+    }
+    static get observedAttributes() {
+        return [...observedAttributes];
+    }
+    get src() {
+        return this.mountOptions.url || this.getAttribute('src') || this.getAttribute('url') || undefined;
+    }
+    set src(value) {
+        this.setMountOptions({ url: value || undefined });
+    }
+    get url() {
+        return this.src;
+    }
+    set url(value) {
+        this.setMountOptions({ url: value || undefined });
+    }
+    get file() {
+        return this.mountOptions.file;
+    }
+    set file(value) {
+        this.setMountOptions({ file: value });
+    }
+    get buffer() {
+        return this.mountOptions.buffer;
+    }
+    set buffer(value) {
+        this.setMountOptions({ buffer: value });
+    }
+    get name() {
+        return this.mountOptions.name || this.getAttribute('name') || undefined;
+    }
+    set name(value) {
+        this.setMountOptions({ name: value || undefined });
+    }
+    get filename() {
+        return this.mountOptions.filename || this.getAttribute('filename') || this.name;
+    }
+    set filename(value) {
+        this.setMountOptions({ filename: value || undefined });
+    }
+    get type() {
+        return this.mountOptions.type || this.getAttribute('type') || undefined;
+    }
+    set type(value) {
+        this.setMountOptions({ type: value || undefined });
+    }
+    get size() {
+        var _a;
+        return (_a = this.mountOptions.size) !== null && _a !== void 0 ? _a : parseNumberLike(this.getAttribute('size'));
+    }
+    set size(value) {
+        this.setMountOptions({ size: value });
+    }
+    get options() {
+        return this.mountOptions.options;
+    }
+    set options(value) {
+        this.setMountOptions({ options: value });
+    }
+    get source() {
+        return {
+            ...this.mountOptions,
+            coreOptions: this.internalCoreOptions,
+        };
+    }
+    set source(value) {
+        const { coreOptions, ...mountOptions } = value || {};
+        this.mountOptions = mountOptions;
+        this.internalCoreOptions = coreOptions || {};
+        this.remountOrUpdate();
+    }
+    get coreOptions() {
+        return this.internalCoreOptions;
+    }
+    set coreOptions(value) {
+        this.internalCoreOptions = value || {};
+        this.remount();
+    }
+    connectedCallback() {
+        this.mount();
+    }
+    disconnectedCallback() {
+        this.destroy();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.scheduleUpdate();
+        }
+    }
+    async load(options) {
+        var _a;
+        this.mountOptions = mergeMountOptions(this.mountOptions, options);
+        if (!this.controller && this.isConnected) {
+            this.mount();
+        }
+        await ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.load(this.createEffectiveMountOptions()));
+    }
+    async update(options = {}) {
+        var _a;
+        this.mountOptions = mergeMountOptions(this.mountOptions, options);
+        if (!this.controller && this.isConnected) {
+            this.mount();
+            return;
+        }
+        await ((_a = this.controller) === null || _a === void 0 ? void 0 : _a.update(this.createEffectiveMountOptions()));
+    }
+    reload() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.reload()) !== null && _b !== void 0 ? _b : Promise.resolve();
+    }
+    destroy() {
+        var _a;
+        (_a = this.controller) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.controller = null;
+        if (this.mountNode) {
+            this.mountNode.innerHTML = '';
+        }
+        this.pendingUpdate = false;
+    }
+    getController() {
+        return this.controller;
+    }
+    getApi() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getApi()) !== null && _b !== void 0 ? _b : null;
+    }
+    downloadOriginalFile() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.downloadOriginalFile()) !== null && _b !== void 0 ? _b : Promise.resolve();
+    }
+    printRenderedHtml() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.printRenderedHtml()) !== null && _b !== void 0 ? _b : Promise.resolve();
+    }
+    exportRenderedHtml() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.exportRenderedHtml()) !== null && _b !== void 0 ? _b : Promise.resolve();
+    }
+    zoomIn() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.zoomIn()) !== null && _b !== void 0 ? _b : Promise.resolve(null);
+    }
+    zoomOut() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.zoomOut()) !== null && _b !== void 0 ? _b : Promise.resolve(null);
+    }
+    resetZoom() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.resetZoom()) !== null && _b !== void 0 ? _b : Promise.resolve(null);
+    }
+    searchDocument(query) {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.searchDocument(query)) !== null && _b !== void 0 ? _b : Promise.resolve(null);
+    }
+    clearDocumentSearch() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.clearDocumentSearch()) !== null && _b !== void 0 ? _b : Promise.resolve(null);
+    }
+    nextSearchResult() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.nextSearchResult()) !== null && _b !== void 0 ? _b : Promise.resolve(null);
+    }
+    previousSearchResult() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.previousSearchResult()) !== null && _b !== void 0 ? _b : Promise.resolve(null);
+    }
+    collectDocumentAnchors() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.collectDocumentAnchors()) !== null && _b !== void 0 ? _b : Promise.resolve([]);
+    }
+    scrollToAnchor(anchor) {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.scrollToAnchor(anchor)) !== null && _b !== void 0 ? _b : Promise.resolve(false);
+    }
+    scrollToLine(line) {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.scrollToLine(line)) !== null && _b !== void 0 ? _b : Promise.resolve(false);
+    }
+    getDocumentTextChunks() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getDocumentTextChunks()) !== null && _b !== void 0 ? _b : [];
+    }
+    getOperationAvailability() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getOperationAvailability()) !== null && _b !== void 0 ? _b : null;
+    }
+    getZoomState() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getZoomState()) !== null && _b !== void 0 ? _b : null;
+    }
+    getSearchState() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getSearchState()) !== null && _b !== void 0 ? _b : null;
+    }
+    getState() {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getState()) !== null && _b !== void 0 ? _b : null;
+    }
+    subscribe(listener) {
+        var _a, _b;
+        return (_b = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.subscribe(listener)) !== null && _b !== void 0 ? _b : (() => { });
+    }
+    setMountOptions(options) {
+        this.mountOptions = mergeMountOptions(this.mountOptions, options);
+        this.scheduleUpdate();
+    }
+    mount() {
+        if (this.controller || !this.isConnected) {
+            return;
+        }
+        const node = this.ensureMountNode();
+        try {
+            this.controller = mountCoreViewer(node, this.createEffectiveMountOptions(), {
+                registry: fileViewerCoreRendererRegistry,
+                ...this.internalCoreOptions,
+            });
+            this.dispatchTypedEvent('viewer-ready', {
+                controller: this.controller,
+            });
+        }
+        catch (error) {
+            this.dispatchError(error);
+            throw error;
+        }
+    }
+    remount() {
+        if (!this.isConnected) {
+            return;
+        }
+        this.destroy();
+        this.mount();
+    }
+    remountOrUpdate() {
+        if (this.controller) {
+            void this.update();
+        }
+        else if (this.isConnected) {
+            this.mount();
+        }
+    }
+    ensureMountNode() {
+        if (this.mountNode) {
+            return this.mountNode;
+        }
+        const node = document.createElement('div');
+        node.className = 'file-viewer-web-host';
+        node.style.width = '100%';
+        node.style.height = '100%';
+        node.style.minWidth = '0';
+        node.style.minHeight = '0';
+        this.mountNode = node;
+        this.appendChild(node);
+        if (!this.style.display) {
+            this.style.display = 'block';
+        }
+        return node;
+    }
+    createEffectiveMountOptions() {
+        const attributeOptions = this.readAttributeMountOptions();
+        const propertyOptions = this.mountOptions;
+        const onEventCallbacks = [attributeOptions.onEvent, propertyOptions.onEvent];
+        const onStateCallbacks = [attributeOptions.onStateChange, propertyOptions.onStateChange];
+        return {
+            ...attributeOptions,
+            ...propertyOptions,
+            options: mergeViewerOptions(attributeOptions.options, propertyOptions.options),
+            onEvent: event => {
+                callUnique(onEventCallbacks, event);
+                this.dispatchViewerEvent(event);
+            },
+            onStateChange: (state, event) => {
+                callUnique(onStateCallbacks.map(callback => callback ? nextState => callback(nextState, event) : undefined), state);
+                this.dispatchTypedEvent('viewer-state-change', {
+                    state,
+                    event,
+                });
+            },
+        };
+    }
+    readAttributeMountOptions() {
+        const url = this.getAttribute('src') || this.getAttribute('url') || undefined;
+        const filename = this.getAttribute('filename') || undefined;
+        const name = this.getAttribute('name') || undefined;
+        const type = this.getAttribute('type') || undefined;
+        const size = parseNumberLike(this.getAttribute('size'));
+        const options = this.readAttributeViewerOptions();
+        return {
+            ...(url ? { url } : {}),
+            ...(filename ? { filename } : {}),
+            ...(name ? { name } : {}),
+            ...(type ? { type } : {}),
+            ...(size === undefined ? {} : { size }),
+            ...(options ? { options } : {}),
+        };
+    }
+    readAttributeViewerOptions() {
+        const options = parseJsonObject(this.getAttribute('options')) || {};
+        const theme = this.getAttribute('theme');
+        if (theme) {
+            options.theme = theme;
+        }
+        const toolbar = this.getAttribute('toolbar');
+        const toolbarJson = parseJsonObject(toolbar);
+        const toolbarBoolean = parseBooleanLike(toolbar);
+        if (toolbarJson !== undefined) {
+            options.toolbar = toolbarJson;
+        }
+        else if (toolbarBoolean !== undefined) {
+            options.toolbar = toolbarBoolean;
+        }
+        const toolbarPosition = this.getAttribute('toolbar-position');
+        if (toolbarPosition) {
+            options.toolbar = {
+                ...(typeof options.toolbar === 'object' && options.toolbar ? options.toolbar : {}),
+                position: toolbarPosition,
+            };
+        }
+        const watermark = this.getAttribute('watermark');
+        const watermarkJson = parseJsonObject(watermark);
+        const watermarkBoolean = parseBooleanLike(watermark);
+        if (watermarkJson !== undefined) {
+            options.watermark = watermarkJson;
+        }
+        else if (watermarkBoolean !== undefined) {
+            options.watermark = watermarkBoolean;
+        }
+        else if (watermark) {
+            options.watermark = { enabled: true, text: watermark };
+        }
+        const search = this.getAttribute('search');
+        const searchJson = parseJsonObject(search);
+        const searchBoolean = parseBooleanLike(search);
+        if (searchJson !== undefined) {
+            options.search = searchJson;
+        }
+        else if (searchBoolean !== undefined) {
+            options.search = searchBoolean;
+        }
+        return Object.keys(options).length ? options : undefined;
+    }
+    scheduleUpdate() {
+        if (!this.isConnected || !this.controller || this.pendingUpdate) {
+            return;
+        }
+        this.pendingUpdate = true;
+        queueMicrotask(() => {
+            this.pendingUpdate = false;
+            if (!this.controller) {
+                return;
+            }
+            this.controller.update(this.createEffectiveMountOptions()).catch(error => {
+                this.dispatchError(error);
+            });
+        });
+    }
+    dispatchViewerEvent(event) {
+        this.dispatchTypedEvent('viewer-event', event);
+        this.dispatchTypedEvent(toKebabEventName(event), event);
+    }
+    dispatchError(error) {
+        this.dispatchTypedEvent('viewer-error', { error });
+    }
+    dispatchTypedEvent(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+    }
+}
+export const defineFileViewerElement = (tagName = FILE_VIEWER_ELEMENT_TAG) => {
+    if (typeof window === 'undefined' || !window.customElements) {
+        return undefined;
+    }
+    const existing = window.customElements.get(tagName);
+    if (existing) {
+        return existing;
+    }
+    window.customElements.define(tagName, FileViewerElement);
+    return FileViewerElement;
+};