1 files changed, 5 insertions, 47 deletions

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();