103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
import {
|
|
createRef,
|
|
html,
|
|
ifDefined,
|
|
ref,
|
|
} from "chrome://global/content/vendor/lit.all.mjs";
|
|
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
|
|
|
|
export class SettingControl extends MozLitElement {
|
|
#lastSetting;
|
|
|
|
static properties = {
|
|
setting: { type: Object },
|
|
config: { type: Object },
|
|
value: {},
|
|
parentDisabled: { type: Boolean },
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
this.inputRef = createRef();
|
|
}
|
|
|
|
createRenderRoot() {
|
|
return this;
|
|
}
|
|
|
|
get inputEl() {
|
|
return this.inputRef.value;
|
|
}
|
|
|
|
async getUpdateComplete() {
|
|
let result = await super.getUpdateComplete();
|
|
await this.inputEl.updateComplete;
|
|
return result;
|
|
}
|
|
|
|
onSettingChange = () => {
|
|
this.value = this.setting.value;
|
|
};
|
|
|
|
willUpdate(changedProperties) {
|
|
if (changedProperties.has("setting")) {
|
|
if (this.#lastSetting) {
|
|
this.#lastSetting.off("change", this.onSettingChange);
|
|
}
|
|
this.#lastSetting = this.setting;
|
|
this.value = this.getValue();
|
|
this.setting.on("change", this.onSettingChange);
|
|
}
|
|
}
|
|
|
|
getValue() {
|
|
return this.setting.value;
|
|
}
|
|
|
|
// Called by our parent when our input changed.
|
|
onChange(el) {
|
|
this.setting.userChange(el.checked);
|
|
this.value = this.getValue();
|
|
}
|
|
|
|
render() {
|
|
let { config } = this;
|
|
let itemArgs =
|
|
config.items
|
|
?.map(i => ({
|
|
config: i,
|
|
setting: this.getSetting(i.id),
|
|
}))
|
|
.filter(i => i.setting.visible) || [];
|
|
switch (config.control) {
|
|
case "checkbox":
|
|
default:
|
|
return html`<moz-checkbox
|
|
id=${config.id}
|
|
data-l10n-id=${config.l10nId}
|
|
.iconSrc=${config.iconSrc}
|
|
.checked=${this.value}
|
|
.supportPage=${this.config.supportPage}
|
|
.parentDisabled=${this.parentDisabled}
|
|
.control=${this}
|
|
data-subcategory=${ifDefined(this.config.subcategory)}
|
|
?disabled=${this.setting.locked}
|
|
${ref(this.inputRef)}
|
|
>${itemArgs.map(
|
|
opts =>
|
|
html`<setting-control
|
|
.config=${opts.config}
|
|
.setting=${opts.setting}
|
|
.getSetting=${this.getSetting}
|
|
slot="nested"
|
|
></setting-control>`
|
|
)}</moz-checkbox
|
|
>`;
|
|
}
|
|
}
|
|
}
|
|
customElements.define("setting-control", SettingControl);
|