@yuebai008/cli/dist/cli-server/client/front_end/panels/settings/emulation/DevicesSettingsTab.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../../core/i18n/i18n.js";import*as EmulationModel from"../../../models/emulation/emulation.js";import*as UI from"../../../ui/legacy/legacy.js";import*as EmulationComponents from"./components/components.js";import devicesSettingsTabStyles from"./devicesSettingsTab.css.js";let devicesSettingsTabInstance;const UIStrings={emulatedDevices:"Emulated Devices",addCustomDevice:"Add custom device...",device:"Device",deviceName:"Device Name",width:"Width",height:"Height",devicePixelRatio:"Device pixel ratio",userAgentString:"User agent string",userAgentType:"User agent type",deviceNameMustBeLessThanS:"Device name must be less than {PH1} characters.",deviceNameCannotBeEmpty:"Device name cannot be empty.",deviceAddedOrUpdated:"Device {PH1} successfully added/updated."},str_=i18n.i18n.registerUIStrings("panels/settings/emulation/DevicesSettingsTab.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class DevicesSettingsTab extends UI.Widget.VBox{containerElement;addCustomButton;ariaSuccessMessageElement;list;muteUpdate;emulatedDevicesList;editor;constructor(){super(),this.element.classList.add("settings-tab-container"),this.element.classList.add("devices-settings-tab");const e=this.element.createChild("header");UI.UIUtils.createTextChild(e.createChild("h1"),i18nString(UIStrings.emulatedDevices)),this.containerElement=this.element.createChild("div","settings-container-wrapper").createChild("div","settings-tab settings-content settings-container");const t=this.containerElement.createChild("div","devices-button-row");this.addCustomButton=UI.UIUtils.createTextButton(i18nString(UIStrings.addCustomDevice),this.addCustomDevice.bind(this)),this.addCustomButton.id="custom-device-add-button",t.appendChild(this.addCustomButton),this.ariaSuccessMessageElement=this.containerElement.createChild("div","device-success-message"),UI.ARIAUtils.markAsPoliteLiveRegion(this.ariaSuccessMessageElement,!1),this.list=new UI.ListWidget.ListWidget(this,!1),this.list.element.classList.add("devices-list"),this.list.show(this.containerElement),this.muteUpdate=!1,this.emulatedDevicesList=EmulationModel.EmulatedDevices.EmulatedDevicesList.instance(),this.emulatedDevicesList.addEventListener("CustomDevicesUpdated",this.devicesUpdated,this),this.emulatedDevicesList.addEventListener("StandardDevicesUpdated",this.devicesUpdated,this),this.setDefaultFocusedElement(this.addCustomButton)}static instance(){return devicesSettingsTabInstance||(devicesSettingsTabInstance=new DevicesSettingsTab),devicesSettingsTabInstance}wasShown(){super.wasShown(),this.devicesUpdated(),this.registerCSSFiles([devicesSettingsTabStyles]),this.list.registerCSSFiles([devicesSettingsTabStyles])}devicesUpdated(){if(this.muteUpdate)return;this.list.clear();let e=this.emulatedDevicesList.custom().slice();for(let t=0;t<e.length;++t)this.list.appendItem(e[t],!0);this.list.appendSeparator(),e=this.emulatedDevicesList.standard().slice(),e.sort(EmulationModel.EmulatedDevices.EmulatedDevice.deviceComparator);for(let t=0;t<e.length;++t)this.list.appendItem(e[t],!1)}muteAndSaveDeviceList(e){this.muteUpdate=!0,e?this.emulatedDevicesList.saveCustomDevices():this.emulatedDevicesList.saveStandardDevices(),this.muteUpdate=!1}addCustomDevice(){const e=new EmulationModel.EmulatedDevices.EmulatedDevice;e.deviceScaleFactor=0,e.horizontal.width=700,e.horizontal.height=400,e.vertical.width=400,e.vertical.height=700,this.list.addNewItem(this.emulatedDevicesList.custom().length,e)}toNumericInputValue(e){return e?String(e):""}renderItem(e,t){const i=document.createElement("label");i.classList.add("devices-list-item");const s=i.createChild("input","devices-list-checkbox");s.type="checkbox",s.checked=e.show(),s.addEventListener("click",function(i){const a=s.checked;e.setShow(a),this.muteAndSaveDeviceList(t),i.consume()}.bind(this),!1);const a=document.createElement("span");return a.classList.add("device-name"),a.appendChild(document.createTextNode(e.title)),i.appendChild(a),i}removeItemRequested(e){this.emulatedDevicesList.removeCustomDevice(e)}commitEdit(e,t,i){e.title=t.control("title").value.trim(),e.vertical.width=t.control("width").value?parseInt(t.control("width").value,10):0,e.vertical.height=t.control("height").value?parseInt(t.control("height").value,10):0,e.horizontal.width=e.vertical.height,e.horizontal.height=e.vertical.width,e.deviceScaleFactor=t.control("scale").value?parseFloat(t.control("scale").value):0,e.userAgent=t.control("user-agent").value,e.modes=[],e.modes.push({title:"",orientation:EmulationModel.EmulatedDevices.Vertical,insets:new EmulationModel.DeviceModeModel.Insets(0,0,0,0),image:null}),e.modes.push({title:"",orientation:EmulationModel.EmulatedDevices.Horizontal,insets:new EmulationModel.DeviceModeModel.Insets(0,0,0,0),image:null}),e.capabilities=[];const s=t.control("ua-type").value;s!==EmulationModel.DeviceModeModel.UA.Mobile&&s!==EmulationModel.DeviceModeModel.UA.MobileNoTouch||e.capabilities.push(EmulationModel.EmulatedDevices.Capability.Mobile),s!==EmulationModel.DeviceModeModel.UA.Mobile&&s!==EmulationModel.DeviceModeModel.UA.DesktopTouch||e.capabilities.push(EmulationModel.EmulatedDevices.Capability.Touch);const a=t.control("ua-metadata").value.metaData;a&&(e.userAgentMetadata={...a,mobile:s===EmulationModel.DeviceModeModel.UA.Mobile||s===EmulationModel.DeviceModeModel.UA.MobileNoTouch}),i?this.emulatedDevicesList.addCustomDevice(e):this.emulatedDevicesList.saveCustomDevices(),this.addCustomButton.scrollIntoViewIfNeeded(),this.addCustomButton.focus(),this.ariaSuccessMessageElement.setAttribute("aria-label",i18nString(UIStrings.deviceAddedOrUpdated,{PH1:e.title}))}beginEdit(e){const t=this.createEditor();let i;return t.control("title").value=e.title,t.control("width").value=this.toNumericInputValue(e.vertical.width),t.control("height").value=this.toNumericInputValue(e.vertical.height),t.control("scale").value=this.toNumericInputValue(e.deviceScaleFactor),t.control("user-agent").value=e.userAgent,i=e.mobile()?e.touch()?EmulationModel.DeviceModeModel.UA.Mobile:EmulationModel.DeviceModeModel.UA.MobileNoTouch:e.touch()?EmulationModel.DeviceModeModel.UA.DesktopTouch:EmulationModel.DeviceModeModel.UA.Desktop,t.control("ua-type").value=i,t.control("ua-metadata").value={metaData:e.userAgentMetadata||void 0},t}createEditor(){if(this.editor)return this.editor;const e=new UI.ListWidget.Editor;this.editor=e;const t=e.contentElement(),i=t.createChild("div","devices-edit-fields");UI.UIUtils.createTextChild(i.createChild("b"),i18nString(UIStrings.device));const s=e.createInput("title","text",i18nString(UIStrings.deviceName),(function(e,t,i){let s,a=!1;const d=i.value.trim();d.length>=EmulationModel.DeviceModeModel.MaxDeviceNameLength?s=i18nString(UIStrings.deviceNameMustBeLessThanS,{PH1:EmulationModel.DeviceModeModel.MaxDeviceNameLength}):0===d.length?s=i18nString(UIStrings.deviceNameCannotBeEmpty):a=!0;return{valid:a,errorMessage:s}}));i.createChild("div","hbox").appendChild(s),s.id="custom-device-name-field";const a=i.createChild("div","hbox");a.appendChild(e.createInput("width","text",i18nString(UIStrings.width),(function(e,t,i){return EmulationModel.DeviceModeModel.DeviceModeModel.widthValidator(i.value)}))),a.appendChild(e.createInput("height","text",i18nString(UIStrings.height),(function(e,t,i){return EmulationModel.DeviceModeModel.DeviceModeModel.heightValidator(i.value)})));const d=e.createInput("scale","text",i18nString(UIStrings.devicePixelRatio),(function(e,t,i){return EmulationModel.DeviceModeModel.DeviceModeModel.scaleValidator(i.value)}));d.classList.add("device-edit-fixed"),a.appendChild(d);const n=t.createChild("div","devices-edit-fields");UI.UIUtils.createTextChild(n.createChild("b"),i18nString(UIStrings.userAgentString));const o=n.createChild("div","hbox");o.appendChild(e.createInput("user-agent","text",i18nString(UIStrings.userAgentString),(()=>({valid:!0,errorMessage:void 0}))));const l=[EmulationModel.DeviceModeModel.UA.Mobile,EmulationModel.DeviceModeModel.UA.MobileNoTouch,EmulationModel.DeviceModeModel.UA.Desktop,EmulationModel.DeviceModeModel.UA.DesktopTouch],c=e.createSelect("ua-type",l,(()=>({valid:!0,errorMessage:void 0})),i18nString(UIStrings.userAgentType));c.classList.add("device-edit-fixed"),o.appendChild(c);const r=e.createCustomControl("ua-metadata",EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsForm,(function(){return r.validate()}));return r.value={},r.addEventListener("clienthintschange",(()=>e.requestValidation()),!1),t.appendChild(r),e}}