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 {
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;
}

25
popup/popup.html
View file

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