3 files changed, 122 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) {