summaryrefslogtreecommitdiff
path: root/ext/js
diff options
context:
space:
mode:
Diffstat (limited to 'ext/js')
-rw-r--r--ext/js/display/display-generator.js38
-rw-r--r--ext/js/display/display.js4
-rw-r--r--ext/js/language/dictionary-importer.js17
3 files changed, 49 insertions, 10 deletions
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 484dc6a9..6a5b26f1 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -340,7 +340,22 @@ class DisplayGenerator {
}
_createDefinitionImage(data, dictionary) {
- const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible, verticalAlign, sizeUnits} = data;
+ const {
+ path,
+ width,
+ height,
+ preferredWidth,
+ preferredHeight,
+ title,
+ pixelated,
+ imageRendering,
+ appearance,
+ background,
+ collapsed,
+ collapsible,
+ verticalAlign,
+ sizeUnits
+ } = data;
const hasPreferredWidth = (typeof preferredWidth === 'number');
const hasPreferredHeight = (typeof preferredHeight === 'number');
@@ -356,10 +371,18 @@ class DisplayGenerator {
);
const node = this._templates.instantiate('gloss-item-image');
+ const imageContainer = node.querySelector('.gloss-image-container');
+ const aspectRatioSizer = node.querySelector('.gloss-image-aspect-ratio-sizer');
+ const image = node.querySelector('.gloss-image');
+ const imageBackground = node.querySelector('.gloss-image-background');
+
node.dataset.path = path;
node.dataset.dictionary = dictionary;
node.dataset.imageLoadState = 'not-loaded';
node.dataset.hasAspectRatio = 'true';
+ node.dataset.imageRendering = typeof imageRendering === 'string' ? imageRendering : (pixelated ? 'pixelated' : 'auto');
+ node.dataset.appearance = typeof appearance === 'string' ? appearance : 'auto';
+ node.dataset.background = typeof background === 'boolean' ? `${background}` : 'true';
node.dataset.collapsed = typeof collapsed === 'boolean' ? `${collapsed}` : 'false';
node.dataset.collapsible = typeof collapsible === 'boolean' ? `${collapsible}` : 'true';
if (typeof verticalAlign === 'string') {
@@ -369,39 +392,36 @@ class DisplayGenerator {
node.dataset.sizeUnits = sizeUnits;
}
- const imageContainer = node.querySelector('.gloss-image-container');
imageContainer.style.width = `${usedWidth}em`;
if (typeof title === 'string') {
imageContainer.title = title;
}
- const aspectRatioSizer = node.querySelector('.gloss-image-aspect-ratio-sizer');
aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`;
- const image = node.querySelector('img.gloss-image');
- image.dataset.pixelated = `${pixelated === true}`;
-
if (this._mediaLoader !== null) {
this._mediaLoader.loadMedia(
path,
dictionary,
- (url) => this._setImageData(node, image, url, false),
- () => this._setImageData(node, image, null, true)
+ (url) => this._setImageData(node, image, imageBackground, url, false),
+ () => this._setImageData(node, image, imageBackground, null, true)
);
}
return node;
}
- _setImageData(node, image, url, unloaded) {
+ _setImageData(node, image, imageBackground, url, unloaded) {
if (url !== null) {
image.src = url;
node.href = url;
node.dataset.imageLoadState = 'loaded';
+ imageBackground.style.setProperty('--image', `url("${url}")`);
} else {
image.removeAttribute('src');
node.removeAttribute('href');
node.dataset.imageLoadState = unloaded ? 'unloaded' : 'load-error';
+ imageBackground.style.removeProperty('--image');
}
}
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index ccca8229..26c1e06c 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -208,6 +208,10 @@ class Display extends EventDispatcher {
const {browser} = await yomichan.api.getEnvironmentInfo();
this._browser = browser;
+ if (documentElement !== null) {
+ documentElement.dataset.browser = browser;
+ }
+
// Prepare
await this._hotkeyHelpController.prepare();
await this._displayGenerator.prepare();
diff --git a/ext/js/language/dictionary-importer.js b/ext/js/language/dictionary-importer.js
index a0806a3a..b735953a 100644
--- a/ext/js/language/dictionary-importer.js
+++ b/ext/js/language/dictionary-importer.js
@@ -361,7 +361,19 @@ class DictionaryImporter {
}
async _createImageData(data, context, entry, attributes) {
- const {path, width: preferredWidth, height: preferredHeight, title, description, pixelated, collapsed, collapsible} = data;
+ const {
+ path,
+ width: preferredWidth,
+ height: preferredHeight,
+ title,
+ description,
+ pixelated,
+ imageRendering,
+ appearance,
+ background,
+ collapsed,
+ collapsible
+ } = data;
const {width, height} = await this._getImageMedia(path, context, entry);
const newData = Object.assign({}, attributes, {path, width, height});
if (typeof preferredWidth === 'number') { newData.preferredWidth = preferredWidth; }
@@ -369,6 +381,9 @@ 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 imageRendering === 'string') { newData.imageRendering = imageRendering; }
+ if (typeof appearance === 'string') { newData.appearance = appearance; }
+ if (typeof background === 'boolean') { newData.background = background; }
if (typeof collapsed === 'boolean') { newData.collapsed = collapsed; }
if (typeof collapsible === 'boolean') { newData.collapsible = collapsible; }
return newData;