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

Command line interface for rapid qg-minigame development

import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as ARIAUtils from"./ARIAUtils.js";import listWidgetStyles from"./listWidget.css.legacy.js";import{Toolbar,ToolbarButton}from"./Toolbar.js";import{Tooltip}from"./Tooltip.js";import{createInput,createTextButton,ElementFocusRestorer}from"./UIUtils.js";import{VBox}from"./Widget.js";const UIStrings={editString:"Edit",removeString:"Remove",saveString:"Save",addString:"Add",cancelString:"Cancel"},str_=i18n.i18n.registerUIStrings("ui/legacy/ListWidget.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ListWidget extends VBox{delegate;list;lastSeparator;focusRestorer;items;editable;elements;editor;editItem;editElement;emptyPlaceholder;constructor(t,e=!0){super(!0,e),this.registerRequiredCSS(listWidgetStyles),this.delegate=t,this.list=this.contentElement.createChild("div","list"),this.lastSeparator=!1,this.focusRestorer=null,this.items=[],this.editable=[],this.elements=[],this.editor=null,this.editItem=null,this.editElement=null,this.emptyPlaceholder=null,this.updatePlaceholder()}clear(){this.items=[],this.editable=[],this.elements=[],this.lastSeparator=!1,this.list.removeChildren(),this.updatePlaceholder(),this.stopEditing()}appendItem(t,e){if(this.lastSeparator&&this.items.length){const t=document.createElement("div");t.classList.add("list-separator"),this.list.appendChild(t)}this.lastSeparator=!1,this.items.push(t),this.editable.push(e);const i=this.list.createChild("div","list-item");i.appendChild(this.delegate.renderItem(t,e)),e&&(i.classList.add("editable"),i.tabIndex=0,i.appendChild(this.createControls(t,i))),this.elements.push(i),this.updatePlaceholder()}appendSeparator(){this.lastSeparator=!0}removeItem(t){this.editItem===this.items[t]&&this.stopEditing();const e=this.elements[t],i=e.previousElementSibling,s=i&&i.classList.contains("list-separator"),n=e.nextElementSibling,l=n&&n.classList.contains("list-separator");!s||!l&&n||i.remove(),l&&!i&&n.remove(),e.remove(),this.elements.splice(t,1),this.items.splice(t,1),this.editable.splice(t,1),this.updatePlaceholder()}addNewItem(t,e){this.startEditing(e,null,this.elements[t]||null)}setEmptyPlaceholder(t){this.emptyPlaceholder=t,this.updatePlaceholder()}createControls(t,e){const i=document.createElement("div");i.classList.add("controls-container"),i.classList.add("fill"),i.createChild("div","controls-gradient");const s=i.createChild("div","controls-buttons"),n=new Toolbar("",s),l=new ToolbarButton(i18nString(UIStrings.editString),"edit");l.addEventListener(ToolbarButton.Events.Click,function(){const i=this.elements.indexOf(e),s=this.elements[i+1]||null;this.startEditing(t,e,s)}.bind(this)),n.appendToolbarItem(l);const o=new ToolbarButton(i18nString(UIStrings.removeString),"bin");return o.addEventListener(ToolbarButton.Events.Click,function(){const t=this.elements.indexOf(e);this.element.focus(),this.delegate.removeItemRequested(this.items[t],t)}.bind(this)),n.appendToolbarItem(o),i}wasShown(){super.wasShown(),this.stopEditing()}updatePlaceholder(){this.emptyPlaceholder&&(this.elements.length||this.editor?this.emptyPlaceholder.remove():this.list.appendChild(this.emptyPlaceholder))}startEditing(t,e,i){if(e&&this.editElement===e)return;this.stopEditing(),this.focusRestorer=new ElementFocusRestorer(this.element),this.list.classList.add("list-editing"),this.element.classList.add("list-editing"),this.editItem=t,this.editElement=e,e&&e.classList.add("hidden");const s=e?this.elements.indexOf(e):-1;this.editor=this.delegate.beginEdit(t),this.updatePlaceholder(),this.list.insertBefore(this.editor.element,i),this.editor.beginEdit(t,s,i18nString(e?UIStrings.saveString:UIStrings.addString),this.commitEditing.bind(this),this.stopEditing.bind(this))}commitEditing(){const t=this.editItem,e=!this.editElement,i=this.editor;this.stopEditing(),t&&this.delegate.commitEdit(t,i,e)}stopEditing(){this.list.classList.remove("list-editing"),this.element.classList.remove("list-editing"),this.focusRestorer&&this.focusRestorer.restore(),this.editElement&&this.editElement.classList.remove("hidden"),this.editor&&this.editor.element.parentElement&&this.editor.element.remove(),this.editor=null,this.editItem=null,this.editElement=null,this.updatePlaceholder()}}export class Editor{element;contentElementInternal;commitButton;cancelButton;errorMessageContainer;controls;controlByName;validators;commit;cancel;item;index;constructor(){this.element=document.createElement("div"),this.element.classList.add("editor-container"),this.element.addEventListener("keydown",e.bind(null,Platform.KeyboardUtilities.isEscKey,this.cancelClicked.bind(this)),!1),this.contentElementInternal=this.element.createChild("div","editor-content"),this.contentElementInternal.addEventListener("keydown",e.bind(null,(t=>"Enter"===t.key),this.commitClicked.bind(this)),!1);const t=this.element.createChild("div","editor-buttons");function e(t,e,i){t(i)&&(i.consume(!0),e())}this.commitButton=createTextButton("",this.commitClicked.bind(this),"",!0),t.appendChild(this.commitButton),this.cancelButton=createTextButton(i18nString(UIStrings.cancelString),this.cancelClicked.bind(this),"",!0),t.appendChild(this.cancelButton),this.errorMessageContainer=this.element.createChild("div","list-widget-input-validation-error"),ARIAUtils.markAsAlert(this.errorMessageContainer),this.controls=[],this.controlByName=new Map,this.validators=[],this.commit=null,this.cancel=null,this.item=null,this.index=-1}contentElement(){return this.contentElementInternal}createInput(t,e,i,s){const n=createInput("",e);return n.placeholder=i,n.addEventListener("input",this.validateControls.bind(this,!1),!1),ARIAUtils.setLabel(n,i),this.controlByName.set(t,n),this.controls.push(n),this.validators.push(s),n}createSelect(t,e,i,s){const n=document.createElement("select");n.classList.add("chrome-select");for(let t=0;t<e.length;++t){const i=n.createChild("option");i.value=e[t],i.textContent=e[t]}return s&&(Tooltip.install(n,s),ARIAUtils.setLabel(n,s)),n.addEventListener("input",this.validateControls.bind(this,!1),!1),n.addEventListener("blur",this.validateControls.bind(this,!1),!1),this.controlByName.set(t,n),this.controls.push(n),this.validators.push(i),n}createCustomControl(t,e,i){const s=new e;return this.controlByName.set(t,s),this.controls.push(s),this.validators.push(i),s}control(t){const e=this.controlByName.get(t);if(!e)throw new Error(`Control with name ${t} does not exist, please verify.`);return e}validateControls(t){let e=!0;this.errorMessageContainer.textContent="";for(let i=0;i<this.controls.length;++i){const s=this.controls[i],{valid:n,errorMessage:l}=this.validators[i].call(null,this.item,this.index,s);s.classList.toggle("error-input",!n&&!t),n||t?ARIAUtils.setInvalid(s,!1):ARIAUtils.setInvalid(s,!0),t||!l||this.errorMessageContainer.textContent||(this.errorMessageContainer.textContent=l),e=e&&n}this.commitButton.disabled=!e}requestValidation(){this.validateControls(!1)}beginEdit(t,e,i,s,n){this.commit=s,this.cancel=n,this.item=t,this.index=e,this.commitButton.textContent=i,this.element.scrollIntoViewIfNeeded(!1),this.controls.length&&this.controls[0].focus(),this.validateControls(!0)}commitClicked(){if(this.commitButton.disabled)return;const t=this.commit;this.commit=null,this.cancel=null,this.item=null,this.index=-1,t&&t()}cancelClicked(){const t=this.cancel;this.commit=null,this.cancel=null,this.item=null,this.index=-1,t&&t()}}