2021-03-09 19:51:03 +00:00
|
|
|
import * as utils from "./utils";
|
|
|
|
|
2021-04-23 18:14:54 +00:00
|
|
|
function camelize(s: string) {
|
|
|
|
return s.replace(/[^a-z\d](.)/gi, (_, char) => char.toUpperCase());
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface Options {
|
|
|
|
ruffleEnable: boolean,
|
|
|
|
ignoreOptout: boolean,
|
2021-03-09 19:51:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function getBooleanElements() {
|
2021-04-23 18:14:54 +00:00
|
|
|
const elements: Record<string, any> = {};
|
2021-03-09 19:51:03 +00:00
|
|
|
for (const option of document.getElementsByClassName("option")) {
|
|
|
|
const [checkbox] = option.getElementsByTagName("input");
|
|
|
|
if (checkbox.type !== "checkbox") {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
const [label] = option.getElementsByTagName("label");
|
|
|
|
const key = camelize(checkbox.id);
|
|
|
|
elements[key] = { option, checkbox, label };
|
|
|
|
}
|
|
|
|
return elements;
|
|
|
|
}
|
|
|
|
|
2021-04-23 18:14:54 +00:00
|
|
|
export async function bindBooleanOptions(onChange?: (options: Options) => void) {
|
2021-03-09 19:51:03 +00:00
|
|
|
const elements = getBooleanElements();
|
|
|
|
|
|
|
|
// Bind initial values.
|
|
|
|
const options = await utils.getOptions(Object.keys(elements));
|
|
|
|
for (const [key, value] of Object.entries(options)) {
|
|
|
|
elements[key].checkbox.checked = value;
|
|
|
|
}
|
|
|
|
|
|
|
|
for (const [key, { checkbox, label }] of Object.entries(elements)) {
|
|
|
|
// TODO: click/change/input?
|
|
|
|
checkbox.addEventListener("click", () => {
|
|
|
|
const value = checkbox.checked;
|
|
|
|
options[key] = value;
|
|
|
|
utils.storage.sync.set({ [key]: value });
|
|
|
|
});
|
|
|
|
|
|
|
|
label.textContent = utils.i18n.getMessage(`settings_${checkbox.id}`);
|
|
|
|
|
|
|
|
// Prevent transition on load.
|
|
|
|
// Method from https://stackoverflow.com/questions/11131875.
|
|
|
|
label.classList.add("notransition");
|
|
|
|
label.offsetHeight; // Trigger a reflow, flushing the CSS changes.
|
|
|
|
label.classList.remove("notransition");
|
|
|
|
}
|
|
|
|
|
|
|
|
// Listen for future changes.
|
2021-04-23 18:14:54 +00:00
|
|
|
utils.storage.onChanged.addListener((changes: Object, namespace: string) => {
|
2021-03-09 19:51:03 +00:00
|
|
|
if (namespace !== "sync") {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
for (const [key, option] of Object.entries(changes)) {
|
|
|
|
if (!elements[key]) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
elements[key].checkbox.checked = option.newValue;
|
|
|
|
options[key] = option.newValue;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (onChange) {
|
|
|
|
onChange(options);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
if (onChange) {
|
|
|
|
onChange(options);
|
|
|
|
}
|
|
|
|
}
|