content: generateImageOverlay

Factored out of generatePageLayout. It's still just a totally
static template.

2 files changed, 55 insertions, 47 deletions

diff --git a/src/content/dependencies/generateImageOverlay.js b/src/content/dependencies/generateImageOverlay.js
new file mode 100644
index 00000000..cfb78a1b
--- /dev/null
+++ b/src/content/dependencies/generateImageOverlay.js
@@ -0,0 +1,50 @@
+export default {
+  extraDependencies: ['html', 'language'],
+
+  generate: ({html, language}) =>
+    html.tag('div', {id: 'image-overlay-container'},
+      html.tag('div', {id: 'image-overlay-content-container'}, [
+        html.tag('span', {id: 'image-overlay-image-area'},
+          html.tag('span', {id: 'image-overlay-image-layout'}, [
+            html.tag('img', {id: 'image-overlay-image'}),
+            html.tag('img', {id: 'image-overlay-image-thumb'}),
+          ])),
+
+        html.tag('div', {id: 'image-overlay-action-container'},
+          language.encapsulate('releaseInfo.viewOriginalFile', capsule => [
+            html.tag('div', {id: 'image-overlay-action-content-without-size'},
+              language.$(capsule, {
+                link: html.tag('a', {class: 'image-overlay-view-original'},
+                  language.$(capsule, 'link')),
+              })),
+
+            html.tag('div', {id: 'image-overlay-action-content-with-size'}, [
+              language.$(capsule, 'withSize', {
+                link:
+                  html.tag('a', {class: 'image-overlay-view-original'},
+                    language.$(capsule, '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.$(capsule, 'sizeWarning')),
+            ]),
+          ])),
+      ])),
+};
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 3fdc0ea6..f92a80cd 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -5,6 +5,7 @@ export default {
   contentDependencies: [
     'generateColorStyleRules',
     'generateFooterLocalizationLinks',
+    'generateImageOverlay',
     'generatePageSidebar',
     'generateSearchSidebarBox',
     'generateStickyHeadingContainer',
@@ -60,6 +61,9 @@ export default {
     relations.colorStyleRules =
       relation('generateColorStyleRules');
 
+    relations.imageOverlay =
+      relation('generateImageOverlay');
+
     return relations;
   },
 
@@ -538,52 +542,6 @@ export default {
             ])),
         ]);
 
-    const imageOverlayHTML = html.tag('div', {id: 'image-overlay-container'},
-      html.tag('div', {id: 'image-overlay-content-container'}, [
-        html.tag('span', {id: 'image-overlay-image-area'},
-          html.tag('span', {id: 'image-overlay-image-layout'}, [
-            html.tag('img', {id: 'image-overlay-image'}),
-            html.tag('img', {id: 'image-overlay-image-thumb'}),
-          ])),
-
-        html.tag('div', {id: 'image-overlay-action-container'},
-          language.encapsulate('releaseInfo.viewOriginalFile', capsule => [
-            html.tag('div', {id: 'image-overlay-action-content-without-size'},
-              language.$(capsule, {
-                link: html.tag('a', {class: 'image-overlay-view-original'},
-                  language.$(capsule, 'link')),
-              })),
-
-            html.tag('div', {id: 'image-overlay-action-content-with-size'}, [
-              language.$(capsule, 'withSize', {
-                link:
-                  html.tag('a', {class: 'image-overlay-view-original'},
-                    language.$(capsule, '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.$(capsule, 'sizeWarning')),
-            ]),
-          ])),
-      ]));
-
     const styleRulesCSS =
       html.resolve(slots.styleRules, {normalize: 'string'});
 
@@ -780,7 +738,7 @@ export default {
                 ]),
 
               // infoCardHTML,
-              imageOverlayHTML,
+              relations.imageOverlay,
             ]),
         ])
     ]).toString();