Dictionary image display refactoring (#1687)

* Generalize image definition generation

* Enable optional aspect ratio

* Move styles

* Update styles

* Add more options for collapsing images

* Add image options for collapsing

* Improve layout for images that are collapsed

2 files changed, 33 insertions, 18 deletions

diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index eb9c122d..299d730b 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -309,7 +309,26 @@ class DisplayGenerator {
     }
 
     _createTermDefinitionEntryImage(data, dictionary) {
-        const {path, width, height, preferredWidth, preferredHeight, title, description, pixelated} = data;
+        const {description} = data;
+
+        const node = this._templates.instantiate('gloss-item');
+
+        const contentContainer = node.querySelector('.gloss-content');
+        const image = this._createDefinitionImage(data, dictionary);
+        contentContainer.appendChild(image);
+
+        if (typeof description === 'string') {
+            const fragment = this._templates.instantiateFragment('gloss-item-image-description');
+            const container = fragment.querySelector('.gloss-image-description');
+            this._setMultilineTextContent(container, description);
+            contentContainer.appendChild(fragment);
+        }
+
+        return node;
+    }
+
+    _createDefinitionImage(data, dictionary) {
+        const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible} = data;
 
         const usedWidth = (
             typeof preferredWidth === 'number' ?
@@ -327,6 +346,9 @@ class DisplayGenerator {
         node.dataset.path = path;
         node.dataset.dictionary = dictionary;
         node.dataset.imageLoadState = 'not-loaded';
+        node.dataset.hasAspectRatio = 'true';
+        node.dataset.collapsed = typeof collapsed === 'boolean' ? `${collapsed}` : 'false';
+        node.dataset.collapsible = typeof collapsible === 'boolean' ? `${collapsible}` : 'true';
 
         const imageContainer = node.querySelector('.gloss-image-container');
         imageContainer.style.width = `${usedWidth}em`;
@@ -338,35 +360,29 @@ class DisplayGenerator {
         aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`;
 
         const image = node.querySelector('img.gloss-image');
-        const imageLink = node.querySelector('.gloss-image-link');
         image.dataset.pixelated = `${pixelated === true}`;
 
         if (this._mediaLoader !== null) {
             this._mediaLoader.loadMedia(
                 path,
                 dictionary,
-                (url) => this._setImageData(node, image, imageLink, url, false),
-                () => this._setImageData(node, image, imageLink, null, true)
+                (url) => this._setImageData(node, image, url, false),
+                () => this._setImageData(node, image, null, true)
             );
         }
 
-        if (typeof description === 'string') {
-            const container = node.querySelector('.gloss-image-description');
-            this._setMultilineTextContent(container, description);
-        }
-
         return node;
     }
 
-    _setImageData(container, image, imageLink, url, unloaded) {
+    _setImageData(node, image, url, unloaded) {
         if (url !== null) {
             image.src = url;
-            imageLink.href = url;
-            container.dataset.imageLoadState = 'loaded';
+            node.href = url;
+            node.dataset.imageLoadState = 'loaded';
         } else {
             image.removeAttribute('src');
-            imageLink.removeAttribute('href');
-            container.dataset.imageLoadState = unloaded ? 'unloaded' : 'load-error';
+            node.removeAttribute('href');
+            node.dataset.imageLoadState = unloaded ? 'unloaded' : 'load-error';
         }
     }
 
diff --git a/ext/js/language/dictionary-importer.js b/ext/js/language/dictionary-importer.js
index e060b3b1..051375a0 100644
--- a/ext/js/language/dictionary-importer.js
+++ b/ext/js/language/dictionary-importer.js
@@ -306,10 +306,8 @@ class DictionaryImporter {
     }
 
     async _formatDictionaryTermGlossaryImage(data, context, entry) {
-        const {path, width: preferredWidth, height: preferredHeight, title, description, pixelated} = data;
+        const {path, width: preferredWidth, height: preferredHeight, title, description, pixelated, collapsed, collapsible} = data;
         const {width, height} = await this._getImageMedia(path, context, entry);
-
-        // Create new data
         const newData = {
             type: 'image',
             path,
@@ -321,7 +319,8 @@ class DictionaryImporter {
         if (typeof title === 'string') { newData.title = title; }
         if (typeof description === 'string') { newData.description = description; }
         if (typeof pixelated === 'boolean') { newData.pixelated = pixelated; }
-
+        if (typeof collapsed === 'boolean') { newData.collapsed = collapsed; }
+        if (typeof collapsible === 'boolean') { newData.collapsible = collapsible; }
         return newData;
     }