UNPKG

@arcgis/core

Version:

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

js.arcgis.com

6 lines (5 loc) • 16.8 kB
1
2
3
4
5
6
/* 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 t from"../core/Logger.js";import{ignoreAbortErrors as i,after as o}from"../core/promiseUtils.js";import{watch as n,on as s,initial as r,whenOnce as l}from"../core/reactiveUtils.js";import{waitAnimationFrame as a}from"../core/scheduling.js";import{stripHTML as d}from"../core/string.js";import{property as c}from"../core/accessorSupport/decorators/property.js";import"../core/has.js";import"../core/RandomLCG.js";import{subclass as h}from"../core/accessorSupport/decorators/subclass.js";import u from"../support/actions/ActionButton.js";import p from"./Features.js";import g from"./Widget.js";import v from"./Features/FeaturesViewModel.js";import{css as m}from"./Popup/css.js";import f from"./Popup/PopupViewModel.js";import w from"./Popup/PopupVisibleElements.js";import{globalCss as b}from"./support/globalCss.js";import{isRTL as _}from"./support/widgetUtils.js";import{messageBundle as M}from"./support/decorators/messageBundle.js";import{vmEvent as k}from"./support/decorators/vmEvent.js";import{tsx as y}from"./support/jsxFactory.js";const E=200,C={buttonEnabled:!0,position:"auto",breakpoint:{width:544}};let D=class extends g{constructor(e,t){super(e,t),this._dockAction=new u({id:"popup-dock-action"}),this._featuresWidget=new p({responsiveActionsEnabled:!0}),this._containerNode=null,this._mainContainerNode=null,this._pointerOffsetInPx=16,this._focusAbortController=null,this.alignment="auto",this.dockEnabled=!1,this.headingLevel=2,this.messages=null,this.viewModel=new f,this.visibleElements=new w}initialize(){this.addHandles([n((()=>[this.viewModel?.view?.widthBreakpoint,this.dockEnabled]),(()=>this._handleDockIcon()),r),n((()=>[this.dockEnabled,this.messages?.undock,this.messages?.dock]),(()=>this._handleDockEnabled()),r),n((()=>this.dockOptions),(e=>{const{_dockAction:t}=this,i=this._featuresWidget.headerActions;i.remove(t),e.buttonEnabled&&i.add(t)}),r),n((()=>this.viewModel?.screenLocation),(()=>this._positionContainer())),n((()=>[this.viewModel?.active,this.dockEnabled]),(()=>this._toggleScreenLocationEnabled())),n((()=>[this.viewModel?.screenLocation,this.viewModel?.view?.padding,this.viewModel?.view?.size,this.viewModel?.active,this.viewModel?.location,this.alignment]),(()=>this.reposition())),n((()=>this.viewModel?.view?.size),((e,t)=>this._updateDockEnabledForViewSize(e,t))),n((()=>this.viewModel?.view),((e,t)=>this._viewChange(e,t))),n((()=>this.viewModel?.view?.ready),((e,t)=>this._viewReadyChange(e??!1,t??!1))),n((()=>this.viewModel),(()=>this._featuresWidget.viewModel=this.viewModel),r),n((()=>this._featureNavigationTop),(e=>this._featuresWidget.featureNavigationTop=e),r),n((()=>this.headingLevel),(e=>this._featuresWidget.headingLevel=e),r),n((()=>this.visibleElements.actionBar),(e=>this._featuresWidget.visibleElements.actionBar=!!e),r),n((()=>this.visibleElements.closeButton),(e=>this._featuresWidget.visibleElements.closeButton=!!e),r),n((()=>this.visibleElements.collapseButton),(e=>this._featuresWidget.visibleElements.collapseButton=!!e),r),n((()=>this.visibleElements.heading),(e=>this._featuresWidget.visibleElements.heading=!!e),r),n((()=>this.visibleElements.spinner),(e=>this._featuresWidget.visibleElements.spinner=!!e),r),n((()=>this.visibleElements.featureNavigation),(e=>this._featuresWidget.visibleElements.featureNavigation=!!e),r),n((()=>this.visibleElements.featureMenuHeading),(e=>this._featuresWidget.visibleElements.featureMenuHeading=!!e),r),n((()=>this.visibleElements.featureListLayerTitle),(e=>this._featuresWidget.visibleElements.featureListLayerTitle=!!e),r),s((()=>this._featuresWidget),"trigger-header-action",(e=>{e.action===this._dockAction&&(this.dockEnabled=!this.dockEnabled)}))])}destroy(){this._dockAction.destroy(),this._featuresWidget&&(this._featuresWidget.viewModel=new v,this._featuresWidget.destroy()),this._focusAbortController?.abort()}get _featureNavigationTop(){const{currentAlignment:e,currentDockPosition:t}=this;return"bottom-left"===e||"bottom-center"===e||"bottom-right"===e||"top-left"===t||"top-center"===t||"top-right"===t}get actions(){return this.viewModel.actions}set actions(e){this.viewModel.actions=e}get active(){return this.viewModel.active}get autoCloseEnabled(){return this.viewModel.autoCloseEnabled}set autoCloseEnabled(e){this.viewModel.autoCloseEnabled=e}get defaultPopupTemplateEnabled(){return this.viewModel.defaultPopupTemplateEnabled}set defaultPopupTemplateEnabled(e){this.viewModel.defaultPopupTemplateEnabled=e}get content(){return this.viewModel.content}set content(e){this.viewModel.content=e}get collapsed(){return this._featuresWidget.collapsed}set collapsed(e){this._featuresWidget.collapsed=e}get currentAlignment(){return this._getCurrentAlignment()}get currentDockPosition(){return this._getCurrentDockPosition()}get dockOptions(){return this._get("dockOptions")||C}set dockOptions(e){const t={...C},i=this.viewModel?.view?.breakpoints,o={};i&&(o.width=i.xsmall,o.height=i.xsmall);const n={...t,...e},s={...t.breakpoint,...o},{breakpoint:r}=n;"object"==typeof r?n.breakpoint={...s,...r}:r&&(n.breakpoint=s),this._set("dockOptions",n),this._setCurrentDockPosition(),this.reposition()}get featureCount(){return this.viewModel.featureCount}get featureMenuOpen(){return this.viewModel.featureMenuOpen}set featureMenuOpen(e){this.viewModel.featureMenuOpen=e}get features(){return this.viewModel.features}set features(e){this.viewModel.features=e}get goToOverride(){return this.viewModel.goToOverride}set goToOverride(e){this.viewModel.goToOverride=e}get highlightEnabled(){return this.viewModel.highlightEnabled}set highlightEnabled(e){this.viewModel.highlightEnabled=e}get icon(){return"popup"}set icon(e){this._overrideIfSome("icon",e)}get initialDisplayMode(){return this.viewModel.initialDisplayMode}set initialDisplayMode(e){this.viewModel.initialDisplayMode=e}get location(){return this.viewModel.location}set location(e){this.viewModel.location=e}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get promises(){return this.viewModel.promises}set promises(e){this.viewModel.promises=e}get selectedFeature(){return this.viewModel.selectedFeature}get selectedDrillInFeature(){return this._featuresWidget.selectedDrillInFeature??null}get selectedFeatureIndex(){return this.viewModel.selectedFeatureIndex}set selectedFeatureIndex(e){this.viewModel.selectedFeatureIndex=e}get selectedFeatureWidget(){return this._featuresWidget.selectedFeatureWidget}get title(){return this.viewModel.title}set title(e){this.viewModel.title=e}get updateLocationEnabled(){return this.viewModel.updateLocationEnabled}set updateLocationEnabled(e){this.viewModel.updateLocationEnabled=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}get visible(){return this.viewModel.visible}set visible(e){this.viewModel.visible=e}blur(){const{active:e}=this.viewModel;e||t.getLogger(this).warn("Popup can only be blurred when currently active."),this._featuresWidget.blur()}clear(){return this.viewModel.clear()}close(){this.visible=!1}fetchFeatures(e,t){return this.viewModel.fetchFeatures(e,t)}focus(){const{active:e}=this.viewModel;e||t.getLogger(this).warn("Popup can only be focused when currently active."),this._handleFocus()}next(){return this.viewModel.next()}open(e){const t=!!e&&!!e.featureMenuOpen,i={collapsed:!!e&&!!e.collapsed,featureMenuOpen:t};this.set(i),this.viewModel.open(e),e?.shouldFocus&&this._handleFocus(!0)}previous(){return this.viewModel.previous()}reposition(){this.renderNow(),this._positionContainer(),this._setCurrentAlignment()}triggerAction(e){return this.viewModel.triggerAction(e)}render(){const{dockEnabled:e,currentAlignment:t,currentDockPosition:i}=this,{active:o,screenLocation:n}=this.viewModel,s=o&&e,r=o&&!e,l=this.selectedFeature?.layer?.title,a=this.selectedFeature?.layer?.id,c={[m.alignTopCenter]:"top-center"===t,[m.alignBottomCenter]:"bottom-center"===t,[m.alignTopLeft]:"top-left"===t,[m.alignBottomLeft]:"bottom-left"===t,[m.alignTopRight]:"top-right"===t,[m.alignBottomRight]:"bottom-right"===t,[m.isDocked]:s,[m.shadow]:r,[m.isDockedTopLeft]:"top-left"===i,[m.isDockedTopCenter]:"top-center"===i,[m.isDockedTopRight]:"top-right"===i,[m.isDockedBottomLeft]:"bottom-left"===i,[m.isDockedBottomCenter]:"bottom-center"===i,[m.isDockedBottomRight]:"bottom-right"===i};return y("div",{afterCreate:this._positionContainer,afterUpdate:this._positionContainer,"aria-hidden":(!o).toString(),"aria-label":d(this.title??""),"aria-modal":"false",bind:this,class:this.classes(m.base,c,{[m.baseHidden]:!n&&!e}),"data-layer-id":a,"data-layer-title":l,role:"dialog"},o?[this._renderMainContainer(),this._renderPointer()]:null)}_renderPointer(){return this.dockEnabled?null:y("div",{class:m.pointer,key:"popup-pointer",role:"presentation"},y("div",{class:this.classes(m.pointerDirection,m.shadow)}))}_renderMainContainer(){const{dockEnabled:e}=this,t={[m.shadow]:e};return y("div",{afterCreate:this._setMainContainerNode,afterUpdate:this._setMainContainerNode,bind:this,class:this.classes(m.main,b.widget,t)},this._featuresWidget.render())}_getAnimationDurationMS(){const{_containerNode:e}=this;return e?1e3*parseFloat(window.getComputedStyle(e).animationDuration):E}async _handleFocus(e=!1){this._focusAbortController?.abort(),this._focusAbortController=new AbortController;const t=this._focusAbortController.signal;e&&await l((()=>!0===this.viewModel?.active),{signal:t}),await i(a(t)),await i(o(this._getAnimationDurationMS(),t)),this._featuresWidget.focus()}_isOutsideView(e){const{popupHeight:t,popupWidth:i,screenLocation:o,side:n,view:s}=e;if(isNaN(i)||isNaN(t)||!s||!o)return!1;const r=s.padding;return"right"===n&&o.x+i/2>s.width-r.right||("left"===n&&o.x-i/2<r.left||("top"===n&&o.y-t<r.top||"bottom"===n&&o.y+t>s.height-r.bottom))}_calculateAutoAlignment(e){if("auto"!==e)return e;const{_pointerOffsetInPx:t,_containerNode:i,_mainContainerNode:o,viewModel:n}=this,{screenLocation:s,view:r}=n;if(null==s||!r||!i)return"top-center";function l(e){return parseInt(e.replaceAll(/[^-\d.]/g,""),10)}const a=o?window.getComputedStyle(o,null):null,d=a?l(a.getPropertyValue("max-height")):0,c=a?l(a.getPropertyValue("height")):0,{height:h,width:u}=i.getBoundingClientRect(),p=u+t,g=Math.max(h,d,c)+t,v=this._isOutsideView({popupHeight:g,popupWidth:p,screenLocation:s,side:"right",view:r}),m=this._isOutsideView({popupHeight:g,popupWidth:p,screenLocation:s,side:"left",view:r}),f=this._isOutsideView({popupHeight:g,popupWidth:p,screenLocation:s,side:"top",view:r}),w=this._isOutsideView({popupHeight:g,popupWidth:p,screenLocation:s,side:"bottom",view:r});return m?f?"bottom-right":"top-right":v?f?"bottom-left":"top-left":f?w?"top-center":"bottom-center":"top-center"}_callCurrentAlignment(e){return"function"==typeof e?e.call(this):e}_getCurrentAlignment(){const{alignment:e,dockEnabled:t,_containerNode:i}=this;return!t&&this.viewModel.active&&i?this._calculatePositionResult(this._calculateAutoAlignment(this._callCurrentAlignment(e))):null}_setCurrentAlignment(){this._set("currentAlignment",this._getCurrentAlignment())}_setCurrentDockPosition(){this._set("currentDockPosition",this._getCurrentDockPosition())}_calculatePositionResult(e){const t=["left","right"];return _(this.container)&&t.reverse(),e?.replace(/leading/gi,t[0]).replaceAll(/trailing/gi,t[1])}_callDockPosition(e){return"function"==typeof e?e.call(this):e}_getDockPosition(){return this._calculatePositionResult(this._calculateAutoDockPosition(this._callDockPosition(this.dockOptions?.position)))}_getCurrentDockPosition(){return this.dockEnabled&&this.viewModel.active?this._getDockPosition():null}_calculateAutoDockPosition(e){if("auto"!==e)return e;const t=this.viewModel?.view,i=_(this.container)?"top-left":"top-right";if(!t)return i;const o=t.padding||{left:0,right:0},n=t.width-o.left-o.right,{breakpoints:s}=t;return s&&n<=s.xsmall?"bottom-center":i}_getDockIcon(){const e=this._getDockPosition();if(this.dockEnabled)return"minimize";switch(e){case"top-left":case"bottom-left":return"dock-left";case"top-center":return"maximize";case"bottom-center":return"dock-bottom";default:return"dock-right"}}_handleDockIcon(){this._dockAction.icon=this._getDockIcon()}_handleDockEnabled(){this._dockAction.title=this.dockEnabled?this.messages?.undock:this.messages?.dock}_setMainContainerNode(e){this._mainContainerNode=e}_positionContainer(e=this._containerNode){if(e&&(this._containerNode=e),!this._containerNode)return;const{screenLocation:t}=this.viewModel,{width:i}=this._containerNode.getBoundingClientRect(),o=this._calculatePositionStyle(t,i);o&&Object.assign(this._containerNode.style,o)}_calculateFullWidth(e){const{currentAlignment:t,_pointerOffsetInPx:i}=this;return"top-left"===t||"bottom-left"===t||"top-right"===t||"bottom-right"===t?e+i:e}_calculateAlignmentPosition(e,t,i,o){const{currentAlignment:n,_pointerOffsetInPx:s}=this;if(!i)return;const{padding:r}=i,l=o/2,a=i.height-t,d=i.width-e;return"bottom-center"===n?{top:t+s-r.top,left:e-l-r.left}:"top-left"===n?{bottom:a+s-r.bottom,right:d+s-r.right}:"bottom-left"===n?{top:t+s-r.top,right:d+s-r.right}:"top-right"===n?{bottom:a+s-r.bottom,left:e+s-r.left}:"bottom-right"===n?{top:t+s-r.top,left:e+s-r.left}:"top-center"===n?{bottom:a+s-r.bottom,left:e-l-r.left}:void 0}_calculatePositionStyle(e,t){const{dockEnabled:i,view:o}=this;if(!o)return;if(i)return{left:"",top:"",right:"",bottom:""};if(null==e||!t)return;const n=this._calculateFullWidth(t),s=this._calculateAlignmentPosition(e.x,e.y,o,n);return s?{top:void 0!==s.top?`${s.top}px`:"auto",left:void 0!==s.left?`${s.left}px`:"auto",bottom:void 0!==s.bottom?`${s.bottom}px`:"auto",right:void 0!==s.right?`${s.right}px`:"auto"}:void 0}_viewChange(e,t){e&&t&&(this.close(),this.clear())}_viewReadyChange(e,t){e?this._wireUpView():t&&(this.close(),this.clear())}_wireUpView(){this._setDockEnabledForViewSize(this.dockOptions)}_dockingThresholdCrossed(e,t,i){const[o,n]=e,[s,r]=t,{width:l=0,height:a=0}=i??{};return o<=l&&s>l||o>l&&s<=l||n<=a&&r>a||n>a&&r<=a}_updateDockEnabledForViewSize(e,t){if(!e||!t)return;const i=this.viewModel?.view?.padding||{left:0,right:0,top:0,bottom:0},o=i.left+i.right,n=i.top+i.bottom,s=[],r=[];s[0]=e[0]-o,s[1]=e[1]-n,r[0]=t[0]-o,r[1]=t[1]-n;const{dockOptions:l}=this,a=l.breakpoint;this._dockingThresholdCrossed(s,r,a)&&this._setDockEnabledForViewSize(l),this._setCurrentDockPosition()}_toggleScreenLocationEnabled(){const{dockEnabled:e,viewModel:t}=this;if(!t)return;const i=t.active&&!e;t.screenLocationEnabled=i}_shouldDockAtCurrentViewSize(e){const t=e.breakpoint,i=this.viewModel?.view?.ui;if(!i)return!1;const{width:o,height:n}=i;if(isNaN(o)||isNaN(n))return!1;if(!t)return!1;const s=t.hasOwnProperty("width")&&o<=(t.width??0),r=t.hasOwnProperty("height")&&n<=(t.height??0);return s||r}_setDockEnabledForViewSize(e){e.breakpoint&&(this.dockEnabled=this._shouldDockAtCurrentViewSize(e))}};e([c()],D.prototype,"_containerNode",void 0),e([c({readOnly:!0})],D.prototype,"_featureNavigationTop",null),e([c()],D.prototype,"actions",null),e([c({readOnly:!0})],D.prototype,"active",null),e([c()],D.prototype,"alignment",void 0),e([c()],D.prototype,"autoCloseEnabled",null),e([c()],D.prototype,"defaultPopupTemplateEnabled",null),e([c()],D.prototype,"content",null),e([c()],D.prototype,"collapsed",null),e([c({readOnly:!0})],D.prototype,"currentAlignment",null),e([c({readOnly:!0})],D.prototype,"currentDockPosition",null),e([c()],D.prototype,"dockOptions",null),e([c()],D.prototype,"dockEnabled",void 0),e([c({readOnly:!0})],D.prototype,"featureCount",null),e([c()],D.prototype,"featureMenuOpen",null),e([c()],D.prototype,"features",null),e([c()],D.prototype,"goToOverride",null),e([c()],D.prototype,"headingLevel",void 0),e([c()],D.prototype,"highlightEnabled",null),e([c()],D.prototype,"icon",null),e([c()],D.prototype,"initialDisplayMode",null),e([c()],D.prototype,"location",null),e([c()],D.prototype,"label",null),e([c(),M("esri/widgets/Popup/t9n/Popup")],D.prototype,"messages",void 0),e([c()],D.prototype,"promises",null),e([c({readOnly:!0})],D.prototype,"selectedFeature",null),e([c({readOnly:!0})],D.prototype,"selectedDrillInFeature",null),e([c()],D.prototype,"selectedFeatureIndex",null),e([c({readOnly:!0})],D.prototype,"selectedFeatureWidget",null),e([c()],D.prototype,"title",null),e([c()],D.prototype,"updateLocationEnabled",null),e([c()],D.prototype,"view",null),e([c({type:f}),k(["triggerAction","trigger-action"])],D.prototype,"viewModel",void 0),e([c()],D.prototype,"visible",null),e([c({type:w,nonNullable:!0})],D.prototype,"visibleElements",void 0),D=e([h("esri.widgets.Popup")],D);const P=D;export{P as default};