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);
+ });
}
}