Something went wrong. Try again.
Mirror of https://github.com/improsocial/improAn extensible Bluesky client for web
Something went wrong. Try again.
2.0 kB · 87 lines
JavaScript
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788import { html, render } from "/js/lib/lit-html.js";import { Component } from "/js/components/component.js";import { classnames } from "/js/utils.js";
class ToggleSwitch extends Component { static get observedAttributes() { return ["checked", "disabled"]; }
connectedCallback() { if (this.initialized) { return; } this.render(); this.initialized = true; }
attributeChangedCallback() { if (this.initialized) { this.render(); } }
get checked() { return this.hasAttribute("checked"); }
set checked(value) { if (value) { this.setAttribute("checked", ""); } else { this.removeAttribute("checked"); } }
get disabled() { return this.hasAttribute("disabled"); }
set disabled(value) { if (value) { this.setAttribute("disabled", ""); } else { this.removeAttribute("disabled"); } }
render() { const label = this.getAttribute("label") ?? ""; render( html` <div class=${classnames("toggle-switch-track", { checked: this.checked, disabled: this.disabled, })} role="switch" tabindex=${this.disabled ? "-1" : "0"} aria-checked=${this.checked} aria-disabled=${this.disabled} aria-label=${label} @click=${() => { if (this.disabled) return; this.dispatchEvent( new CustomEvent("change", { detail: { checked: !this.checked }, bubbles: true, }), ); }} @keydown=${(event) => { if (this.disabled) return; if (event.key === "Enter" || event.key === " ") { event.preventDefault(); event.target.click(); } }} > <div class="toggle-switch-knob"></div> </div> `, this, ); }}
ToggleSwitch.register();