content: generatePageLayout: image overlay container

2 files changed, 45 insertions, 2 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 1853fb1..796dc1e 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 35ef82e..6212295 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);