content: generatePageLayout: image overlay container

1 files changed, 38 insertions, 1 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',