aboutsummaryrefslogtreecommitdiff
path: root/ext/mixed/js
diff options
context:
space:
mode:
Diffstat (limited to 'ext/mixed/js')
-rw-r--r--ext/mixed/js/display-generator.js85
-rw-r--r--ext/mixed/js/display.js6
-rw-r--r--ext/mixed/js/media-loader.js107
3 files changed, 193 insertions, 5 deletions
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 0f991362..a2b2b139 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -22,7 +22,8 @@
*/
class DisplayGenerator {
- constructor() {
+ constructor({mediaLoader}) {
+ this._mediaLoader = mediaLoader;
this._templateHandler = null;
this._termPitchAccentStaticTemplateIsSetup = false;
}
@@ -176,16 +177,30 @@ class DisplayGenerator {
const onlyListContainer = node.querySelector('.term-definition-disambiguation-list');
const glossaryContainer = node.querySelector('.term-glossary-list');
- node.dataset.dictionary = details.dictionary;
+ const dictionary = details.dictionary;
+ node.dataset.dictionary = dictionary;
this._appendMultiple(tagListContainer, this._createTag.bind(this), details.definitionTags);
this._appendMultiple(onlyListContainer, this._createTermDisambiguation.bind(this), details.only);
- this._appendMultiple(glossaryContainer, this._createTermGlossaryItem.bind(this), details.glossary);
+ this._appendMultiple(glossaryContainer, this._createTermGlossaryItem.bind(this), details.glossary, dictionary);
return node;
}
- _createTermGlossaryItem(glossary) {
+ _createTermGlossaryItem(glossary, dictionary) {
+ if (typeof glossary === 'string') {
+ return this._createTermGlossaryItemText(glossary);
+ } else if (typeof glossary === 'object' && glossary !== null) {
+ switch (glossary.type) {
+ case 'image':
+ return this._createTermGlossaryItemImage(glossary, dictionary);
+ }
+ }
+
+ return null;
+ }
+
+ _createTermGlossaryItemText(glossary) {
const node = this._templateHandler.instantiate('term-glossary-item');
const container = node.querySelector('.term-glossary');
if (container !== null) {
@@ -194,6 +209,68 @@ class DisplayGenerator {
return node;
}
+ _createTermGlossaryItemImage(data, dictionary) {
+ const {path, width, height, preferredWidth, preferredHeight, title, description, pixelated} = data;
+
+ const usedWidth = (
+ typeof preferredWidth === 'number' ?
+ preferredWidth :
+ width
+ );
+ const aspectRatio = (
+ typeof preferredWidth === 'number' &&
+ typeof preferredHeight === 'number' ?
+ preferredWidth / preferredHeight :
+ width / height
+ );
+
+ const node = this._templateHandler.instantiate('term-glossary-item-image');
+ node.dataset.path = path;
+ node.dataset.dictionary = dictionary;
+ node.dataset.imageLoadState = 'not-loaded';
+
+ const imageContainer = node.querySelector('.term-glossary-image-container');
+ imageContainer.style.width = `${usedWidth}em`;
+ if (typeof title === 'string') {
+ imageContainer.title = title;
+ }
+
+ const aspectRatioSizer = node.querySelector('.term-glossary-image-aspect-ratio-sizer');
+ aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`;
+
+ const image = node.querySelector('img.term-glossary-image');
+ const imageLink = node.querySelector('.term-glossary-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)
+ );
+ }
+
+ if (typeof description === 'string') {
+ const container = node.querySelector('.term-glossary-image-description');
+ this._appendMultilineText(container, description);
+ }
+
+ return node;
+ }
+
+ _setImageData(container, image, imageLink, url, unloaded) {
+ if (url !== null) {
+ image.src = url;
+ imageLink.href = url;
+ container.dataset.imageLoadState = 'loaded';
+ } else {
+ image.removeAttribute('src');
+ imageLink.removeAttribute('href');
+ container.dataset.imageLoadState = unloaded ? 'unloaded' : 'load-error';
+ }
+ }
+
_createTermDisambiguation(disambiguation) {
const node = this._templateHandler.instantiate('term-definition-disambiguation');
node.dataset.term = disambiguation;
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index c2284ffe..9587ec3b 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -20,6 +20,7 @@
* DOM
* DisplayContext
* DisplayGenerator
+ * MediaLoader
* WindowScroll
* apiAudioGetUri
* apiBroadcastTab
@@ -62,7 +63,8 @@ class Display {
this.clickScanPrevent = false;
this.setContentToken = null;
- this.displayGenerator = new DisplayGenerator();
+ this.mediaLoader = new MediaLoader();
+ this.displayGenerator = new DisplayGenerator({mediaLoader: this.mediaLoader});
this.windowScroll = new WindowScroll();
this._onKeyDownHandlers = new Map([
@@ -479,6 +481,8 @@ class Display {
const token = {}; // Unique identifier token
this.setContentToken = token;
try {
+ this.mediaLoader.unloadAll();
+
switch (type) {
case 'terms':
await this.setContentTerms(details.definitions, details.context, token);
diff --git a/ext/mixed/js/media-loader.js b/ext/mixed/js/media-loader.js
new file mode 100644
index 00000000..c89c4f12
--- /dev/null
+++ b/ext/mixed/js/media-loader.js
@@ -0,0 +1,107 @@
+/*
+ * Copyright (C) 2020 Yomichan Authors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/* global
+ * apiGetMedia
+ */
+
+class MediaLoader {
+ constructor() {
+ this._token = {};
+ this._mediaCache = new Map();
+ this._loadMediaData = [];
+ }
+
+ async loadMedia(path, dictionaryName, onLoad, onUnload) {
+ const token = this.token;
+ const data = {onUnload, loaded: false};
+
+ this._loadMediaData.push(data);
+
+ const media = await this.getMedia(path, dictionaryName);
+ if (token !== this.token) { return; }
+
+ onLoad(media.url);
+ data.loaded = true;
+ }
+
+ unloadAll() {
+ for (const {onUnload, loaded} of this._loadMediaData) {
+ if (typeof onUnload === 'function') {
+ onUnload(loaded);
+ }
+ }
+ this._loadMediaData = [];
+
+ for (const map of this._mediaCache.values()) {
+ for (const {url} of map.values()) {
+ if (url !== null) {
+ URL.revokeObjectURL(url);
+ }
+ }
+ }
+ this._mediaCache.clear();
+
+ this._token = {};
+ }
+
+ async getMedia(path, dictionaryName) {
+ let cachedData;
+ let dictionaryCache = this._mediaCache.get(dictionaryName);
+ if (typeof dictionaryCache !== 'undefined') {
+ cachedData = dictionaryCache.get(path);
+ } else {
+ dictionaryCache = new Map();
+ this._mediaCache.set(dictionaryName, dictionaryCache);
+ }
+
+ if (typeof cachedData === 'undefined') {
+ cachedData = {
+ promise: null,
+ data: null,
+ url: null
+ };
+ dictionaryCache.set(path, cachedData);
+ cachedData.promise = this._getMediaData(path, dictionaryName, cachedData);
+ }
+
+ return cachedData.promise;
+ }
+
+ async _getMediaData(path, dictionaryName, cachedData) {
+ const token = this._token;
+ const data = (await apiGetMedia([{path, dictionaryName}]))[0];
+ if (token === this._token && data !== null) {
+ const sourceArrayBuffer = this._base64ToArrayBuffer(data.source);
+ const blob = new Blob([sourceArrayBuffer], {type: data.mediaType});
+ const url = URL.createObjectURL(blob);
+ cachedData.data = data;
+ cachedData.url = url;
+ }
+ return cachedData;
+ }
+
+ _base64ToArrayBuffer(source) {
+ const binarySource = window.atob(source);
+ const length = binarySource.length;
+ const array = new Uint8Array(length);
+ for (let i = 0; i < length; ++i) {
+ array[i] = binarySource.charCodeAt(i);
+ }
+ return array.buffer;
+ }
+}