aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
Diffstat (limited to 'ext')
-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
4 files changed, 29 insertions, 13 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;
}