@arcgis/core/widgets/Swipe.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as e}from"tslib";import{deprecateWidget as t}from"../core/deprecate.js";import i from"../core/Logger.js";import{property as n,subclass as r}from"../core/accessorSupport/decorators.js";import o from"./Widget.js";import{globalCss as s}from"./support/globalCss.js";import{legacyIcon as a}from"./support/legacyIcon.js";import{messageBundle as l,tsx as d}from"./support/widget.js";import c from"./Swipe/SwipeViewModel.js";const p="esri-swipe",h={base:p,baseDisabled:`${p}--disabled`,vertical:`${p}--vertical`,horizontal:`${p}--horizontal`,container:`${p}__container`,divider:`${p}__divider`,handle:`${p}__handle`,handleHidden:`${p}__handle--hidden`,handleIcon:`${p}__handle-icon`},v={handle:!0,divider:!0};let u=class extends o{constructor(e,n){super(e,n),this.disabled=!1,this.messages=null,this.viewModel=new c,this._pointerOffset=0,this._container=null,t(i.getLogger(this),"Swipe","arcgis-swipe",{version:"4.32"}),this._onContainerPointerDown=this._onContainerPointerDown.bind(this),this._onContainerPointerMove=this._onContainerPointerMove.bind(this),this._onContainerPointerUp=this._onContainerPointerUp.bind(this)}get direction(){return this.viewModel.direction}set direction(e){this.viewModel.direction=e}get dragLabel(){return this.messages?.dragLabel??""}set dragLabel(e){this._overrideIfSome("dragLabel",e)}get icon(){return"compare"}set icon(e){this._overrideIfSome("icon",e)}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get leadingLayers(){return this.viewModel.leadingLayers}set leadingLayers(e){this.viewModel.leadingLayers=e}get position(){return this.viewModel.position}set position(e){this.viewModel.position=e}get trailingLayers(){return this.viewModel.trailingLayers}set trailingLayers(e){this.viewModel.trailingLayers=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}set visibleElements(e){this._set("visibleElements",{...v,...e})}get visibleElements(){return this._get("visibleElements")||v}render(){const{state:e,direction:t}=this.viewModel,i="disabled"===e||this.disabled,n={[s.disabled]:i,[h.baseDisabled]:i,[h.vertical]:"vertical"===t,[h.horizontal]:"horizontal"===t};return d("div",{class:this.classes(h.base,s.widget,n)},"disabled"===e?null:this._renderContainer())}_renderHandle(){const{direction:e}=this.viewModel,{visibleElements:t}=this,i={[a.dragHorizontal]:"vertical"===e,[a.dragVertical]:"horizontal"===e},n=this.classes(h.handle,!t.handle&&h.handleHidden);return d("div",{class:n,key:"handle",role:"presentation"},d("span",{"aria-hidden":"true",class:this.classes(h.handleIcon,i)}))}_renderDivider(){const{visibleElements:e}=this;return e&&e.divider?d("div",{class:h.divider,key:"divider",role:"presentation"}):null}_renderContent(){return[this._renderDivider(),this._renderHandle()]}_renderContainer(){const{disabled:e,dragLabel:t,viewModel:i}=this,{max:n,min:r,direction:o,position:s}=i,a=`${s}%`,l={top:"vertical"===o?a:void 0,left:"vertical"===o?void 0:a},c=this._renderContent();return d("div",e?{class:h.container,key:"container",role:"presentation",styles:l}:{afterCreate:this._afterContainerCreate,"aria-label":t,"aria-orientation":o,"aria-valuemax":`${n}`,"aria-valuemin":`${r}`,"aria-valuenow":`${s}`,"aria-valuetext":a,bind:this,class:h.container,key:"container",onkeydown:this._onContainerKeyDown,role:"slider",styles:l,tabIndex:0,title:t,"touch-action":"none"},c)}_afterContainerCreate(e){this._container=e,e.addEventListener("pointerdown",this._onContainerPointerDown)}_calculatePointerOffset(e){const{direction:t}=this,i=e.target,n=("vertical"===t?i.clientHeight:i.clientWidth)/2,r=i.getBoundingClientRect(),o=e.clientX-r.left,s=e.clientY-r.top;this._pointerOffset="vertical"===t?s-n:o-n}_onContainerPointerDown(e){e.preventDefault(),this._container&&document.activeElement!==this.container&&this._container.focus(),this._calculatePointerOffset(e),document.addEventListener("pointerup",this._onContainerPointerUp),document.addEventListener("pointermove",this._onContainerPointerMove)}_onContainerPointerUp(e){e.preventDefault(),document.removeEventListener("pointerup",this._onContainerPointerUp),document.removeEventListener("pointermove",this._onContainerPointerMove)}_onContainerPointerMove(e){e.preventDefault();const{_pointerOffset:t,container:i,direction:n}=this,{clientX:r,clientY:o}=e,{top:s,left:a,width:l,height:d}=i.getBoundingClientRect(),c=("vertical"===n?o-s-t:r-a-t)/("vertical"===n?d:l)*100;this.position=c}_getKeyPosition(e){const{key:t}=e,{position:i}=this,{max:n,min:r,step:o,stepMultiplier:s,direction:a}=this.viewModel,l=o*s;["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","PageUp","PageDown"].includes(t)&&(e.preventDefault(),e.stopPropagation());if("vertical"===a?"ArrowDown"===t||"ArrowRight"===t:"ArrowUp"===t||"ArrowRight"===t){return i+(e.shiftKey?l:o)}if("vertical"===a?"ArrowUp"===t||"ArrowLeft"===t:"ArrowDown"===t||"ArrowLeft"===t){return i-(e.shiftKey?l:o)}if("Home"===t)return r;if("End"===t)return n;if("vertical"===a?"PageDown"===t:"PageUp"===t)return i+l;return("vertical"===a?"PageUp"===t:"PageDown"===t)?i-l:null}_onContainerKeyDown(e){const t=this._getKeyPosition(e);"number"==typeof t&&(this.position=t)}};e([n()],u.prototype,"direction",null),e([n()],u.prototype,"disabled",void 0),e([n()],u.prototype,"dragLabel",null),e([n()],u.prototype,"icon",null),e([n()],u.prototype,"label",null),e([n()],u.prototype,"leadingLayers",null),e([n(),l("esri/widgets/Swipe/t9n/Swipe")],u.prototype,"messages",void 0),e([n()],u.prototype,"position",null),e([n()],u.prototype,"trailingLayers",null),e([n()],u.prototype,"view",null),e([n({type:c})],u.prototype,"viewModel",void 0),e([n()],u.prototype,"visibleElements",null),u=e([r("esri.widgets.Swipe")],u);const g=u;export{g as default};