summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-05-20 19:33:08 -0400
committerGitHub <noreply@github.com>2021-05-20 19:33:08 -0400
commitbe23acf499bcdb530c1b8990aa3d6211323cbdb2 (patch)
treeaf7a6f5a64fce44e3a9e07ab0e08bb833e546b28
parentd8ef599eaef1323bee908d3b883d11ddd2e95198 (diff)
Structured content image size units (#1692)
* Add support for sizeUnits on image content * Update test data
-rw-r--r--ext/css/display.css6
-rw-r--r--ext/data/schemas/dictionary-term-bank-v3-schema.json13
-rw-r--r--ext/js/display/display-generator.js20
-rw-r--r--ext/js/language/dictionary-importer.js3
-rw-r--r--test/data/dictionaries/valid-dictionary1/term_bank_1.json4
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: ",