1 files changed, 134 insertions, 41 deletions

diff --git a/src/misc-templates.js b/src/misc-templates.js
index 0e177e0..8a61bf7 100644
--- a/src/misc-templates.js
+++ b/src/misc-templates.js
@@ -10,6 +10,8 @@ import {
   unique,
 } from './util/sugar.js';
 
+import {thumb} from './util/urls.js';
+
 import {
   getTotalDuration,
   sortAlbumsTracksChronologically,
@@ -218,7 +220,7 @@ function unbound_generateChronologyLinks(currentThing, {
 
 // Content warning tags
 
-function unbound_getRevealStringFromWarnings(warnings, {
+function unbound_getRevealStringFromContentWarningMessage(warnings, {
   html,
   language,
 }) {
@@ -230,14 +232,13 @@ function unbound_getRevealStringFromWarnings(warnings, {
   );
 }
 
-function unbound_getRevealStringFromTags(tags, {
+function unbound_getRevealStringFromArtTags(tags, {
+  getRevealStringFromContentWarningMessage,
   language,
-
-  getRevealStringFromWarnings,
 }) {
   return (
     tags?.some(tag => tag.isContentWarning) &&
-      getRevealStringFromWarnings(
+      getRevealStringFromContentWarningMessage(
         language.formatUnitList(
           tags
             .filter(tag => tag.isContentWarning)
@@ -253,7 +254,7 @@ function unbound_generateCoverLink({
   language,
   link,
 
-  getRevealStringFromTags,
+  getRevealStringFromArtTags,
 
   alt,
   path,
@@ -282,7 +283,7 @@ function unbound_generateCoverLink({
       id: 'cover-art',
       link: true,
       square: true,
-      reveal: getRevealStringFromTags(tags),
+      reveal: getRevealStringFromArtTags(tags),
     }),
 
     wikiInfo.enableArtTagUI &&
@@ -574,7 +575,7 @@ function unbound_getGridHTML({
   html,
   language,
 
-  getRevealStringFromTags,
+  getRevealStringFromArtTags,
 
   entries,
   srcFn,
@@ -595,7 +596,7 @@ function unbound_getGridHTML({
             thumb: 'medium',
             lazy: typeof lazy === 'number' ? i >= lazy : lazy,
             square: true,
-            reveal: getRevealStringFromTags(item.artTags, {language}),
+            reveal: getRevealStringFromArtTags(item.artTags, {language}),
             noSrcText: noSrcTextFn(item),
           }),
           html.tag('span', item.name),
@@ -646,6 +647,106 @@ function unbound_getFlashGridHTML({
   });
 }
 
+// Images
+
+function unbound_img({
+  html,
+
+  src,
+  alt,
+  noSrcText = '',
+  thumb: thumbKey,
+  reveal,
+  id,
+  class: className,
+  width,
+  height,
+  link = false,
+  lazy = false,
+  square = false,
+}) {
+  const willSquare = square;
+  const willLink = typeof link === 'string' || link;
+
+  const originalSrc = src;
+  const thumbSrc = src && (thumbKey ? thumb[thumbKey](src) : src);
+
+  const imgAttributes = {
+    id: link ? '' : id,
+    class: className,
+    alt,
+    width,
+    height,
+  };
+
+  const noSrcHTML =
+    !src &&
+      wrap(
+        html.tag('div',
+          {class: 'image-text-area'},
+          noSrcText));
+
+  const nonlazyHTML =
+    src &&
+      wrap(
+        html.tag('img', {
+          ...imgAttributes,
+          src: thumbSrc,
+        }));
+
+  const lazyHTML =
+    src &&
+    lazy &&
+      wrap(
+        html.tag('img',
+          {
+            ...imgAttributes,
+            class: [className, 'lazy'],
+            'data-original': thumbSrc,
+          }),
+        true);
+
+  if (!src) {
+    return noSrcHTML;
+  } else if (lazy) {
+    return html.tag('noscript', nonlazyHTML) + '\n' + lazyHTML;
+  } else {
+    return nonlazyHTML;
+  }
+
+  function wrap(input, hide = false) {
+    let wrapped = input;
+
+    wrapped = html.tag('div', {class: 'image-container'}, wrapped);
+
+    if (reveal) {
+      wrapped = html.tag('div', {class: 'reveal'}, [
+        wrapped,
+        html.tag('span', {class: 'reveal-text'}, reveal),
+      ]);
+    }
+
+    if (willSquare) {
+      wrapped = html.tag('div', {class: 'square-content'}, wrapped);
+      wrapped = html.tag('div',
+        {class: ['square', hide && !willLink && 'js-hide']},
+        wrapped);
+    }
+
+    if (willLink) {
+      wrapped = html.tag('a',
+        {
+          id,
+          class: ['box', hide && 'js-hide'],
+          href: typeof link === 'string' ? link : originalSrc,
+        },
+        wrapped);
+    }
+
+    return wrapped;
+  }
+}
+
 // Carousel reels
 
 // Layout constants:
@@ -831,14 +932,14 @@ function unbound_generateNavigationLinks(current, {
 // Sticky heading, ooooo
 
 function unbound_generateStickyHeadingContainer({
-  getRevealStringFromTags,
+  getRevealStringFromArtTags,
   html,
   img,
 
   class: classes,
   coverSrc,
   coverAlt,
-  coverTags,
+  coverArtTags,
   title,
 }) {
   return html.tag('div',
@@ -859,7 +960,7 @@ function unbound_generateStickyHeadingContainer({
                 thumb: 'small',
                 link: false,
                 square: true,
-                reveal: getRevealStringFromTags(coverTags),
+                reveal: getRevealStringFromArtTags(coverArtTags),
               }))),
       ]),
 
@@ -870,48 +971,38 @@ function unbound_generateStickyHeadingContainer({
 
 // Footer stuff
 
-function unbound_getFooterLocalizationLinks(pathname, {
+function unbound_getFooterLocalizationLinks({
   html,
-  language,
-  to,
-  paths,
-
   defaultLanguage,
+  language,
   languages,
+  pagePath,
+  to,
 }) {
-  const {urlPath} = paths;
-  const keySuffix = urlPath[0].replace(/^localized\./, '.');
-  const toArgs = urlPath.slice(1);
-
   const links = Object.entries(languages)
     .filter(([code, language]) => code !== 'default' && !language.hidden)
     .map(([code, language]) => language)
     .sort(({name: a}, {name: b}) => (a < b ? -1 : a > b ? 1 : 0))
     .map((language) =>
-      html.tag(
-        'span',
-        html.tag(
-          'a',
+      html.tag('span',
+        html.tag('a',
           {
             href:
               language === defaultLanguage
-                ? to('localizedDefaultLanguage' + keySuffix, ...toArgs)
+                ? to(
+                    'localizedDefaultLanguage.' + pagePath[0],
+                    ...pagePath.slice(1))
                 : to(
-                    'localizedWithBaseDirectory' + keySuffix,
+                    'localizedWithBaseDirectory.' + pagePath[0],
                     language.code,
-                    ...toArgs
-                  ),
+                    ...pagePath.slice(1)),
           },
-          language.name
-        )
-      )
-    );
-
-  return html.tag(
-    'div',
-    {class: 'footer-localization-links'},
-    language.$('misc.uiLanguage', {languages: links.join('\n')})
-  );
+          language.name)));
+
+  return html.tag('div', {class: 'footer-localization-links'},
+    language.$('misc.uiLanguage', {
+      languages: links.join('\n'),
+    }));
 }
 
 // Exports
@@ -924,8 +1015,8 @@ export {
 
   unbound_generateChronologyLinks as generateChronologyLinks,
 
-  unbound_getRevealStringFromWarnings as getRevealStringFromWarnings,
-  unbound_getRevealStringFromTags as getRevealStringFromTags,
+  unbound_getRevealStringFromContentWarningMessage as getRevealStringFromContentWarningMessage,
+  unbound_getRevealStringFromArtTags as getRevealStringFromArtTags,
 
   unbound_generateCoverLink as generateCoverLink,
 
@@ -944,6 +1035,8 @@ export {
 
   unbound_getCarouselHTML as getCarouselHTML,
 
+  unbound_img as img,
+
   unbound_generateInfoGalleryLinks as generateInfoGalleryLinks,
   unbound_generateNavigationLinks as generateNavigationLinks,