aboutsummaryrefslogtreecommitdiff
path: root/ext/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-05-18 17:41:27 -0400
committerGitHub <noreply@github.com>2021-05-18 17:41:27 -0400
commitf3cf4d10c711037c99c185dd0b46dac9f5d69794 (patch)
treef8689d0f64118c8b8b7d991bc50d57f98d3c711f /ext/js
parent76276e78dac387df66384a10bc1179c90ebd93fe (diff)
Dictionary image display refactoring (#1687)
* Generalize image definition generation * Enable optional aspect ratio * Move styles * Update styles * Add more options for collapsing images * Add image options for collapsing * Improve layout for images that are collapsed
Diffstat (limited to 'ext/js')
-rw-r--r--ext/js/display/display-generator.js44
-rw-r--r--ext/js/language/dictionary-importer.js7
2 files changed, 33 insertions, 18 deletions
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index eb9c122d..299d730b 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -309,7 +309,26 @@ class DisplayGenerator {
}
_createTermDefinitionEntryImage(data, dictionary) {
- const {path, width, height, preferredWidth, preferredHeight, title, description, pixelated} = data;
+ const {description} = data;
+
+ const node = this._templates.instantiate('gloss-item');
+
+ const contentContainer = node.querySelector('.gloss-content');
+ const image = this._createDefinitionImage(data, dictionary);
+ contentContainer.appendChild(image);
+
+ if (typeof description === 'string') {
+ const fragment = this._templates.instantiateFragment('gloss-item-image-description');
+ const container = fragment.querySelector('.gloss-image-description');
+ this._setMultilineTextContent(container, description);
+ contentContainer.appendChild(fragment);
+ }
+
+ return node;
+ }
+
+ _createDefinitionImage(data, dictionary) {
+ const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible} = data;
const usedWidth = (
typeof preferredWidth === 'number' ?
@@ -327,6 +346,9 @@ class DisplayGenerator {
node.dataset.path = path;
node.dataset.dictionary = dictionary;
node.dataset.imageLoadState = 'not-loaded';
+ node.dataset.hasAspectRatio = 'true';
+ node.dataset.collapsed = typeof collapsed === 'boolean' ? `${collapsed}` : 'false';
+ node.dataset.collapsible = typeof collapsible === 'boolean' ? `${collapsible}` : 'true';
const imageContainer = node.querySelector('.gloss-image-container');
imageContainer.style.width = `${usedWidth}em`;
@@ -338,35 +360,29 @@ class DisplayGenerator {
aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`;
const image = node.querySelector('img.gloss-image');
- const imageLink = node.querySelector('.gloss-image-link');
image.dataset.pixelated = `${pixelated === true}`;
if (this._mediaLoader !== null) {
this._mediaLoader.loadMedia(
path,
dictionary,
- (url) => this._setImageData(node, image, imageLink, url, false),
- () => this._setImageData(node, image, imageLink, null, true)
+ (url) => this._setImageData(node, image, url, false),
+ () => this._setImageData(node, image, null, true)
);
}
- if (typeof description === 'string') {
- const container = node.querySelector('.gloss-image-description');
- this._setMultilineTextContent(container, description);
- }
-
return node;
}
- _setImageData(container, image, imageLink, url, unloaded) {
+ _setImageData(node, image, url, unloaded) {
if (url !== null) {
image.src = url;
- imageLink.href = url;
- container.dataset.imageLoadState = 'loaded';
+ node.href = url;
+ node.dataset.imageLoadState = 'loaded';
} else {
image.removeAttribute('src');
- imageLink.removeAttribute('href');
- container.dataset.imageLoadState = unloaded ? 'unloaded' : 'load-error';
+ node.removeAttribute('href');
+ node.dataset.imageLoadState = unloaded ? 'unloaded' : 'load-error';
}
}
diff --git a/ext/js/language/dictionary-importer.js b/ext/js/language/dictionary-importer.js
index e060b3b1..051375a0 100644
--- a/ext/js/language/dictionary-importer.js
+++ b/ext/js/language/dictionary-importer.js
@@ -306,10 +306,8 @@ class DictionaryImporter {
}
async _formatDictionaryTermGlossaryImage(data, context, entry) {
- const {path, width: preferredWidth, height: preferredHeight, title, description, pixelated} = data;
+ const {path, width: preferredWidth, height: preferredHeight, title, description, pixelated, collapsed, collapsible} = data;
const {width, height} = await this._getImageMedia(path, context, entry);
-
- // Create new data
const newData = {
type: 'image',
path,
@@ -321,7 +319,8 @@ class DictionaryImporter {
if (typeof title === 'string') { newData.title = title; }
if (typeof description === 'string') { newData.description = description; }
if (typeof pixelated === 'boolean') { newData.pixelated = pixelated; }
-
+ if (typeof collapsed === 'boolean') { newData.collapsed = collapsed; }
+ if (typeof collapsible === 'boolean') { newData.collapsible = collapsible; }
return newData;
}