Restore other missing styling and attributes

yomidevs · Dec 26, 2024 · 24b0542 · 24b0542
1 parent d89a078
commit 24b0542
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 2 deletions.
diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css
@@ -19,6 +19,11 @@
 /* Glossary images */
 .gloss-image-container {
     display: inline-block;
+    max-width: 100%;
+    max-height: 100vh;
+    position: relative;
+    vertical-align: top;
+    line-height: 0;
     font-size: calc(1em / var(--font-size-no-units));
     overflow: hidden;
 }
@@ -39,6 +44,28 @@
 .gloss-image-link[href]:hover {
     cursor: pointer;
 }
+.gloss-image-container-overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    font-size: calc(1em * var(--font-size-no-units));
+    line-height: var(--line-height);
+    display: table;
+    table-layout: fixed;
+    white-space: normal;
+    color: var(--text-color-light3);
+}
+.gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after {
+    content: 'Image failed to load';
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    padding: 0.25em;
+}
 .gloss-image-background {
     --image: none;
 
@@ -84,6 +111,26 @@
 :root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image {
     image-rendering: auto;
 }
+.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer {
+    display: inline-block;
+    width: 0;
+    vertical-align: top;
+    font-size: 0;
+}
+.gloss-image-link-text {
+    display: none;
+    line-height: var(--line-height);
+}
+.gloss-image-link-text::before {
+    content: '[';
+}
+.gloss-image-link-text::after {
+    content: ']';
+}
+.gloss-image-description {
+    display: block;
+    white-space: pre-line;
+}
 
 .gloss-image-link[data-appearance=monochrome] .gloss-image {
     filter: grayscale(1);
@@ -125,6 +172,14 @@
 :root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true]:focus .gloss-image-container {
     display: block;
 }
+.gloss-image-link[data-collapsed=true] .gloss-image-link-text,
+:root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text {
+    display: inline;
+}
+.gloss-image-link[data-collapsed=true]~.gloss-image-description,
+:root[data-glossary-layout-mode=compact] .gloss-image-description {
+    display: inline;
+}
 
 
 /* Links */

diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js
@@ -101,6 +101,13 @@ export class StructuredContentGenerator {
         const imageBackground = this._createElement('span', 'gloss-image-background');
         imageContainer.appendChild(imageBackground);
 
+        const overlay = this._createElement('span', 'gloss-image-container-overlay');
+        imageContainer.appendChild(overlay);
+
+        const linkText = this._createElement('span', 'gloss-image-link-text');
+        linkText.textContent = 'Image';
+        node.appendChild(linkText);
+
         node.dataset.path = path;
         node.dataset.dictionary = dictionary;
         node.dataset.imageLoadState = 'not-loaded';
@@ -148,10 +155,10 @@ export class StructuredContentGenerator {
                     path,
                     dictionary,
                     (url) => {
-                        (/** @type {HTMLImageElement} */(image)).src = url;
+                        this._setImageData(node, /** @type {HTMLImageElement} */ (image), imageBackground, url, false);
                     },
                     () => {
-                        (/** @type {HTMLImageElement} */(image)).removeAttribute('src');
+                        this._setImageData(node, /** @type {HTMLImageElement} */ (image), imageBackground, null, true);
                     },
                 );
             }
@@ -233,6 +240,27 @@ export class StructuredContentGenerator {
         }
     }
 
+    /**
+     * @param {HTMLAnchorElement} node
+     * @param {HTMLImageElement} image
+     * @param {HTMLElement} imageBackground
+     * @param {?string} url
+     * @param {boolean} unloaded
+     */
+    _setImageData(node, image, imageBackground, url, unloaded) {
+        if (url !== null) {
+            image.src = url;
+            node.href = url;
+            node.dataset.imageLoadState = 'loaded';
+            imageBackground.style.setProperty('--image', `url("${url}")`);
+        } else {
+            image.removeAttribute('src');
+            node.removeAttribute('href');
+            node.dataset.imageLoadState = unloaded ? 'unloaded' : 'load-error';
+            imageBackground.style.removeProperty('--image');
+        }
+    }
+
     /**
      * @param {import('structured-content').Element} content
      * @param {string} dictionary