TimeSlider.js 15 KB

12345
  1. /*
  2. All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. See https://js.arcgis.com/4.24/esri/copyright.txt for details.
  4. */
  5. import{_ as e}from"../chunks/tslib.es6.js";import t from"../TimeInterval.js";import{equals as i}from"../core/arrayUtils.js";import s from"../core/Collection.js";import{neverReached as n}from"../core/compilerUtils.js";import{isSome as a,isNone as o,applySome as r}from"../core/maybe.js";import{watch as l,initial as m}from"../core/reactiveUtils.js";import{truncateDate as u,offsetDate as c}from"../core/timeUtils.js";import{aliasOf as d}from"../core/accessorSupport/decorators/aliasOf.js";import"../core/has.js";import"../core/accessorSupport/ensureType.js";import{property as p}from"../core/accessorSupport/decorators/property.js";import{subclass as v}from"../core/accessorSupport/decorators/subclass.js";import{formatDate as h,convertDateFormatToIntlOptions as w}from"../intl/date.js";import y from"./Slider.js";import f from"./Widget.js";import{accessibleHandler as x}from"./support/decorators/accessibleHandler.js";import{messageBundle as b}from"./support/decorators/messageBundle.js";import{vmEvent as _}from"./support/decorators/vmEvent.js";import{tsx as g}from"./support/jsxFactory.js";import{onResize as k}from"./support/widgetUtils.js";import{getCalciteThemeClass as j}from"../support/themeUtils.js";import T from"./TimeSlider/TimeSliderViewModel.js";const E="esri-time-slider",S={widgetIcon:"esri-icon-time-clock",esriWidget:"esri-widget",esriWidgetButton:"esri-widget--button",esriButtonDisabled:"esri-button--disabled",esriDisabled:"esri-disabled",timeSlider:`${E}`,timeSliderOutOfBounds:`${E}--out-of-bounds`,timeSliderMode:`${E}__mode--`,timeSliderLayout:`${E}__layout--`,timeSliderRow:`${E}__row`,animation:`${E}__animation`,animationButton:`${E}__animation-button`,animationPlay:"esri-icon-play",animationPause:"esri-icon-pause",timeExtent:`${E}__time-extent`,timeExtentGroup:`${E}__time-extent-group`,timeExtentDate:`${E}__time-extent-date`,timeExtentTime:`${E}__time-extent-time`,timeExtentSeparator:`${E}__time-extent-separator`,playbackControls:`${E}__playback-controls`,min:`${E}__min`,minDate:`${E}__min-date`,minTime:`${E}__min-time`,slider:`${E}__slider`,sliderMajorTick:"majorTick",sliderMinorTick:"minorTick",max:`${E}__max`,maxDate:`${E}__max-date`,maxTime:`${E}__max-time`,previous:`${E}__previous`,previousButton:`${E}__previous-button`,previousIcon:"esri-icon-reverse",next:`${E}__next`,nextButton:`${E}__next-button`,nextIcon:"esri-icon-forward",warning:`${E}__warning`,warningIcon:"esri-icon-notice-triangle",warningText:`${E}__warning-text`,hasActions:`${E}--has-actions`,actions:`${E}__actions`,actionsButton:`${E}__actions-button`},M=3,$=858,C=new s([{minor:new t({value:100,unit:"milliseconds"}),major:new t({value:1,unit:"seconds"}),format:{second:"numeric"}},{minor:new t({value:500,unit:"milliseconds"}),major:new t({value:5,unit:"seconds"}),format:{second:"numeric"}},{minor:new t({value:1,unit:"seconds"}),major:new t({value:20,unit:"seconds"}),format:{minute:"numeric",second:"numeric"}},{minor:new t({value:2,unit:"seconds"}),major:new t({value:30,unit:"seconds"}),format:{minute:"numeric",second:"numeric"}},{minor:new t({value:10,unit:"seconds"}),major:new t({value:1,unit:"minutes"}),format:{minute:"numeric"}},{minor:new t({value:15,unit:"seconds"}),major:new t({value:5,unit:"minutes"}),format:{hour:"numeric",minute:"numeric"}},{minor:new t({value:1,unit:"minutes"}),major:new t({value:20,unit:"minutes"}),format:{hour:"numeric",minute:"numeric"}},{minor:new t({value:5,unit:"minutes"}),major:new t({value:2,unit:"hours"}),format:{hour:"numeric",minute:"numeric"}},{minor:new t({value:15,unit:"minutes"}),major:new t({value:6,unit:"hours"}),format:{hour:"numeric",minute:"numeric"}},{minor:new t({value:1,unit:"hours"}),major:new t({value:1,unit:"days"}),format:{day:"numeric",month:"short"}},{minor:new t({value:6,unit:"hours"}),major:new t({value:1,unit:"weeks"}),format:{day:"numeric",month:"short"}},{minor:new t({value:1,unit:"days"}),major:new t({value:1,unit:"months"}),format:{month:"long"}},{minor:new t({value:2,unit:"days"}),major:new t({value:1,unit:"months"}),format:{month:"short"}},{minor:new t({value:3,unit:"days"}),major:new t({value:1,unit:"months"}),format:{month:"short"}},{minor:new t({value:4,unit:"days"}),major:new t({value:3,unit:"months"}),format:{month:"short",year:"numeric"}},{minor:new t({value:1,unit:"weeks"}),major:new t({value:1,unit:"years"}),format:{year:"numeric"}},{minor:new t({value:1,unit:"months"}),major:new t({value:1,unit:"years"}),format:{year:"numeric"}},{minor:new t({value:2,unit:"months"}),major:new t({value:2,unit:"years"}),format:{year:"numeric"}},{minor:new t({value:1,unit:"years"}),major:new t({value:1,unit:"decades"}),format:{year:"numeric"}},{minor:new t({value:2,unit:"years"}),major:new t({value:5,unit:"decades"}),format:{year:"numeric"}},{minor:new t({value:5,unit:"decades"}),major:new t({value:10,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:1,unit:"centuries"}),major:new t({value:10,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:2,unit:"centuries"}),major:new t({value:20,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:5,unit:"centuries"}),major:new t({value:50,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:10,unit:"centuries"}),major:new t({value:100,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:20,unit:"centuries"}),major:new t({value:200,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:50,unit:"centuries"}),major:new t({value:500,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:100,unit:"centuries"}),major:new t({value:1e3,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:200,unit:"centuries"}),major:new t({value:1e3,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:500,unit:"centuries"}),major:new t({value:5e3,unit:"centuries"}),format:{era:"short",year:"numeric"}},{minor:new t({value:1e3,unit:"centuries"}),major:new t({value:1e4,unit:"centuries"}),format:{era:"short",year:"numeric"}}]);let D=class extends f{constructor(e,t){super(e,t),this._ignoreNextSliderUpdate=!1,this._slider=new y({precision:0,visibleElements:{rangeLabels:!1},rangeLabelInputsEnabled:!1,thumbsConstrained:!1}),this._tickFormat=null,this.actions=null,this.disabled=!1,this.effectiveStops=null,this.fullTimeExtent=null,this.iconClass=S.widgetIcon,this.label=void 0,this.labelFormatFunction=null,this.loop=!1,this.messages=null,this.messagesCommon=null,this.mode="time-window",this.playRate=1e3,this.stops={count:10},this.tickConfigs=null,this.timeExtent=null,this.timeVisible=!1,this.view=null,this.viewModel=new T}initialize(){this.own([l((()=>this._slider.values),(e=>{if(this._ignoreNextSliderUpdate)return void(this._ignoreNextSliderUpdate=!1);const t=this.viewModel.valuesToTimeExtent(e);a(this.timeExtent)?a(t)?this.timeExtent.equals(t)||(this.timeExtent=t):this.timeExtent=null:a(t)&&(this.timeExtent=t)})),l((()=>this.effectiveStops),(()=>this._updateSliderSteps()),m)])}loadDependencies(){return Promise.all([import("@esri/calcite-components/dist/components/calcite-action.js"),import("@esri/calcite-components/dist/components/calcite-action-menu.js")])}destroy(){this._slider.destroy(),this._tickFormat=null}get interactive(){return!this.disabled&&this.viewModel&&"disabled"!==this.viewModel.state}set layout(e){["auto","compact","wide"].includes(e)||(e="auto"),this._set("layout",e)}static async getPropertiesFromWebMap(e,t){return T.getPropertiesFromWebMap(e,t)}next(){}play(){}previous(){}stop(){return null}render(){const{_slider:e,actions:t,domNode:s,effectiveStops:n,fullTimeExtent:l,interactive:m,messages:u,messagesCommon:c,mode:d,tickConfigs:p,timeExtent:v,timeVisible:w,viewModel:{state:y,timeExtentValues:f}}=this;if(a(l)){const{start:t,end:i}=l;if(a(t)&&a(i)){const s=t.getTime(),n=i.getTime(),o=e.min!==s||e.max!==n;if(o&&(e.min=s,e.max=n),a(p))e.tickConfigs!==p&&(e.tickConfigs=p);else{const t=(n-s)/(e.trackElement?.offsetWidth||400),i=C.find((e=>e.minor.toMilliseconds()>M*t)),a=this._tickFormat!==i&&null!=i;if(a&&(this._tickFormat=i),o||a){const t={mode:"position",values:this._getTickPositions(i.minor),labelsVisible:!1,tickCreatedFunction:(e,t)=>{t.classList.add(S.sliderMinorTick)}},s={mode:"position",values:this._getTickPositions(i.major),labelsVisible:!0,tickCreatedFunction:(e,t)=>{t.classList.add(S.sliderMajorTick)},labelFormatFunction:e=>h(e,i.format)};e.tickConfigs=[t,s]}}}}const x=o(this.fullTimeExtent)||o(this.timeExtent)||this.timeExtent.isAllTime||this.timeExtent.isEmpty||a(this.timeExtent.start)&&(this.timeExtent.start<this.fullTimeExtent.start||this.timeExtent.start>this.fullTimeExtent.end)||a(this.timeExtent.end)&&(this.timeExtent.end>this.fullTimeExtent.end||this.timeExtent.end<this.fullTimeExtent.start);if(x)switch(this._ignoreNextSliderUpdate=!0,d){case"time-window":e.values=[e.min,e.max];break;case"instant":case"cumulative-from-end":e.values=[e.min];break;case"cumulative-from-start":e.values=[e.max]}else a(f)?i(e.values,f)||(e.values=f):e.values=null;e.disabled=!m;const b="ready"===y,_="playing"===y,T=x||!m||o(n)||0===n.length,E="auto"===this.layout?s.clientWidth<$?"compact":"wide":this.layout,D=g("div",{class:S.animation},g("button",{"aria-disabled":T?"true":"false","aria-label":_?c.control.stop:c.control.play,bind:this,class:this.classes(S.esriWidgetButton,S.animationButton,T&&S.esriButtonDisabled),disabled:T,title:_?c.control.stop:c.control.play,onclick:this._playOrStopClick,type:"button"},g("div",{class:this.classes((b||T)&&S.animationPlay,_&&S.animationPause)}))),F=a(this.labelFormatFunction)?g("div",{key:"extent",bind:this,class:S.timeExtentDate,"data-type":"extent","data-layout":E,"data-date":r(v,(e=>[e.start,e.end])),afterCreate:this._createLabel,afterUpdate:this._createLabel}):o(v)||a(v)&&v.isAllTime?[g("div",{class:this.classes(S.warning,S.warningIcon)}),g("div",{key:"warning-text",class:S.warningText},u.noTimeExtent)]:v.isEmpty?[g("div",{class:this.classes(S.warning,S.warningIcon)}),g("div",{key:"warning-text",class:S.warningText},u.emptyTimeExtent)]:[a(v.start)&&g("div",{key:"start-date-group",class:S.timeExtentGroup},g("div",{key:"start-date",class:S.timeExtentDate},this._formatDate(v.start)),w&&g("div",{key:"start-time",class:S.timeExtentTime},this._formatTime(v.start))),a(v.start)&&a(v.end)&&v.start.getTime()!==v.end.getTime()&&g("div",{key:"separator",class:S.timeExtentSeparator},"–"),a(v.end)&&(o(v.start)||v.start.getTime()!==v.end.getTime())&&g("div",{key:"end-date-group",class:S.timeExtentGroup},g("div",{key:"end-date",class:S.timeExtentDate},this._formatDate(v.end)),w&&g("div",{key:"end-time",class:S.timeExtentTime},this._formatTime(v.end)))],B=g("div",{class:this.classes(S.timeExtent,!m&&S.esriButtonDisabled)},[F]),L=a(this.labelFormatFunction)?g("div",{key:"min-date",bind:this,class:S.minDate,"data-date":r(l,(e=>e.start)),"data-type":"min","data-layout":E,afterCreate:this._createLabel,afterUpdate:this._createLabel}):a(l)&&a(l.start)&&[g("div",{key:"min-date",class:S.minDate},this._formatDate(l.start)),w&&g("div",{key:"min-time",class:S.minTime},this._formatTime(l.start))],U=g("div",{class:this.classes(S.min,!m&&S.esriButtonDisabled)},[L]),W=g("div",{class:S.slider},e.render()),I=a(this.labelFormatFunction)?g("div",{key:"max-date",bind:this,class:S.maxDate,"data-date":r(l,(e=>e.end)),"data-type":"max","data-layout":E,afterCreate:this._createLabel,afterUpdate:this._createLabel}):a(l)&&a(l.end)&&[g("div",{key:"max-date",class:S.maxDate},this._formatDate(l.end)),w&&g("div",{key:"max-time",class:S.maxTime},this._formatTime(l.end))],O=g("div",{class:this.classes(S.max,!m&&S.esriButtonDisabled)},[I]),P=g("div",{class:S.previous},g("button",{"aria-disabled":T?"true":"false","aria-label":c.pagination.previous,bind:this,class:this.classes(S.esriWidgetButton,S.previousButton,(_||T)&&S.esriButtonDisabled),disabled:T,title:c.pagination.previous,onclick:this._previousClick,type:"button"},g("div",{class:S.previousIcon}))),A=g("div",{class:S.next},g("button",{"aria-disabled":T?"true":"false","aria-label":c.pagination.next,bind:this,class:this.classes(S.esriWidgetButton,S.nextButton,(_||T)&&S.esriButtonDisabled),disabled:T,title:c.pagination.next,onclick:this._nextClick,type:"button"},g("div",{class:S.nextIcon}))),R=t?.length>0,V=R&&g("div",{class:S.actions,title:c.options},g("calcite-action-menu",{label:c.options,class:S.actionsButton},t.toArray().map((e=>g("calcite-action",{bind:this,icon:e.icon,id:e.id,onCalciteActionClick:()=>this.viewModel.triggerAction(e),text:e.title,textEnabled:!0})))));return g("div",{class:this.classes(S.timeSlider,S.esriWidget,`${S.timeSliderMode}${d}`,`${S.timeSliderLayout}${E}`,!m&&S.esriDisabled,x&&S.timeSliderOutOfBounds,R&&S.hasActions,j()),afterCreate:e=>{this.own(k(e,(()=>this.scheduleRender())))},"aria-label":u.widgetLabel},"wide"===E&&g("div",{class:S.timeSliderRow},g("div",{class:S.playbackControls},[D,B,U,W,O,P,A]),V),"compact"===E&&[g("div",{key:"time-slider-row-1",class:S.timeSliderRow},[B,V]),g("div",{key:"time-slider-row-2",class:S.timeSliderRow},[W]),g("div",{key:"time-slider-row-3",class:S.timeSliderRow},[U,P,D,A,O])])}updateWebDocument(e){this.viewModel?.updateWebDocument(e)}_createLabel(e){if(o(this.labelFormatFunction))return;const t=e.getAttribute("data-type"),i=e.getAttribute("data-layout"),s=e["data-date"];this.labelFormatFunction(s,t,e,i)}_getTickPositions(e){const{fullTimeExtent:t}=this;if(o(t)||o(t.start)||o(t.end))return[];const{start:i,end:s}=t,n=[],{value:a,unit:r}=e;let l=u(i,r);for(;l.getTime()<=s.getTime();)l.getTime()>=i.getTime()&&n.push(l.getTime()),l=c(l,a,r);return n}_formatDate(e){return e?h(e,w("short-date")):null}_formatTime(e){return e?h(e,w("long-time")):null}_updateSliderSteps(){this._slider.steps=a(this.effectiveStops)&&this.effectiveStops.length>0?this.effectiveStops.map((e=>e.getTime())):null}_playOrStopClick(){switch(this.viewModel.state){case"ready":this.viewModel.play();break;case"playing":this.viewModel.stop();break;case"disabled":break;default:n(this.viewModel.state)}}_previousClick(){this.viewModel.previous()}_nextClick(){this.viewModel.next()}};e([d("viewModel.actions")],D.prototype,"actions",void 0),e([p()],D.prototype,"disabled",void 0),e([d("viewModel.effectiveStops")],D.prototype,"effectiveStops",void 0),e([d("viewModel.fullTimeExtent")],D.prototype,"fullTimeExtent",void 0),e([p()],D.prototype,"iconClass",void 0),e([p({readOnly:!0})],D.prototype,"interactive",null),e([p({aliasOf:{source:"messages.widgetLabel",overridable:!0}})],D.prototype,"label",void 0),e([p()],D.prototype,"labelFormatFunction",void 0),e([p({value:"auto"})],D.prototype,"layout",null),e([d("viewModel.loop")],D.prototype,"loop",void 0),e([p(),b("esri/widgets/TimeSlider/t9n/TimeSlider")],D.prototype,"messages",void 0),e([p(),b("esri/t9n/common")],D.prototype,"messagesCommon",void 0),e([d("viewModel.mode")],D.prototype,"mode",void 0),e([d("viewModel.playRate")],D.prototype,"playRate",void 0),e([d("viewModel.stops")],D.prototype,"stops",void 0),e([p()],D.prototype,"tickConfigs",void 0),e([d("viewModel.timeExtent")],D.prototype,"timeExtent",void 0),e([p({nonNullable:!0})],D.prototype,"timeVisible",void 0),e([d("viewModel.view")],D.prototype,"view",void 0),e([p({type:T}),_("trigger-action")],D.prototype,"viewModel",void 0),e([d("viewModel.next")],D.prototype,"next",null),e([d("viewModel.play")],D.prototype,"play",null),e([d("viewModel.previous")],D.prototype,"previous",null),e([d("viewModel.stop")],D.prototype,"stop",null),e([x()],D.prototype,"_playOrStopClick",null),e([x()],D.prototype,"_previousClick",null),e([x()],D.prototype,"_nextClick",null),D=e([v("esri.widgets.TimeSlider")],D);const F=D;export{F as default};