Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web impro.social
Something went wrong. Try again.
2.6 kB · 83 lines
JavaScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384import { html, render } from "/js/lib/lit-html.js";import { Component, getChildrenFragment } from "/js/components/component.js";import "/js/components/app-icon.js";
class ModerationWarning extends Component { connectedCallback() { if (this._initialized) { return; } this.label = this.getAttribute("label"); this.labelerLink = this.getAttribute("labelerLink"); this.labelerName = this.getAttribute("labelerName"); this.iconStyle = this.getAttribute("icon-style") ?? "info"; this.noOverride = this.hasAttribute("no-override"); this.expanded = false; this._children = getChildrenFragment(this); this.innerHTML = ""; this.render(); this._initialized = true; }
render() { const iconHtml = this.iconStyle === "closed-eye" ? html`<app-icon icon="eye-off-line"></app-icon>` : html`<app-icon icon="info-circle-line"></app-icon>`; const labelTemplate = html`<span class="moderation-warning-label"> ${iconHtml} <span>${this.label}</span> </span>`; render( html` ${this.noOverride ? html`<div class="top-bar">${labelTemplate}</div>` : html`<div class="top-bar" aria-expanded=${this.expanded} tabindex="0" role="button" @click=${() => this.toggle()} @keydown=${(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); e.stopPropagation(); this.toggle(); } }} > ${labelTemplate} <label class="show-hide-label"> ${this.expanded ? "Hide" : "Show"} </label> </div>`} <div class="toggle-content" ?hidden=${!this.expanded}></div> ${this.labelerName ? html`<div class="post-moderation-warning-description" data-testid="moderation-warning-description" ?hidden=${this.expanded} > Labeled by ${this.labelerLink ? html`<a href="${this.labelerLink}">${this.labelerName}</a>` : this.labelerName} </div>` : ""} `, this, );
const toggleContent = this.querySelector(".toggle-content"); if (toggleContent) { toggleContent.appendChild(this._children); } }
toggle() { this.expanded = !this.expanded; this.render(); }}
ModerationWarning.register();