@arcgis/core/widgets/Feature/FeatureMedia.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"../../intl.js";import{prefersReducedMotion as t}from"../../core/a11yUtils.js";import{watch as i,initial as r}from"../../core/reactiveUtils.js";import{property as a}from"../../core/accessorSupport/decorators/property.js";import"../../core/has.js";import"../../core/Logger.js";import"../../core/RandomLCG.js";import{subclass as o}from"../../core/accessorSupport/decorators/subclass.js";import{getColorsFromRenderer as s}from"../../renderers/support/utils.js";import n from"../Widget.js";import l from"./FeatureMedia/FeatureMediaViewModel.js";import d from"./support/FeatureElementInfo.js";import{shouldOpenInNewTab as m}from"./support/featureUtils.js";import{loadCalciteComponents as c}from"../support/componentsUtils.js";import{isRTL as h}from"../support/widgetUtils.js";import{messageBundle as p}from"../support/decorators/messageBundle.js";import{tsx as u}from"../support/jsxFactory.js";import{isDarkMode as f}from"../../support/modeUtils.js";import{substitute as g}from"../../intl/substitute.js";const _="esri-feature-media",M={base:_,mediaContainer:`${_}__container`,mediaItemContainer:`${_}__item-container`,mediaItem:`${_}__item`,mediaItemText:`${_}__item-text`,mediaItemTitle:`${_}__item-title`,mediaItemCaption:`${_}__item-caption`,mediaNavigation:`${_}__item-navigation`,mediaPagination:`${_}__pagination`,mediaPaginationText:`${_}__pagination-text`,mediaChart:`${_}__chart`,mediaPaginationButton:`${_}__pagination-button`,mediaPaginationIcon:`${_}__pagination-icon`,mediaChartRendered:`${_}__chart--rendered`},v=15,w="category",A="value",I="rgba(50, 50, 50, 1)",C=250,y=500,x=200;let T=class extends n{constructor(e,t){super(e,t),this._refreshTimer=null,this._refreshIntervalInfo=null,this._featureElementInfo=null,this._chartRootMap=new WeakMap,this.viewModel=new l,this.messages=null,this._disposeChart=e=>{this._chartRootMap.get(e)?.dispose(),this._chartRootMap.delete(e)},this._createChart=async e=>{const{destroyed:t,viewModel:i}=this;if(t||!i||!e)return;const{createRoot:r}=await import("../support/chartUtilsAm5.js"),a=await r(e);this._chartRootMap.set(e,a),this._renderChart({mediaInfo:i.activeMediaInfo,root:a})}}initialize(){this._featureElementInfo=new d,this.addHandles([i((()=>[this.viewModel?.activeMediaInfo,this.viewModel?.activeMediaInfoIndex]),(()=>this._setupMediaRefreshTimer()),r),i((()=>[this.viewModel?.description,this.viewModel?.title]),(()=>this._setupFeatureElementInfo()),r)])}loadDependencies(){return c({icon:()=>import("@esri/calcite-components/dist/components/calcite-icon")})}destroy(){this._clearMediaRefreshTimer(),this._featureElementInfo?.destroy()}get attributes(){return this.viewModel.attributes}set attributes(e){this.viewModel.attributes=e}get activeMediaInfoIndex(){return this.viewModel.activeMediaInfoIndex}set activeMediaInfoIndex(e){this.viewModel.activeMediaInfoIndex=e}get description(){return this.viewModel.description}set description(e){this.viewModel.description=e}get fieldInfoMap(){return this.viewModel.fieldInfoMap}set fieldInfoMap(e){this.viewModel.fieldInfoMap=e}get layer(){return this.viewModel.layer}set layer(e){this.viewModel.layer=e}get mediaInfos(){return this.viewModel.mediaInfos}set mediaInfos(e){this.viewModel.mediaInfos=e}get popupTemplate(){return this.viewModel.popupTemplate}set popupTemplate(e){this.viewModel.popupTemplate=e}get relatedInfos(){return this.viewModel.relatedInfos}set relatedInfos(e){this.viewModel.relatedInfos=e}get title(){return this.viewModel.title}set title(e){this.viewModel.title=e}render(){return u("div",{bind:this,class:M.base,onkeyup:this._handleMediaKeyup},this._featureElementInfo?.render(),this._renderMedia())}_renderMedia(){const{formattedMediaInfoCount:e,activeMediaInfoIndex:t}=this.viewModel,i=this._renderMediaText();return e?u("div",{class:M.mediaContainer,key:"media-element-container"},this._renderMediaInfo(),u("div",{class:M.mediaNavigation},i,e>1?u("div",{class:M.mediaPagination},this._renderMediaPageButton("previous"),u("span",{class:M.mediaPaginationText},g(this.messages.pageText,{index:t+1,total:e})),this._renderMediaPageButton("next")):null)):null}_renderMediaText(){const{activeMediaInfo:e}=this.viewModel;if(!e)return null;const t=e&&e.title?u("div",{class:M.mediaItemTitle,innerHTML:e.title,key:"media-title"}):null,i=e&&e.caption?u("div",{class:M.mediaItemCaption,innerHTML:e.caption,key:"media-caption"}):null;return t||i?u("div",{class:M.mediaItemText,key:"media-text"},t,i):null}_renderImageMediaInfo(e){if(!e.value)return null;const{_refreshIntervalInfo:t}=this,{activeMediaInfoIndex:i,formattedMediaInfoCount:r}=this.viewModel,{value:a,refreshInterval:o,altText:s,title:n,type:l}=e,{sourceURL:d,linkURL:c}=a,h=m(c??void 0)?"_blank":"_self",p="_blank"===h?"noreferrer":"",f=o?t:null,g=f?f.timestamp:0,_=f?f.sourceURL:d,M=u("img",{alt:s||n,key:`media-${l}-${i}-${r}-${g}`,src:_??void 0});return(c?u("a",{href:c,rel:p,target:h,title:n},M):null)??M}_renderChartMediaInfo(e){const{activeMediaInfoIndex:t,formattedMediaInfoCount:i}=this.viewModel;return u("div",{afterCreate:this._createChart,afterRemoved:this._disposeChart,bind:this,class:M.mediaChart,key:`media-${e.type}-${t}-${i}`})}_renderMediaInfoType(){const{activeMediaInfo:e}=this.viewModel;return e?"image"===e.type?this._renderImageMediaInfo(e):e.type.includes("chart")?this._renderChartMediaInfo(e):null:null}_renderMediaInfo(){const{activeMediaInfo:e}=this.viewModel;return e?u("div",{class:M.mediaItemContainer,key:"media-container"},u("div",{class:M.mediaItem,key:"media-item-container"},this._renderMediaInfoType())):null}_renderMediaPageButton(e){if(this.viewModel.formattedMediaInfoCount<2)return null;const t="previous"===e,i=t?this.messages.previous:this.messages.next,r=t?"chevron-left":"chevron-right",a=t?"media-previous":"media-next",o=t?this._previous:this._next;return u("button",{"aria-label":i,bind:this,class:M.mediaPaginationButton,key:a,onclick:o,tabIndex:0,title:i,type:"button"},u("calcite-icon",{class:M.mediaPaginationIcon,icon:r,scale:"s"}))}_setupFeatureElementInfo(){const{description:e,title:t}=this;this._featureElementInfo?.set({description:e,title:t})}_next(){this.viewModel.next()}_previous(){this.viewModel.previous()}_getRenderer(){if(!this.viewModel)return;const{isAggregate:e,layer:t}=this.viewModel;return e&&t?.featureReduction&&"renderer"in t.featureReduction?t.featureReduction.renderer:t?.renderer}async _getSeriesColors(e){const{colorAm5:t}=await import("./FeatureMedia/chartCommon.js"),i=new Map;return e.forEach((e=>{e.color&&i.set(e,t(e.color.toCss(!0)))})),i}async _getRendererColors(){const{colorAm5:e}=await import("./FeatureMedia/chartCommon.js"),t=new Map,i=this._getRenderer(),r="default";if(!i)return t;const a=await s(i);a.delete(r);return Array.from(a.values()).every((e=>1===e?.length))?(Array.from(a.keys()).forEach((i=>{const r=a.get(i)?.[0]?.toCss(!0);r&&t.set(i,e(r))})),t):t}_handleMediaKeyup(e){const{key:t}=e;"ArrowLeft"===t&&(e.stopPropagation(),this.viewModel.previous()),"ArrowRight"===t&&(e.stopPropagation(),this.viewModel.next())}_canAnimateChart(){return!!this.viewModel&&(!!this.viewModel.abilities.chartAnimation&&!t())}_getChartAnimationMS(){return this._canAnimateChart()?C:0}_getChartSeriesAnimationMS(){return this._canAnimateChart()?y:0}async _renderChart(e){const{root:t,mediaInfo:i}=e,{value:r,type:a}=i,{ResponsiveThemeAm5:o,DarkThemeAm5:s,AnimatedThemeAm5:n,ColorSetAm5:l,ThemeAm5:d,esriChartColorSet:m}=await import("./FeatureMedia/chartCommon.js"),c=d.new(t);c.rule("ColorSet").set("colors",m),c.rule("ColorSet").set("reuse",!0);const h=[o.new(t),c];f()&&h.push(s.new(t)),this._canAnimateChart()&&h.push(n.new(t)),t.setThemes(h);const p=await this._getRendererColors(),u=await this._getSeriesColors(r.series),g=l.new(t,{}),_=u.get(r.series[0]),M=_?{lineSettings:{stroke:_}}:void 0,v=r.series.map(((e,t)=>{const i=u.get(e)||p.get(e.fieldName)||g.getIndex(t);return{[w]:e.tooltip,[A]:e.value,columnSettings:{fill:i,stroke:i},...M}})).filter((e=>"pie-chart"!==a||null!=e.value&&e.value>0));"pie-chart"===a?this._createPieChart(e,v):this._createXYChart(e,v)}_getDirection(){return h(this.container)?"rtl":"ltr"}async _customizeChartTooltip(e,t="horizontal"){const{colorAm5:i}=await import("./FeatureMedia/chartCommon.js");e.setAll({pointerOrientation:t}),e.get("background")?.setAll({stroke:i(I)}),e.label.setAll({direction:this._getDirection(),oversizedBehavior:"wrap",maxWidth:x})}async _createPieChart(e,t){const{TooltipAm5:i}=await import("./FeatureMedia/chartCommon.js"),{PieChartAm5:r,PieSeriesAm5:a}=await import("./FeatureMedia/pieChart.js"),{mediaInfo:o,root:s}=e,{title:n}=o,l=5,d=o?.altText||o?.title||"",m=s.container.children.push(r.new(s,{ariaLabel:d,focusable:!0,paddingBottom:l,paddingTop:l,paddingLeft:l,paddingRight:l})),c="{category}: {valuePercentTotal.formatNumber('0.00')}%\n ({value})",h=i.new(s,{labelText:c}),p=m.series.push(a.new(s,{name:n,valueField:A,categoryField:w,tooltip:h}));p.ticks.template.set("forceHidden",!0),p.labels.template.set("forceHidden",!0),p.slices.template.states.create("active",{shiftRadius:l}),this._customizeChartTooltip(h),p.slices.template.setAll({ariaLabel:c,focusable:!0,templateField:"columnSettings"}),p.data.setAll(t),p.appear(this._getChartSeriesAnimationMS()),m.appear(this._getChartAnimationMS()),m.root.dom.classList.toggle(M.mediaChartRendered,!0)}_getMinSeriesValue(e){let t=0;return e.forEach((e=>t=Math.min(e.value,t))),t}async _createColumnChart(e,t,i){const{TooltipAm5:r,ScrollbarAm5:a}=await import("./FeatureMedia/chartCommon.js"),{CategoryAxisAm5:o,AxisRendererXAm5:s,ValueAxisAm5:n,AxisRendererYAm5:l,ColumnSeriesAm5:d}=await import("./FeatureMedia/xyChart.js"),{mediaInfo:m,root:c}=t,{value:p,title:u}=m;e.setAll({wheelX:"panX",wheelY:"zoomX"});const f=e.xAxes.push(o.new(c,{renderer:s.new(c,{inversed:h(this.container)}),categoryField:w}));f.get("renderer").labels.template.setAll({forceHidden:!0});const g=e.yAxes.push(n.new(c,{renderer:l.new(c,{inside:!1}),min:this._getMinSeriesValue(p.series)}));g.get("renderer").labels.template.setAll({direction:this._getDirection()});const _="{categoryX}",M=r.new(c,{labelText:_}),I=e.series.push(d.new(c,{name:u,xAxis:f,yAxis:g,valueYField:A,categoryXField:w,tooltip:M}));this._customizeChartTooltip(M),I.columns.template.setAll({ariaLabel:_,focusable:!0,templateField:"columnSettings"}),p.series.length>v&&e.set("scrollbarX",a.new(c,{orientation:"horizontal"})),f.data.setAll(i),I.data.setAll(i),I.appear(this._getChartSeriesAnimationMS()),e.appear(this._getChartAnimationMS())}async _createBarChart(e,t,i){const{TooltipAm5:r,ScrollbarAm5:a}=await import("./FeatureMedia/chartCommon.js"),{CategoryAxisAm5:o,AxisRendererXAm5:s,ValueAxisAm5:n,AxisRendererYAm5:l,ColumnSeriesAm5:d}=await import("./FeatureMedia/xyChart.js"),{mediaInfo:m,root:c}=t,{value:p,title:u}=m;e.setAll({wheelX:"panY",wheelY:"zoomY"});const f=e.yAxes.push(o.new(c,{renderer:l.new(c,{inversed:!0}),categoryField:w}));f.get("renderer").labels.template.setAll({forceHidden:!0});const g=e.xAxes.push(n.new(c,{renderer:s.new(c,{inside:!1,inversed:h(this.container)}),min:this._getMinSeriesValue(p.series)}));g.get("renderer").labels.template.setAll({direction:this._getDirection()});const _="{categoryY}",M=r.new(c,{labelText:_}),I=e.series.push(d.new(c,{name:u,xAxis:g,yAxis:f,valueXField:A,categoryYField:w,tooltip:M}));this._customizeChartTooltip(M,"vertical"),I.columns.template.setAll({ariaLabel:_,focusable:!0,templateField:"columnSettings"}),p.series.length>v&&e.set("scrollbarY",a.new(c,{orientation:"vertical"})),f.data.setAll(i),I.data.setAll(i),I.appear(this._getChartSeriesAnimationMS()),e.appear(this._getChartAnimationMS())}async _createLineChart(e,t,i){const{TooltipAm5:r,ScrollbarAm5:a}=await import("./FeatureMedia/chartCommon.js"),{CategoryAxisAm5:o,AxisRendererXAm5:s,ValueAxisAm5:n,AxisRendererYAm5:l,LineSeriesAm5:d}=await import("./FeatureMedia/xyChart.js"),{root:m,mediaInfo:c}=t,{value:p,title:u}=c;e.setAll({wheelX:"panX",wheelY:"zoomX"});const f=e.xAxes.push(o.new(m,{renderer:s.new(m,{inversed:h(this.container)}),categoryField:w}));f.get("renderer").labels.template.setAll({forceHidden:!0});const g=e.yAxes.push(n.new(m,{renderer:l.new(m,{inside:!1}),min:this._getMinSeriesValue(p.series)}));g.get("renderer").labels.template.setAll({direction:this._getDirection()});const _="{categoryX}",M=i[0]?.lineSettings?.stroke,I=r.new(m,{getFillFromSprite:!M,labelText:_});M&&I.get("background")?.setAll({fill:M});const C=e.series.push(d.new(m,{name:u,xAxis:f,yAxis:g,valueYField:A,categoryXField:w,tooltip:I}));C.strokes.template.setAll({templateField:"lineSettings"}),this._customizeChartTooltip(I,"vertical"),p.series.length>v&&e.set("scrollbarX",a.new(m,{orientation:"horizontal"})),f.data.setAll(i),C.data.setAll(i),C.appear(this._getChartSeriesAnimationMS()),e.appear(this._getChartAnimationMS())}async _createXYChart(e,t){const{XYChartAm5:i,XYCursorAm5:r}=await import("./FeatureMedia/xyChart.js"),{root:a,mediaInfo:o}=e,{type:s}=o,n=o?.altText||o?.title||"",l=a.container.children.push(i.new(a,{ariaLabel:n,focusable:!0,panX:!0,panY:!0}));l.set("cursor",r.new(a,{})),"column-chart"===s&&await this._createColumnChart(l,e,t),"bar-chart"===s&&await this._createBarChart(l,e,t),"line-chart"===s&&await this._createLineChart(l,e,t),l.root.dom.classList.toggle(M.mediaChartRendered,!0)}_clearMediaRefreshTimer(){const{_refreshTimer:e}=this;e&&(clearTimeout(e),this._refreshTimer=null)}_updateMediaInfoTimestamp(e){const t=Date.now();this._refreshIntervalInfo={timestamp:t,sourceURL:e&&this._getImageSource(e,t)}}_setupMediaRefreshTimer(){this._clearMediaRefreshTimer();const{activeMediaInfo:e}=this.viewModel;"image"===e?.type&&e?.refreshInterval>0&&this._setRefreshTimeout(e)}_setRefreshTimeout(e){const{refreshInterval:t,value:i}=e,r=6e4*t;this._updateMediaInfoTimestamp(i.sourceURL);const a=setInterval((()=>{this._updateMediaInfoTimestamp(i.sourceURL)}),r);this._refreshTimer=a}_getImageSource(e,t){const i=e.includes("?")?"&":"?",[r,a=""]=e.split("#");return`${r}${i}timestamp=${t}${a?"#":""}${a}`}};e([a()],T.prototype,"_refreshIntervalInfo",void 0),e([a()],T.prototype,"attributes",null),e([a()],T.prototype,"activeMediaInfoIndex",null),e([a()],T.prototype,"description",null),e([a()],T.prototype,"fieldInfoMap",null),e([a()],T.prototype,"layer",null),e([a()],T.prototype,"mediaInfos",null),e([a()],T.prototype,"popupTemplate",null),e([a()],T.prototype,"relatedInfos",null),e([a()],T.prototype,"title",null),e([a({type:l})],T.prototype,"viewModel",void 0),e([a(),p("esri/widgets/Feature/t9n/Feature")],T.prototype,"messages",void 0),T=e([o("esri.widgets.Feature.FeatureMedia")],T);export{T as default};