« get me outta code hell

content: generatePageLayout: image overlay container - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/content/dependencies
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2023-06-07 11:32:45 -0300
committer(quasar) nebula <qznebula@protonmail.com>2023-06-07 11:32:45 -0300
commit0e150bbdf4c384bd2eee6fe3e06ab7b4eb3563da (patch)
treef3ac6a91e4b0ddb75c81d09d2799b623789645f2 /src/content/dependencies
parent05b7dc2f86b7b4e89b07cc54f53e851fe11e0e1a (diff)
content: generatePageLayout: image overlay container
Diffstat (limited to 'src/content/dependencies')
-rw-r--r--src/content/dependencies/generatePageLayout.js39
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',