diff options
Diffstat (limited to 'ext/js')
| -rw-r--r-- | ext/js/display/display-generator.js | 38 | ||||
| -rw-r--r-- | ext/js/display/display.js | 4 | ||||
| -rw-r--r-- | ext/js/language/dictionary-importer.js | 17 |
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; |