LBRYFoundation/Watch-on-LBRY
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/Watch-on-LBRY.git synced 2025-08-23 17:47:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

popup ui

Browse source
This commit is contained in:
Adam 2020-02-06 00:17:24 +02:00
parent 190733936a
commit 1dfd23f737
3 changed files with 85 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
popup/popup.css
View file

@ -1,9 +1,38 @@
body { body {
width: 200px; width: 400px;
text-align: center; text-align: center;
background-color: #191a1c;
color: whitesmoke;
} }
.container { .container {
display: inline-block; display: block;
text-align: left; 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;
} }

25
popup/popup.html
View file

@ -1,21 +1,22 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="popup.css" /> <link rel="stylesheet" href="popup.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<label> <label>Enable Redirection:</label>
Enable: <div class="enable">
<input class="enable" type="checkbox" /> <button type="button" class="button" name="enable" value="1" > YES </button>
</label> <button type="button" class="button" name="disable" value="0" > NO </button>
<br> </div>
<br>
<label> <label> Where would you like to redirect ? </label>
Redirect to: <br> <div class="redirect">
<input type="radio" name="redirect" value="lbry.tv" /> LBRY.tv <br> <button type="button" class="button" name="site" value="lbry.tv" > LBRY.tv </button>
<input type="radio" name="redirect" value="app"/> LBRY App <button type="button" class="button" name="app" value="app" > LBRY App </button>
</label> </div>
</div> </div>
<script src="popup.js"></script> <script src="popup.js"></script>
</body> </body>

52
popup/popup.js
View file

@ -1,19 +1,47 @@
const checkbox = document.querySelector('input.enable');
const radios = [...document.querySelectorAll('input[name="redirect"]').values()]; const enable = document.querySelector('.enable button[name="enable"]');
console.log(radios); 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 }) => { chrome.storage.local.get(['enabled', 'redirect'], ({ enabled, redirect }) => {
checkbox.checked = enabled;
const currentRadio = radios.find(x => x.getAttribute("value") === redirect) || radios[0]; const currentButton = enabled ? enable : disable;
currentRadio.checked = true; currentButton.classList.add('active');
const currentRadio = !redirect ? lbrySite : redirect === 'lbry.tv' ? lbrySite : lbryApp;
currentRadio.classList.add('active');
}); });
checkbox.addEventListener("input", () => { const checkElementForClass = (elToAdd, elToRemove) => {
chrome.storage.local.set({ enabled: checkbox.checked }); if(!elToAdd.classList.contains('active')){
});
radios.forEach(radio => { elToAdd.classList.add('active');
radio.addEventListener("input", () => { elToRemove.classList.remove('active');
chrome.storage.local.set({ redirect: radio.getAttribute("value") }); }
}
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 });
}
}); });