aboutsummaryrefslogtreecommitdiff
path: root/ext/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2024-02-18 08:10:09 -0500
committerGitHub <noreply@github.com>2024-02-18 13:10:09 +0000
commit6cf38229b54efbbc3ae7bc174c3999f9dfa7b1d2 (patch)
tree1d47e64bf80ef2f7fd082dde956d0b214946f189 /ext/js
parentc48cd6ff6d8dcced7baf1b27ce3ac2449944f5d7 (diff)
Html templates update (#707)
* Simplify display template loading * Add helper * Rename file * Rename for simplicity * Create templates file * Load * Remove templates * Move permissions templates * Remove "templates" from comments * Fix prepare
Diffstat (limited to 'ext/js')
-rw-r--r--ext/js/background/backend.js6
-rw-r--r--ext/js/comm/api.js7
-rw-r--r--ext/js/display/display-generator.js9
-rw-r--r--ext/js/display/display.js2
-rw-r--r--ext/js/dom/html-template-collection.js24
-rw-r--r--ext/js/pages/settings/settings-controller.js2
6 files changed, 21 insertions, 29 deletions
diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js
index f301b4c6..c0410ab8 100644
--- a/ext/js/background/backend.js
+++ b/ext/js/background/backend.js
@@ -167,7 +167,6 @@ export class Backend {
['getStylesheetContent', this._onApiGetStylesheetContent.bind(this)],
['getEnvironmentInfo', this._onApiGetEnvironmentInfo.bind(this)],
['clipboardGet', this._onApiClipboardGet.bind(this)],
- ['getDisplayTemplatesHtml', this._onApiGetDisplayTemplatesHtml.bind(this)],
['getZoom', this._onApiGetZoom.bind(this)],
['getDefaultAnkiFieldTemplates', this._onApiGetDefaultAnkiFieldTemplates.bind(this)],
['getDictionaryInfo', this._onApiGetDictionaryInfo.bind(this)],
@@ -686,11 +685,6 @@ export class Backend {
return this._clipboardReader.getText(false);
}
- /** @type {import('api').ApiHandler<'getDisplayTemplatesHtml'>} */
- async _onApiGetDisplayTemplatesHtml() {
- return await fetchText('/display-templates.html');
- }
-
/** @type {import('api').ApiHandler<'getZoom'>} */
_onApiGetZoom(_params, sender) {
return new Promise((resolve, reject) => {
diff --git a/ext/js/comm/api.js b/ext/js/comm/api.js
index f07702da..30fcfc29 100644
--- a/ext/js/comm/api.js
+++ b/ext/js/comm/api.js
@@ -210,13 +210,6 @@ export class API {
}
/**
- * @returns {Promise<import('api').ApiReturn<'getDisplayTemplatesHtml'>>}
- */
- getDisplayTemplatesHtml() {
- return this._invoke('getDisplayTemplatesHtml', void 0);
- }
-
- /**
* @returns {Promise<import('api').ApiReturn<'getZoom'>>}
*/
getZoom() {
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 621ea833..65736759 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -39,12 +39,9 @@ export class DisplayGenerator {
this._structuredContentGenerator = new StructuredContentGenerator(this._contentManager, document);
}
- /**
- * @param {import('../comm/api.js').API} api
- */
- async prepare(api) {
- const html = await api.getDisplayTemplatesHtml();
- this._templates.load(html);
+ /** */
+ async prepare() {
+ await this._templates.loadFromFiles(['/templates-display.html']);
this.updateHotkeys();
}
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 4cd2d611..588508b5 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -318,7 +318,7 @@ export class Display extends EventDispatcher {
// Prepare
await this._hotkeyHelpController.prepare(this._application.api);
- await this._displayGenerator.prepare(this._application.api);
+ await this._displayGenerator.prepare();
this._queryParser.prepare();
this._history.prepare();
this._optionToggleHotkeyHandler.prepare();
diff --git a/ext/js/dom/html-template-collection.js b/ext/js/dom/html-template-collection.js
index 981d5528..a71d954f 100644
--- a/ext/js/dom/html-template-collection.js
+++ b/ext/js/dom/html-template-collection.js
@@ -16,6 +16,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
+import {fetchText} from '../core/fetch-utilities.js';
+
export class HtmlTemplateCollection {
constructor() {
/** @type {Map<string, HTMLTemplateElement>} */
@@ -23,17 +25,23 @@ export class HtmlTemplateCollection {
}
/**
- * @param {string|Document} source
+ * @param {string[]} urls
*/
- load(source) {
- const sourceNode = (
- typeof source === 'string' ?
- new DOMParser().parseFromString(source, 'text/html') :
- source
- );
+ async loadFromFiles(urls) {
+ const htmlRawArray = await Promise.all(urls.map((url) => fetchText(url)));
+ const domParser = new DOMParser();
+ for (const htmlRaw of htmlRawArray) {
+ const templatesDocument = domParser.parseFromString(htmlRaw, 'text/html');
+ this.load(templatesDocument);
+ }
+ }
+ /**
+ * @param {Document} source
+ */
+ load(source) {
const pattern = /^([\w\W]+)-template$/;
- for (const template of sourceNode.querySelectorAll('template')) {
+ for (const template of source.querySelectorAll('template')) {
const match = pattern.exec(template.id);
if (match === null) { continue; }
this._prepareTemplate(template);
diff --git a/ext/js/pages/settings/settings-controller.js b/ext/js/pages/settings/settings-controller.js
index c835f8e6..d0cfd838 100644
--- a/ext/js/pages/settings/settings-controller.js
+++ b/ext/js/pages/settings/settings-controller.js
@@ -44,7 +44,6 @@ export class SettingsController extends EventDispatcher {
this._pageExitPreventionEventListeners = new EventListenerCollection();
/** @type {HtmlTemplateCollection} */
this._templates = new HtmlTemplateCollection();
- this._templates.load(document);
}
/** @type {import('../../application.js').Application} */
@@ -69,6 +68,7 @@ export class SettingsController extends EventDispatcher {
/** */
async prepare() {
+ await this._templates.loadFromFiles(['/templates-settings.html']);
this._application.on('optionsUpdated', this._onOptionsUpdated.bind(this));
if (this._canObservePermissionsChanges()) {
chrome.permissions.onAdded.addListener(this._onPermissionsChanged.bind(this));