@doegis/core/widgets/ScaleRangeSlider.js

DOE GIS API

import{_ as e}from"../chunks/tslib.es6.js";import"../intl.js";import{closest as t}from"../core/domUtils.js";import{on as l,eventKey as i}from"../core/events.js";import{HandleOwnerMixin as a}from"../core/HandleOwner.js";import{watch as s,when as n,initial as c}from"../core/reactiveUtils.js";import{property as o}from"../core/accessorSupport/decorators/property.js";import{cast as r}from"../core/accessorSupport/decorators/cast.js";import"../core/arrayUtils.js";import{subclass as u}from"../core/accessorSupport/decorators/subclass.js";import d from"./Slider.js";import m from"./Widget.js";import{CSS as h}from"./ScaleRangeSlider/css.js";import{getScalePreviewSource as v,getScalePreviewSpriteBackgroundPosition as p}from"./ScaleRangeSlider/scalePreviewUtils.js";import S from"./ScaleRangeSlider/ScaleRanges.js";import M from"./ScaleRangeSlider/ScaleRangeSliderViewModel.js";import _ from"./support/Popover.js";import{accessibleHandler as g}from"./support/decorators/accessibleHandler.js";import{messageBundle as f}from"./support/decorators/messageBundle.js";import{tsx as w}from"./support/jsxFactory.js";import{isRTL as b,storeNode as y}from"./support/widgetUtils.js";import{substitute as x}from"../intl/substitute.js";import{formatNumber as I}from"../intl/number.js";const T={preview:!0,scaleMenus:{maxScaleMenu:!0,minScaleMenu:!0}},C={maximumFractionDigits:0},R=e=>`1:${I(e,C)}`,L=e=>{const t=/[^\d.\s]/g,l=e.replace(/.*\(/,"").replace(/\).*$/,"").replace(/.*:/,"").replace(t,"");return parseFloat(l)};let j=class extends(a(m)){constructor(e,a){super(e,a),this._activeMenu=null,this._activeMenuNode=null,this._activeMenuToggleNode=null,this._activeThumb=null,this._customMaxScale=-1,this._customMinScale=-1,this._focusedMenuItemIndex=-1,this._maxScaleMenuPopover=new _({owner:this,placement:"bottom-end",anchorElement:()=>this._activeMenuToggleNode,renderContentFunction:()=>this._maxScaleMenuEnabled?this.renderMaxScaleMenu():null}),this._minScaleMenuPopover=new _({owner:this,placement:"bottom-start",anchorElement:()=>this._activeMenuToggleNode,renderContentFunction:()=>this._minScaleMenuEnabled?this.renderMinScaleMenu():null}),this._previewAutoCloseTimeoutId=null,this._previewPopover=new _({owner:this,placement:"top",anchorElement:()=>0===this._activeThumb?this._minThumbNode:this._maxThumbNode,offset:[0,16],renderContentFunction:this.renderScalePreview}),this._scaleMenuNode=null,this._slider=new d({thumbCreatedFunction:(e,t,i)=>{0===e&&(this._minThumbNode=i),1===e&&(this._maxThumbNode=i),this.addHandles([l(i,"mouseenter",(()=>{const{visibleElements:{preview:t}}=this;this._activeThumb=e,this._previewPopover.open=t,this.scheduleRender()})),l(i,"mouseleave",(()=>{this._previewAutoCloseTimeoutId||(this._activeThumb=null,this._previewPopover.open=!1,this.scheduleRender())}))])}}),this.disabled=!1,this.messages=null,this.region="US",this.viewModel=new M,this.visibleElements=T,this._handleScaleMenuToggleClick=e=>{const i=e.currentTarget,a=i.getAttribute("data-type"),s="menu-closing-click-handle";if(this.handles.remove(s),a===this._activeMenu)return this._setActiveMenu(null),void(this._activeMenuToggleNode=null);this._setActiveMenu(a),this._activeMenuToggleNode=i,this.handles.add(l(document,"mousedown",(e=>{const l=e.target,i=t(l,`.${h.scaleMenuToggle}`),a=i&&i.getAttribute("data-type");if(i&&a===this._activeMenu)return;!a&&this._scaleMenuNode&&!this._scaleMenuNode.contains(l)&&(this._setActiveMenu(null),this.handles.remove(s),this.scheduleRender())})),s)},this._afterMenuListCreate=e=>{this._activeMenuNode=e,e.children[0].focus({preventScroll:!0})},this._handleCustomScaleEntry=e=>{this._setScaleFromMenuSelection(e),this._customMaxScale=-1,this._customMinScale=-1},this._handleCustomScaleInputBlur=()=>{"max"===this._activeMenu?this._customMaxScale=-1:this._customMinScale=-1},this._handleCustomScaleInputKeyDown=e=>{const t=e.currentTarget,{handleCustomScaleSelect:l}=t["data-render-props"],{key:i,ctrlKey:a,metaKey:s}=e,{viewModel:{scaleRanges:n}}=this;if("Enter"===i){const i=L(t.value);return l(isNaN(i)?-1:n.clampScale(i)),e.preventDefault(),void e.stopPropagation()}if(i.length>1||a||s)return;/[:,.\d]/.test(i)||(e.preventDefault(),e.stopPropagation())},this._handleScaleMenuKeyDown=e=>{const t=i(e);if("Escape"===t||"Tab"===t)return this._setActiveMenu(null),void this._activeMenuToggleNode.focus();if("ArrowUp"!==t&&"ArrowDown"!==t)return;const l=this._activeMenuNode.children,a=this._focusedMenuItemIndex,s="ArrowUp"===t?(0===a?l.length:a)-1:(a+1)%l.length;e.preventDefault(),e.stopPropagation(),l[s].focus(),this._focusedMenuItemIndex=s}}initialize(){this.addHandles([s((()=>this.viewModel),(e=>this._slider.viewModel=e?e.sliderViewModel:null),c),s((()=>this._interactive),(e=>{this._slider.disabled=!e,e||this._setActiveMenu(null)}),c),this._slider.on("thumb-drag",(({index:e})=>{const{visibleElements:{preview:t}}=this;this._activeThumb=e,this._previewPopover.open=t,clearTimeout(this._previewAutoCloseTimeoutId);const l=250;this._previewAutoCloseTimeoutId=setTimeout((()=>{this._previewAutoCloseTimeoutId=null,this._activeThumb=null,this._previewPopover.open=!1,this.scheduleRender()}),l)})),n((()=>!0===this.view?.stationary),(()=>this.scheduleRender()))])}destroy(){this._previewPopover.destroy(),this._previewPopover=null,this._maxScaleMenuPopover.destroy(),this._maxScaleMenuPopover=null,this._minScaleMenuPopover.destroy(),this._minScaleMenuPopover=null,this._slider.destroy(),this._slider=null}get _maxScaleMenuEnabled(){const{scaleMenus:e}=this.visibleElements;return!0===e||"boolean"!=typeof e&&e.maxScaleMenu}get _minScaleMenuEnabled(){const{scaleMenus:e}=this.visibleElements;return!0===e||"boolean"!=typeof e&&e.minScaleMenu}get _interactive(){return"disabled"!==this.get("viewModel.state")&&!this.disabled}get effectiveMaxScale(){return this.viewModel.effectiveMaxScale}get effectiveMinScale(){return this.viewModel.effectiveMinScale}get effectiveMaxScaleLimit(){return this.viewModel.effectiveMaxScaleLimit}get effectiveMinScaleLimit(){return this.viewModel.effectiveMinScaleLimit}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get layer(){return this.viewModel.layer}set layer(e){this.viewModel.layer=e}get maxScale(){return this.viewModel.maxScale}set maxScale(e){this.viewModel.maxScale=e}get maxScaleLimit(){return this.viewModel.maxScaleLimit}set maxScaleLimit(e){this.viewModel.maxScaleLimit=e}get minScale(){return this.viewModel.minScale}set minScale(e){this.viewModel.minScale=e}get minScaleLimit(){return this.viewModel.minScaleLimit}set minScaleLimit(e){this.viewModel.minScaleLimit=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}castVisibleElements(e){return{...T,...e,scaleMenus:"boolean"==typeof e?.scaleMenus?e.scaleMenus:{...T.scaleMenus,...e?.scaleMenus}}}render(){const{_interactive:e,_slider:t,label:l,messages:i,view:a,viewModel:{scaleRanges:s,state:n}}=this,c=i.scaleRangeLabels[s.findScaleRangeByIndex(t.values[0]).id],o=i.scaleRangeLabels[s.findScaleRangeByIndex(t.values[1]).id];return t.layout=b(this.container)?"horizontal-reversed":"horizontal",w("div",{"aria-label":l,class:this.classes(h.base,h.widget,e?null:h.disabled)},"ready"===n&&a?this.renderCurrentScaleIndicator():null,t.render(),w("div",{class:h.scaleMenuContainer,key:"scale-menu-toggles"},this._minScaleMenuEnabled?this.renderScaleMenuToggle("min",c):null,this._maxScaleMenuEnabled?this.renderScaleMenuToggle("max",o):null))}renderMinScaleMenu(){const{effectiveMaxScale:e,effectiveMinScaleLimit:t,view:l,viewModel:{scaleRanges:i}}=this,a=l?l.scale:void 0;return this.renderScaleMenu({type:"min",min:t,max:i.findScaleRange(e).minScale,map:a})}renderMaxScaleMenu(){const{effectiveMinScale:e,effectiveMaxScaleLimit:t,view:l,viewModel:{scaleRanges:i}}=this,a=l?l.scale:void 0;return this.renderScaleMenu({type:"max",min:i.findScaleRange(e).maxScale,max:t,map:a})}renderScalePreview(){const{_activeThumb:e,_slider:t,region:l,viewModel:{scaleRanges:i}}=this,a=0===e?t.values[0]:t.values[1],s=Object.keys(S.RecommendedScales).indexOf(i.findScaleRangeByIndex(a).id),n={backgroundImage:v(l),backgroundPosition:p(s)};return w("div",{class:h.scalePreview},w("div",{class:h.scalePreviewThumbnail,styles:n}))}renderScaleMenu({map:e,min:t,max:l,type:i}){const a=S.fromScaleRange({minScale:t,maxScale:l}),s=this.messages.featuredScaleLabels,n=S.RecommendedScales,c=Object.keys(n).filter((e=>a.contains(n[e]))).map((e=>this.renderScaleMenuItem({scaleLabel:s[e],scaleValue:n[e],valueVisible:"world"!==e,handleNamedScaleSelect:this._handleRecommendedScaleClick}))),{_customMaxScale:o,_customMinScale:r,messages:u}=this,d="max"===i?o:r;return w("div",{bind:this,class:h.scaleMenu,"data-type":i,id:`${this.id}__scale-menu--${i}`,key:`${i}-scale-menu`,afterCreate:y,"data-node-ref":"_scaleMenuNode",onkeydown:this._handleScaleMenuKeyDown},w("div",{class:h.scaleMenuScroller},w("ul",{class:h.scaleMenuList,afterCreate:this._afterMenuListCreate},this.renderScaleMenuItem({scaleValue:d,scaleLabel:u.featuredScaleLabels.custom,valueVisible:!1,handleNamedScaleSelect:this._handleScaleSelection,handleCustomScaleSelect:this._handleCustomScaleEntry}),null!=e?this.renderScaleMenuItem({scaleValue:e,scaleLabel:u.featuredScaleLabels.current,valueVisible:!0,handleNamedScaleSelect:this._handleRecommendedScaleClick}):null,c)))}_handleScaleSelection(){"max"===this._activeMenu?this._customMaxScale=this.effectiveMaxScale:this._customMinScale=this.effectiveMinScale}renderScaleMenuToggle(e,t){const{_activeMenu:l,_interactive:i}=this,a=l===e;return w("button",{"aria-controls":a?`${this.id}__scale-menu--${e}`:"","aria-pressed":a?"true":"false",class:this.classes(h.scaleMenuToggle,a?h.scaleMenuToggleActive:null),"data-type":e,key:`${e}-scale-menu-toggle`,onclick:this._handleScaleMenuToggleClick,disabled:!i,type:"button"},w("div",{class:h.scaleMenuToggleText,"aria-label":t,title:t},t),w("span",{class:this.classes(h.scaleMenuToggleIcon,h.expandIcon),"aria-hidden":"true"}))}renderScaleMenuItem(e){const{scaleValue:t,scaleLabel:l,valueVisible:i,handleNamedScaleSelect:a,handleCustomScaleSelect:s=null}=e,{id:n}=this,c=`${n}__custom-scale-input`;return w("li",{bind:this,class:h.scaleMenuListItem,"data-scale":t,key:l,onclick:a,onkeydown:a,tabIndex:-1},w("label",{class:h.scaleItemLabel,for:c},l),t>-1?s?w("input",{afterCreate:this._focusAndSelectInputOnCreate,class:this.classes(h.scaleItemValue,h.scaleItemValueEditable),"data-render-props":e,id:c,key:"value",value:R(t),onkeydown:this._handleCustomScaleInputKeyDown,onblur:this._handleCustomScaleInputBlur}):i?w("div",{class:h.scaleItemValue,key:"value"},R(t)):null:null)}_focusAndSelectInputOnCreate(e){e.focus(),e.select()}renderCurrentScaleIndicator(){const{_slider:e,messages:t,view:l,viewModel:{scaleRanges:i}}=this,a=i.clampScale(l.scale),s=this.viewModel.mapScaleToSlider(a),n=s/e.max,c=t.scaleRangeLabels[i.findScaleRangeByIndex(s).id],o=x(t.currentScaleTooltip,{scaleLabel:c});return w("div",{class:h.scaleIndicatorContainer,key:"scale-indicator"},w("div",{"aria-label":o,class:h.scaleIndicator,styles:{left:(b(this.container)?-1:1)*n*100+"%"},title:o},this.renderCurrentScaleIndicatorIcon()))}renderCurrentScaleIndicatorIcon(){return w("svg",{class:h.scaleIndicatorIcon,height:"8",width:"8",viewBox:"0 0 8 8",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},w("polygon",{points:"4 0 8 8 0 8"}))}_handleRecommendedScaleClick(e){const t=e.currentTarget,l=Number(t["data-scale"]);this._setScaleFromMenuSelection(l)}_setScaleFromMenuSelection(e){"max"===this._activeMenu?this.maxScale=Math.min(e,this.effectiveMinScale-1):this.minScale=Math.max(e,this.effectiveMaxScale+1),this._setActiveMenu(null),this._activeMenuToggleNode.focus()}_setActiveMenu(e){this._activeMenu=e,this._maxScaleMenuPopover.open="max"===e,this._minScaleMenuPopover.open="min"===e,this._focusedMenuItemIndex=e?0:-1}};e([o()],j.prototype,"_maxScaleMenuEnabled",null),e([o()],j.prototype,"_minScaleMenuEnabled",null),e([o()],j.prototype,"_slider",void 0),e([o({readOnly:!0})],j.prototype,"_interactive",null),e([o()],j.prototype,"disabled",void 0),e([o()],j.prototype,"effectiveMaxScale",null),e([o()],j.prototype,"effectiveMinScale",null),e([o()],j.prototype,"effectiveMaxScaleLimit",null),e([o()],j.prototype,"effectiveMinScaleLimit",null),e([o()],j.prototype,"label",null),e([o()],j.prototype,"layer",null),e([o()],j.prototype,"maxScale",null),e([o()],j.prototype,"maxScaleLimit",null),e([o(),f("esri/widgets/ScaleRangeSlider/t9n/ScaleRangeSlider")],j.prototype,"messages",void 0),e([o()],j.prototype,"minScale",null),e([o()],j.prototype,"minScaleLimit",null),e([o()],j.prototype,"region",void 0),e([o()],j.prototype,"view",null),e([o()],j.prototype,"viewModel",void 0),e([o()],j.prototype,"visibleElements",void 0),e([r("visibleElements")],j.prototype,"castVisibleElements",null),e([g()],j.prototype,"_handleScaleSelection",null),e([g()],j.prototype,"_handleRecommendedScaleClick",null),j=e([u("esri.widgets.ScaleRangeSlider")],j);const k=j;export{k as default};