Something went wrong. Try again.
Mirror of https://github.com/improsocial/improAn extensible Bluesky client for web
Something went wrong. Try again.
1.8 kB · 66 lines
JavaScript
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667import { html, render } from "/js/lib/lit-html.js";import { Component, getChildrenFragment } from "/js/components/component.js";import { eyeSlashIconTemplate } from "/js/templates/icons/eyeSlashIcon.template.js";import { classnames } from "/js/utils.js";
class MutedParentToggle extends Component { connectedCallback() { if (this.initialized) { return; } this.label = this.getAttribute("label") ?? "Muted parent"; this.expanded = false; this._children = getChildrenFragment(this); this.innerHTML = ""; this.render(); this.initialized = true; }
render() { render( html` <div class=${classnames("muted-parent-toggle", { expanded: this.expanded, })} aria-expanded=${this.expanded} > <div class="muted-parent-toggle-button" tabindex="0" role="button" ?hidden=${this.expanded} @click=${() => this.toggle()} @keydown=${(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); e.stopPropagation(); this.toggle(); } }} > <div class="muted-parent-toggle-button-icon"> ${eyeSlashIconTemplate()} </div> <span>${this.label}</span> <div class="muted-account-show-more">Show</div> </div> <div class="toggle-content" ?hidden=${!this.expanded}></div> </div> `, this, );
const toggleContent = this.querySelector(".toggle-content"); if (toggleContent) { toggleContent.appendChild(this._children); } }
toggle() { this.expanded = !this.expanded; this.render(); }}
MutedParentToggle.register();