diff options
| -rw-r--r-- | src/content/dependencies/generatePageLayout.js | 39 | ||||
| -rw-r--r-- | src/static/client.js | 8 |
2 files changed, 45 insertions, 2 deletions
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js index 1853fb1e..796dc1e5 100644 --- a/src/content/dependencies/generatePageLayout.js +++ b/src/content/dependencies/generatePageLayout.js @@ -378,6 +378,43 @@ export default { const sidebarRightHTML = generateSidebarHTML('rightSidebar', 'sidebar-right'); const collapseSidebars = slots.leftSidebarCollapse && slots.rightSidebarCollapse; + const imageOverlayHTML = html.tag('div', {id: 'image-overlay-container'}, + html.tag('div', {id: 'image-overlay-content-container'}, [ + html.tag('a', {id: 'image-overlay-image-container'}, [ + html.tag('img', {id: 'image-overlay-image'}), + html.tag('img', {id: 'image-overlay-image-thumb'}), + ]), + html.tag('div', {id: 'image-overlay-action-container'}, [ + html.tag('div', {id: 'image-overlay-action-content-without-size'}, + language.$('releaseInfo.viewOriginalFile', { + link: html.tag('a', {class: 'image-overlay-view-original'}, + language.$('releaseInfo.viewOriginalFile.link')), + })), + + html.tag('div', {id: 'image-overlay-action-content-with-size'}, [ + language.$('releaseInfo.viewOriginalFile.withSize', { + link: html.tag('a', {class: 'image-overlay-view-original'}, + language.$('releaseInfo.viewOriginalFile.link')), + size: html.tag('span', + {[html.joinChildren]: ''}, + [ + html.tag('span', {id: 'image-overlay-file-size-kilobytes'}, + language.$('count.fileSize.kilobytes', { + kilobytes: html.tag('span', {class: 'image-overlay-file-size-count'}), + })), + html.tag('span', {id: 'image-overlay-file-size-megabytes'}, + language.$('count.fileSize.megabytes', { + megabytes: html.tag('span', {class: 'image-overlay-file-size-count'}), + })), + ]), + }), + + html.tag('span', {id: 'image-overlay-file-size-warning'}, + language.$('releaseInfo.viewOriginalFile.sizeWarning')), + ]), + ]), + ])); + const layoutHTML = [ navHTML, // banner.position === 'top' && bannerHTML, @@ -491,7 +528,7 @@ export default { ]), // infoCardHTML, - // imageOverlayHTML, + imageOverlayHTML, html.tag('script', { type: 'module', diff --git a/src/static/client.js b/src/static/client.js index 35ef82ee..62122952 100644 --- a/src/static/client.js +++ b/src/static/client.js @@ -645,11 +645,17 @@ updateStickyHeading(); // Image overlay ------------------------------------------ function addImageOverlayClickHandlers() { + const container = document.getElementById('image-overlay-container'); + + if (!container) { + console.warn(`#image-overlay-container missing, image overlay module disabled.`); + return; + } + for (const img of document.querySelectorAll('.image-link')) { img.addEventListener('click', handleImageLinkClicked); } - const container = document.getElementById('image-overlay-container'); const actionContainer = document.getElementById('image-overlay-action-container'); container.addEventListener('click', handleContainerClicked); |