@arcgis/core/widgets/TimeSlider.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 t}from"tslib";import{equals as e}from"../core/arrayUtils.js";import i from"../core/Collection.js";import{deprecateWidget as a}from"../core/deprecate.js";import r from"../core/Logger.js";import{watch as n,initial as s}from"../core/reactiveUtils.js";import{truncateDate as o,offsetDate as l}from"../core/timeUtils.js";import{property as m,subclass as u}from"../core/accessorSupport/decorators.js";import{formatDate as c,convertDateFormatToIntlOptions as d}from"../intl/date.js";import{getCalciteModeClass as p}from"../support/modeUtils.js";import{unknown as h,system as v}from"../time/constants.js";import f from"../time/TimeExtent.js";import y from"../time/TimeInterval.js";import g from"./Slider.js";import b from"./Widget.js";import{loadCalciteComponents as x}from"./support/componentsUtils.js";import{globalCss as w}from"./support/globalCss.js";import{messageBundle as E,vmEvent as k,tsx as j}from"./support/widget.js";import{onResize as T}from"./support/widgetUtils.js";import{css as _}from"./TimeSlider/css.js";import S from"./TimeSlider/TimeSliderViewModel.js";const M=3,F=858,D=[{minor:{value:100,unit:"milliseconds"},major:{value:1,unit:"seconds"},format:{second:"numeric"}},{minor:{value:500,unit:"milliseconds"},major:{value:5,unit:"seconds"},format:{second:"numeric"}},{minor:{value:1,unit:"seconds"},major:{value:20,unit:"seconds"},format:{minute:"numeric",second:"numeric"}},{minor:{value:2,unit:"seconds"},major:{value:30,unit:"seconds"},format:{minute:"numeric",second:"numeric"}},{minor:{value:10,unit:"seconds"},major:{value:1,unit:"minutes"},format:{minute:"numeric"}},{minor:{value:15,unit:"seconds"},major:{value:5,unit:"minutes"},format:{hour:"numeric",minute:"numeric"}},{minor:{value:1,unit:"minutes"},major:{value:20,unit:"minutes"},format:{hour:"numeric",minute:"numeric"}},{minor:{value:5,unit:"minutes"},major:{value:2,unit:"hours"},format:{hour:"numeric",minute:"numeric"}},{minor:{value:15,unit:"minutes"},major:{value:6,unit:"hours"},format:{hour:"numeric",minute:"numeric"}},{minor:{value:1,unit:"hours"},major:{value:1,unit:"days"},format:{day:"numeric",month:"short"}},{minor:{value:6,unit:"hours"},major:{value:1,unit:"weeks"},format:{day:"numeric",month:"short"}},{minor:{value:1,unit:"days"},major:{value:1,unit:"months"},format:{month:"long"}},{minor:{value:2,unit:"days"},major:{value:1,unit:"months"},format:{month:"short"}},{minor:{value:3,unit:"days"},major:{value:1,unit:"months"},format:{month:"short"}},{minor:{value:4,unit:"days"},major:{value:3,unit:"months"},format:{month:"short",year:"numeric"}},{minor:{value:1,unit:"weeks"},major:{value:1,unit:"years"},format:{year:"numeric"}},{minor:{value:1,unit:"months"},major:{value:1,unit:"years"},format:{year:"numeric"}},{minor:{value:2,unit:"months"},major:{value:2,unit:"years"},format:{year:"numeric"}},{minor:{value:5,unit:"months"},major:{value:5,unit:"years"},format:{year:"numeric"}},{minor:{value:1,unit:"years"},major:{value:20,unit:"years"},format:{year:"numeric"}},{minor:{value:2,unit:"years"},major:{value:50,unit:"years"},format:{year:"numeric"}},{minor:{value:5,unit:"years"},major:{value:100,unit:"years"},format:{year:"numeric"}},{minor:{value:10,unit:"years"},major:{value:200,unit:"years"},format:{era:"short",year:"numeric"}},{minor:{value:20,unit:"years"},major:{value:500,unit:"years"},format:{era:"short",year:"numeric"}},{minor:{value:50,unit:"years"},major:{value:1e3,unit:"years"},format:{era:"short",year:"numeric"}},{minor:{value:1,unit:"centuries"},major:{value:20,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:2,unit:"centuries"},major:{value:50,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:5,unit:"centuries"},major:{value:100,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:10,unit:"centuries"},major:{value:200,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:20,unit:"centuries"},major:{value:500,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:50,unit:"centuries"},major:{value:1e3,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:100,unit:"centuries"},major:{value:2e3,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:200,unit:"centuries"},major:{value:5e3,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:500,unit:"centuries"},major:{value:1e4,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:1e3,unit:"centuries"},major:{value:2e4,unit:"centuries"},format:{era:"short",year:"numeric"}}];function C(t){return j("div",{class:_.warning},j("calcite-icon",{class:_.warningIcon,icon:"exclamation-mark-triangle"}),j("calcite-label",{alignment:"center",class:_.warningLabel,scale:"s"},t))}let L=class extends b{constructor(t,e){super(t,e),this._allLayouts=["auto","compact","wide"],this._ignoreNextSliderUpdate=!1,this._slider=new g({suppressDeprecationWarning:!0,precision:0,visibleElements:{rangeLabels:!1},rangeLabelInputsEnabled:!1,thumbsConstrained:!1}),this._tickFormat=null,this.disabled=!1,this.labelFormatFunction=null,this.messages=null,this.tickConfigs=null,this.timeVisible=!1,this.viewModel=new S,this.announceDeprecation=()=>{a(r.getLogger(this),"Time Slider","arcgis-time-slider",{version:"5.0"})}}initialize(){this.addHandles([n(()=>this._slider.values,t=>{if(this._ignoreNextSliderUpdate)return void(this._ignoreNextSliderUpdate=!1);const e=this.viewModel.valuesToTimeExtent(t);this.timeExtent?e?this.timeExtent.equals(e)||(this.timeExtent=e):this.timeExtent=null:e&&(this.timeExtent=e)}),n(()=>this.effectiveStops,()=>this._updateSliderSteps(),s)])}loadDependencies(){return x({action:()=>import("@esri/calcite-components/dist/components/calcite-action"),"action-menu":()=>import("@esri/calcite-components/dist/components/calcite-action-menu"),button:()=>import("@esri/calcite-components/dist/components/calcite-button"),icon:()=>import("@esri/calcite-components/dist/components/calcite-icon"),label:()=>import("@esri/calcite-components/dist/components/calcite-label")})}destroy(){this._slider.destroy(),this._tickFormat=null}get _dateFormat(){return this._getIntlOptions("short-date")}get _timeFormat(){return this._getIntlOptions("long-time")}get actions(){return this.viewModel.actions}set actions(t){this.viewModel.actions=t}get effectiveStops(){return this.viewModel.effectiveStops}get fullTimeExtent(){return this.viewModel.fullTimeExtent}set fullTimeExtent(t){this.viewModel.fullTimeExtent=t}get icon(){return"clock"}set icon(t){this._overrideIfSome("icon",t)}get interactive(){return!(this.disabled||"disabled"===this.viewModel.state||this.timeZone===h)}get label(){return this.messages?.widgetLabel??""}set label(t){this._overrideIfSome("label",t)}set layout(t){this._set("layout",this._allLayouts.includes(t)?t:"auto")}get loop(){return this.viewModel.loop}set loop(t){this.viewModel.loop=t}get mode(){return this.viewModel.mode}set mode(t){this.viewModel.mode=t}get playRate(){return this.viewModel.playRate}set playRate(t){this.viewModel.playRate=t}get stops(){return this.viewModel.stops}set stops(t){this.viewModel.stops=t}get tickFormats(){const{timeZone:t}=this;return D.map(({minor:e,major:i,format:a})=>({minor:new y(e),major:new y(i),format:{...a,timeZone:t}}))}get timeExtent(){return this.viewModel.timeExtent}set timeExtent(t){this.viewModel.timeExtent=t}get timeZone(){return this.viewModel.view?.timeZone??v}set timeZone(t){this._overrideIfSome("timeZone",t)}get view(){return this.viewModel.view}set view(t){this.viewModel.view=t}next(){return this.viewModel.next()}play(){return this.viewModel.play()}previous(){return this.viewModel.previous()}stop(){return this.viewModel.stop()}render(){const{_slider:t,actions:i,domNode:a,effectiveStops:r,fullTimeExtent:n,interactive:s,messages:o,mode:l,tickConfigs:m,timeExtent:u,timeVisible:d,viewModel:{state:h,timeExtentValues:v}}=this;if(n){const{start:e,end:i}=n;if(e&&i){const a=e.getTime(),r=i.getTime(),n=t.min!==a||t.max!==r;if(n&&(t.min=a,t.max=r),m)t.tickConfigs!==m&&(t.tickConfigs=m);else{const e=(r-a)/(t.trackElement?.offsetWidth||400),i=this.tickFormats.find(({minor:t})=>t.toMilliseconds()>M*e)??this.tickFormats.at(-1),s=i&&this._tickFormat!==i;if(s&&(this._tickFormat=i),n||s){const e={mode:"position",values:this._getTickPositions(i.minor),labelsVisible:!1,tickCreatedFunction:(t,e)=>{e?.classList.add(_.sliderMinorTick)}},a={mode:"position",values:this._getTickPositions(i.major),labelsVisible:!0,tickCreatedFunction:(t,e)=>{e?.classList.add(_.sliderMajorTick)},labelFormatFunction:t=>c(t,i.format)};t.tickConfigs=[e,a]}}}}const f=!this.fullTimeExtent?.start||!this.fullTimeExtent.end||!this.timeExtent||this.timeExtent.isAllTime||this.timeExtent.isEmpty||this.timeExtent.start&&(this.timeExtent.start<this.fullTimeExtent.start||this.timeExtent.start>this.fullTimeExtent.end)||this.timeExtent.end&&(this.timeExtent.end>this.fullTimeExtent.end||this.timeExtent.end<this.fullTimeExtent.start);if(f)switch(this._ignoreNextSliderUpdate=!0,l){case"time-window":t.values=[t.min,t.max];break;case"instant":case"cumulative-from-end":t.values=[t.min];break;case"cumulative-from-start":t.values=[t.max]}else v?e(t.values,v)||(t.values=v):t.values=null;t.disabled=!s;const y=f||!s||!r?.length,g="auto"===this.layout?a.clientWidth<F?"compact":"wide":this.layout,b=j("calcite-button",{appearance:"transparent",bind:this,class:_.play,disabled:y,iconStart:"playing"===h?"pause":"play",kind:"neutral",label:"playing"===h?o.control.stop:o.control.play,onclick:this._playOrStopClick,scale:"wide"===g?"l":"m",width:"full"}),x=this.labelFormatFunction?j("div",{afterCreate:this._createLabel,afterUpdate:this._createLabel,bind:this,class:_.timeExtentStartDate,"data-date":u?[u.start,u.end]:null,"data-layout":g,"data-type":"extent",key:_.timeExtentStartDate}):!u||u.isAllTime?C(o.noTimeExtent):u.isEmpty?C(o.emptyTimeExtent):[u?.start&&j("div",{class:_.timeExtentStartGroup,key:_.timeExtentStartGroup},j("calcite-label",{alignment:"center",class:_.timeExtentStartDate,key:_.timeExtentStartDate,scale:"s"},this._formatDate(u.start)),d?j("calcite-label",{alignment:"center",class:_.timeExtentStartTime,key:_.timeExtentStartTime,scale:"s"},this._formatTime(u.start)):null),u.start&&u.end&&u.start.getTime()!==u.end.getTime()&&j("div",{class:_.timeExtentSeparator,key:_.timeExtentSeparator}),u?.end&&(!u.start||u.start.getTime()!==u.end.getTime())&&j("div",{class:_.timeExtentEndGroup,key:_.timeExtentEndGroup},j("calcite-label",{alignment:"center",class:_.timeExtentEndDate,key:_.timeExtentEndDate,scale:"s"},this._formatDate(u.end)),d?j("calcite-label",{alignment:"center",class:_.timeExtentEndTime,key:_.timeExtentEndTime,scale:"s"},this._formatTime(u.end)):null)],E=j("div",{class:_.timeExtent},x),k=this.labelFormatFunction?j("div",{afterCreate:this._createLabel,afterUpdate:this._createLabel,bind:this,class:_.minDate,"data-date":n?.start,"data-layout":g,"data-type":"min",key:_.minDate}):n?.start&&[j("calcite-label",{class:_.minDate,key:_.minDate,scale:"s"},this._formatDate(n.start)),d&&j("calcite-label",{class:_.minTime,key:_.minTime,scale:"s"},this._formatTime(n.start))],S=j("div",{class:_.min},k),D=j("div",{class:_.slider},t.render()),L=this.labelFormatFunction?j("div",{afterCreate:this._createLabel,afterUpdate:this._createLabel,bind:this,class:_.maxDate,"data-date":n?.end,"data-layout":g,"data-type":"max",key:_.maxDate}):n?.end&&[j("calcite-label",{class:_.maxDate,key:_.maxDate,scale:"s"},this._formatDate(n.end)),d&&j("calcite-label",{class:_.maxTime,key:_.maxTime,scale:"s"},this._formatTime(n.end))],U=j("div",{class:_.max},L),Z=j("calcite-button",{appearance:"transparent",bind:this,class:_.previous,disabled:y||"playing"===h,iconStart:"reverse",kind:"neutral",label:o.pagination.previous,onclick:this._previousClick,scale:"wide"===g?"l":"m",width:"full"}),R=j("calcite-button",{appearance:"transparent",bind:this,class:_.next,disabled:y||"playing"===h,iconStart:"forward",kind:"neutral",label:o.pagination.next,onclick:this._nextClick,scale:"wide"===g?"l":"m",width:"full"}),I=i?.length>0,O=I&&j("calcite-action-menu",{class:_.actions,label:o.options},i.toArray().map(t=>j("calcite-action",{bind:this,icon:t.icon,id:t.id,onclick:()=>this.viewModel.triggerAction(t),text:t.title,textEnabled:!0})));return j("div",{afterCreate:t=>{this.addHandles(T(t,()=>this.scheduleRender()))},"aria-label":o.widgetLabel,class:this.classes(_.timeSlider,w.widget,`${_.timeSliderMode}${l}`,`${_.timeSliderLayout}${g}`,!s&&_.timeSliderDisabled,f&&_.timeSliderOutOfBounds,I&&_.hasActions,p(this.container))},"wide"===g&&j("div",{class:_.timeSliderRow},j("div",{class:_.playbackControls},[b,E,S,D,U,Z,R]),O),"compact"===g&&[j("div",{class:_.timeSliderRow,key:"time-slider-row-1"},[E,O]),j("div",{class:_.timeSliderRow,key:"time-slider-row-2"},[D]),j("div",{class:_.timeSliderRow,key:"time-slider-row-3"},[S,Z,b,R,U])])}updateWebDocument(t){this.viewModel?.updateWebDocument(t)}_createLabel(t){if(!this.labelFormatFunction)return;const e=t.getAttribute("data-type"),i=t.getAttribute("data-layout"),a=t["data-date"];this.labelFormatFunction(a,e,t,i)}_formatDate(t){return c(t,this._dateFormat)}_formatTime(t){return c(t,this._timeFormat)}_getIntlOptions(t){const{timeZone:e}=this;return{...d(t),timeZone:e}}_getTickPositions(t){const{fullTimeExtent:e}=this;if(!e?.start||!e.end)return[];const{start:i,end:a}=e,r=[],{value:n,unit:s}=t;let m=o(i,s,this.timeZone);for(;m.getTime()<=a.getTime();)m.getTime()>=i.getTime()&&r.push(m.getTime()),m=l(m,n,s,this.timeZone);return r}_updateSliderSteps(){this._slider.steps=this.effectiveStops&&this.effectiveStops.length>0?this.effectiveStops.map(t=>t.getTime()):null}_playOrStopClick(){switch(this.viewModel.state){case"ready":this.viewModel.play();break;case"playing":this.viewModel.stop();break;case"disabled":break;default:this.viewModel.state}}_previousClick(){this.viewModel.previous()}_nextClick(){this.viewModel.next()}};t([m()],L.prototype,"_dateFormat",null),t([m()],L.prototype,"_timeFormat",null),t([m({type:i})],L.prototype,"actions",null),t([m()],L.prototype,"disabled",void 0),t([m()],L.prototype,"effectiveStops",null),t([m({type:f})],L.prototype,"fullTimeExtent",null),t([m()],L.prototype,"icon",null),t([m({readOnly:!0})],L.prototype,"interactive",null),t([m()],L.prototype,"label",null),t([m()],L.prototype,"labelFormatFunction",void 0),t([m({value:"auto"})],L.prototype,"layout",null),t([m()],L.prototype,"loop",null),t([m(),E("esri/widgets/TimeSlider/t9n/TimeSlider")],L.prototype,"messages",void 0),t([m()],L.prototype,"mode",null),t([m()],L.prototype,"playRate",null),t([m()],L.prototype,"stops",null),t([m()],L.prototype,"tickConfigs",void 0),t([m()],L.prototype,"tickFormats",null),t([m({type:f})],L.prototype,"timeExtent",null),t([m({nonNullable:!0})],L.prototype,"timeVisible",void 0),t([m()],L.prototype,"timeZone",null),t([m()],L.prototype,"view",null),t([m({type:S}),k("trigger-action")],L.prototype,"viewModel",void 0),L=t([u("esri.widgets.TimeSlider")],L);const U=L;export{U as default};