From c49361cb6188b99b969140c9f5860eb639446af9 Mon Sep 17 00:00:00 2001 From: Nabil Kashyap Date: Tue, 11 Aug 2026 16:53:11 -0700 Subject: [PATCH 1/4] simple implementation of zoom in / zoom out --- .../components/figure/image/canvas-panel.js | 21 +++++++-- .../11ty/_includes/components/lightbox/ui.js | 13 ------ .../javascript/application/canvas-panel.js | 45 +++++++++++++++---- 3 files changed, 53 insertions(+), 26 deletions(-) diff --git a/packages/11ty/_includes/components/figure/image/canvas-panel.js b/packages/11ty/_includes/components/figure/image/canvas-panel.js index 2847afc85..3d87aff3d 100644 --- a/packages/11ty/_includes/components/figure/image/canvas-panel.js +++ b/packages/11ty/_includes/components/figure/image/canvas-panel.js @@ -41,10 +41,10 @@ export default function (eleventyConfig) { } let choiceId = choice - const allAnnotations = (annotations ?? []).flatMap(anno => anno.items) - if (allAnnotations.some(a => a.type === 'choice') && !choice) { + const allAnnotations = (annotations ?? []).flatMap((anno) => anno.items) + if (allAnnotations.some((a) => a.type === 'choice') && !choice) { const defaultAnnotation = allAnnotations.at(0) - const selectedAnnotation = allAnnotations.find(item => item.selected) + const selectedAnnotation = allAnnotations.find((item) => item.selected) choiceId = selectedAnnotation ? selectedAnnotation.uri : defaultAnnotation.uri } @@ -60,7 +60,20 @@ export default function (eleventyConfig) { region="${region}" virtual-sizes="${virtualSizes}" width="${width}" - /> + > +
+
+ ` } } diff --git a/packages/11ty/_includes/components/lightbox/ui.js b/packages/11ty/_includes/components/lightbox/ui.js index 4f006858c..40462a92f 100644 --- a/packages/11ty/_includes/components/lightbox/ui.js +++ b/packages/11ty/_includes/components/lightbox/ui.js @@ -2,19 +2,6 @@ import { html } from '#lib/common-tags/index.js' export default function (eleventyConfig) { return function (figures) { - const zoomButtons = () => { - const zoomInAriaLabel = 'Zoom In' - const zoomOutAriaLabel = 'Zoom Out' - // TODO determine how to programattically zoom with `image-service`/`canvas-panel` - const displayZoomButtons = false - return displayZoomButtons - ? html` - - - ` - : '' - } - const fullscreenButton = () => { const ariaLabel = 'View Fullscreen' return html` diff --git a/packages/11ty/content/_assets/javascript/application/canvas-panel.js b/packages/11ty/content/_assets/javascript/application/canvas-panel.js index 29b93a020..487ec30bc 100644 --- a/packages/11ty/content/_assets/javascript/application/canvas-panel.js +++ b/packages/11ty/content/_assets/javascript/application/canvas-panel.js @@ -37,7 +37,6 @@ const getServiceId = (element) => { return imageSequence.getAttribute('sequence-id') } else { // console.info(`Hash does not reference a canvas panel or image service component:`, element) - } } @@ -91,7 +90,9 @@ const goToFigureState = function ({ // Done if there's no service to annotate / target if (!serviceId) return - const inputs = document.querySelectorAll(`#${figureId} .annotations-ui__input, [slot="slides"][id="${figureId}"] .annotations-ui__input`) + const inputs = document.querySelectorAll( + `#${figureId} .annotations-ui__input, [slot="slides"][id="${figureId}"] .annotations-ui__input` + ) const annotations = [...inputs].map((input) => { const id = input.getAttribute('data-annotation-id') input.checked = annotationIds.includes(id) @@ -232,6 +233,24 @@ const selectChoice = (canvasPanel, annotation) => { }) } +/** + * Add event handlers for zoom buttons + */ +const setupZoomHandlers = () => { + const canvasPanels = document.querySelectorAll('canvas-panel') + for (const canvasPanel of canvasPanels) { + const zoomIn = canvasPanel.querySelector('[data-lightbox-zoomin]') + const zoomOut = canvasPanel.querySelector('[data-lightbox-zoomout]') + + zoomIn.addEventListener('click', () => canvasPanel.zoomIn()) + zoomOut.addEventListener('click', () => canvasPanel.zoomOut()) + canvasPanel.addEventListener('zoom', ({ detail }) => { + zoomIn.toggleAttribute('disabled', !detail.canZoomIn) + zoomOut.toggleAttribute('disabled', !detail.canZoomOut) + }) + } +} + /** * Add event handlers to Annotations UI links and inputs */ @@ -269,6 +288,8 @@ const setUpUIEventHandlers = () => { goToFigureState({ annotationIds, figureId, region, sequence }) ) } + + setupZoomHandlers() } /** @@ -295,9 +316,13 @@ const setUpUIEventHandlers = () => { * @property {Array} annotations */ const update = (id, data) => { - const webComponents = document.querySelectorAll(`canvas-panel[canvas-id="${id}"], image-service[src="${id}"], q-image-sequence[sequence-id="${id}"]`) + const webComponents = document.querySelectorAll( + `canvas-panel[canvas-id="${id}"], image-service[src="${id}"], q-image-sequence[sequence-id="${id}"]` + ) if (!webComponents.length) { - console.error(`Failed to call update on canvas panel or image-service component with id ${id}. Element does not exist.`) + console.error( + `Failed to call update on canvas panel or image-service component with id ${id}. Element does not exist.` + ) } const { annotations, region } = data @@ -309,13 +334,15 @@ const update = (id, data) => { } if (region && !isImageSequence) { - const target = region && region !== 'reset' - ? getTarget(region) - : getTarget(element.getAttribute('region')) + const target = + region && region !== 'reset' ? getTarget(region) : getTarget(element.getAttribute('region')) - const transition = { easing: element.easingFunctions().easeOutExpo, duration: 2000 } + const transition = { + easing: element.easingFunctions().easeOutExpo, + duration: 2000 + } const regionTransition = () => { - element.transition(tm => { + element.transition((tm) => { tm.goToRegion(target, { transition }) }) } From 71fdf16a04194c7b06a3fd37e8b25677a946f6b0 Mon Sep 17 00:00:00 2001 From: Nabil Kashyap Date: Wed, 12 Aug 2026 09:42:52 -0700 Subject: [PATCH 2/4] update logic + docs --- .../_assets/javascript/application/canvas-panel.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/11ty/content/_assets/javascript/application/canvas-panel.js b/packages/11ty/content/_assets/javascript/application/canvas-panel.js index 487ec30bc..788a08366 100644 --- a/packages/11ty/content/_assets/javascript/application/canvas-panel.js +++ b/packages/11ty/content/_assets/javascript/application/canvas-panel.js @@ -237,7 +237,7 @@ const selectChoice = (canvasPanel, annotation) => { * Add event handlers for zoom buttons */ const setupZoomHandlers = () => { - const canvasPanels = document.querySelectorAll('canvas-panel') + const canvasPanels = document.querySelectorAll('canvas-panel[preset=zoom]') for (const canvasPanel of canvasPanels) { const zoomIn = canvasPanel.querySelector('[data-lightbox-zoomin]') const zoomOut = canvasPanel.querySelector('[data-lightbox-zoomout]') @@ -252,7 +252,7 @@ const setupZoomHandlers = () => { } /** - * Add event handlers to Annotations UI links and inputs + * Add event handlers to Annotations UI links, inputs and zoom buttons */ const setUpUIEventHandlers = () => { /** @@ -288,8 +288,6 @@ const setUpUIEventHandlers = () => { goToFigureState({ annotationIds, figureId, region, sequence }) ) } - - setupZoomHandlers() } /** @@ -305,6 +303,11 @@ const setUpUIEventHandlers = () => { input.addEventListener('click', ({ target }) => handleSelect(target)) } + + /** + * Add click handlers to zoom buttons + */ + setupZoomHandlers() } /** From 1f2cd87d18a51405b71467a6921a49da8b8c0867 Mon Sep 17 00:00:00 2001 From: Nabil Kashyap Date: Wed, 12 Aug 2026 10:22:17 -0700 Subject: [PATCH 3/4] remove reference to unused var --- .../11ty/_includes/components/lightbox/ui.js | 37 +++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/packages/11ty/_includes/components/lightbox/ui.js b/packages/11ty/_includes/components/lightbox/ui.js index 40462a92f..bd889b878 100644 --- a/packages/11ty/_includes/components/lightbox/ui.js +++ b/packages/11ty/_includes/components/lightbox/ui.js @@ -8,7 +8,8 @@ export default function (eleventyConfig) { ` @@ -21,7 +22,9 @@ export default function (eleventyConfig) { const counter = () => { return figures.length > 1 - ? html` of ` + ? html` of ` : '' } @@ -30,24 +33,28 @@ export default function (eleventyConfig) { const nextAriaLabel = 'Next (right arrow key)' return figures.length > 1 ? html` - - ` + + ` : '' } return html`
-
- ${zoomButtons()} - ${fullscreenButton()} -
-
- ${downloadButton()} - ${counter()} -
+
${fullscreenButton()}
+
${downloadButton()} ${counter()}
${navigationButtons()}
` From 99fb8a4446ca629a08dc33f58eee2af9b5120c8b Mon Sep 17 00:00:00 2001 From: Nabil Kashyap Date: Wed, 12 Aug 2026 10:38:51 -0700 Subject: [PATCH 4/4] only render buttons on preset zoom --- .../components/figure/image/canvas-panel.js | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/11ty/_includes/components/figure/image/canvas-panel.js b/packages/11ty/_includes/components/figure/image/canvas-panel.js index 3d87aff3d..09c980201 100644 --- a/packages/11ty/_includes/components/figure/image/canvas-panel.js +++ b/packages/11ty/_includes/components/figure/image/canvas-panel.js @@ -49,6 +49,24 @@ export default function (eleventyConfig) { choiceId = selectedAnnotation ? selectedAnnotation.uri : defaultAnnotation.uri } + const zoomButtons = + preset === 'zoom' + ? html` +
+
+ ` + : '' + return html` -
-
+ ${zoomButtons} ` }