@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
18 lines • 2.23 kB
JavaScript
import*as i18n from"../../../core/i18n/i18n.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as Input from"../../../ui/components/input/input.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import adornerSettingsPaneStyles from"./adornerSettingsPane.css.js";const UIStrings={settingsTitle:"Show badges",closeButton:"Close"},str_=i18n.i18n.registerUIStrings("panels/elements/components/AdornerSettingsPane.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html}=LitHtml;export class AdornerSettingUpdatedEvent extends Event{static eventName="adornersettingupdated";data;constructor(t,e,s){super(AdornerSettingUpdatedEvent.eventName,{}),this.data={adornerName:t,isEnabledNow:e,newSettings:s}}}export class AdornerSettingsPane extends HTMLElement{static litTagName=LitHtml.literal`devtools-adorner-settings-pane`;#t=this.attachShadow({mode:"open"});#e=new Map;connectedCallback(){this.#t.adoptedStyleSheets=[Input.checkboxStyles,adornerSettingsPaneStyles]}set data(t){this.#e=new Map(t.settings.entries()),this.#s()}show(){this.classList.remove("hidden");const t=this.#t.querySelector(".adorner-settings-pane");t&&t.focus()}hide(){this.classList.add("hidden")}#n(t){const e=t.target,s=e.dataset.adorner;if(void 0===s)return;const n=e.checked;this.#e.set(s,n),this.dispatchEvent(new AdornerSettingUpdatedEvent(s,n,this.#e)),this.#s()}#s(){const t=[];for(const[e,s]of this.#e)t.push(html`
<label class="setting" title=${e}>
<input
class="adorner-status"
type="checkbox" name=${e}
.checked=${s}
data-adorner=${e}>
<span class="adorner-name">${e}</span>
</label>
`);render(html`
<div class="adorner-settings-pane" tabindex="-1">
<div class="settings-title">${i18nString(UIStrings.settingsTitle)}</div>
<div class="setting-list" @change=${this.#n}>
${t}
</div>
<button class="close" @click=${this.hide} aria-label=${i18nString(UIStrings.closeButton)}></button>
</div>
`,this.#t,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-adorner-settings-pane",AdornerSettingsPane);