3 files changed, 59 insertions, 2 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 62e62243..2714de72 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -127,12 +127,12 @@ html:root[data-yomichan-page=float] .navigation-header:not([hidden])~.navigation
     user-select: none;
 }
 
-#query-parser {
+#query-parser-content {
     margin-top: 0.5em;
     font-size: 2em;
 }
 
-#query-parser[data-term-spacing=true] .query-parser-term {
+#query-parser-content[data-term-spacing=true] .query-parser-term {
     margin-right: 0.2em;
 }
 
diff --git a/ext/mixed/js/api.js b/ext/mixed/js/api.js
index 5ec93b01..0b1e7e4f 100644
--- a/ext/mixed/js/api.js
+++ b/ext/mixed/js/api.js
@@ -105,6 +105,10 @@ function apiGetDisplayTemplatesHtml() {
     return _apiInvoke('getDisplayTemplatesHtml');
 }
 
+function apiGetQueryParserTemplatesHtml() {
+    return _apiInvoke('getQueryParserTemplatesHtml');
+}
+
 function apiGetZoom() {
     return _apiInvoke('getZoom');
 }
diff --git a/ext/mixed/js/template-handler.js b/ext/mixed/js/template-handler.js
new file mode 100644
index 00000000..86e2414f
--- /dev/null
+++ b/ext/mixed/js/template-handler.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2020  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * 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 <http://www.gnu.org/licenses/>.
+ */
+
+
+class TemplateHandler {
+    constructor(html) {
+        this._templates = new Map();
+        this._html = html;
+        this._doc = null;
+
+        this._initialize();
+    }
+
+    _initialize() {
+        this._doc = new DOMParser().parseFromString(this._html, 'text/html');
+        for (const template of this._doc.querySelectorAll('template')) {
+            this._setTemplate(template);
+        }
+    }
+
+    _setTemplate(template) {
+        const idMatch = template.id.match(/^([a-z-]+)-template$/);
+        if (!idMatch) {
+            throw new Error(`Invalid template ID: ${template.id}`);
+        }
+        this._templates.set(idMatch[1], template);
+    }
+
+    instantiate(name) {
+        const template = this._templates.get(name);
+        return document.importNode(template.content.firstChild, true);
+    }
+
+    instantiateFragment(name) {
+        const template = this._templates.get(name);
+        return document.importNode(template.content, true);
+    }
+}