dom.js in optionsUI + reuse openURL to open/switch to URL

options/index.html

@@ -57,6 +57,7 @@
   </div>
 
   <script src="/messaging.js"></script>
+  <script src="/dom.js"></script>
   <script src="index.js"></script>
 </body>
 </html>

options/index.js

@@ -1,32 +1,35 @@
 /* globals configureCommands */
 'use strict';
 
+
 function restore () {
   chrome.runtime.getBackgroundPage(bg => {
-    document.getElementById('badgeDisabled').value = bg.prefs.get('badgeDisabled');
-    document.getElementById('badgeNormal').value = bg.prefs.get('badgeNormal');
-    document.getElementById('popupWidth').value = localStorage.getItem('popupWidth') || '246';
-    document.getElementById('updateInterval').value = bg.prefs.get('updateInterval');
+    $('#badgeDisabled').value = bg.prefs.get('badgeDisabled');
+    $('#badgeNormal').value = bg.prefs.get('badgeNormal');
+    $('#popupWidth').value = localStorage.getItem('popupWidth') || '246';
+    $('#updateInterval').value = bg.prefs.get('updateInterval');
     enforceValueRange('popupWidth');
   });
 }
 
+
 function save () {
   chrome.runtime.getBackgroundPage(bg => {
-    bg.prefs.set('badgeDisabled', document.getElementById('badgeDisabled').value);
-    bg.prefs.set('badgeNormal', document.getElementById('badgeNormal').value);
+    bg.prefs.set('badgeDisabled', $('#badgeDisabled').value);
+    bg.prefs.set('badgeNormal', $('#badgeNormal').value);
     localStorage.setItem('popupWidth', enforceValueRange('popupWidth'));
     bg.prefs.set(
       'updateInterval',
-      Math.max(0, +document.getElementById('updateInterval').value)
+      Math.max(0, +$('#updateInterval').value)
     );
     // display notification
-    let status = document.getElementById('status');
+    let status = $('#status');
     status.textContent = 'Options saved.';
     setTimeout(() => status.textContent = '', 750);
   });
 }
 
+
 function enforceValueRange(id) {
   let element = document.getElementById(id);
   let value = Number(element.value);
@@ -40,45 +43,36 @@ function enforceValueRange(id) {
   return value;
 }
 
-document.addEventListener('DOMContentLoaded', restore);
-document.getElementById('save').addEventListener('click', save);
+
+onDOMready().then(restore);
+$('#save').onclick = save;
+
+// overwrite the default URL if browser is Opera
+$('[data-cmd="open-keyboard"]').textContent =
+  configureCommands.url;
 
 // actions
-document.addEventListener('click', e => {
+document.onclick = e => {
   let cmd = e.target.dataset.cmd;
   let total = 0, updated = 0;
 
   function update () {
-    document.getElementById('update-counter').textContent = `${updated}/${total}`;
+    $('#update-counter').textContent = `${updated}/${total}`;
   }
   function done (target) {
     target.disabled = false;
     window.setTimeout(() => {
-      document.getElementById('update-counter').textContent = '';
+      $('#update-counter').textContent = '';
     }, 750);
   }
 
-  if (cmd === 'open-manage') {
-    chrome.tabs.query({
-      url: chrome.runtime.getURL('manage.html')
-    }, tabs => {
-      if (tabs.length) {
-        chrome.tabs.update(tabs[0].id, {
-          active: true,
-        }, () => {
-          chrome.windows.update(tabs[0].windowId, {
-            focused: true
-          });
-        });
-      }
-      else {
-        chrome.tabs.create({
-          url: chrome.runtime.getURL('manage.html')
-        });
-      }
-    });
-  }
-  else if (cmd === 'check-updates') {
+  switch (cmd) {
+
+  case 'open-manage':
+    openURL({url: '/manage.html'});
+    break;
+
+  case'check-updates':
     e.target.disabled = true;
     chrome.runtime.getBackgroundPage(bg => {
       bg.update.perform((cmd, value) => {
@@ -101,11 +95,11 @@ document.addEventListener('click', e => {
     chrome.runtime.sendMessage({
       method: 'resetInterval'
     });
-  }
-  else if (cmd === 'open-keyboard') {
+    break;
+
+  case 'open-keyboard':
     configureCommands.open();
+    break;
+
   }
-});
-// overwrite the default URL if browser is Opera
-document.querySelector('[data-cmd="open-keyboard"]').textContent =
-  configureCommands.url;
+};