From 56ee7f8df47a3826e10d9b0876f313f5ced4c98e Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Tue, 24 Dec 2019 21:45:57 -0500 Subject: Update display content generation to use HTML templates --- ext/fg/float.html | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 91 insertions(+), 1 deletion(-) (limited to 'ext/fg/float.html') diff --git a/ext/fg/float.html b/ext/fg/float.html index 886e5e8b..f5f56853 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -19,10 +19,21 @@ + +
+ +
-
+

Yomichan Updated!

The Yomichan extension has been updated to a new version! In order to continue @@ -31,6 +42,84 @@

+ + + + + + + + + + + + + + + + + @@ -40,6 +129,7 @@ + -- cgit v1.2.3 From 24832be63693d8f04797ed45041ffbd3e8ac3f9d Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Fri, 27 Dec 2019 15:10:51 -0500 Subject: Update how spinner visibility is controlled --- ext/bg/search.html | 4 +--- ext/fg/float.html | 4 +--- ext/mixed/css/display.css | 1 - ext/mixed/js/display.js | 4 +++- 4 files changed, 5 insertions(+), 8 deletions(-) (limited to 'ext/fg/float.html') diff --git a/ext/bg/search.html b/ext/bg/search.html index 5d9babea..819c8505 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -43,9 +43,7 @@ -
- -
+
diff --git a/ext/fg/float.html b/ext/fg/float.html index f5f56853..9879ae3e 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -15,9 +15,7 @@ -
- -
+ -
+ - - - - - - - - - - - - - - - - - diff --git a/ext/fg/float.html b/ext/fg/float.html index 9cc0dc39..bec5ae68 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -40,84 +40,6 @@
- - - - - - - - - - - - - - - - - diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html new file mode 100644 index 00000000..01cfeffc --- /dev/null +++ b/ext/mixed/display-templates.html @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/ext/mixed/js/api.js b/ext/mixed/js/api.js index 8ed1d996..9f0835b0 100644 --- a/ext/mixed/js/api.js +++ b/ext/mixed/js/api.js @@ -101,6 +101,10 @@ function apiClipboardGet() { return _apiInvoke('clipboardGet'); } +function apiGetDisplayTemplatesHtml() { + return _apiInvoke('getDisplayTemplatesHtml'); +} + function _apiInvoke(action, params={}) { const data = {action, params}; return new Promise((resolve, reject) => { diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index 44b250e7..8eb699e0 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -19,22 +19,39 @@ class DisplayGenerator { constructor() { - this._termEntryTemplate = document.querySelector('#term-entry-template'); - this._termExpressionTemplate = document.querySelector('#term-expression-template'); - this._termDefinitionItemTemplate = document.querySelector('#term-definition-item-template'); - this._termDefinitionOnlyTemplate = document.querySelector('#term-definition-only-template'); - this._termGlossaryItemTemplate = document.querySelector('#term-glossary-item-template'); - this._termReasonTemplate = document.querySelector('#term-reason-template'); - - this._kanjiEntryTemplate = document.querySelector('#kanji-entry-template'); - this._kanjiInfoTableTemplate = document.querySelector('#kanji-info-table-template'); - this._kanjiInfoTableItemTemplate = document.querySelector('#kanji-info-table-item-template'); - this._kanjiInfoTableEmptyTemplate = document.querySelector('#kanji-info-table-empty-template'); - this._kanjiGlossaryItemTemplate = document.querySelector('#kanji-glossary-item-template'); - this._kanjiReadingTemplate = document.querySelector('#kanji-reading-template'); - - this._tagTemplate = document.querySelector('#tag-template'); - this._tagFrequencyTemplate = document.querySelector('#tag-frequency-template'); + this._isInitialized = false; + this._initializationPromise = null; + + this._termEntryTemplate = null; + this._termExpressionTemplate = null; + this._termDefinitionItemTemplate = null; + this._termDefinitionOnlyTemplate = null; + this._termGlossaryItemTemplate = null; + this._termReasonTemplate = null; + + this._kanjiEntryTemplate = null; + this._kanjiInfoTableTemplate = null; + this._kanjiInfoTableItemTemplate = null; + this._kanjiInfoTableEmptyTemplate = null; + this._kanjiGlossaryItemTemplate = null; + this._kanjiReadingTemplate = null; + + this._tagTemplate = null; + this._tagFrequencyTemplate = null; + } + + isInitialized() { + return this._isInitialized; + } + + initialize() { + if (this._isInitialized) { + return Promise.resolve(); + } + if (this._initializationPromise === null) { + this._initializationPromise = this._initializeInternal(); + } + return this._initializationPromise; } createTermEntry(details) { @@ -259,6 +276,31 @@ class DisplayGenerator { return node; } + async _initializeInternal() { + const html = await apiGetDisplayTemplatesHtml(); + const doc = new DOMParser().parseFromString(html, 'text/html'); + this._setTemplates(doc); + } + + _setTemplates(doc) { + this._termEntryTemplate = doc.querySelector('#term-entry-template'); + this._termExpressionTemplate = doc.querySelector('#term-expression-template'); + this._termDefinitionItemTemplate = doc.querySelector('#term-definition-item-template'); + this._termDefinitionOnlyTemplate = doc.querySelector('#term-definition-only-template'); + this._termGlossaryItemTemplate = doc.querySelector('#term-glossary-item-template'); + this._termReasonTemplate = doc.querySelector('#term-reason-template'); + + this._kanjiEntryTemplate = doc.querySelector('#kanji-entry-template'); + this._kanjiInfoTableTemplate = doc.querySelector('#kanji-info-table-template'); + this._kanjiInfoTableItemTemplate = doc.querySelector('#kanji-info-table-item-template'); + this._kanjiInfoTableEmptyTemplate = doc.querySelector('#kanji-info-table-empty-template'); + this._kanjiGlossaryItemTemplate = doc.querySelector('#kanji-glossary-item-template'); + this._kanjiReadingTemplate = doc.querySelector('#kanji-reading-template'); + + this._tagTemplate = doc.querySelector('#tag-template'); + this._tagFrequencyTemplate = doc.querySelector('#tag-frequency-template'); + } + _appendKanjiLinks(container, text) { let part = ''; for (const c of text) { diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index eabb73ca..75b43aa0 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -356,6 +356,11 @@ class Display { window.focus(); } + if (!this.displayGenerator.isInitialized()) { + await this.displayGenerator.initialize(); + if (this.setContentToken !== token) { return; } + } + this.definitions = definitions; if (context.disableHistory) { delete context.disableHistory; @@ -415,6 +420,11 @@ class Display { window.focus(); } + if (!this.displayGenerator.isInitialized()) { + await this.displayGenerator.initialize(); + if (this.setContentToken !== token) { return; } + } + this.definitions = definitions; if (context.disableHistory) { delete context.disableHistory; -- cgit v1.2.3