aboutsummaryrefslogtreecommitdiff
path: root/ext/js
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 /ext/js
parentd8ef599eaef1323bee908d3b883d11ddd2e95198 (diff)
Structured content image size units (#1692)
* Add support for sizeUnits on image content * Update test data
Diffstat (limited to 'ext/js')
-rw-r--r--ext/js/display/display-generator.js20
-rw-r--r--ext/js/language/dictionary-importer.js3
2 files changed, 14 insertions, 9 deletions
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;
}