diff options
| -rw-r--r-- | ext/css/display.css | 6 | ||||
| -rw-r--r-- | ext/data/schemas/dictionary-term-bank-v3-schema.json | 13 | ||||
| -rw-r--r-- | ext/js/display/display-generator.js | 20 | ||||
| -rw-r--r-- | ext/js/language/dictionary-importer.js | 3 | ||||
| -rw-r--r-- | test/data/dictionaries/valid-dictionary1/term_bank_1.json | 4 |
5 files changed, 32 insertions, 14 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index b8f67ff9..b46540c7 100644 --- a/ext/css/display.css +++ b/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; } diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json index 0ab01edb..b1141154 100644 --- a/ext/data/schemas/dictionary-term-bank-v3-schema.json +++ b/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"] } } } diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js index 2131d805..484dc6a9 100644 --- a/ext/js/display/display-generator.js +++ b/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 = ( - typeof preferredWidth === 'number' ? - preferredWidth : - width - ); + const hasPreferredWidth = (typeof preferredWidth === 'number'); + const hasPreferredHeight = (typeof preferredHeight === 'number'); const aspectRatio = ( - typeof preferredWidth === 'number' && - typeof preferredHeight === 'number' ? + hasPreferredWidth && hasPreferredHeight ? 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`; diff --git a/ext/js/language/dictionary-importer.js b/ext/js/language/dictionary-importer.js index 4d885a74..e893ffb6 100644 --- a/ext/js/language/dictionary-importer.js +++ b/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; } diff --git a/test/data/dictionaries/valid-dictionary1/term_bank_1.json b/test/data/dictionaries/valid-dictionary1/term_bank_1.json index a2c9a216..0df04ef0 100644 --- a/test/data/dictionaries/valid-dictionary1/term_bank_1.json +++ b/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: ", |