options page and selector
parent
b8252e54b1
commit
e7e73b3460
@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Parse Policies - Options</title>
|
||||||
|
<link rel="stylesheet" href="options.css" />
|
||||||
|
<script src="options.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Parse Policies - Options</h1>
|
||||||
|
<ul id="categories">
|
||||||
|
<li class="category reference">
|
||||||
|
<label for=""></label>
|
||||||
|
<input type="checkbox" name="" id="" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -0,0 +1,40 @@
|
|||||||
|
chrome.storage.sync.get(["categories", "selected"], (result) => {
|
||||||
|
listAllCategories(result.categories, result.selected);
|
||||||
|
});
|
||||||
|
|
||||||
|
function listAllCategories(categories, selected) {
|
||||||
|
const list = document.querySelector("#categories");
|
||||||
|
let reference = list.querySelector(".reference");
|
||||||
|
for (const category in categories) {
|
||||||
|
let item = reference.cloneNode(true);
|
||||||
|
item.classList.remove("reference");
|
||||||
|
|
||||||
|
let label = item.querySelector("label");
|
||||||
|
|
||||||
|
label.innerHTML = categories[category].title;
|
||||||
|
label.setAttribute("for", category);
|
||||||
|
|
||||||
|
let checkbox = item.querySelector("input");
|
||||||
|
checkbox.checked = selected.includes(category);
|
||||||
|
checkbox.setAttribute("name", category);
|
||||||
|
|
||||||
|
checkbox.addEventListener("change", () => {
|
||||||
|
checkbox.checked
|
||||||
|
? selected.push(category)
|
||||||
|
: selected.splice(selected.indexOf(category), 1);
|
||||||
|
chrome.storage.sync.set({ selected });
|
||||||
|
});
|
||||||
|
|
||||||
|
list.appendChild(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addOrRemove(array, value) {
|
||||||
|
var index = array.indexOf(value);
|
||||||
|
|
||||||
|
if (index === -1) {
|
||||||
|
array.push(value);
|
||||||
|
} else {
|
||||||
|
array.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
@ -1,33 +1,40 @@
|
|||||||
body {
|
body {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid currentColor;
|
border: 1px solid currentColor;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button:active {
|
button:active {
|
||||||
background-color: currentColor;
|
background-color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.current {
|
button.current {
|
||||||
box-shadow: 0 0 0 2px white,
|
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
|
||||||
0 0 0 4px black;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2 {
|
h1,
|
||||||
font-size: 1rem;
|
h2 {
|
||||||
margin: 8px 0;
|
font-size: 1rem;
|
||||||
|
margin: 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preferences {
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 8px 0;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid currentColor;
|
||||||
}
|
}
|
Loading…
Reference in New Issue