@docmentis/udoc-viewer 0.1.0 → 0.1.1

package/dist/ui/components/FloatingBar.d.ts

@@ -1,55 +0,0 @@
-import { Component } from '../Component';
-/**
- * Floating bar component providing quick access to common viewer controls.
- *
- * Contains:
- * - Tool selector dropdown (select, hand)
- * - Page navigation (prev/next buttons, page input)
- * - Zoom controls (zoom in/out, percentage input, preset dropdown)
- * - Settings popover (display mode, layout mode, rotation, seamless)
- */
-export declare class FloatingBar extends Component<HTMLDivElement> {
-    private toolDropdown;
-    private toolDropdownBtn;
-    private toolMenu;
-    private toolItems;
-    private prevBtn;
-    private nextBtn;
-    private pageInput;
-    private pageCountEl;
-    private zoomOutBtn;
-    private zoomInBtn;
-    private zoomInput;
-    private zoomDropdownBtn;
-    private zoomMenu;
-    private settingsBtn;
-    private settingsPopover;
-    private displayModeOptions;
-    private layoutModeOptions;
-    private rotationOptions;
-    private seamlessOptions;
-    private static readonly TOOLS;
-    protected createElement(): HTMLDivElement;
-    private createToolDropdown;
-    private createPageNavigation;
-    private createZoomControls;
-    private createSettings;
-    private createDisplayModeSection;
-    private createLayoutModeSection;
-    private createRotationSection;
-    private createSeamlessSection;
-    private createSeparator;
-    protected bindEvents(): void;
-    protected subscribeToState(): void;
-    private updateControlsEnabled;
-    private updateNavigationButtons;
-    private updateZoomDisplay;
-    private updateToolDisplay;
-    private closeAllDropdowns;
-    /**
-     * Close all open dropdown menus.
-     * Can be called from the viewer when other menus are opened.
-     */
-    closeDropdowns(): void;
-}
-//# sourceMappingURL=FloatingBar.d.ts.map

package/dist/ui/components/FloatingBar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FloatingBar.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FloatingBar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC;;;;;;;;GAQG;AACH,qBAAa,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAEtD,OAAO,CAAC,YAAY,CAA+B;IACnD,OAAO,CAAC,eAAe,CAAkC;IACzD,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,SAAS,CAAwC;IAGzD,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,WAAW,CAAgC;IAGnD,OAAO,CAAC,UAAU,CAAkC;IACpD,OAAO,CAAC,SAAS,CAAkC;IACnD,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,eAAe,CAAkC;IACzD,OAAO,CAAC,QAAQ,CAA+B;IAG/C,OAAO,CAAC,WAAW,CAAkC;IACrD,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,kBAAkB,CAAqB;IAC/C,OAAO,CAAC,iBAAiB,CAAqB;IAC9C,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,eAAe,CAAqB;IAG5C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAG3B;IAEF,SAAS,CAAC,aAAa,IAAI,cAAc;IAyBzC,OAAO,CAAC,kBAAkB;IA+B1B,OAAO,CAAC,oBAAoB;IAgC5B,OAAO,CAAC,kBAAkB;IAqF1B,OAAO,CAAC,cAAc;IAuCtB,OAAO,CAAC,wBAAwB;IA+BhC,OAAO,CAAC,uBAAuB;IAiC/B,OAAO,CAAC,qBAAqB;IAiC7B,OAAO,CAAC,qBAAqB;IA+B7B,OAAO,CAAC,eAAe;IAMvB,SAAS,CAAC,UAAU,IAAI,IAAI;IAmI5B,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAkElC,OAAO,CAAC,qBAAqB;IAgB7B,OAAO,CAAC,uBAAuB;IAe/B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,iBAAiB;IAMzB;;;OAGG;IACH,cAAc,IAAI,IAAI;CAGzB"}

package/dist/ui/components/FloatingBar.js

