@docmentis/udoc-viewer 0.1.0

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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,585 @@
+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