@doegis/core/widgets/Feature/FeatureMedia.js

DOE GIS API

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/accessorSupport/ensureType.js";import"../../core/arrayUtils.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 u,getColorSet as m}from"../support/chartUtils.js";import{isRTL as h}from"../support/widgetUtils.js";import{messageBundle as p}from"../support/decorators/messageBundle.js";import{tsx as f}from"../support/jsxFactory.js";import{isDarkTheme as v}from"../../support/themeUtils.js";const M="esri-feature-media",I={base:M,mediaContainer:`${M}__container`,mediaItemContainer:`${M}__item-container`,mediaItem:`${M}__item`,mediaItemTitle:`${M}__item-title`,mediaItemCaption:`${M}__item-caption`,mediaPrevious:`${M}__previous`,mediaPreviousIconLTR:`${M}__previous-icon`,mediaPreviousIconRTL:`${M}__previous-icon--rtl`,mediaNext:`${M}__next`,mediaNextIconLTR:`${M}__next-icon`,mediaNextIconRTL:`${M}__next-icon--rtl`,mediaChart:`${M}__chart`,mediaButton:`${M}__button`,mediaIcon:`${M}__icon`,iconLeftTriangleArrow:"esri-icon-left-triangle-arrow",iconRightTriangleArrow:"esri-icon-right-triangle-arrow"},_=.05,g=.95,w=15,y="color",T="tooltip",b="value",C="default-line-value";let x=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 u(),{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:I.base,onkeyup:this._handleMediaKeyup},this._featureElementInfo?.render(),this.renderMedia())}renderMedia(){const{formattedMediaInfoCount:e}=this.viewModel;return e?f("div",{key:"media-element-container",class:I.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:u}=s,m=c(u??void 0)?"_blank":"_self",h="_blank"===m?"noreferrer":"",p=a?t:null,v=p?p.timestamp:0,M=p?p.sourceURL:d,I=f("img",{alt:o||n,key:`media-${l}-${i}-${r}-${v}`,src:M??void 0}),_=u?f("a",{title:n,href:u,rel:h,target:m},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:I.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:I.mediaItemTitle,innerHTML:e.title}):null,i=e.caption?f("div",{key:"media-caption",class:I.mediaItemCaption,innerHTML:e.caption}):null;return f("div",{key:"media-container",class:I.mediaItemContainer},f("div",{key:"media-item-container",class:I.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(I.mediaButton,I.mediaPrevious):this.classes(I.mediaButton,I.mediaNext),s=t?this.classes(I.mediaIcon,I.mediaPreviousIconLTR,I.iconLeftTriangleArrow):this.classes(I.mediaIcon,I.mediaNextIconLTR,I.iconRightTriangleArrow),a=t?this.classes(I.mediaIcon,I.mediaPreviousIconRTL,I.iconRightTriangleArrow):this.classes(I.mediaIcon,I.mediaNextIconRTL,I.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()}_getRenderer(){const{isAggregate:e,layer:t}=this.viewModel;return e&&t?.featureReduction&&"renderer"in t.featureReduction?t.featureReduction.renderer:t?.renderer}async _getRendererColors(e){const{am4core:t}=e,i=new Map,r=this._getRenderer(),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(C,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=m(l);function c(e){e instanceof l.ColorSet&&d&&(e.list=d)}v()&&l.useTheme(i.am4themes_dark);const u=window.matchMedia("(prefers-reduced-motion: reduce)");t.chartAnimation&&!u.matches?l.useTheme(i.am4themes_animated):l.unuseTheme(i.am4themes_animated),l.useTheme(c);const h="pie-chart"===n?this._createPieChart(e):this._createXYChart(e);r.setAttribute("aria-label",s.altText||s.title),h.data=o.series.map((e=>({[T]:e.tooltip,[b]:e.value,[y]:a.get(e.fieldName)}))).filter((e=>"pie-chart"!==n||null!=e.value&&e.value>0))}_customizeChartTooltip(e,t){e&&(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=h(this.container);const o=a.series.push(new s.PieSeries);return o.labels.template.disabled=!0,o.ticks.template.disabled=!0,o.dataFields.value=b,o.dataFields.category=T,this._customizeChartTooltip(o.tooltip,r),o.slices.template.propertyFields.fill=y,o.slices.template.propertyFields.stroke=y,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=T,n.renderer.labels.template.disabled=!0;const l=n.tooltip;this._customizeChartTooltip(l,a),l.events.on("sizechanged",(()=>{l.dy=-l.contentHeight}));const d=e.yAxes.push(new o.ValueAxis),c=d.renderer.labels.template;d.renderer.minLabelPosition=_,d.renderer.maxLabelPosition=g,d.min=this._getMinSeriesValue(s.series),this._customizeChartTooltip(d.tooltip,a),c.wrap=!0;const u=e.series.push(new o.ColumnSeries);u.dataFields.valueY=b,u.dataFields.categoryX=T,u.columns.template.propertyFields.fill=y,u.columns.template.propertyFields.stroke=y,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=T,n.renderer.inversed=!0,n.renderer.labels.template.disabled=!0;const l=n.tooltip;this._customizeChartTooltip(l,a),l.events.on("sizechanged",(()=>{l.dx=l.contentWidth}));const d=e.xAxes.push(new o.ValueAxis),c=d.renderer.labels.template;d.renderer.minLabelPosition=_,d.renderer.maxLabelPosition=g,d.min=this._getMinSeriesValue(s.series),this._customizeChartTooltip(d.tooltip,a),c.wrap=!0;const u=e.series.push(new o.ColumnSeries);u.dataFields.valueX=b,u.dataFields.categoryY=T,u.columns.template.propertyFields.fill=y,u.columns.template.propertyFields.stroke=y,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=T,l.renderer.labels.template.disabled=!0;const d=l.tooltip;this._customizeChartTooltip(d,o),d.events.on("sizechanged",(()=>{d.dy=-d.contentHeight}));const c=e.yAxes.push(new n.ValueAxis),u=c.renderer.labels.template;c.renderer.minLabelPosition=_,c.renderer.maxLabelPosition=g,c.min=this._getMinSeriesValue(a.series),this._customizeChartTooltip(c.tooltip,o),u.wrap=!0;const m=e.series.push(new n.LineSeries);m.dataFields.categoryX=T,m.dataFields.valueY=b,m.strokeWidth=1;const h=s.get(C);h&&(m.stroke=h);const p=m.bullets.push(new n.CircleBullet);p.propertyFields.fill=y,p.propertyFields.stroke=y,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=h(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:e&&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()],x.prototype,"attributes",null),e([s()],x.prototype,"activeMediaInfoIndex",null),e([s()],x.prototype,"description",null),e([s()],x.prototype,"fieldInfoMap",null),e([s()],x.prototype,"layer",null),e([s()],x.prototype,"mediaInfos",null),e([s()],x.prototype,"popupTemplate",null),e([s()],x.prototype,"relatedInfos",null),e([s()],x.prototype,"title",null),e([s({type:l})],x.prototype,"viewModel",void 0),e([s(),p("esri/widgets/Feature/t9n/Feature")],x.prototype,"messages",void 0),x=e([a("esri.widgets.Feature.FeatureMedia")],x);const R=x;export{R as default};