Move display templates into a single file

4 files changed, 23 insertions, 88 deletions

diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index 906aaa30..285b8016 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -25,6 +25,10 @@ function apiAudioGetUrl(definition, source, optionsContext) {
     return _apiInvoke('audioGetUrl', {definition, source, optionsContext});
 }
 
+function apiGetDisplayTemplatesHtml() {
+    return _apiInvoke('getDisplayTemplatesHtml');
+}
+
 function _apiInvoke(action, params={}) {
     const data = {action, params};
     return new Promise((resolve, reject) => {
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 28b0201e..391d6243 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -522,6 +522,11 @@ class Backend {
         return result;
     }
 
+    async _onApiGetDisplayTemplatesHtml() {
+        const url = chrome.runtime.getURL('/mixed/display-templates.html');
+        return await requestText(url, 'GET');
+    }
+
     // Command handlers
 
     async _onCommandSearch(params) {
@@ -735,7 +740,8 @@ Backend._messageHandlers = new Map([
     ['frameInformationGet', (self, ...args) => self._onApiFrameInformationGet(...args)],
     ['injectStylesheet', (self, ...args) => self._onApiInjectStylesheet(...args)],
     ['getEnvironmentInfo', (self, ...args) => self._onApiGetEnvironmentInfo(...args)],
-    ['clipboardGet', (self, ...args) => self._onApiClipboardGet(...args)]
+    ['clipboardGet', (self, ...args) => self._onApiClipboardGet(...args)],
+    ['getDisplayTemplatesHtml', (self, ...args) => self._onApiGetDisplayTemplatesHtml(...args)]
 ]);
 
 Backend._commandHandlers = new Map([
diff --git a/ext/bg/js/request.js b/ext/bg/js/request.js
index b584c9a9..778f933b 100644
--- a/ext/bg/js/request.js
+++ b/ext/bg/js/request.js
@@ -17,10 +17,10 @@
  */
 
 
-function requestJson(url, action, params) {
+function requestText(url, action, params) {
     return new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
-        xhr.overrideMimeType('application/json');
+        xhr.overrideMimeType('text/plain');
         xhr.addEventListener('load', () => resolve(xhr.responseText));
         xhr.addEventListener('error', () => reject(new Error('Failed to connect')));
         xhr.open(action, url);
@@ -29,12 +29,15 @@ function requestJson(url, action, params) {
         } else {
             xhr.send();
         }
-    }).then((responseText) => {
-        try {
-            return JSON.parse(responseText);
-        }
-        catch (e) {
-            return Promise.reject(new Error('Invalid response'));
-        }
     });
 }
+
+async function requestJson(url, action, params) {
+    const responseText = await requestText(url, action, params);
+    try {
+        return JSON.parse(responseText);
+    }
+    catch (e) {
+        throw new Error('Invalid response');
+    }
+}
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 819c8505..74afbb68 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -66,84 +66,6 @@
             </div>
         </div>
 
-        <template id="term-entry-template"><div class="entry" data-type="term">
-            <div class="entry-header1">
-                <div class="entry-header2">
-                    <div class="entry-header3">
-                        <div class="actions">
-                            <button class="action-button action-view-note pending disabled"><img src="/mixed/img/view-note.svg" class="icon-image" title="View added note (Alt + V)" alt></button>
-                            <button class="action-button action-add-note pending disabled" data-mode="term-kanji"><img src="/mixed/img/add-term-kanji.svg" class="icon-image" title="Add expression (Alt + E)" alt></button>
-                            <button class="action-button action-add-note pending disabled" data-mode="term-kana"><img src="/mixed/img/add-term-kana.svg" class="icon-image" title="Add reading (Alt + R)" alt></button>
-                            <button class="action-button action-play-audio"><img src="/mixed/img/play-audio.svg" class="icon-image" title="Play audio (Alt + P)" alt></button>
-                            <span class="action-button action-current-indicator"><img src="/mixed/img/entry-current.svg" class="icon-image current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)" alt></span>
-                        </div>
-                        <div class="term-expression-list"></div>
-                    </div>
-                    <div class="term-reasons"></div>
-                </div>
-                <div class="frequencies"></div>
-            </div>
-            <div class="term-definition-container"><ol class="term-definition-list"></ol></div>
-            <pre class="debug-info"></pre>
-        </div></template>
-        <template id="term-expression-template"><div class="term-expression"><span class="term-expression-text"></span><div class="term-expression-details">
-            <button class="action-button action-play-audio"><img src="/mixed/img/play-audio.svg" class="icon-image" title="Play audio" alt></button>
-            <div class="tags tag-list"></div>
-            <div class="frequencies tag-list"></div>
-        </div></div></template>
-        <template id="term-definition-item-template"><li class="term-definition-item">
-            <div class="term-definition-tag-list tag-list"></div>
-            <div class="term-definition-only-list"></div>
-            <ul class="term-glossary-list"></ul>
-        </li></template>
-        <template id="term-definition-only-template"><span class="term-definition-only"></span></template>
-        <template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary"></span></li></template>
-        <template id="term-reason-template"><span class="term-reason"></span></template>
-
-        <template id="kanji-entry-template"><div class="entry" data-type="kanji">
-            <div class="entry-header1">
-                <div class="entry-header2">
-                    <div class="entry-header3">
-                        <div class="actions">
-                            <button class="action-button action-view-note pending disabled"><img src="/mixed/img/view-note.svg" class="icon-image" title="View added note (Alt + V)" alt></button>
-                            <button class="action-button action-add-note pending disabled" data-mode="kanji"><img src="/mixed/img/add-term-kanji.svg" class="icon-image" title="Add Kanji (Alt + K)" alt></button>
-                            <span class="action-button action-current-indicator"><img src="/mixed/img/entry-current.svg" class="icon-image current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)" alt></span>
-                        </div>
-                        <div class="kanji-glyph"></div>
-                    </div>
-                </div>
-                <div class="frequencies"></div>
-            </div>
-            <div class="tags tag-list"></div>
-            <table class="kanji-glyph-data"><tbody>
-                <tr>
-                    <th>Glossary</th>
-                    <th>Readings</th>
-                    <th>Statistics</th>
-                </tr>
-                <tr>
-                    <td class="kanji-glossary-container"><ol class="kanji-glossary-list"></ol></td>
-                    <td class="kanji-readings"><dl class="kanji-readings-chinese"></dl><dl class="kanji-readings-japanese"></dl></td>
-                    <td class="kanji-statistics"></td>
-                </tr>
-                <tr><th colspan="3">Classifications</th></tr>
-                <tr><td colspan="3" class="kanji-classifications"></td></tr>
-                <tr><th colspan="3">Codepoints</th></tr>
-                <tr><td colspan="3" class="kanji-codepoints"></td></tr>
-                <tr><th colspan="3">Dictionary Indices</th></tr>
-                <tr><td colspan="3" class="kanji-dictionary-indices"></td></tr>
-            </tbody></table>
-            <pre class="debug-info"></pre>
-        </div></template>
-        <template id="kanji-info-table-template"><table class="kanji-info-table"><tbody class="kanji-info-table-body"></tbody></table></template>
-        <template id="kanji-info-table-item-template"><tr class="kanji-info-table-item"><th class="kanji-info-table-item-header"></th><td class="kanji-info-table-item-value"></td></tr></template>
-        <template id="kanji-info-table-empty-template"><tr class="kanji-info-table-item kanji-info-table-item-empty"><td class="kanji-info-table-item-value-empty">No data found</td></tr class="kanji-info-table-item"></template>
-        <template id="kanji-glossary-item-template"><li class="kanji-glossary-item"><span class="kanji-glossary"></span></li></template>
-        <template id="kanji-reading-template"><dd class="kanji-reading"></dd></template>
-
-        <template id="tag-template"><span class="tag"></span></template>
-        <template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></template>
-
         <script src="/mixed/lib/handlebars.min.js"></script>
         <script src="/mixed/lib/wanakana.min.js"></script>