diff options
| -rw-r--r-- | ext/js/display/display-content-manager.js | 57 | ||||
| -rw-r--r-- | ext/js/templates/sandbox/anki-template-renderer-content-manager.js | 72 | ||||
| -rw-r--r-- | ext/js/templates/sandbox/anki-template-renderer.js | 15 | ||||
| -rw-r--r-- | ext/template-renderer.html | 1 | ||||
| -rw-r--r-- | test/test-anki-note-builder.js | 1 |
5 files changed, 124 insertions, 22 deletions
diff --git a/ext/js/display/display-content-manager.js b/ext/js/display/display-content-manager.js index a0dd7dd6..0818f915 100644 --- a/ext/js/display/display-content-manager.js +++ b/ext/js/display/display-content-manager.js @@ -19,26 +19,46 @@ * StringUtil */ +/** + * A callback used when a media file has been loaded. + * @callback DisplayContentManager.OnLoadCallback + * @param {string} url The URL of the media that was loaded. + */ + +/** + * A callback used when a media file should be unloaded. + * @callback DisplayContentManager.OnUnloadCallback + * @param {boolean} fullyLoaded Whether or not the media was fully loaded. + */ + +/** + * The content manager which is used when generating HTML display content. + */ class DisplayContentManager { + /** + * Creates a new instance of the class. + */ constructor() { this._token = {}; this._mediaCache = new Map(); this._loadMediaData = []; } - async loadMedia(path, dictionary, onLoad, onUnload) { - const token = this._token; - const data = {onUnload, loaded: false}; - - this._loadMediaData.push(data); - - const media = await this.getMedia(path, dictionary); - if (token !== this._token) { return; } - - onLoad(media.url); - data.loaded = true; + /** + * Attempts to load the media file from a given dictionary. + * @param {string} path The path to the media file in the dictionary. + * @param {string} dictionary The name of the dictionary. + * @param {DisplayContentManager.OnLoadCallback} onLoad The callback that is executed if the media was loaded successfully. + * No assumptions should be made about the synchronicity of this callback. + * @param {DisplayContentManager.OnUnloadCallback} onUnload The callback that is executed when the media should be unloaded. + */ + loadMedia(path, dictionary, onLoad, onUnload) { + this._loadMedia(path, dictionary, onLoad, onUnload); } + /** + * Unloads all media that has been loaded. + */ unloadAll() { for (const {onUnload, loaded} of this._loadMediaData) { if (typeof onUnload === 'function') { @@ -59,7 +79,20 @@ class DisplayContentManager { this._token = {}; } - async getMedia(path, dictionary) { + async _loadMedia(path, dictionary, onLoad, onUnload) { + const token = this._token; + const data = {onUnload, loaded: false}; + + this._loadMediaData.push(data); + + const media = await this._getMedia(path, dictionary); + if (token !== this._token) { return; } + + onLoad(media.url); + data.loaded = true; + } + + async _getMedia(path, dictionary) { let cachedData; let dictionaryCache = this._mediaCache.get(dictionary); if (typeof dictionaryCache !== 'undefined') { diff --git a/ext/js/templates/sandbox/anki-template-renderer-content-manager.js b/ext/js/templates/sandbox/anki-template-renderer-content-manager.js new file mode 100644 index 00000000..a2573e09 --- /dev/null +++ b/ext/js/templates/sandbox/anki-template-renderer-content-manager.js @@ -0,0 +1,72 @@ +/* + * Copyright (C) 2022 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/>. + */ + +/** + * A callback used when a media file has been loaded. + * @callback AnkiTemplateRendererContentManager.OnLoadCallback + * @param {string} url The URL of the media that was loaded. + */ + +/** + * A callback used when a media file should be unloaded. + * @callback AnkiTemplateRendererContentManager.OnUnloadCallback + * @param {boolean} fullyLoaded Whether or not the media was fully loaded. + */ + +/** + * The content manager which is used when generating content for Anki. + */ +class AnkiTemplateRendererContentManager { + /** + * Creates a new instance of the class. + * @param {TemplateRendererMediaProvider} mediaProvider The media provider for the object. + * @param {object} data The data object passed to the Handlebars template renderer. + * See {@link AnkiNoteDataCreator.create}'s return value for structure information. + */ + constructor(mediaProvider, data) { + this._mediaProvider = mediaProvider; + this._data = data; + this._onUnloadCallbacks = []; + } + + /** + * Attempts to load the media file from a given dictionary. + * @param {string} path The path to the media file in the dictionary. + * @param {string} dictionary The name of the dictionary. + * @param {AnkiTemplateRendererContentManager.OnLoadCallback} onLoad The callback that is executed if the media was loaded successfully. + * No assumptions should be made about the synchronicity of this callback. + * @param {AnkiTemplateRendererContentManager.OnUnloadCallback} onUnload The callback that is executed when the media should be unloaded. + */ + loadMedia(path, dictionary, onLoad, onUnload) { + const imageUrl = this._mediaProvider.getMedia(this._data, ['dictionaryMedia', path], {dictionary, format: 'fileName', default: null}); + if (imageUrl === null) { return; } + onLoad(imageUrl); + if (typeof onUnload === 'function') { + this._onUnloadCallbacks.push(onUnload); + } + } + + /** + * Unloads all media that has been loaded. + */ + unloadAll() { + for (const onUnload of this._onUnloadCallbacks) { + onUnload(true); + } + this._onUnloadCallbacks = []; + } +} diff --git a/ext/js/templates/sandbox/anki-template-renderer.js b/ext/js/templates/sandbox/anki-template-renderer.js index 67ea0d81..c75f92d3 100644 --- a/ext/js/templates/sandbox/anki-template-renderer.js +++ b/ext/js/templates/sandbox/anki-template-renderer.js @@ -17,6 +17,7 @@ /* global * AnkiNoteDataCreator + * AnkiTemplateRendererContentManager * CssStyleApplier * DictionaryDataUtil * Handlebars @@ -534,16 +535,10 @@ class AnkiTemplateRenderer { } _createStructuredContentGenerator(data) { - const mediaLoader = { - loadMedia: async (path, dictionary, onLoad, onUnload) => { - const imageUrl = this._mediaProvider.getMedia(data, ['dictionaryMedia', path], {dictionary, format: 'fileName', default: null}); - if (imageUrl !== null) { - onLoad(imageUrl); - this._cleanupCallbacks.push(() => onUnload(true)); - } - } - }; - return new StructuredContentGenerator(mediaLoader, document); + const contentManager = new AnkiTemplateRendererContentManager(this._mediaProvider, data); + const instance = new StructuredContentGenerator(contentManager, document); + this._cleanupCallbacks.push(() => contentManager.unloadAll()); + return instance; } _formatGlossary(context, dictionary, options) { diff --git a/ext/template-renderer.html b/ext/template-renderer.html index 19595ec4..2b14759b 100644 --- a/ext/template-renderer.html +++ b/ext/template-renderer.html @@ -24,6 +24,7 @@ <script src="/js/language/sandbox/dictionary-data-util.js"></script> <script src="/js/language/sandbox/japanese-util.js"></script> <script src="/js/templates/sandbox/anki-template-renderer.js"></script> +<script src="/js/templates/sandbox/anki-template-renderer-content-manager.js"></script> <script src="/js/templates/sandbox/template-renderer.js"></script> <script src="/js/templates/sandbox/template-renderer-frame-api.js"></script> <script src="/js/templates/sandbox/template-renderer-media-provider.js"></script> diff --git a/test/test-anki-note-builder.js b/test/test-anki-note-builder.js index c228cf92..3da67955 100644 --- a/test/test-anki-note-builder.js +++ b/test/test-anki-note-builder.js @@ -47,6 +47,7 @@ async function createVM() { 'js/display/sandbox/pronunciation-generator.js', 'js/display/sandbox/structured-content-generator.js', 'js/templates/sandbox/anki-template-renderer.js', + 'js/templates/sandbox/anki-template-renderer-content-manager.js', 'js/templates/sandbox/template-renderer.js', 'js/templates/sandbox/template-renderer-media-provider.js', 'lib/handlebars.min.js' |