Side panel

sidePanelPlugin renders the panel into the aside below: document title and canvas count from the manifest, live page status from the viewer, and Previous/Next/Thumbnails controls. Its toggle button docks into the viewer header.

Code example

<!-- Viewer and panel hosts in your markup -->
<div id="tify"></div>
<aside id="panel"></aside>

import Tify from 'tify';
import { sidePanelPlugin } from '@projektemacher/tify-plugin-side-panel';

const tify = new Tify({ container: '#tify', manifestUrl });
// The plugin fills the #panel host above and docks
// a toggle button into the viewer header.
const plugin = await sidePanelPlugin(tify, {
  panelEl: document.querySelector('#panel'),
  dock: 'auto',
  autoOpen: true,
});

// The same contents, constructed programmatically with core:
import { createSidePanel, dockPanel, DOCK_ICONS } from '@projektemacher/tify-plugin-core';

const panel = createSidePanel(document.querySelector('#panel'), 'Document');
const title = document.createElement('p');
title.textContent = 'Mock Book — 3 canvases'; // from the manifest
panel.body.append(title);
panel.status.textContent = 'Viewing page 1'; // updated on page change
const prev = document.createElement('button');
prev.textContent = '← Previous';
prev.addEventListener('click', () => tify.setPage(1));
panel.body.append(prev);
dockPanel({ tify, id: 'document', label: 'Document', iconSvg: DOCK_ICONS.list, contentEl: panel.root });

Documentation