aboutsummaryrefslogtreecommitdiff
path: root/ext/bg
diff options
context:
space:
mode:
Diffstat (limited to 'ext/bg')
-rw-r--r--ext/bg/js/settings/anki-controller.js6
-rw-r--r--ext/bg/js/settings/audio-controller.js8
-rw-r--r--ext/bg/js/settings/dictionary-controller.js10
-rw-r--r--ext/bg/js/settings/profile-conditions-ui.js10
-rw-r--r--ext/bg/js/settings/scan-inputs-controller.js12
-rw-r--r--ext/bg/js/settings/settings-controller.js10
-rw-r--r--ext/bg/settings.html1
7 files changed, 25 insertions, 32 deletions
diff --git a/ext/bg/js/settings/anki-controller.js b/ext/bg/js/settings/anki-controller.js
index 526ddfb2..373e4d43 100644
--- a/ext/bg/js/settings/anki-controller.js
+++ b/ext/bg/js/settings/anki-controller.js
@@ -90,10 +90,9 @@ class AnkiController {
}
getFieldMarkersHtml(markers) {
- const template = document.querySelector('#anki-field-marker-template').content;
const fragment = document.createDocumentFragment();
for (const marker of markers) {
- const markerNode = document.importNode(template, true).firstChild;
+ const markerNode = this._settingsController.instantiateTemplate('anki-field-marker');
markerNode.querySelector('.marker-link').textContent = marker;
fragment.appendChild(markerNode);
}
@@ -221,8 +220,7 @@ class AnkiController {
}
_createFieldTemplate(name, value, markers) {
- const template = document.querySelector('#anki-field-template').content;
- const content = document.importNode(template, true).firstChild;
+ const content = this._settingsController.instantiateTemplate('anki-field');
content.querySelector('.anki-field-name').textContent = name;
diff --git a/ext/bg/js/settings/audio-controller.js b/ext/bg/js/settings/audio-controller.js
index bd7951f7..6ea11e15 100644
--- a/ext/bg/js/settings/audio-controller.js
+++ b/ext/bg/js/settings/audio-controller.js
@@ -136,12 +136,6 @@ class AudioController {
}
}
- _instantiateTemplate(templateSelector) {
- const template = document.querySelector(templateSelector);
- const content = document.importNode(template.content, true);
- return content.firstChild;
- }
-
_getUnusedAudioSource() {
const audioSourcesAvailable = [
'jpod101',
@@ -159,7 +153,7 @@ class AudioController {
_createAudioSourceEntry(value) {
const eventListeners = new EventListenerCollection();
- const container = this._instantiateTemplate('#audio-source-template');
+ const container = this._settingsController.instantiateTemplate('audio-source');
const select = container.querySelector('.audio-source-select');
const removeButton = container.querySelector('.audio-source-remove');
diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index 7a71a02a..cbbd0a8e 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -293,7 +293,7 @@ class DictionaryController {
}
_createExtra(totalCounts, remainders, totalRemainder) {
- const node = this._instantiateTemplate('#dict-extra-template');
+ const node = this._settingsController.instantiateTemplate('dict-extra');
this._integrityExtraInfoNode = node;
node.querySelector('.dict-total-count').textContent = `${totalRemainder} item${totalRemainder !== 1 ? 's' : ''}`;
@@ -317,7 +317,7 @@ class DictionaryController {
}
_createDictionaryEntry(dictionary) {
- const node = this._instantiateTemplate('#dict-template');
+ const node = this._settingsController.instantiateTemplate('dict');
this._dictionaryEntryContainer.appendChild(node);
const entry = new DictionaryEntry(this, node, dictionary);
@@ -369,12 +369,6 @@ class DictionaryController {
}
}
- _instantiateTemplate(templateSelector) {
- const template = document.querySelector(templateSelector);
- const content = document.importNode(template.content, true);
- return content.firstChild;
- }
-
async _deleteDictionaryInternal(dictionaryTitle, onProgress) {
const dictionaryDatabase = await this._getPreparedDictionaryDatabase();
try {
diff --git a/ext/bg/js/settings/profile-conditions-ui.js b/ext/bg/js/settings/profile-conditions-ui.js
index 419c35b3..9438a0ec 100644
--- a/ext/bg/js/settings/profile-conditions-ui.js
+++ b/ext/bg/js/settings/profile-conditions-ui.js
@@ -110,10 +110,8 @@ class ProfileConditionsUI {
this._addConditionGroupButton = null;
}
- instantiateTemplate(templateSelector) {
- const template = document.querySelector(templateSelector);
- const content = document.importNode(template.content, true);
- return content.firstChild;
+ instantiateTemplate(names) {
+ return this._settingsController.instantiateTemplate(names);
}
getDescriptorTypes() {
@@ -303,7 +301,7 @@ class ProfileConditionGroupUI {
}
prepare(conditionGroup) {
- this._node = this._parent.instantiateTemplate('#condition-group-template');
+ this._node = this._parent.instantiateTemplate('condition-group');
this._conditionContainer = this._node.querySelector('.condition-list');
this._addConditionButton = this._node.querySelector('.condition-add');
@@ -434,7 +432,7 @@ class ProfileConditionUI {
prepare(condition) {
const {type, operator, value} = condition;
- this._node = this._parent.parent.instantiateTemplate('#condition-template');
+ this._node = this._parent.parent.instantiateTemplate('condition');
this._typeInput = this._node.querySelector('.condition-type');
this._typeOptionContainer = this._typeInput.querySelector('optgroup');
this._operatorInput = this._node.querySelector('.condition-operator');
diff --git a/ext/bg/js/settings/scan-inputs-controller.js b/ext/bg/js/settings/scan-inputs-controller.js
index ec2758cb..04469a8d 100644
--- a/ext/bg/js/settings/scan-inputs-controller.js
+++ b/ext/bg/js/settings/scan-inputs-controller.js
@@ -65,6 +65,10 @@ class ScanInputsController {
this._settingsController.setProfileSetting(path, value);
}
+ instantiateTemplate(name) {
+ return this._settingsController.instantiateTemplate(name);
+ }
+
// Private
_onOptionsChanged({options}) {
@@ -139,7 +143,7 @@ class ScanInputField {
}
prepare(container, include, exclude) {
- const node = this._instantiateTemplate('#scan-input-template');
+ const node = this._parent.instantiateTemplate('scan-input');
const includeInputNode = node.querySelector('.scan-input-field[data-property=include]');
const includeMouseButton = node.querySelector('.mouse-button[data-property=include]');
const excludeInputNode = node.querySelector('.scan-input-field[data-property=exclude]');
@@ -188,12 +192,6 @@ class ScanInputField {
this._parent.removeInput(this._index);
}
- _instantiateTemplate(templateSelector) {
- const template = document.querySelector(templateSelector);
- const content = document.importNode(template.content, true);
- return content.firstChild;
- }
-
_isPointerTypeSupported(pointerType) {
if (this._node === null) { return false; }
const node = this._node.querySelector(`input.scan-input-settings-checkbox[data-property="types.${pointerType}"]`);
diff --git a/ext/bg/js/settings/settings-controller.js b/ext/bg/js/settings/settings-controller.js
index f4ddf6fb..827d837b 100644
--- a/ext/bg/js/settings/settings-controller.js
+++ b/ext/bg/js/settings/settings-controller.js
@@ -16,6 +16,7 @@
*/
/* global
+ * HtmlTemplateCollection
* api
*/
@@ -26,6 +27,7 @@ class SettingsController extends EventDispatcher {
this._source = generateId(16);
this._pageExitPreventions = new Set();
this._pageExitPreventionEventListeners = new EventListenerCollection();
+ this._templates = new HtmlTemplateCollection(document);
}
get source() {
@@ -110,6 +112,14 @@ class SettingsController extends EventDispatcher {
return obj;
}
+ instantiateTemplate(name) {
+ return this._templates.instantiate(name);
+ }
+
+ instantiateTemplateFragment(name) {
+ return this._templates.instantiateFragment(name);
+ }
+
// Private
_setProfileIndex(value) {
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 86535af4..c318401f 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -1213,6 +1213,7 @@
<script src="/mixed/js/dictionary-data-util.js"></script>
<script src="/mixed/js/document-util.js"></script>
<script src="/mixed/js/dom-data-binder.js"></script>
+ <script src="/mixed/js/html-template-collection.js"></script>
<script src="/mixed/js/object-property-accessor.js"></script>
<script src="/mixed/js/task-accumulator.js"></script>
<script src="/mixed/js/text-to-speech-audio.js"></script>