diff options
Diffstat (limited to 'toolkit/components/reader/color-input.mjs')
-rw-r--r-- | toolkit/components/reader/color-input.mjs | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/toolkit/components/reader/color-input.mjs b/toolkit/components/reader/color-input.mjs new file mode 100644 index 0000000000..1c460dac3e --- /dev/null +++ b/toolkit/components/reader/color-input.mjs @@ -0,0 +1,69 @@ +/* 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 { html } from "chrome://global/content/vendor/lit.all.mjs"; +import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; + +/** + * @tagname color-input + * @property {string} color - The initial color value as a hex code. + * @property {string} propName - The property that the color input sets. + * @property {string} l10nId - l10nId for label text. + */ +export default class ColorInput extends MozLitElement { + static properties = { + color: { type: String }, + propName: { type: String, attribute: "prop-name" }, + l10nId: { type: String, attribute: "data-l10n-id" }, + }; + + static queries = { + inputEl: "#color-swatch", + }; + + handleColorInput(event) { + this.color = event.target.value; + this.dispatchEvent( + new CustomEvent("color-picked", { + detail: this.color, + }) + ); + } + + /* Function to launch color picker when the user clicks anywhere in the container. */ + handleClick(event) { + // If the user directly clicks the color swatch, no need to propagate click. + if (event.target.matches("input")) { + return; + } + this.inputEl.click(); + } + + render() { + return html` + <link + rel="stylesheet" + href="chrome://global/content/reader/color-input.css" + /> + <div class="color-input-container" @click="${this.handleClick}"> + <input + type="color" + name="${this.propName}" + .value="${this.color}" + id="color-swatch" + @input="${this.handleColorInput}" + /> + <label for="color-swatch" data-l10n-id=${this.l10nId}></label> + <div class="icon-container"> + <img + class="icon" + role="presentation" + src="chrome://global/skin/icons/edit-outline.svg" + /> + </div> + </div> + `; + } +} +customElements.define("color-input", ColorInput); |