@arcgis/core/widgets/Popup.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 t from"../core/Logger.js";import{ignoreAbortErrors as i,after as o}from"../core/promiseUtils.js";import{watch as n,initial as s,on 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,subclass as h}from"../core/accessorSupport/decorators.js";import u from"../geometry/Point.js";import p from"../support/actions/ActionButton.js";import g from"./Features.js";import v from"./Widget.js";import f from"./Features/FeaturesViewModel.js";import{ActionsCollection as m}from"./Popup/actions.js";import{css as w}from"./Popup/css.js";import b from"./Popup/PopupViewModel.js";import _ from"./Popup/PopupVisibleElements.js";import{globalCss as M}from"./support/globalCss.js";import{tsx as k,messageBundle as y,vmEvent as E}from"./support/widget.js";import{isRTL as C}from"./support/widgetUtils.js";const P=200,D={buttonEnabled:!0,position:"auto",breakpoint:{width:544}};let A=class extends v{constructor(e,t){super(e,t),this._dockAction=new p({id:"popup-dock-action"}),this._featuresWidget=new g({responsiveActionsEnabled:!0,suppressDeprecationWarning:!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 b,this.visibleElements=new _}initialize(){this.addHandles([n(()=>[this.viewModel?.view?.widthBreakpoint,this.dockEnabled],()=>this._handleDockIcon(),s),n(()=>[this.dockEnabled,this.messages?.undock,this.messages?.dock],()=>this._handleDockEnabled(),s),n(()=>this.dockOptions,e=>{const{_dockAction:t}=this,i=this._featuresWidget.headerActions;i.remove(t),e.buttonEnabled&&i.add(t)},s),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,s),n(()=>this._featureNavigationTop,e=>this._featuresWidget.featureNavigationTop=e,s),n(()=>this.headingLevel,e=>this._featuresWidget.headingLevel=e,s),n(()=>this.visibleElements.actionBar,e=>this._featuresWidget.visibleElements.actionBar=!!e,s),n(()=>this.visibleElements.closeButton,e=>this._featuresWidget.visibleElements.closeButton=!!e,s),n(()=>this.visibleElements.collapseButton,e=>this._featuresWidget.visibleElements.collapseButton=!!e,s),n(()=>this.visibleElements.heading,e=>this._featuresWidget.visibleElements.heading=!!e,s),n(()=>this.visibleElements.spinner,e=>this._featuresWidget.visibleElements.spinner=!!e,s),n(()=>this.visibleElements.featureNavigation,e=>this._featuresWidget.visibleElements.featureNavigation=!!e,s),n(()=>this.visibleElements.featureMenuHeading,e=>this._featuresWidget.visibleElements.featureMenuHeading=!!e,s),n(()=>this.visibleElements.featureListLayerTitle,e=>this._featuresWidget.visibleElements.featureListLayerTitle=!!e,s),r(()=>this._featuresWidget,"trigger-header-action",e=>{e.action===this._dockAction&&(this.dockEnabled=!this.dockEnabled)})])}destroy(){this._dockAction.destroy(),this._featuresWidget&&(this._featuresWidget.viewModel=new f,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")||D}set dockOptions(e){const t={...D},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={[w.alignTopCenter]:"top-center"===t,[w.alignBottomCenter]:"bottom-center"===t,[w.alignTopLeft]:"top-left"===t,[w.alignBottomLeft]:"bottom-left"===t,[w.alignTopRight]:"top-right"===t,[w.alignBottomRight]:"bottom-right"===t,[w.isDocked]:s,[w.shadow]:r,[w.isDockedTopLeft]:"top-left"===i,[w.isDockedTopCenter]:"top-center"===i,[w.isDockedTopRight]:"top-right"===i,[w.isDockedBottomLeft]:"bottom-left"===i,[w.isDockedBottomCenter]:"bottom-center"===i,[w.isDockedBottomRight]:"bottom-right"===i};return k("div",{afterCreate:this._positionContainer,afterUpdate:this._positionContainer,"aria-hidden":(!o).toString(),"aria-label":d(this.title??""),"aria-modal":"false",bind:this,class:this.classes(w.base,c,{[w.baseHidden]:!n&&!e}),"data-layer-id":a,"data-layer-title":l,role:"dialog"},o?[this._renderMainContainer(),this._renderPointer()]:null)}_renderPointer(){return this.dockEnabled?null:k("div",{class:w.pointer,key:"popup-pointer",role:"presentation"},k("div",{class:this.classes(w.pointerDirection,w.shadow)}))}_renderMainContainer(){const{dockEnabled:e}=this,t={[w.shadow]:e};return k("div",{afterCreate:this._setMainContainerNode,afterUpdate:this._setMainContainerNode,bind:this,class:this.classes(w.main,M.widget,t)},this._featuresWidget.render())}_getAnimationDurationMS(){const{_containerNode:e}=this;return e?1e3*parseFloat(window.getComputedStyle(e).animationDuration):P}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}),f=this._isOutsideView({popupHeight:g,popupWidth:p,screenLocation:s,side:"left",view:r}),m=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 f?m?"bottom-right":"top-right":v?m?"bottom-left":"top-left":m?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 C(this.container)&&t.reverse(),e?.replaceAll(/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=C(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()],A.prototype,"_containerNode",void 0),e([c({readOnly:!0})],A.prototype,"_featureNavigationTop",null),e([c({type:m})],A.prototype,"actions",null),e([c({readOnly:!0})],A.prototype,"active",null),e([c()],A.prototype,"alignment",void 0),e([c()],A.prototype,"autoCloseEnabled",null),e([c()],A.prototype,"defaultPopupTemplateEnabled",null),e([c()],A.prototype,"content",null),e([c()],A.prototype,"collapsed",null),e([c({readOnly:!0})],A.prototype,"currentAlignment",null),e([c({readOnly:!0})],A.prototype,"currentDockPosition",null),e([c()],A.prototype,"dockOptions",null),e([c()],A.prototype,"dockEnabled",void 0),e([c({readOnly:!0})],A.prototype,"featureCount",null),e([c()],A.prototype,"featureMenuOpen",null),e([c()],A.prototype,"features",null),e([c()],A.prototype,"goToOverride",null),e([c()],A.prototype,"headingLevel",void 0),e([c()],A.prototype,"highlightEnabled",null),e([c()],A.prototype,"icon",null),e([c()],A.prototype,"initialDisplayMode",null),e([c({type:u})],A.prototype,"location",null),e([c()],A.prototype,"label",null),e([c(),y("esri/widgets/Popup/t9n/Popup")],A.prototype,"messages",void 0),e([c()],A.prototype,"promises",null),e([c({readOnly:!0})],A.prototype,"selectedFeature",null),e([c({readOnly:!0})],A.prototype,"selectedDrillInFeature",null),e([c()],A.prototype,"selectedFeatureIndex",null),e([c({readOnly:!0})],A.prototype,"selectedFeatureWidget",null),e([c()],A.prototype,"title",null),e([c()],A.prototype,"updateLocationEnabled",null),e([c()],A.prototype,"view",null),e([c({type:b}),E(["triggerAction","trigger-action"])],A.prototype,"viewModel",void 0),e([c()],A.prototype,"visible",null),e([c({type:_,nonNullable:!0})],A.prototype,"visibleElements",void 0),A=e([h("esri.widgets.Popup")],A);const O=A;export{O as default};