@@ -1,585 +0,0 @@
-import { Component } from '../Component';
-import { ICONS } from '../icons';
-/**
- * Floating bar component providing quick access to common viewer controls.
- *
- * Contains:
- * - Tool selector dropdown (select, hand)
- * - Page navigation (prev/next buttons, page input)
- * - Zoom controls (zoom in/out, percentage input, preset dropdown)
- * - Settings popover (display mode, layout mode, rotation, seamless)
- */
-export class FloatingBar extends Component {
-    // Tool dropdown elements
-    toolDropdown = null;
-    toolDropdownBtn = null;
-    toolMenu = null;
-    toolItems = new Map();
-    // Page navigation elements
-    prevBtn = null;
-    nextBtn = null;
-    pageInput = null;
-    pageCountEl = null;
-    // Zoom control elements
-    zoomOutBtn = null;
-    zoomInBtn = null;
-    zoomInput = null;
-    zoomDropdownBtn = null;
-    zoomMenu = null;
-    // Settings elements
-    settingsBtn = null;
-    settingsPopover = null;
-    displayModeOptions = [];
-    layoutModeOptions = [];
-    rotationOptions = [];
-    seamlessOptions = [];
-    // Tool configuration (static to be available before super() call)
-    static TOOLS = [
-        { id: 'select', icon: ICONS.toolSelect, label: 'Select', shortcut: 'V' },
-        { id: 'hand', icon: ICONS.toolHand, label: 'Hand', shortcut: 'H' },
-    ];
-    createElement() {
-        const floatingBar = document.createElement('div');
-        floatingBar.className = 'udoc-floating-bar';
-        // Tool selector dropdown
-        this.createToolDropdown(floatingBar);
-        // Separator after tools
-        floatingBar.appendChild(this.createSeparator());
-        // Page navigation group
-        this.createPageNavigation(floatingBar);
-        // Separator
-        floatingBar.appendChild(this.createSeparator());
-        // Zoom controls
-        this.createZoomControls(floatingBar);
-        // Settings wrapper (hidden on mobile)
-        this.createSettings(floatingBar);
-        return floatingBar;
-    }
-    createToolDropdown(parent) {
-        this.toolDropdown = document.createElement('div');
-        this.toolDropdown.className = 'udoc-tool-dropdown';
-        const activeTool = this.viewer.state.get('activeTool');
-        const initialTool = FloatingBar.TOOLS.find(t => t.id === activeTool) || FloatingBar.TOOLS[0];
-        this.toolDropdownBtn = document.createElement('button');
-        this.toolDropdownBtn.className = 'udoc-tool-dropdown-btn';
-        this.toolDropdownBtn.innerHTML = `${initialTool.icon}<span class="udoc-tool-chevron">${ICONS.chevronDown}</span>`;
-        this.toolDropdownBtn.title = `${initialTool.label} (${initialTool.shortcut})`;
-        this.toolMenu = document.createElement('div');
-        this.toolMenu.className = 'udoc-tool-menu';
-        FloatingBar.TOOLS.forEach(tool => {
-            const item = document.createElement('div');
-            item.className = 'udoc-tool-item';
-            item.dataset.tool = tool.id;
-            if (tool.id === activeTool) {
-                item.classList.add('selected');
-            }
-            item.innerHTML = `${tool.icon}<span>${tool.label}</span><span class="udoc-tool-shortcut">${tool.shortcut}</span>`;
-            this.toolMenu.appendChild(item);
-            this.toolItems.set(tool.id, item);
-        });
-        this.toolDropdown.append(this.toolDropdownBtn, this.toolMenu);
-        parent.appendChild(this.toolDropdown);
-    }
-    createPageNavigation(parent) {
-        const pageGroup = document.createElement('div');
-        pageGroup.className = 'udoc-floating-bar-group';
-        this.prevBtn = document.createElement('button');
-        this.prevBtn.innerHTML = ICONS.chevronLeft;
-        this.prevBtn.title = 'Previous page';
-        this.prevBtn.disabled = true;
-        this.pageInput = document.createElement('input');
-        this.pageInput.type = 'text';
-        this.pageInput.className = 'udoc-page-input';
-        this.pageInput.value = '1';
-        this.pageInput.disabled = true;
-        const pageInfo = document.createElement('span');
-        pageInfo.className = 'udoc-page-info';
-        pageInfo.textContent = '/';
-        this.pageCountEl = document.createElement('span');
-        this.pageCountEl.className = 'udoc-page-info';
-        this.pageCountEl.textContent = '1';
-        this.nextBtn = document.createElement('button');
-        this.nextBtn.innerHTML = ICONS.chevronRight;
-        this.nextBtn.title = 'Next page';
-        this.nextBtn.disabled = true;
-        pageGroup.append(this.prevBtn, this.pageInput, pageInfo, this.pageCountEl, this.nextBtn);
-        parent.appendChild(pageGroup);
-    }
-    createZoomControls(parent) {
-        // Zoom controls wrapper (hidden on very small screens)
-        const zoomControls = document.createElement('div');
-        zoomControls.className = 'udoc-zoom-controls';
-        zoomControls.style.cssText = 'display:contents;';
-        // Zoom group with dropdown
-        const zoomGroup = document.createElement('div');
-        zoomGroup.className = 'udoc-floating-bar-group';
-        this.zoomOutBtn = document.createElement('button');
-        this.zoomOutBtn.innerHTML = ICONS.zoomOut;
-        this.zoomOutBtn.title = 'Zoom out';
-        this.zoomOutBtn.disabled = true;
-        // Zoom dropdown with input
-        const zoomDropdown = document.createElement('div');
-        zoomDropdown.className = 'udoc-zoom-dropdown';
-        const zoomInputWrapper = document.createElement('div');
-        zoomInputWrapper.className = 'udoc-zoom-input-wrapper';
-        this.zoomInput = document.createElement('input');
-        this.zoomInput.type = 'text';
-        this.zoomInput.className = 'udoc-zoom-input';
-        this.zoomInput.value = '100%';
-        this.zoomInput.disabled = true;
-        this.zoomDropdownBtn = document.createElement('button');
-        this.zoomDropdownBtn.className = 'udoc-zoom-dropdown-btn';
-        this.zoomDropdownBtn.innerHTML = ICONS.chevronDown;
-        this.zoomDropdownBtn.disabled = true;
-        zoomInputWrapper.append(this.zoomInput, this.zoomDropdownBtn);
-        this.zoomMenu = document.createElement('div');
-        this.zoomMenu.className = 'udoc-dropdown-menu';
-        const zoomPresets = [
-            { value: '50', label: '50%' },
-            { value: '75', label: '75%' },
-            { value: '100', label: '100%' },
-            { value: '125', label: '125%' },
-            { value: '150', label: '150%' },
-            { value: '200', label: '200%' },
-        ];
-        const zoomModes = [
-            { value: 'fit-page', label: 'Fit Page' },
-            { value: 'fit-width', label: 'Fit Width' },
-            { value: 'actual-size', label: 'Actual Size' },
-        ];
-        zoomPresets.forEach(preset => {
-            const item = document.createElement('div');
-            item.className = 'udoc-dropdown-item';
-            item.dataset.zoomValue = preset.value;
-            item.textContent = preset.label;
-            this.zoomMenu.appendChild(item);
-        });
-        const divider = document.createElement('div');
-        divider.className = 'udoc-dropdown-divider';
-        this.zoomMenu.appendChild(divider);
-        zoomModes.forEach(mode => {
-            const item = document.createElement('div');
-            item.className = 'udoc-dropdown-item';
-            item.dataset.zoomMode = mode.value;
-            item.textContent = mode.label;
-            this.zoomMenu.appendChild(item);
-        });
-        zoomDropdown.append(zoomInputWrapper, this.zoomMenu);
-        this.zoomInBtn = document.createElement('button');
-        this.zoomInBtn.innerHTML = ICONS.zoomIn;
-        this.zoomInBtn.title = 'Zoom in';
-        this.zoomInBtn.disabled = true;
-        zoomGroup.append(this.zoomOutBtn, zoomDropdown, this.zoomInBtn);
-        zoomControls.appendChild(zoomGroup);
-        parent.appendChild(zoomControls);
-    }
-    createSettings(parent) {
-        // Separator before settings (part of settings wrapper for mobile hiding)
-        const settingsSep = this.createSeparator();
-        // Settings wrapper (hidden on mobile)
-        const settingsWrapper = document.createElement('div');
-        settingsWrapper.className = 'udoc-settings-wrapper';
-        settingsWrapper.style.cssText = 'display:contents;';
-        this.settingsBtn = document.createElement('button');
-        this.settingsBtn.className = 'udoc-settings-btn';
-        this.settingsBtn.innerHTML = ICONS.settings;
-        this.settingsBtn.title = 'View settings';
-        this.settingsBtn.disabled = true;
-        this.settingsPopover = document.createElement('div');
-        this.settingsPopover.className = 'udoc-settings-popover';
-        // Display Mode section
-        this.createDisplayModeSection();
-        // Layout Mode section
-        this.createLayoutModeSection();
-        // Rotation section
-        this.createRotationSection();
-        // Seamless section
-        this.createSeamlessSection();
-        // Settings wrapper contains separator + button + popover
-        const settingsInner = document.createElement('div');
-        settingsInner.style.cssText = 'position:relative;display:flex;align-items:center;';
-        settingsInner.append(this.settingsBtn, this.settingsPopover);
-        settingsWrapper.append(settingsSep, settingsInner);
-        parent.appendChild(settingsWrapper);
-    }
-    createDisplayModeSection() {
-        const displaySection = document.createElement('div');
-        displaySection.className = 'udoc-settings-section';
-        const displayLabel = document.createElement('div');
-        displayLabel.className = 'udoc-settings-label';
-        displayLabel.textContent = 'Display';
-        const displayOptions = document.createElement('div');
-        displayOptions.className = 'udoc-settings-options';
-        const displayMode = this.viewer.state.get('displayMode');
-        const displayModes = [
-            { value: 'single', icon: ICONS.displaySingle, title: 'Single page' },
-            { value: 'scroll', icon: ICONS.displayScroll, title: 'Continuous scroll' },
-        ];
-        this.displayModeOptions = [];
-        displayModes.forEach(mode => {
-            const option = document.createElement('label');
-            option.className = 'udoc-settings-option';
-            option.dataset.displayMode = mode.value;
-            option.innerHTML = mode.icon;
-            option.title = mode.title;
-            if (mode.value === displayMode) {
-                option.classList.add('selected');
-            }
-            displayOptions.appendChild(option);
-            this.displayModeOptions.push(option);
-        });
-        displaySection.append(displayLabel, displayOptions);
-        this.settingsPopover.appendChild(displaySection);
-    }
-    createLayoutModeSection() {
-        const layoutSection = document.createElement('div');
-        layoutSection.className = 'udoc-settings-section';
-        const layoutLabel = document.createElement('div');
-        layoutLabel.className = 'udoc-settings-label';
-        layoutLabel.textContent = 'Layout';
-        const layoutOptions = document.createElement('div');
-        layoutOptions.className = 'udoc-settings-options';
-        const layoutMode = this.viewer.state.get('layoutMode');
-        const layoutModes = [
-            { value: 'single', icon: ICONS.layout1up, title: '1-up' },
-            { value: 'double', icon: ICONS.layout2up, title: '2-up' },
-            { value: 'double-cover', icon: ICONS.layout2upCover, title: '2-up cover' },
-            { value: 'grid', icon: ICONS.layoutGrid, title: 'Grid' },
-        ];
-        this.layoutModeOptions = [];
-        layoutModes.forEach(mode => {
-            const option = document.createElement('label');
-            option.className = 'udoc-settings-option';
-            option.dataset.layoutMode = mode.value;
-            option.innerHTML = mode.icon;
-            option.title = mode.title;
-            if (mode.value === layoutMode) {
-                option.classList.add('selected');
-            }
-            layoutOptions.appendChild(option);
-            this.layoutModeOptions.push(option);
-        });
-        layoutSection.append(layoutLabel, layoutOptions);
-        this.settingsPopover.appendChild(layoutSection);
-    }
-    createRotationSection() {
-        const rotationSection = document.createElement('div');
-        rotationSection.className = 'udoc-settings-section';
-        const rotationLabel = document.createElement('div');
-        rotationLabel.className = 'udoc-settings-label';
-        rotationLabel.textContent = 'Rotation';
-        const rotationOptionsContainer = document.createElement('div');
-        rotationOptionsContainer.className = 'udoc-settings-options';
-        const rotation = this.viewer.state.get('rotation');
-        const rotations = [
-            { value: 0, icon: ICONS.rotate0, title: '0°' },
-            { value: 90, icon: ICONS.rotate90, title: '90°' },
-            { value: 180, icon: ICONS.rotate180, title: '180°' },
-            { value: 270, icon: ICONS.rotate270, title: '270°' },
-        ];
-        this.rotationOptions = [];
-        rotations.forEach(rot => {
-            const option = document.createElement('label');
-            option.className = 'udoc-settings-option';
-            option.dataset.rotation = String(rot.value);
-            option.innerHTML = rot.icon;
-            option.title = rot.title;
-            if (rot.value === rotation) {
-                option.classList.add('selected');
-            }
-            rotationOptionsContainer.appendChild(option);
-            this.rotationOptions.push(option);
-        });
-        rotationSection.append(rotationLabel, rotationOptionsContainer);
-        this.settingsPopover.appendChild(rotationSection);
-    }
-    createSeamlessSection() {
-        const seamlessSection = document.createElement('div');
-        seamlessSection.className = 'udoc-settings-section';
-        const seamlessLabel = document.createElement('div');
-        seamlessLabel.className = 'udoc-settings-label';
-        seamlessLabel.textContent = 'Gaps';
-        const seamlessOptionsContainer = document.createElement('div');
-        seamlessOptionsContainer.className = 'udoc-settings-options';
-        const seamless = this.viewer.state.get('seamless');
-        const seamlessModes = [
-            { value: false, icon: ICONS.seamlessOff, title: 'Show gaps' },
-            { value: true, icon: ICONS.seamlessOn, title: 'No gaps' },
-        ];
-        this.seamlessOptions = [];
-        seamlessModes.forEach(mode => {
-            const option = document.createElement('label');
-            option.className = 'udoc-settings-option';
-            option.dataset.seamless = String(mode.value);
-            option.innerHTML = mode.icon;
-            option.title = mode.title;
-            if (mode.value === seamless) {
-                option.classList.add('selected');
-            }
-            seamlessOptionsContainer.appendChild(option);
-            this.seamlessOptions.push(option);
-        });
-        seamlessSection.append(seamlessLabel, seamlessOptionsContainer);
-        this.settingsPopover.appendChild(seamlessSection);
-    }
-    createSeparator() {
-        const sep = document.createElement('div');
-        sep.className = 'udoc-separator';
-        return sep;
-    }
-    bindEvents() {
-        // Tool dropdown button
-        this.addEventListener(this.toolDropdownBtn, 'click', (e) => {
-            e.stopPropagation();
-            this.closeAllDropdowns();
-            this.toolMenu?.classList.toggle('open');
-        });
-        // Tool menu items
-        this.addEventListener(this.toolMenu, 'click', (e) => {
-            const target = e.target;
-            const item = target.closest('.udoc-tool-item');
-            if (!item)
-                return;
-            const tool = item.dataset.tool;
-            if (tool) {
-                this.viewer.setActiveTool(tool);
-            }
-            this.toolMenu?.classList.remove('open');
-        });
-        // Pagination
-        this.addEventListener(this.prevBtn, 'click', () => this.viewer.prevPage());
-        this.addEventListener(this.nextBtn, 'click', () => this.viewer.nextPage());
-        this.addEventListener(this.pageInput, 'keydown', (e) => {
-            if (e.key === 'Enter') {
-                const page = parseInt(this.pageInput.value, 10);
-                if (!isNaN(page)) {
-                    this.viewer.goToPage(page - 1);
-                }
-                this.pageInput.blur();
-            }
-        });
-        this.addEventListener(this.pageInput, 'blur', () => {
-            const currentPage = this.viewer.state.get('currentPage');
-            if (this.pageInput) {
-                this.pageInput.value = String(currentPage + 1);
-            }
-        });
-        // Zoom buttons
-        this.addEventListener(this.zoomOutBtn, 'click', () => this.viewer.zoomOut());
-        this.addEventListener(this.zoomInBtn, 'click', () => this.viewer.zoomIn());
-        // Zoom input
-        this.addEventListener(this.zoomInput, 'keydown', (e) => {
-            if (e.key === 'Enter') {
-                const value = parseInt(this.zoomInput.value.replace('%', ''), 10);
-                if (!isNaN(value) && value > 0) {
-                    this.viewer.setZoom(value / 100);
-                }
-                this.zoomInput.blur();
-            }
-        });
-        this.addEventListener(this.zoomInput, 'blur', () => {
-            this.updateZoomDisplay();
-        });
-        // Zoom dropdown button
-        this.addEventListener(this.zoomDropdownBtn, 'click', (e) => {
-            e.stopPropagation();
-            this.closeAllDropdowns();
-            this.zoomMenu?.classList.toggle('open');
-        });
-        // Zoom menu items
-        this.addEventListener(this.zoomMenu, 'click', (e) => {
-            const target = e.target;
-            const item = target.closest('.udoc-dropdown-item');
-            if (!item)
-                return;
-            if (item.dataset.zoomValue) {
-                const value = parseInt(item.dataset.zoomValue, 10);
-                this.viewer.setZoom(value / 100);
-            }
-            else if (item.dataset.zoomMode) {
-                this.viewer.setZoomMode(item.dataset.zoomMode);
-            }
-            this.zoomMenu?.classList.remove('open');
-        });
-        // Settings button
-        this.addEventListener(this.settingsBtn, 'click', (e) => {
-            e.stopPropagation();
-            this.closeAllDropdowns();
-            this.settingsPopover?.classList.toggle('open');
-        });
-        // Display mode options
-        this.displayModeOptions.forEach(option => {
-            this.addEventListener(option, 'click', () => {
-                const mode = option.dataset.displayMode;
-                if (mode)
-                    this.viewer.setDisplayMode(mode);
-            });
-        });
-        // Layout mode options
-        this.layoutModeOptions.forEach(option => {
-            this.addEventListener(option, 'click', () => {
-                const mode = option.dataset.layoutMode;
-                if (mode)
-                    this.viewer.setLayoutMode(mode);
-            });
-        });
-        // Rotation options
-        this.rotationOptions.forEach(option => {
-            this.addEventListener(option, 'click', () => {
-                const value = parseInt(option.dataset.rotation || '0', 10);
-                this.viewer.setRotation(value);
-            });
-        });
-        // Seamless options
-        this.seamlessOptions.forEach(option => {
-            this.addEventListener(option, 'click', () => {
-                const value = option.dataset.seamless === 'true';
-                this.viewer.setSeamless(value);
-            });
-        });
-        // Click outside to close dropdowns
-        this.addEventListener(document, 'click', (e) => {
-            const target = e.target;
-            if (!target.closest('.udoc-zoom-dropdown') &&
-                !target.closest('.udoc-settings-popover') &&
-                !target.closest('.udoc-tool-dropdown')) {
-                this.closeAllDropdowns();
-            }
-        });
-    }
-    subscribeToState() {
-        // Subscribe to page count changes
-        this.subscribe('pageCount', (count) => {
-            if (this.pageCountEl) {
-                this.pageCountEl.textContent = String(count);
-            }
-            this.updateControlsEnabled(count > 0);
-        });
-        // Subscribe to current page changes
-        this.subscribe('currentPage', (page) => {
-            if (this.pageInput) {
-                this.pageInput.value = String(page + 1);
-            }
-            this.updateNavigationButtons();
-        });
-        // Subscribe to zoom changes
-        this.subscribe('zoom', () => {
-            this.updateZoomDisplay();
-        });
-        // Subscribe to zoomMode changes
-        this.subscribe('zoomMode', () => {
-            this.updateZoomDisplay();
-        });
-        // Subscribe to activeTool changes
-        this.subscribe('activeTool', (tool) => {
-            this.updateToolDisplay(tool);
-        });
-        // Subscribe to displayMode changes
-        this.subscribe('displayMode', (mode) => {
-            this.displayModeOptions.forEach(option => {
-                option.classList.toggle('selected', option.dataset.displayMode === mode);
-            });
-        });
-        // Subscribe to layoutMode changes
-        this.subscribe('layoutMode', (mode) => {
-            this.layoutModeOptions.forEach(option => {
-                option.classList.toggle('selected', option.dataset.layoutMode === mode);
-            });
-        });
-        // Subscribe to rotation changes
-        this.subscribe('rotation', (rotation) => {
-            this.rotationOptions.forEach(option => {
-                option.classList.toggle('selected', option.dataset.rotation === String(rotation));
-            });
-        });
-        // Subscribe to seamless changes
-        this.subscribe('seamless', (seamless) => {
-            this.seamlessOptions.forEach(option => {
-                option.classList.toggle('selected', option.dataset.seamless === String(seamless));
-            });
-        });
-        // Subscribe to isLoaded to enable/disable controls
-        this.subscribe('isLoaded', (isLoaded) => {
-            this.updateControlsEnabled(isLoaded);
-        });
-    }
-    updateControlsEnabled(enabled) {
-        if (this.prevBtn)
-            this.prevBtn.disabled = !enabled;
-        if (this.nextBtn)
-            this.nextBtn.disabled = !enabled;
-        if (this.pageInput)
-            this.pageInput.disabled = !enabled;
-        if (this.zoomOutBtn)
-            this.zoomOutBtn.disabled = !enabled;
-        if (this.zoomInBtn)
-            this.zoomInBtn.disabled = !enabled;
-        if (this.zoomInput)
-            this.zoomInput.disabled = !enabled;
-        if (this.zoomDropdownBtn)
-            this.zoomDropdownBtn.disabled = !enabled;
-        if (this.settingsBtn)
-            this.settingsBtn.disabled = !enabled;
-        // Update navigation buttons based on current page
-        if (enabled) {
-            this.updateNavigationButtons();
-        }
-    }
-    updateNavigationButtons() {
-        const currentPage = this.viewer.state.get('currentPage');
-        const pageCount = this.viewer.state.get('pageCount');
-        const isLoaded = this.viewer.state.get('isLoaded');
-        if (!isLoaded || pageCount === 0)
-            return;
-        if (this.prevBtn) {
-            this.prevBtn.disabled = currentPage <= 0;
-        }
-        if (this.nextBtn) {
-            this.nextBtn.disabled = currentPage >= pageCount - 1;
-        }
-    }
-    updateZoomDisplay() {
-        const zoom = this.viewer.state.get('zoom');
-        const zoomMode = this.viewer.state.get('zoomMode');
-        // Always show the percentage in the input
-        if (this.zoomInput) {
-            this.zoomInput.value = `${Math.round(zoom * 100)}%`;
-        }
-        // Update zoom menu selection
-        if (this.zoomMenu) {
-            const items = this.zoomMenu.querySelectorAll('.udoc-dropdown-item');
-            const zoomPercent = Math.round(zoom * 100);
-            items.forEach(item => {
-                const el = item;
-                const isZoomValue = el.dataset.zoomValue === String(zoomPercent);
-                const isZoomMode = el.dataset.zoomMode === zoomMode;
-                el.classList.toggle('selected', isZoomValue || isZoomMode);
-            });
-        }
-    }
-    updateToolDisplay(tool) {
-        const toolConfig = FloatingBar.TOOLS.find(t => t.id === tool) || FloatingBar.TOOLS[0];
-        // Update dropdown button icon
-        if (this.toolDropdownBtn) {
-            this.toolDropdownBtn.innerHTML = `${toolConfig.icon}<span class="udoc-tool-chevron">${ICONS.chevronDown}</span>`;
-            this.toolDropdownBtn.title = `${toolConfig.label} (${toolConfig.shortcut})`;
-        }
-        // Update menu selection
-        this.toolItems.forEach((item, id) => {
-            item.classList.toggle('selected', id === tool);
-        });
-    }
-    closeAllDropdowns() {
-        this.toolMenu?.classList.remove('open');
-        this.zoomMenu?.classList.remove('open');
-        this.settingsPopover?.classList.remove('open');
-    }
-    /**
-     * Close all open dropdown menus.
-     * Can be called from the viewer when other menus are opened.
-     */
-    closeDropdowns() {
-        this.closeAllDropdowns();
-    }
-}
-//# sourceMappingURL=FloatingBar.js.map