Structured content image size units (#1692)

* Add support for sizeUnits on image content

* Update test data

ext/css/display.css

@@ -1573,6 +1573,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
     color: inherit;
     display: inline-block;
     position: relative;
+    line-height: 1;
 }
 .gloss-image-link[href]:hover {
     cursor: pointer;
@@ -1631,6 +1632,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
 }
 .gloss-image-link-text {
     display: none;
+    line-height: var(--line-height);
 }
 .gloss-image-link-text::before {
     content: '[';
@@ -1643,6 +1645,10 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
     white-space: pre-line;
 }
 
+.gloss-image-link[data-size-units=em] .gloss-image-container {
+    font-size: 1em;
+}
+
 .gloss-image-link[data-vertical-align=baseline] { vertical-align: baseline; }
 .gloss-image-link[data-vertical-align=sub] { vertical-align: sub; }
 .gloss-image-link[data-vertical-align=super] { vertical-align: super; }

ext/data/schemas/dictionary-term-bank-v3-schema.json

@@ -52,14 +52,14 @@
                                     "description": "Path to the image file in the archive."
                                 },
                                 "width": {
-                                    "type": "integer",
+                                    "type": "number",
                                     "description": "Preferred width of the image.",
-                                    "minimum": 1
+                                    "minimum": 0
                                 },
                                 "height": {
-                                    "type": "integer",
+                                    "type": "number",
                                     "description": "Preferred width of the image.",
-                                    "minimum": 1
+                                    "minimum": 0
                                 },
                                 "title": {
                                     "type": "string",
@@ -84,6 +84,11 @@
                                     "type": "string",
                                     "description": "The vertical alignment of the image.",
                                     "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"]
+                                },
+                                "sizeUnits": {
+                                    "type": "string",
+                                    "description": "The units for the width and height.",
+                                    "enum": ["px", "em"]
                                 }
                             }
                         }

ext/js/display/display-generator.js

@@ -340,19 +340,20 @@ class DisplayGenerator {
     }
 
     _createDefinitionImage(data, dictionary) {
-        const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible, verticalAlign} = data;
+        const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible, verticalAlign, sizeUnits} = data;
 
-        const usedWidth = (
+        const hasPreferredWidth = (typeof preferredWidth === 'number');
-            typeof preferredWidth === 'number' ?
+        const hasPreferredHeight = (typeof preferredHeight === 'number');
-            preferredWidth :
-            width
-        );
         const aspectRatio = (
-            typeof preferredWidth === 'number' &&
+            hasPreferredWidth && hasPreferredHeight ?
-            typeof preferredHeight === 'number' ?
             preferredWidth / preferredHeight :
             width / height
         );
+        const usedWidth = (
+            hasPreferredWidth ?
+            preferredWidth :
+            (hasPreferredHeight ? preferredHeight * aspectRatio : width)
+        );
 
         const node = this._templates.instantiate('gloss-item-image');
         node.dataset.path = path;
@@ -364,6 +365,9 @@ class DisplayGenerator {
         if (typeof verticalAlign === 'string') {
             node.dataset.verticalAlign = verticalAlign;
         }
+        if (typeof sizeUnits === 'string' && (hasPreferredWidth || hasPreferredHeight)) {
+            node.dataset.sizeUnits = sizeUnits;
+        }
 
         const imageContainer = node.querySelector('.gloss-image-container');
         imageContainer.style.width = `${usedWidth}em`;

ext/js/language/dictionary-importer.js

@@ -342,9 +342,10 @@ class DictionaryImporter {
     }
 
     async _prepareStructuredContentImage(content, context, entry) {
-        const {verticalAlign} = content;
+        const {verticalAlign, sizeUnits} = content;
         const result = await this._createImageData(content, context, entry, {tag: 'img'});
         if (typeof verticalAlign === 'string') { result.verticalAlign = verticalAlign; }
+        if (typeof sizeUnits === 'string') { result.sizeUnits = sizeUnits; }
         return result;
     }
 

test/data/dictionaries/valid-dictionary1/term_bank_1.json

@@ -28,7 +28,9 @@
                 "\nmore content 2: ",
                 {"tag": "img", "path": "image.gif", "width": 35, "height": 35, "pixelated": true, "collapsible": false, "collapsed": false, "verticalAlign": "middle"},
                 " and ",
-                {"tag": "img", "path": "image.gif", "width": 35, "height": 35, "pixelated": true, "collapsible": false, "collapsed": true}
+                {"tag": "img", "path": "image.gif", "width": 35, "height": 35, "pixelated": true, "collapsible": false, "collapsed": true},
+                " and ",
+                {"tag": "img", "path": "image.gif", "width": 1, "height": 1, "pixelated": true, "collapsible": false, "collapsed": false, "sizeUnits": "em"}
             ]},
             {"type": "structured-content", "content": [
                 "naiyou definition 6: ",