diff --git a/css/options.css b/css/options.css index a20b109..e9e6c63 100644 --- a/css/options.css +++ b/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; +} diff --git a/js/options.js b/js/options.js index fd80170..95a4340 100644 --- a/js/options.js +++ b/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) { - let el = document.createElement("div"); +function setHotkeyBtn(btnParent) { + 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 = ` + + Click to type a new shortcut + + `; + // 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) { - console.log(element.id); - // delete previous btn - let old = document.getElementById(element.id + "-hotkey"); - if (old !== null && element.parentNode) { - old.parentNode.removeChild(old); - } - el.setAttribute("id", element.id + "-hotkey"); - el.setAttribute("class", "btn hotkeys"); - el.innerHTML = ` + if (hotkeys.length !== 0) { + hotkeys.forEach((hotkey, index) => { + let el = document.createElement("div"); + console.log(hotkey + " " + index); + el.setAttribute("id", btnParent.id + "-hotkey-" + index); + el.setAttribute("class", "btn hotkeys"); + el.innerHTML = ` - ${formateHotkeys(new Set(HOTKEY_CODES[element.id]))} + ${formateHotkeys(new Set(hotkey))} `; - el.getElementsByClassName("close")[0].addEventListener( - "click", - (deleteHotkey = function () { - updateHotkey(el, []); - }) - ); - element.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 = ` - - Click to type a new shortcut - - `; - // Add listner for new hotkey input - el.addEventListener("click", enterNewHotkey); - element.appendChild(el); + el.getElementsByClassName("close")[0].addEventListener( + "click", + (deleteHotkey = function () { + updateHotkey(el, null, index); + }) + ); + btnParent.appendChild(el); + }); } }