diff --git a/popup/popup.css b/popup/popup.css index 84820d8..efd5a72 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -1,9 +1,38 @@ body { - width: 200px; + width: 400px; text-align: center; + background-color: #191a1c; + color: whitesmoke; } .container { - display: inline-block; - text-align: left; + display: block; + text-align: center; + margin: 0 auto; + width: 80%; + margin-bottom: 15px; +} + +button { + border-radius: 5px; + background-color: #075656; + border: 4px solid #075656; + color: whitesmoke; + font-weight: 400; + padding: 4px 15px; + margin-right: 25px; +} +button.active { + border: 4px solid teal; +} +button:hover { + border: 4px solid teal; +} +button:focus { + outline: none; +} +label { + font-size: 1.1rem; + margin: 15px auto; + display: block; } diff --git a/popup/popup.html b/popup/popup.html index e84161e..e9a962e 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -1,21 +1,22 @@ - +
- -
-
- + +
+ + +
+ + +
+ + +
+
diff --git a/popup/popup.js b/popup/popup.js index 6b2b9c1..d466ad5 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -1,19 +1,47 @@ -const checkbox = document.querySelector('input.enable'); -const radios = [...document.querySelectorAll('input[name="redirect"]').values()]; -console.log(radios); + +const enable = document.querySelector('.enable button[name="enable"]'); +const disable = document.querySelector('.enable button[name="disable"]'); + +const lbrySite = document.querySelector('.redirect button[name="site"]'); +const lbryApp = document.querySelector('.redirect button[name="app"]'); chrome.storage.local.get(['enabled', 'redirect'], ({ enabled, redirect }) => { - checkbox.checked = enabled; - const currentRadio = radios.find(x => x.getAttribute("value") === redirect) || radios[0]; - currentRadio.checked = true; + + const currentButton = enabled ? enable : disable; + currentButton.classList.add('active'); + + const currentRadio = !redirect ? lbrySite : redirect === 'lbry.tv' ? lbrySite : lbryApp; + currentRadio.classList.add('active'); }); -checkbox.addEventListener("input", () => { - chrome.storage.local.set({ enabled: checkbox.checked }); -}); +const checkElementForClass = (elToAdd, elToRemove) => { + if(!elToAdd.classList.contains('active')){ -radios.forEach(radio => { - radio.addEventListener("input", () => { - chrome.storage.local.set({ redirect: radio.getAttribute("value") }); + elToAdd.classList.add('active'); + elToRemove.classList.remove('active'); + } +} + +const attachClick = (selector, handler) =>{ + document.querySelector(selector).addEventListener('click', (event) => { + const element = event.target; + const name = event.target.getAttribute('name'); + const value = !!+event.target.getAttribute('value'); + typeof handler==='function' ? handler(element, name, value): null; }); +} + +attachClick('.enable', (element, name, value) => { + const parsedValue = !!+value; + if(name){ + checkElementForClass(element, name === 'enable' ? disable : enable ); + chrome.storage.local.set({ enabled: parsedValue }); + } +}); + +attachClick('.redirect', (element, name, value) => { + if(name){ + checkElementForClass(element, name === 'site' ? lbryApp : lbrySite); + chrome.storage.local.set({ redirect: value }); + } });