@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
36 lines • 3.48 kB
JavaScript
import*as i18n from"../../../core/i18n/i18n.js";import*as Buttons from"../../../ui/components/buttons/buttons.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import{Dialog as DialogElement}from"./Dialog.js";import shortcutDialogStyles from"./shortcutDialog.css.js";const UIStrings={showShortcutTitle:"Show shortcuts",dialogTitle:"Keyboard shortcuts",close:"Close"},str_=i18n.i18n.registerUIStrings("ui/components/dialogs/ShortcutDialog.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ShowDialog extends Event{static eventName="showdialog";constructor(){super(ShowDialog.eventName)}}export class ShortcutDialog extends HTMLElement{static litTagName=LitHtml.literal`devtools-shortcut-dialog`;#t=this.attachShadow({mode:"open"});#e=this.#o.bind(this);#i=null;#s=null;#n=[];#l=!1;connectedCallback(){this.#t.adoptedStyleSheets=[shortcutDialogStyles]}set data(t){this.#n=t.shortcuts,t.open&&(this.#l=t.open),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#e)}#r(){if(!this.#i)throw new Error("Dialog not found");this.#i.setDialogVisible(!0),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#e),this.dispatchEvent(new ShowDialog)}#a(t){if(!this.#i)throw new Error("Dialog not found");this.#i.setDialogVisible(!1),t&&t.stopImmediatePropagation(),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#e)}#o(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("Shortcut dialog render was not scheduled");LitHtml.render(LitHtml.html`
<${Buttons.Button.Button.litTagName}
@click=${this.#r}
on-render=${ComponentHelpers.Directives.nodeRenderedCallback((t=>{this.#s=t}))}
.data=${{variant:"toolbar",iconName:"help",title:i18nString(UIStrings.showShortcutTitle),iconWidth:"16px"}}
></${Buttons.Button.Button.litTagName}>
<${DialogElement.litTagName}
@clickoutsidedialog=${this.#a}
.showConnector=${!0}
.origin=${()=>{if(!this.#s)throw new Error("Button not found");return this.#s}}
.position=${"bottom"}
.horizontalAlignment=${"right"}
on-render=${ComponentHelpers.Directives.nodeRenderedCallback((t=>{this.#i=t}))}
>
<div class="keybinds-category-header">
<span class="keybinds-category-header-text">${i18nString(UIStrings.dialogTitle)}</span>
<${Buttons.Button.Button.litTagName}
@click=${this.#a}
class='close-icon'
.data=${{variant:"toolbar",iconName:"cross",title:i18nString(UIStrings.close)}}
></${Buttons.Button.Button.litTagName}>
</div>
<ul class="keybinds-list">
${this.#n.map((t=>LitHtml.html`
<li class="keybinds-list-item">
<div class="keybinds-action-name keybinds-list-text">${t.title}</div>
${t.bindings.map(((e,o)=>LitHtml.html`
<div class="keybinds-shortcut keybinds-list-text">
<span class="keybinds-key">${e}</span>
</div>
${t.bindings.at(o+1)?LitHtml.html`<span class="keybinds-shortcut-separator"> - </span>`:LitHtml.nothing}
`))}
</li>`))}
</ul>
</${DialogElement.litTagName}>
`,this.#t,{host:this}),this.#l&&(this.#r(),this.#l=!1)}}ComponentHelpers.CustomElements.defineComponent("devtools-shortcut-dialog",ShortcutDialog);