jtBaseApp/node_modules/@arcgis/core/widgets/Feature/FeatureMedia.js

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.25/esri/copyright.txt for details.
*/
import{_ as e}from"../../chunks/tslib.es6.js";import{eventKey as t}from"../../core/events.js";import{watch as i,initial as r}from"../../core/reactiveUtils.js";import{property as s}from"../../core/accessorSupport/decorators/property.js";import"../../core/arrayUtils.js";import"../../core/accessorSupport/ensureType.js";import{subclass as a}from"../../core/accessorSupport/decorators/subclass.js";import{getColorsFromRenderer as o}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 c}from"./support/featureUtils.js";import{loadChartsModule as m,getColorSet as u}from"../support/chartUtils.js";import{isRTL as p}from"../support/widgetUtils.js";import{messageBundle as h}from"../support/decorators/messageBundle.js";import{tsx as f}from"../support/jsxFactory.js";import{isDarkTheme as v}from"../../support/themeUtils.js";const M={base:"esri-feature-media",mediaContainer:"esri-feature-media__container",mediaItemContainer:"esri-feature-media__item-container",mediaItem:"esri-feature-media__item",mediaItemTitle:"esri-feature-media__item-title",mediaItemCaption:"esri-feature-media__item-caption",mediaPrevious:"esri-feature-media__previous",mediaPreviousIconLTR:"esri-feature-media__previous-icon",mediaPreviousIconRTL:"esri-feature-media__previous-icon--rtl",mediaNext:"esri-feature-media__next",mediaNextIconLTR:"esri-feature-media__next-icon",mediaNextIconRTL:"esri-feature-media__next-icon--rtl",mediaChart:"esri-feature-media__chart",mediaButton:"esri-feature-media__button",mediaIcon:"esri-feature-media__icon",iconLeftTriangleArrow:"esri-icon-left-triangle-arrow",iconRightTriangleArrow:"esri-icon-right-triangle-arrow"},I=.05,_=.95,w=15,g="color",y="tooltip",T="value",b="default-line-value";let C=class extends n{constructor(e,t){super(e,t),this._refreshTimer=null,this._refreshIntervalInfo=null,this._featureElementInfo=null,this.viewModel=new l,this.messages=null,this._getChartDependencies=async e=>{const t=await m(),{destroyed:i,viewModel:r}=this;if(i||!r||!e)return;const{activeMediaInfo:s}=r,a=await this._getRendererColors(t);this._renderChart({chartDiv:e,mediaInfo:s,chartsModule:t,colorMap: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)])}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 f("div",{bind:this,class:M.base,onkeyup:this._handleMediaKeyup},this._featureElementInfo?.render(),this.renderMedia())}renderMedia(){const{formattedMediaInfoCount:e}=this.viewModel;return e?f("div",{key:"media-element-container",class:M.mediaContainer},this.renderMediaPageButton("previous"),this.renderMediaInfo(),this.renderMediaPageButton("next")):null}renderImageMediaInfo(e){const{_refreshIntervalInfo:t}=this,{activeMediaInfoIndex:i,formattedMediaInfoCount:r}=this.viewModel,{value:s,refreshInterval:a,altText:o,title:n,type:l}=e,{sourceURL:d,linkURL:m}=s,u=c(m)?"_blank":"_self",p="_blank"===u?"noreferrer":"",h=a?t:null,v=h?h.timestamp:0,M=h?h.sourceURL:d,I=f("img",{alt:o||n,key:`media-${l}-${i}-${r}-${v}`,src:M}),_=m?f("a",{title:n,href:m,rel:p,target:u},I):null;return _||I}renderChartMediaInfo(e){const{activeMediaInfoIndex:t,formattedMediaInfoCount:i}=this.viewModel;return f("div",{key:`media-${e.type}-${t}-${i}`,bind:this,class:M.mediaChart,afterCreate:this._getChartDependencies})}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;if(!e)return null;const t=e.title?f("div",{key:"media-title",class:M.mediaItemTitle,innerHTML:e.title}):null,i=e.caption?f("div",{key:"media-caption",class:M.mediaItemCaption,innerHTML:e.caption}):null;return f("div",{key:"media-container",class:M.mediaItemContainer},f("div",{key:"media-item-container",class:M.mediaItem},this.renderMediaInfoType()),t,i)}renderMediaPageButton(e){if(this.viewModel.formattedMediaInfoCount<2)return null;const t="previous"===e,i=t?this.messages.previous:this.messages.next,r=t?this.classes(M.mediaButton,M.mediaPrevious):this.classes(M.mediaButton,M.mediaNext),s=t?this.classes(M.mediaIcon,M.mediaPreviousIconLTR,M.iconLeftTriangleArrow):this.classes(M.mediaIcon,M.mediaNextIconLTR,M.iconRightTriangleArrow),a=t?this.classes(M.mediaIcon,M.mediaPreviousIconRTL,M.iconRightTriangleArrow):this.classes(M.mediaIcon,M.mediaNextIconRTL,M.iconLeftTriangleArrow),o=t?"media-previous":"media-next",n=t?this._previous:this._next;return f("button",{type:"button",key:o,title:i,"aria-label":i,tabIndex:0,class:r,bind:this,onclick:n},f("span",{"aria-hidden":"true",class:s}),f("span",{"aria-hidden":"true",class:a}))}_setupFeatureElementInfo(){const{description:e,title:t}=this;this._featureElementInfo.set({description:e,title:t})}_next(){this.viewModel.next()}_previous(){this.viewModel.previous()}async _getRendererColors(e){const{am4core:t}=e,i=new Map,r=this.viewModel?.layer?.renderer,s="default";if(!r)return i;const a=await o(r);a.delete(s);return Array.from(a.values()).every((e=>1===e?.length))?(i.set(b,t.color({r:50,g:50,b:50,a:1})),Array.from(a.keys()).forEach((e=>{e&&i.set(e,t.color(a.get(e)[0].toCss(!0)))})),i):i}_handleMediaKeyup(e){const i=t(e);"ArrowLeft"===i&&(e.stopPropagation(),this.viewModel.previous()),"ArrowRight"===i&&(e.stopPropagation(),this.viewModel.next())}_renderChart(e){const{abilities:t}=this.viewModel,{chartsModule:i,chartDiv:r,mediaInfo:s,colorMap:a}=e,{value:o,type:n}=s,{am4core:l}=i,d=u(l);function c(e){e instanceof l.ColorSet&&d&&(e.list=d)}v()&&l.useTheme(i.am4themes_dark);const m=window.matchMedia("(prefers-reduced-motion: reduce)");t.chartAnimation&&!m.matches?l.useTheme(i.am4themes_animated):l.unuseTheme(i.am4themes_animated),l.useTheme(c);const p="pie-chart"===n?this._createPieChart(e):this._createXYChart(e);r.setAttribute("aria-label",s.altText||s.title),p.data=o.series.map((e=>({[y]:e.tooltip,[T]:e.value,[g]:a.get(e.fieldName)}))).filter((e=>"pie-chart"!==n||e.value>0))}_customizeChartTooltip(e,t){e.label.wrap=!0,e.label.maxWidth=200,e.autoTextColor=!1,e.getFillFromObject=!1,e.label.fill=t.color("#ffffff"),e.background.fill=t.color({r:0,g:0,b:0,a:.7})}_createPieChart(e){const{chartDiv:t,chartsModule:i}=e,{am4core:r,am4charts:s}=i,a=r.create(t,s.PieChart);a.rtl=p(this.container);const o=a.series.push(new s.PieSeries);return o.labels.template.disabled=!0,o.ticks.template.disabled=!0,o.dataFields.value=T,o.dataFields.category=y,this._customizeChartTooltip(o.tooltip,r),o.slices.template.propertyFields.fill=g,o.slices.template.propertyFields.stroke=g,a}_getMinSeriesValue(e){let t=0;return e.forEach((e=>t=Math.min(e.value,t))),t}_createColumnChart(e,t){const{chartsModule:i,mediaInfo:r}=t,{value:s}=r,{am4core:a,am4charts:o}=i,n=e.xAxes.push(new o.CategoryAxis);n.dataFields.category=y,n.renderer.labels.template.disabled=!0,this._customizeChartTooltip(n.tooltip,a),n.tooltip.events.on("sizechanged",(()=>{n.tooltip.dy=-n.tooltip.contentHeight}));const l=e.yAxes.push(new o.ValueAxis),d=l.renderer.labels.template;l.renderer.minLabelPosition=I,l.renderer.maxLabelPosition=_,l.min=this._getMinSeriesValue(s.series),this._customizeChartTooltip(l.tooltip,a),d.wrap=!0;const c=e.series.push(new o.ColumnSeries);c.dataFields.valueY=T,c.dataFields.categoryX=y,c.columns.template.propertyFields.fill=g,c.columns.template.propertyFields.stroke=g,e.cursor=new o.XYCursor,s.series.length>w&&(e.scrollbarX=new a.Scrollbar)}_createBarChart(e,t){const{chartsModule:i,mediaInfo:r}=t,{value:s}=r,{am4core:a,am4charts:o}=i,n=e.yAxes.push(new o.CategoryAxis);n.dataFields.category=y,n.renderer.inversed=!0,n.renderer.labels.template.disabled=!0,this._customizeChartTooltip(n.tooltip,a),n.tooltip.events.on("sizechanged",(()=>{n.tooltip.dx=n.tooltip.contentWidth}));const l=e.xAxes.push(new o.ValueAxis),d=l.renderer.labels.template;l.renderer.minLabelPosition=I,l.renderer.maxLabelPosition=_,l.min=this._getMinSeriesValue(s.series),this._customizeChartTooltip(l.tooltip,a),d.wrap=!0;const c=e.series.push(new o.ColumnSeries);c.dataFields.valueX=T,c.dataFields.categoryY=y,c.columns.template.propertyFields.fill=g,c.columns.template.propertyFields.stroke=g,e.cursor=new o.XYCursor,s.series.length>w&&(e.scrollbarY=new a.Scrollbar)}_createLineChart(e,t){const{chartsModule:i,mediaInfo:r,colorMap:s}=t,{value:a}=r,{am4core:o,am4charts:n}=i,l=e.xAxes.push(new n.CategoryAxis);l.dataFields.category=y,l.renderer.labels.template.disabled=!0,this._customizeChartTooltip(l.tooltip,o),l.tooltip.events.on("sizechanged",(()=>{l.tooltip.dy=-l.tooltip.contentHeight}));const d=e.yAxes.push(new n.ValueAxis),c=d.renderer.labels.template;d.renderer.minLabelPosition=I,d.renderer.maxLabelPosition=_,d.min=this._getMinSeriesValue(a.series),this._customizeChartTooltip(d.tooltip,o),c.wrap=!0;const m=e.series.push(new n.LineSeries);m.dataFields.categoryX=y,m.dataFields.valueY=T,m.strokeWidth=1;const u=s.get(b);u&&(m.stroke=u);const p=m.bullets.push(new n.CircleBullet);p.propertyFields.fill=g,p.propertyFields.stroke=g,e.cursor=new n.XYCursor,a.series.length>w&&(e.scrollbarX=new o.Scrollbar)}_createXYChart(e){const{chartDiv:t,chartsModule:i,mediaInfo:r}=e,{type:s}=r,{am4core:a,am4charts:o}=i,n=a.create(t,o.XYChart);return n.rtl=p(this.container),"column-chart"===s&&this._createColumnChart(n,e),"bar-chart"===s&&this._createBarChart(n,e),"line-chart"===s&&this._createLineChart(n,e),n}_clearMediaRefreshTimer(){const{_refreshTimer:e}=this;e&&(clearTimeout(e),this._refreshTimer=null)}_updateMediaInfoTimestamp(e){const t=Date.now();this._refreshIntervalInfo={timestamp:t,sourceURL:this._getImageSource(e,t)},this.scheduleRender()}_setupMediaRefreshTimer(){this._clearMediaRefreshTimer();const{activeMediaInfo:e}=this.viewModel;e&&"image"===e.type&&e.refreshInterval&&this._setRefreshTimeout(e)}_setRefreshTimeout(e){const{refreshInterval:t,value:i}=e;if(!t)return;const r=6e4*t;this._updateMediaInfoTimestamp(i.sourceURL);const s=setInterval((()=>{this._updateMediaInfoTimestamp(i.sourceURL)}),r);this._refreshTimer=s}_getImageSource(e,t){const i=e.includes("?")?"&":"?",[r,s=""]=e.split("#");return`${r}${i}timestamp=${t}${s?"#":""}${s}`}};e([s()],C.prototype,"attributes",null),e([s()],C.prototype,"activeMediaInfoIndex",null),e([s()],C.prototype,"description",null),e([s()],C.prototype,"fieldInfoMap",null),e([s()],C.prototype,"layer",null),e([s()],C.prototype,"mediaInfos",null),e([s()],C.prototype,"popupTemplate",null),e([s()],C.prototype,"relatedInfos",null),e([s()],C.prototype,"title",null),e([s({type:l})],C.prototype,"viewModel",void 0),e([s(),h("esri/widgets/Feature/t9n/Feature")],C.prototype,"messages",void 0),C=e([a("esri.widgets.Feature.FeatureMedia")],C);const x=C;export{x as default};