Skip to content

simple implementation of zoom in / zoom out Fixes #1274 #1278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bulbil wants to merge 4 commits into
base: main
Choose a base branch
from
Open

simple implementation of zoom in / zoom out Fixes #1274 #1278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c49361c
simple implementation of zoom in / zoom out
bulbil Aug 11, 2026
71fdf16
update logic + docs
bulbil Aug 12, 2026
1f2cd87
remove reference to unused var
bulbil Aug 12, 2026
99fb8a4
only render buttons on preset zoom
bulbil Aug 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 24 additions & 4 deletions packages/11ty/_includes/components/figure/image/canvas-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,32 @@ 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
}

const zoomButtons =
preset === 'zoom'
? html`
<div class="q-lightbox-ui__zoom">
<button
class="q-lightbox-ui__zoom-button q-lightbox-ui__zoom-button--in"
data-lightbox-zoomin
aria-label="Zoom in"
/>
<button
class="q-lightbox-ui__zoom-button q-lightbox-ui__zoom-button--out"
data-lightbox-zoomout
aria-label="Zoom out"
/>
</div>
`
: ''

return html`
<canvas-panel
canvas-id="${canvasId}"
Expand All @@ -60,7 +78,9 @@ export default function (eleventyConfig) {
region="${region}"
virtual-sizes="${virtualSizes}"
width="${width}"
/>
>
${zoomButtons}
</canvas-panel>
`
}
}
50 changes: 22 additions & 28 deletions packages/11ty/_includes/components/lightbox/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,14 @@ 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`
<button class="q-lightbox-ui__zoom-button q-lightbox-ui__zoom-button--in" title="${zoomInAriaLabel}" aria-label="${zoomInAriaLabel}">+</button>
<button class="q-lightbox-ui__zoom-button q-lightbox-ui__zoom-button--out" title="${zoomOutAriaLabel}" aria-label="${zoomOutAriaLabel}">-</button>
`
: ''
}

const fullscreenButton = () => {
const ariaLabel = 'View Fullscreen'
return html`
<button
data-lightbox-fullscreen="false"
class="q-lightbox-ui__fullscreen-button"
title="${ariaLabel}" aria-label="${ariaLabel}"
title="${ariaLabel}"
aria-label="${ariaLabel}"
aria-label="View Fullscreen"
></button>
`
Expand All @@ -34,7 +22,9 @@ export default function (eleventyConfig) {

const counter = () => {
return figures.length > 1
? html`<span class="q-lightbox-ui__counter"><span data-lightbox-counter-current></span> of <span data-lightbox-counter-total></span></span>`
? html`<span class="q-lightbox-ui__counter"
><span data-lightbox-counter-current></span> of <span data-lightbox-counter-total></span
></span>`
: ''
}

Expand All @@ -43,24 +33,28 @@ export default function (eleventyConfig) {
const nextAriaLabel = 'Next (right arrow key)'
return figures.length > 1
? html`
<nav class="q-lightbox-ui__navigation">
<button data-lightbox-previous class="q-lightbox-ui__navigation-button q-lightbox-ui__navigation-button--previous" title="${previousAriaLabel}" aria-label="${previousAriaLabel}"></button>
<button data-lightbox-next class="q-lightbox-ui__navigation-button q-lightbox-ui__navigation-button--next" title="${nextAriaLabel}" aria-label="${nextAriaLabel}"></button>
</nav>
`
<nav class="q-lightbox-ui__navigation">
<button
data-lightbox-previous
class="q-lightbox-ui__navigation-button q-lightbox-ui__navigation-button--previous"
title="${previousAriaLabel}"
aria-label="${previousAriaLabel}"
></button>
<button
data-lightbox-next
class="q-lightbox-ui__navigation-button q-lightbox-ui__navigation-button--next"
title="${nextAriaLabel}"
aria-label="${nextAriaLabel}"
></button>
</nav>
`
: ''
}

return html`
<div class="q-lightbox-ui" slot="ui">
<div class="q-lightbox-ui__zoom-and-fullscreen">
${zoomButtons()}
${fullscreenButton()}
</div>
<div class="q-lightbox-ui__download-and-counter">
${downloadButton()}
${counter()}
</div>
<div class="q-lightbox-ui__zoom-and-fullscreen">${fullscreenButton()}</div>
<div class="q-lightbox-ui__download-and-counter">${downloadButton()} ${counter()}</div>
${navigationButtons()}
</div>
`
Expand Down
50 changes: 40 additions & 10 deletions packages/11ty/content/_assets/javascript/application/canvas-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

}
}

Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -233,7 +234,25 @@ const selectChoice = (canvasPanel, annotation) => {
}

/**
* Add event handlers to Annotations UI links and inputs
* Add event handlers for zoom buttons
*/
const setupZoomHandlers = () => {
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]')

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, inputs and zoom buttons
*/
const setUpUIEventHandlers = () => {
/**
Expand Down Expand Up @@ -284,6 +303,11 @@ const setUpUIEventHandlers = () => {

input.addEventListener('click', ({ target }) => handleSelect(target))
}

/**
* Add click handlers to zoom buttons
*/
setupZoomHandlers()
}

/**
Expand All @@ -295,9 +319,13 @@ const setUpUIEventHandlers = () => {
* @property {Array<Object>} 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

Expand All @@ -309,13 +337,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 })
})
}
Expand Down