summaryrefslogtreecommitdiff
path: root/ext/js/display
diff options
context:
space:
mode:
Diffstat (limited to 'ext/js/display')
-rw-r--r--ext/js/display/display-generator.js20
1 files changed, 12 insertions, 8 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`;