@yuebai008/cli/dist/cli-server/client/front_end/ui/legacy/SoftDropDown.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../core/i18n/i18n.js";import*as ThemeSupport from"./theme_support/theme_support.js";import*as Utils from"./utils/utils.js";import*as ARIAUtils from"./ARIAUtils.js";import{Size}from"./Geometry.js";import{GlassPane}from"./GlassPane.js";import{Icon}from"./Icon.js";import{ListControl,ListMode}from"./ListControl.js";import{Events as ListModelEvents}from"./ListModel.js";import softDropDownStyles from"./softDropDown.css.legacy.js";import softDropDownButtonStyles from"./softDropDownButton.css.legacy.js";const UIStrings={noItemSelected:"(no item selected)"},str_=i18n.i18n.registerUIStrings("ui/legacy/SoftDropDown.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class SoftDropDown{delegate;selectedItem;model;placeholderText;element;titleElement;glassPane;list;rowHeight;width;listWasShowing200msAgo;constructor(e,t){this.delegate=t,this.selectedItem=null,this.model=e,this.placeholderText=i18nString(UIStrings.noItemSelected),this.element=document.createElement("button"),this.element.classList.add("soft-dropdown"),ThemeSupport.ThemeSupport.instance().appendStyle(this.element,softDropDownButtonStyles),this.titleElement=this.element.createChild("span","title");const s=Icon.create("triangle-down");this.element.appendChild(s),ARIAUtils.setExpanded(this.element,!1),this.glassPane=new GlassPane,this.glassPane.setMarginBehavior("NoMargin"),this.glassPane.setAnchorBehavior("PreferBottom"),this.glassPane.setOutsideClickCallback(this.hide.bind(this)),this.glassPane.setPointerEventsBehavior("BlockedByGlassPane"),this.list=new ListControl(e,this,ListMode.EqualHeightItems),this.list.element.classList.add("item-list"),this.rowHeight=36,this.width=315,Utils.createShadowRootWithCoreStyles(this.glassPane.contentElement,{cssFile:softDropDownStyles,delegatesFocus:void 0}).appendChild(this.list.element),ARIAUtils.markAsMenu(this.list.element),this.listWasShowing200msAgo=!1,this.element.addEventListener("mousedown",(e=>{this.listWasShowing200msAgo?this.hide(e):this.element.disabled||this.show(e)}),!1),this.element.addEventListener("keydown",this.onKeyDownButton.bind(this),!1),this.list.element.addEventListener("keydown",this.onKeyDownList.bind(this),!1),this.list.element.addEventListener("focusout",this.hide.bind(this),!1),this.list.element.addEventListener("mousedown",(e=>e.consume(!0)),!1),this.list.element.addEventListener("mouseup",(e=>{e.target!==this.list.element&&this.listWasShowing200msAgo&&(this.selectHighlightedItem(),this.hide(e))}),!1),e.addEventListener(ListModelEvents.ItemsReplaced,this.itemsReplaced,this)}show(e){this.glassPane.isShowing()||(this.glassPane.setContentAnchorBox(this.element.boxInWindow()),this.glassPane.show(this.element.ownerDocument),this.list.element.focus(),ARIAUtils.setExpanded(this.element,!0),this.updateGlasspaneSize(),this.selectedItem&&this.list.selectItem(this.selectedItem),e.consume(!0),window.setTimeout((()=>{this.listWasShowing200msAgo=!0}),200))}updateGlasspaneSize(){const e=this.rowHeight*Math.min(this.model.length,9);this.glassPane.setMaxContentSize(new Size(this.width,e)),this.list.viewportResized()}hide(e){window.setTimeout((()=>{this.listWasShowing200msAgo=!1}),200),this.glassPane.hide(),this.list.selectItem(null),ARIAUtils.setExpanded(this.element,!1),this.element.focus(),e.consume(!0)}onKeyDownButton(e){const t=e;let s=!1;switch(t.key){case"ArrowUp":this.show(t),this.list.selectItemNextPage(),s=!0;break;case"ArrowDown":this.show(t),this.list.selectItemPreviousPage(),s=!0;break;case"Enter":case" ":this.show(t),s=!0}s&&t.consume(!0)}onKeyDownList(e){const t=e;let s=!1;switch(t.key){case"ArrowLeft":s=this.list.selectPreviousItem(!1,!1);break;case"ArrowRight":s=this.list.selectNextItem(!1,!1);break;case"Home":for(let e=0;e<this.model.length;e++)if(this.isItemSelectable(this.model.at(e))){this.list.selectItem(this.model.at(e)),s=!0;break}break;case"End":for(let e=this.model.length-1;e>=0;e--)if(this.isItemSelectable(this.model.at(e))){this.list.selectItem(this.model.at(e)),s=!0;break}break;case"Escape":this.hide(t),s=!0;break;case"Tab":case"Enter":case" ":this.selectHighlightedItem(),this.hide(t),s=!0;break;default:if(1===t.key.length){const e=this.list.selectedIndex(),i=t.key.toUpperCase();for(let t=0;t<this.model.length;t++){const s=this.model.at((e+t+1)%this.model.length);if(this.delegate.titleFor(s).toUpperCase().startsWith(i)){this.list.selectItem(s);break}}s=!0}}s&&t.consume(!0)}setWidth(e){this.width=e,this.updateGlasspaneSize()}setRowHeight(e){this.rowHeight=e}setPlaceholderText(e){this.placeholderText=e,this.selectedItem||(this.titleElement.textContent=this.placeholderText)}itemsReplaced(e){const{removed:t}=e.data;this.selectedItem&&-1!==t.indexOf(this.selectedItem)&&(this.selectedItem=null,this.selectHighlightedItem()),this.updateGlasspaneSize()}getSelectedItem(){return this.selectedItem}selectItem(e){this.selectedItem=e,this.selectedItem?this.titleElement.textContent=this.delegate.titleFor(this.selectedItem):this.titleElement.textContent=this.placeholderText,this.delegate.itemSelected(this.selectedItem)}createElementForItem(e){const t=document.createElement("div");return t.classList.add("item"),t.addEventListener("mousemove",(t=>{(t.movementX||t.movementY)&&this.delegate.isItemSelectable(e)&&this.list.selectItem(e,!1,!0)})),t.classList.toggle("disabled",!this.delegate.isItemSelectable(e)),t.classList.toggle("highlighted",this.list.selectedItem()===e),ARIAUtils.markAsMenuItem(t),t.appendChild(this.delegate.createElementForItem(e)),t}heightForItem(e){return this.rowHeight}isItemSelectable(e){return this.delegate.isItemSelectable(e)}selectedItemChanged(e,t,s,i){s&&s.classList.remove("highlighted"),i&&i.classList.add("highlighted"),ARIAUtils.setActiveDescendant(this.list.element,i),this.delegate.highlightedItemChanged(e,t,s&&s.firstElementChild,i&&i.firstElementChild)}updateSelectedItemARIA(e,t){return!1}selectHighlightedItem(){this.selectItem(this.list.selectedItem())}refreshItem(e){this.list.refreshItem(e)}}