frontend for multiple hotkeys for each command

The options UI can now handle setting and deleting multiple hotkeys for each command

css/options.css

@@ -120,6 +120,10 @@ hr {
   margin: 6px 10px;
 }
 
+.hotkeys {
+  margin: 0 4px;
+}
+
 .hotkeys .btn-text {
   margin-right: 0;
 }
@@ -130,6 +134,7 @@ hr {
 
 .btn-enter {
   background-color: #00b1e2;
+  margin-left: auto;
 }
 
 .reset-area {
@@ -202,3 +207,15 @@ hr {
   border-radius: 8px;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
 }
+
+.addHotkey {
+  opacity: 0;
+  margin-left: auto;
+  margin-right: 4px;
+  transition: opacity 0.4s ease-out;
+}
+
+.setting:hover .addHotkey {
+  opacity: 1;
+  transition: opacity 0.2s linear;
+}

js/options.js

@@ -61,13 +61,21 @@ function enterNewHotkey(event) {
   }
 }
 
-function updateHotkey(element, newVal) {
+function updateHotkey(element, newVal, index) {
   let parentSection = element.parentNode;
   parentSection.removeChild(element);
   let newSettings = SETTINGS_FULL;
-  newSettings.hotkeys.codes[parentSection.id] = newVal;
+
+  if (newVal === null) {
+    // remove the hotkey at the index provided
+    newSettings.hotkeys.codes[parentSection.id].splice(index, 1);
+  } else {
+    // add the new hotkey to the end of the stored hotkeys
+    newSettings.hotkeys.codes[parentSection.id].push(newVal);
+  }
+
   chrome.storage.local.set({ "extension-settings": newSettings }, function () {
-    setHotkeyBtn(parentSection);
+    getSettings(setHotkeyBtn(parentSection));
     // TODO: Send message to content scripts that settings updated
   });
 }
@@ -97,23 +105,38 @@ function formateHotkeys(set1) {
   return keyString;
 }
 
-function setHotkeyBtn(element) {
+function setHotkeyBtn(btnParent) {
-  let el = document.createElement("div");
+  let hotkeys = HOTKEY_CODES[btnParent.id];
+
+  // remove old buttons
+  while (btnParent.childNodes.length > 2) {
+    btnParent.removeChild(btnParent.lastChild);
+  }
+
   // TODO: Check if hotkey combo in storage
 
+  let createNewBtn = document.createElement("div");
+  createNewBtn.setAttribute("id", btnParent.id + "-btn");
+  createNewBtn.setAttribute("class", "btn btn-hov addHotkey");
+  createNewBtn.innerHTML = `
+       <span class="btn-text">
+           Click to type a new shortcut
+       </span>
+   `;
+  // Add listner for new hotkey input
+  createNewBtn.addEventListener("click", enterNewHotkey);
+  btnParent.appendChild(createNewBtn);
+
   // if in storage print stored combo
-  if (HOTKEY_CODES[element.id].length !== 0) {
+  if (hotkeys.length !== 0) {
-    console.log(element.id);
+    hotkeys.forEach((hotkey, index) => {
-    // delete previous btn
+      let el = document.createElement("div");
-    let old = document.getElementById(element.id + "-hotkey");
+      console.log(hotkey + " " + index);
-    if (old !== null && element.parentNode) {
+      el.setAttribute("id", btnParent.id + "-hotkey-" + index);
-      old.parentNode.removeChild(old);
+      el.setAttribute("class", "btn hotkeys");
-    }
+      el.innerHTML = `
-    el.setAttribute("id", element.id + "-hotkey");
-    el.setAttribute("class", "btn hotkeys");
-    el.innerHTML = `
       <span class="btn-text">
-            ${formateHotkeys(new Set(HOTKEY_CODES[element.id]))}
+            ${formateHotkeys(new Set(hotkey))}
       </span>
       <button class="close" title="Delete shortcut">
           <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
@@ -121,30 +144,14 @@ function setHotkeyBtn(element) {
           </svg>
       </button>
     `;
-    el.getElementsByClassName("close")[0].addEventListener(
+      el.getElementsByClassName("close")[0].addEventListener(
-      "click",
+        "click",
-      (deleteHotkey = function () {
+        (deleteHotkey = function () {
-        updateHotkey(el, []);
+          updateHotkey(el, null, index);
-      })
+        })
-    );
+      );
-    element.appendChild(el);
+      btnParent.appendChild(el);
-  } else {
+    });
-    // delete any previous btn
-    let old = document.getElementById(element.id + "-btn");
-    if (old !== null && element.parentNode) {
-      old.parentNode.removeChild(old);
-    }
-
-    el.setAttribute("id", element.id + "-btn");
-    el.setAttribute("class", "btn btn-hov");
-    el.innerHTML = `
-        <span class="btn-text">
-            Click to type a new shortcut
-        </span>
-    `;
-    // Add listner for new hotkey input
-    el.addEventListener("click", enterNewHotkey);
-    element.appendChild(el);
   }
 }