@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 3.06 kB
JavaScript
import*as Common from"../../core/common/common.js";import*as i18n from"../../core/i18n/i18n.js";import*as UI from"../../ui/legacy/legacy.js";import cssOverviewSidebarPanelStyles from"./cssOverviewSidebarPanel.css.js";const UIStrings={clearOverview:"Clear overview",cssOverviewPanelSidebar:"CSS Overview panel sidebar"},str_=i18n.i18n.registerUIStrings("panels/css_overview/CSSOverviewSidebarPanel.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class CSSOverviewSidebarPanel extends(Common.ObjectWrapper.eventMixin(UI.Widget.VBox)){containerElement;static get ITEM_CLASS_NAME(){return"overview-sidebar-panel-item"}static get SELECTED(){return"selected"}constructor(){super(!0),this.contentElement.classList.add("overview-sidebar-panel"),this.contentElement.addEventListener("click",this.#e.bind(this)),this.contentElement.addEventListener("keydown",this.#t.bind(this)),this.containerElement=this.contentElement.createChild("div","overview-sidebar-panel-container"),UI.ARIAUtils.setLabel(this.containerElement,i18nString(UIStrings.cssOverviewPanelSidebar)),UI.ARIAUtils.markAsTree(this.containerElement);const e=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearOverview),"clear");e.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.#i,this);const t=this.containerElement.createChild("div","overview-toolbar");new UI.Toolbar.Toolbar("",t).appendToolbarItem(e)}addItem(e,t){const i=this.containerElement.createChild("div",CSSOverviewSidebarPanel.ITEM_CLASS_NAME);UI.ARIAUtils.markAsTreeitem(i),i.textContent=e,i.dataset.id=t,i.tabIndex=0}#i(){this.dispatchEventToListeners("Reset")}#n(){this.containerElement.querySelectorAll(`.${CSSOverviewSidebarPanel.ITEM_CLASS_NAME}`).forEach((e=>{e.classList.remove(CSSOverviewSidebarPanel.SELECTED)}))}#e(e){const t=e.composedPath()[0];if(!t.classList.contains(CSSOverviewSidebarPanel.ITEM_CLASS_NAME))return;const{id:i}=t.dataset;i&&(this.select(i,!1),this.dispatchEventToListeners("ItemSelected",{id:i,isMouseEvent:!0,key:void 0}))}#t(e){if("Enter"!==e.key&&"ArrowUp"!==e.key&&"ArrowDown"!==e.key)return;const t=e.composedPath()[0];if(!t.classList.contains(CSSOverviewSidebarPanel.ITEM_CLASS_NAME))return;const{id:i}=t.dataset;if(i){if("Enter"===e.key)this.select(i,!1),this.dispatchEventToListeners("ItemSelected",{id:i,isMouseEvent:!1,key:e.key});else{const t=this.containerElement.querySelectorAll(`.${CSSOverviewSidebarPanel.ITEM_CLASS_NAME}`);let n=-1;for(let e=0;e<t.length;e++)if(t[e].dataset.id===i){n=e;break}if(n<0)return;const s=t[(n+("ArrowDown"===e.key?1:-1))%t.length].dataset.id;if(!s)return;this.select(s,!0),this.dispatchEventToListeners("ItemSelected",{id:s,isMouseEvent:!1,key:e.key})}e.consume(!0)}}select(e,t){const i=this.containerElement.querySelector(`[data-id=${CSS.escape(e)}]`);i&&(i.classList.contains(CSSOverviewSidebarPanel.SELECTED)||(this.#n(),i.classList.add(CSSOverviewSidebarPanel.SELECTED),t&&(i.contentEditable="true",i.focus(),i.contentEditable="false")))}wasShown(){super.wasShown(),this.registerCSSFiles([cssOverviewSidebarPanelStyles])}}