12345 |
- /*
- All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- See https://js.arcgis.com/4.24/esri/copyright.txt for details.
- */
- import{_ as e}from"../chunks/tslib.es6.js";import{eventKey as i}from"../core/events.js";import{aliasOf as t}from"../core/accessorSupport/decorators/aliasOf.js";import"../core/arrayUtils.js";import"../core/has.js";import"../core/accessorSupport/ensureType.js";import{property as r}from"../core/accessorSupport/decorators/property.js";import{subclass as o}from"../core/accessorSupport/decorators/subclass.js";import n from"./Widget.js";import"./support/widgetUtils.js";import{messageBundle as s}from"./support/decorators/messageBundle.js";import{tsx as a}from"./support/jsxFactory.js";import l from"./Swipe/SwipeViewModel.js";const d={base:"esri-swipe",baseDisabled:"esri-swipe--disabled",vertical:"esri-swipe--vertical",horizontal:"esri-swipe--horizontal",container:"esri-swipe__container",divider:"esri-swipe__divider",handle:"esri-swipe__handle",handleHidden:"esri-swipe__handle--hidden",widgetIcon:"esri-icon-up-down-arrows",handleIcon:"esri-swipe__handle-icon",dragIconHorizontal:"esri-icon-drag-horizontal",dragIconVertical:"esri-icon-drag-vertical",widget:"esri-widget",disabled:"esri-disabled"},c={handle:!0,divider:!0};let p=class extends n{constructor(e,i){super(e,i),this.direction=null,this.disabled=!1,this.dragLabel=void 0,this.iconClass=d.widgetIcon,this.label=void 0,this.leadingLayers=null,this.messages=null,this.position=null,this.trailingLayers=null,this.view=null,this.viewModel=new l,this._pointerOffset=null,this._container=null,this._onContainerPointerDown=this._onContainerPointerDown.bind(this),this._onContainerPointerMove=this._onContainerPointerMove.bind(this),this._onContainerPointerUp=this._onContainerPointerUp.bind(this)}set visibleElements(e){this._set("visibleElements",{...c,...e})}get visibleElements(){return this._get("visibleElements")||c}render(){const{state:e,direction:i}=this.viewModel,t="disabled"===e||this.disabled,r={[d.disabled]:t,[d.baseDisabled]:t,[d.vertical]:"vertical"===i,[d.horizontal]:"horizontal"===i};return a("div",{class:this.classes(d.base,d.widget,r)},"disabled"===e?null:this.renderContainer())}renderHandle(){const{direction:e}=this.viewModel,{visibleElements:i}=this,t={[d.dragIconHorizontal]:"vertical"===e,[d.dragIconVertical]:"horizontal"===e},r=this.classes(d.handle,!i.handle&&d.handleHidden);return a("div",{key:"handle",role:"presentation",class:r},a("span",{"aria-hidden":"true",class:this.classes(d.handleIcon,t)}))}renderDivider(){const{visibleElements:e}=this;return e&&e.divider?a("div",{key:"divider",role:"presentation",class:d.divider}):null}renderContent(){return[this.renderDivider(),this.renderHandle()]}renderContainer(){const{disabled:e,dragLabel:i,viewModel:t}=this,{max:r,min:o,direction:n,position:s}=t,l=`${s}%`,c={top:"vertical"===n?l:null,left:"vertical"===n?null:l},p=this.renderContent();return a("div",e?{key:"container",role:"presentation",styles:c,class:d.container}:{tabIndex:0,key:"container",bind:this,afterCreate:this._afterContainerCreate,onkeydown:this._onContainerKeyDown,"touch-action":"none",role:"slider",title:i,"aria-label":i,"aria-orientation":n,"aria-valuemax":`${r}`,"aria-valuemin":`${o}`,"aria-valuenow":`${s}`,"aria-valuetext":l,styles:c,class:d.container},p)}_afterContainerCreate(e){this._container=e,e.addEventListener("pointerdown",this._onContainerPointerDown)}_calculatePointerOffset(e){const{direction:i}=this,t=e.target,r=("vertical"===i?t.clientHeight:t.clientWidth)/2,o=t.getBoundingClientRect(),n=e.clientX-o.left,s=e.clientY-o.top;this._pointerOffset="vertical"===i?s-r:n-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:i,container:t,direction:r}=this,{clientX:o,clientY:n}=e,{top:s,left:a,width:l,height:d}=t.getBoundingClientRect(),c=("vertical"===r?n-s-i:o-a-i)/("vertical"===r?d:l)*100;this.position=c}_getKeyPosition(e){const t=i(e),{position:r}=this,{max:o,min:n,step:s,stepMultiplier:a,direction:l}=this.viewModel,d=s*a;["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","PageUp","PageDown"].includes(t)&&(e.preventDefault(),e.stopPropagation());if("vertical"===l?"ArrowDown"===t||"ArrowRight"===t:"ArrowUp"===t||"ArrowRight"===t){return r+(e.shiftKey?d:s)}if("vertical"===l?"ArrowUp"===t||"ArrowLeft"===t:"ArrowDown"===t||"ArrowLeft"===t){return r-(e.shiftKey?d:s)}if("Home"===t)return n;if("End"===t)return o;if("vertical"===l?"PageDown"===t:"PageUp"===t)return r+d;return("vertical"===l?"PageUp"===t:"PageDown"===t)?r-d:null}_onContainerKeyDown(e){const i=this._getKeyPosition(e);"number"==typeof i&&(this.position=i)}};e([t("viewModel.direction")],p.prototype,"direction",void 0),e([r()],p.prototype,"disabled",void 0),e([r({aliasOf:{source:"messages.dragLabel",overridable:!0}})],p.prototype,"dragLabel",void 0),e([r()],p.prototype,"iconClass",void 0),e([r({aliasOf:{source:"messages.widgetLabel",overridable:!0}})],p.prototype,"label",void 0),e([t("viewModel.leadingLayers")],p.prototype,"leadingLayers",void 0),e([r(),s("esri/widgets/Swipe/t9n/Swipe")],p.prototype,"messages",void 0),e([t("viewModel.position")],p.prototype,"position",void 0),e([t("viewModel.trailingLayers")],p.prototype,"trailingLayers",void 0),e([t("viewModel.view")],p.prototype,"view",void 0),e([r({type:l})],p.prototype,"viewModel",void 0),e([r()],p.prototype,"visibleElements",null),p=e([o("esri.widgets.Swipe")],p);const h=p;export{h as default};
|