Home Explore Help
Register Sign In
wcheng81
/
jtBaseApp
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 556cebeb9b
Branches Tags
jtBaseApp
/
node_modules
/
@arcgis
/
core
/
widgets
/
ScaleRangeSlider.js

ScaleRangeSlider.js 14 KB
History Raw

12345 
  1. /*
    2. 

  2. All material copyright ESRI, All Rights Reserved, unless otherwise specified.
    3. 

  3. See https://js.arcgis.com/4.24/esri/copyright.txt for details.
    4. 

  4. */
    5. 

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