BasemapGallery.js 5.2 KB

12345
  1. /*
  2. All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. See https://js.arcgis.com/4.25/esri/copyright.txt for details.
  4. */
  5. import{_ as e}from"../chunks/tslib.es6.js";import{getAssetUrl as s}from"../assets.js";import t from"../core/Handles.js";import{on as a,when as i,watch as r}from"../core/reactiveUtils.js";import{property as o}from"../core/accessorSupport/decorators/property.js";import"../core/arrayUtils.js";import"../core/accessorSupport/ensureType.js";import{subclass as l}from"../core/accessorSupport/decorators/subclass.js";import d from"./Widget.js";import n from"./BasemapGallery/BasemapGalleryViewModel.js";import{Heading as m}from"./support/Heading.js";import{accessibleHandler as p}from"./support/decorators/accessibleHandler.js";import{messageBundle as c}from"./support/decorators/messageBundle.js";import{tsx as h}from"./support/jsxFactory.js";import"./support/widgetUtils.js";const g={base:"esri-basemap-gallery esri-widget esri-widget--panel-height-only",sourceLoading:"esri-basemap-gallery--source-loading",loader:"esri-basemap-gallery__loader",item:"esri-basemap-gallery__item",itemContainer:"esri-basemap-gallery__item-container",itemTitle:"esri-basemap-gallery__item-title",itemThumbnail:"esri-basemap-gallery__item-thumbnail",selectedItem:"esri-basemap-gallery__item--selected",itemError:"esri-basemap-gallery__item--error",emptyMessage:"esri-widget__content--empty",widgetIcon:"esri-icon-basemap",disabled:"esri-disabled",loaderAnimation:"esri-widget__loader-animation"};let u=class extends d{constructor(e,s){super(e,s),this._handles=new t,this._focusBasemapItemEnabled=!1,this.disabled=!1,this.headingLevel=2,this.iconClass=g.widgetIcon,this.messages=null,this.viewModel=new n}initialize(){const e=this._handles;this.addHandles([a((()=>this.viewModel.items),"change",(s=>{const t="basemap-gallery-item-changes",{added:a,moved:i}=s;e.remove(t),e.add([...a,...i].map((e=>r((()=>e.state),(()=>this.scheduleRender())))),t),this.scheduleRender()})),i((()=>this.source),(()=>this.viewModel.load()),{initial:!0,once:!0})])}destroy(){this._handles.destroy()}loadDependencies(){return import("@esri/calcite-components/dist/components/calcite-scrim.js")}get activeBasemap(){return this.viewModel.activeBasemap}set activeBasemap(e){this.viewModel.activeBasemap=e}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get source(){return this.viewModel.source}set source(e){this.viewModel.source=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}render(){const e="loading"===this.source.state,s=this.disabled||"disabled"===this.viewModel.state,t=this.viewModel.items.map(((e,s)=>this._renderBasemapGalleryItem(e,s))).toArray(),a={[g.sourceLoading]:e,[g.disabled]:s},i=e?h("div",{class:g.loader,key:"esri-basemap-gallery__loader"}):null,r=e?null:t.length>0?h("ul",{bind:this,"aria-disabled":this.disabled,"aria-label":this.label,class:g.itemContainer,key:"esri-basemap-gallery__item-container",onkeydown:this._handleKeyDown,role:"radiogroup"},t):h("div",{class:g.emptyMessage,key:"esri-basemap-gallery__empty-message"},h(m,{level:this.headingLevel},this.messages.noBasemaps));return h("div",{class:this.classes(g.base,a)},i,r)}_getRoundRobinIndex(e,s){return(e+s)%s}_handleKeyDown(e){const{key:s}=e;if(!["ArrowUp","ArrowDown","ArrowRight","ArrowLeft"].includes(s))return;e.preventDefault();const{items:t,activeBasemapIndex:a}=this.viewModel,i="ArrowUp"===s||"ArrowLeft"===s?this._getRoundRobinIndex(Math.max(a-1,-1),t.length):this._getRoundRobinIndex(a+1,t.length),r=t.getItemAt(i);"ready"===r?.state&&(this.viewModel.activeBasemap=r.basemap),this._focusBasemapItemEnabled=!0}_focusBasemapItem(e){this._focusBasemapItemEnabled&&0===e.tabIndex&&(e.focus(),this._focusBasemapItemEnabled=!1)}_handleClick(e){const s=e.currentTarget["data-item"];"ready"===s.state&&(this.viewModel.activeBasemap=s.basemap)}_renderBasemapGalleryItem(e,t){const a=e.basemap.thumbnailUrl||s("esri/themes/base/images/basemap-toggle-64.svg"),i=e.basemap.title,r=e.basemap.portalItem?.snippet,o=e.error?.message||r||i,{viewModel:{state:l,activeBasemapIndex:d}}=this,n=this.disabled||"disabled"===l,m=d===t,p=m||-1===d&&0===t?0:-1,c="loading"===l,u={[g.selectedItem]:m,[g.itemError]:"error"===e.state},b=`basemapgallery-item-${e.uid}`;return h("li",{"aria-checked":m.toString(),"aria-disabled":n.toString(),"aria-labelledby":b,bind:this,class:this.classes(g.item,u),"data-item":e,onkeydown:this._handleClick,onclick:this._handleClick,role:"radio",tabIndex:p,afterUpdate:this._focusBasemapItem,title:o},h("img",{alt:"",class:g.itemThumbnail,src:a}),h("div",{id:b,class:g.itemTitle},i),"loading"===e.state||m&&c?h("calcite-scrim",null,h("span",{"aria-hidden":"true",role:"presentation",class:g.loaderAnimation})):null)}};e([o()],u.prototype,"activeBasemap",null),e([o()],u.prototype,"disabled",void 0),e([o()],u.prototype,"headingLevel",void 0),e([o()],u.prototype,"iconClass",void 0),e([o()],u.prototype,"label",null),e([o(),c("esri/widgets/BasemapGallery/t9n/BasemapGallery")],u.prototype,"messages",void 0),e([o()],u.prototype,"source",null),e([o()],u.prototype,"view",null),e([o()],u.prototype,"viewModel",void 0),e([p()],u.prototype,"_handleClick",null),u=e([l("esri.widgets.BasemapGallery")],u);const b=u;export{b as default};