@arcgis/core/widgets/Swipe.js

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

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
*/
import{_ as e}from"../chunks/tslib.es6.js";import{deprecateWidget as t}from"../core/deprecate.js";import i from"../core/Logger.js";import{property as r}from"../core/accessorSupport/decorators/property.js";import"../core/has.js";import"../core/RandomLCG.js";import{subclass as n}from"../core/accessorSupport/decorators/subclass.js";import o from"./Widget.js";import{globalCss as s}from"./support/globalCss.js";import{legacyIcon as a}from"./support/legacyIcon.js";import"./support/widgetUtils.js";import{messageBundle as l}from"./support/decorators/messageBundle.js";import{tsx as d}from"./support/jsxFactory.js";import p from"./Swipe/SwipeViewModel.js";const c="esri-swipe",h={base:c,baseDisabled:`${c}--disabled`,vertical:`${c}--vertical`,horizontal:`${c}--horizontal`,container:`${c}__container`,divider:`${c}__divider`,handle:`${c}__handle`,handleHidden:`${c}__handle--hidden`,handleIcon:`${c}__handle-icon`},v={handle:!0,divider:!0};let u=class extends o{constructor(e,r){super(e,r),this.disabled=!1,this.messages=null,this.viewModel=new p,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,r={[s.disabled]:i,[h.baseDisabled]:i,[h.vertical]:"vertical"===t,[h.horizontal]:"horizontal"===t};return d("div",{class:this.classes(h.base,s.widget,r)},"disabled"===e?null:this._renderContainer())}_renderHandle(){const{direction:e}=this.viewModel,{visibleElements:t}=this,i={[a.dragHorizontal]:"vertical"===e,[a.dragVertical]:"horizontal"===e},r=this.classes(h.handle,!t.handle&&h.handleHidden);return d("div",{class:r,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:r,min:n,direction:o,position:s}=i,a=`${s}%`,l={top:"vertical"===o?a:void 0,left:"vertical"===o?void 0:a},p=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":`${r}`,"aria-valuemin":`${n}`,"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"},p)}_afterContainerCreate(e){this._container=e,e.addEventListener("pointerdown",this._onContainerPointerDown)}_calculatePointerOffset(e){const{direction:t}=this,i=e.target,r=("vertical"===t?i.clientHeight:i.clientWidth)/2,n=i.getBoundingClientRect(),o=e.clientX-n.left,s=e.clientY-n.top;this._pointerOffset="vertical"===t?s-r:o-r}_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:r}=this,{clientX:n,clientY:o}=e,{top:s,left:a,width:l,height:d}=i.getBoundingClientRect(),p=("vertical"===r?o-s-t:n-a-t)/("vertical"===r?d:l)*100;this.position=p}_getKeyPosition(e){const{key:t}=e,{position:i}=this,{max:r,min:n,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 n;if("End"===t)return r;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([r()],u.prototype,"direction",null),e([r()],u.prototype,"disabled",void 0),e([r()],u.prototype,"dragLabel",null),e([r()],u.prototype,"icon",null),e([r()],u.prototype,"label",null),e([r()],u.prototype,"leadingLayers",null),e([r(),l("esri/widgets/Swipe/t9n/Swipe")],u.prototype,"messages",void 0),e([r()],u.prototype,"position",null),e([r()],u.prototype,"trailingLayers",null),e([r()],u.prototype,"view",null),e([r({type:p})],u.prototype,"viewModel",void 0),e([r()],u.prototype,"visibleElements",null),u=e([n("esri.widgets.Swipe")],u);const g=u;export{g as default};