Move HTML from options.js to options.html

iorate · Nov 14, 2018 · d29be0e · d29be0e
1 parent dd778c0
commit d29be0e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 37 deletions.
diff --git a/options.html b/options.html
@@ -6,6 +6,41 @@
     <title>uBlacklist Options</title>
   </head>
   <body>
+    <div data-i18n="blacklist"></div>
+    <div class="description">
+      <span data-i18n="blacklistDescription"></span><br>
+      <span data-i18n="example"></span>: *://*.example.com/*<br>
+      <span data-i18n="example"></span>: /example\.(net|org)/
+    </div>
+    <div><textarea id="blacklistTextArea" spellcheck="false"></textarea></div>
+    <div>
+      <details>
+        <summary data-i18n="importFromPersonalBlocklist"></summary>
+        <div class="container">
+          <div class="description" data-i18n="importDescription"></div>
+          <div><textarea id="importTextArea" spellcheck="false"></textarea></div>
+          <div><button id="importButton" data-i18n="import"></button></div>
+        </div>
+      </details>
+    </div>
+    <div>
+      <details>
+        <summary><span data-i18n="syncWithGoogleDrive"></span> (<span data-i18n="experimental"></span>)</summary>
+        <div class="container">
+          <div class="description" data-i18n="permitDescription"></div>
+          <div>
+            <button id="permitButton" data-i18n="permit"></button>
+            <span id="permitStatus"></span>
+          </div>
+          <hr>
+          <div class="description" data-i18n="enableSyncDescription"></div>
+          <div>
+            <input id="syncCheckBox" type="checkbox">
+            <label for="syncCheckBox" data-i18n="enableSync"></label>
+          </div>
+        </div>
+    </div>
+    <div><button id="okButton" data-i18n="ok"></button></div>
     <script src="common.js"></script>
     <script src="options.js"></script>
   </body>

diff --git a/options.js b/options.js
@@ -1,46 +1,13 @@
+for (const element of document.querySelectorAll('[data-i18n]')) {
+  element.insertAdjacentHTML('beforeend', _(element.dataset.i18n));
+}
+
 (async () => {
   const { blacklist, timestamp, sync } = await getLocalStorage({
     blacklist: '',
     timestamp: new Date(0).toISOString(),
     sync: false
   });
-  document.body.insertAdjacentHTML('beforeend', String.raw`
-    <div>${_('blacklist')}</div>
-    <div class="description">
-      ${_('blacklistDescription')}<br>
-      ${_('example')}: *://*.example.com/*<br>
-      ${_('example')}: /example\.(net|org)/
-    </div>
-    <div><textarea id="blacklistTextArea" spellcheck="false"></textarea></div>
-    <div>
-      <details>
-        <summary>${_('importFromPersonalBlocklist')}</summary>
-        <div class="container">
-          <div class="description">${_('importDescription')}</div>
-          <div><textarea id="importTextArea" spellcheck="false"></textarea></div>
-          <div><button id="importButton">${_('import')}</button></div>
-        </div>
-      </details>
-    </div>
-    <div>
-      <details>
-        <summary>${_('syncWithGoogleDrive')} (${_('experimental')})</summary>
-        <div class="container">
-          <div class="description">${_('permitDescription')}</div>
-          <div>
-            <button id="permitButton">${_('permit')}</button>
-            <span id="permitStatus"></span>
-          </div>
-          <hr>
-          <div class="description">${_('enableSyncDescription')}</div>
-          <div>
-            <input id="syncCheckBox" type="checkbox">
-            <label for="syncCheckBox">${_('enableSync')}</label>
-          </div>
-        </div>
-    </div>
-    <div><button id="okButton">${_('ok')}</button></div>
-  `);
 
   const blacklistTextArea = $('blacklistTextArea');
   const importTextArea = $('importTextArea');