UNPKG

@arcgis/core

Version:

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

js.arcgis.com

6 lines (5 loc) • 15.1 kB
1
2
3
4
5
6
/* All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://js.arcgis.com/4.32/esri/copyright.txt for details. */ import{_ as t}from"../chunks/tslib.es6.js";import{equals as e}from"../core/arrayUtils.js";import{neverReached as i}from"../core/compilerUtils.js";import{watch as s,initial as o}from"../core/reactiveUtils.js";import{truncateDate as a,offsetDate as n}from"../core/timeUtils.js";import{property as r}from"../core/accessorSupport/decorators/property.js";import"../core/Logger.js";import{subclass as l}from"../core/accessorSupport/decorators/subclass.js";import{formatDate as m,convertDateFormatToIntlOptions as u}from"../intl/date.js";import{unknown as d,system as c}from"../time/constants.js";import p from"../time/TimeInterval.js";import h from"./Slider.js";import v from"./Widget.js";import{loadCalciteComponents as f}from"./support/componentsUtils.js";import{globalCss as y}from"./support/globalCss.js";import{legacyIcon as g}from"./support/legacyIcon.js";import{accessibleHandler as b}from"./support/decorators/accessibleHandler.js";import{messageBundle as x}from"./support/decorators/messageBundle.js";import{vmEvent as w}from"./support/decorators/vmEvent.js";import{tsx as k}from"./support/jsxFactory.js";import{onResize as j}from"./support/widgetUtils.js";import{getCalciteThemeClass as _}from"../support/themeUtils.js";import{css as T}from"./TimeSlider/css.js";import E from"./TimeSlider/TimeSliderViewModel.js";const M=3,S=858,F=[{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:1,unit:"years"},major:{value:1,unit:"decades"},format:{year:"numeric"}},{minor:{value:2,unit:"years"},major:{value:5,unit:"decades"},format:{year:"numeric"}},{minor:{value:5,unit:"decades"},major:{value:10,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:1,unit:"centuries"},major:{value:10,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:2,unit:"centuries"},major:{value:20,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:5,unit:"centuries"},major:{value:50,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:10,unit:"centuries"},major:{value:100,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:20,unit:"centuries"},major:{value:200,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:50,unit:"centuries"},major:{value:500,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:100,unit:"centuries"},major:{value:1e3,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:200,unit:"centuries"},major:{value:1e3,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:500,unit:"centuries"},major:{value:5e3,unit:"centuries"},format:{era:"short",year:"numeric"}},{minor:{value:1e3,unit:"centuries"},major:{value:1e4,unit:"centuries"},format:{era:"short",year:"numeric"}}];let C=class extends v{constructor(t,e){super(t,e),this._ignoreNextSliderUpdate=!1,this._slider=new h({precision:0,visibleElements:{rangeLabels:!1},rangeLabelInputsEnabled:!1,thumbsConstrained:!1}),this._tickFormat=null,this.disabled=!1,this.labelFormatFunction=null,this.messages=null,this.messagesCommon=null,this.tickConfigs=null,this.timeVisible=!1,this.viewModel=new E}initialize(){this.addHandles([s((()=>this._slider.values),(t=>{if(this._ignoreNextSliderUpdate)return void(this._ignoreNextSliderUpdate=!1);const e=this.viewModel.valuesToTimeExtent(t);null!=this.timeExtent?null!=e?this.timeExtent.equals(e)||(this.timeExtent=e):this.timeExtent=null:null!=e&&(this.timeExtent=e)})),s((()=>this.effectiveStops),(()=>this._updateSliderSteps()),o)])}loadDependencies(){return f({action:()=>import("@esri/calcite-components/dist/components/calcite-action"),"action-menu":()=>import("@esri/calcite-components/dist/components/calcite-action-menu")})}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===d)}get label(){return this.messages?.widgetLabel??""}set label(t){this._overrideIfSome("label",t)}set layout(t){["auto","compact","wide"].includes(t)||(t="auto"),this._set("layout",t)}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 F.map((({minor:e,major:i,format:s})=>({minor:new p(e),major:new p(i),format:{...s,timeZone:t}})))}get timeExtent(){return this.viewModel.timeExtent}set timeExtent(t){this.viewModel.timeExtent=t}get timeZone(){return this.viewModel.view?.timeZone??c}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:s,effectiveStops:o,fullTimeExtent:a,interactive:n,messages:r,messagesCommon:l,mode:u,tickConfigs:d,timeExtent:c,timeVisible:p,viewModel:{state:h,timeExtentValues:v}}=this;if(null!=a){const{start:e,end:i}=a;if(null!=e&&null!=i){const s=e.getTime(),o=i.getTime(),a=t.min!==s||t.max!==o;if(a&&(t.min=s,t.max=o),null!=d)t.tickConfigs!==d&&(t.tickConfigs=d);else{const e=(o-s)/(t.trackElement?.offsetWidth||400),i=this.tickFormats.find((t=>t.minor.toMilliseconds()>M*e))??this.tickFormats.at(-1),n=this._tickFormat!==i&&null!=i;if(n&&(this._tickFormat=i),a||n){const e={mode:"position",values:this._getTickPositions(i.minor),labelsVisible:!1,tickCreatedFunction:(t,e)=>{e?.classList.add(T.sliderMinorTick)}},s={mode:"position",values:this._getTickPositions(i.major),labelsVisible:!0,tickCreatedFunction:(t,e)=>{e?.classList.add(T.sliderMajorTick)},labelFormatFunction:t=>m(t,i.format)};t.tickConfigs=[e,s]}}}}const f=null==this.fullTimeExtent?.start||null==this.fullTimeExtent.end||null==this.timeExtent||this.timeExtent.isAllTime||this.timeExtent.isEmpty||null!=this.timeExtent.start&&(this.timeExtent.start<this.fullTimeExtent.start||this.timeExtent.start>this.fullTimeExtent.end)||null!=this.timeExtent.end&&(this.timeExtent.end>this.fullTimeExtent.end||this.timeExtent.end<this.fullTimeExtent.start);if(f)switch(this._ignoreNextSliderUpdate=!0,u){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 null!=v?e(t.values,v)||(t.values=v):t.values=null;t.disabled=!n;const b="ready"===h,x="playing"===h,w=f||!n||null==o||0===o.length,E="auto"===this.layout?s.clientWidth<S?"compact":"wide":this.layout,F=k("div",{class:T.animation},k("button",{"aria-disabled":w?"true":"false","aria-label":x?l.control.stop:l.control.play,bind:this,class:this.classes(y.widgetButton,T.animationButton,w&&y.buttonDisabled),disabled:w,onclick:this._playOrStopClick,title:x?l.control.stop:l.control.play,type:"button"},k("div",{class:this.classes((b||w)&&g.play,x&&g.pause)}))),C=null!=this.labelFormatFunction?k("div",{afterCreate:this._createLabel,afterUpdate:this._createLabel,bind:this,class:T.timeExtentDate,"data-date":c?[c.start,c.end]:null,"data-layout":E,"data-type":"extent",key:"extent"}):null==c||null!=c&&c.isAllTime?[k("div",{class:this.classes(T.warning,g.noticeTriangle)}),k("div",{class:T.warningText,key:"warning-text"},r.noTimeExtent)]:c.isEmpty?[k("div",{class:this.classes(T.warning,g.noticeTriangle)}),k("div",{class:T.warningText,key:"warning-text"},r.emptyTimeExtent)]:[null!=c.start&&k("div",{class:T.timeExtentGroup,key:"start-date-group"},k("div",{class:T.timeExtentDate,key:"start-date"},this._formatDate(c.start)),p?k("div",{class:T.timeExtentTime,key:"start-time"},this._formatTime(c.start)):null),null!=c.start&&null!=c.end&&c.start.getTime()!==c.end.getTime()&&k("div",{class:T.timeExtentSeparator,key:"separator"},"–"),null!=c.end&&(null==c.start||c.start.getTime()!==c.end.getTime())&&k("div",{class:T.timeExtentGroup,key:"end-date-group"},k("div",{class:T.timeExtentDate,key:"end-date"},this._formatDate(c.end)),p?k("div",{class:T.timeExtentTime,key:"end-time"},this._formatTime(c.end)):null)],D=k("div",{class:this.classes(T.timeExtent,!n&&y.buttonDisabled)},[C]),L=null!=this.labelFormatFunction?k("div",{afterCreate:this._createLabel,afterUpdate:this._createLabel,bind:this,class:T.minDate,"data-date":a?.start,"data-layout":E,"data-type":"min",key:"min-date"}):null!=a?.start&&[k("div",{class:T.minDate,key:"min-date"},this._formatDate(a.start)),p&&k("div",{class:T.minTime,key:"min-time"},this._formatTime(a.start))],U=k("div",{class:this.classes(T.min,!n&&y.buttonDisabled)},[L]),Z=k("div",{class:T.slider},t.render()),R=null!=this.labelFormatFunction?k("div",{afterCreate:this._createLabel,afterUpdate:this._createLabel,bind:this,class:T.maxDate,"data-date":a?.end,"data-layout":E,"data-type":"max",key:"max-date"}):null!=a?.end&&[k("div",{class:T.maxDate,key:"max-date"},this._formatDate(a.end)),p&&k("div",{class:T.maxTime,key:"max-time"},this._formatTime(a.end))],B=k("div",{class:this.classes(T.max,!n&&y.buttonDisabled)},[R]),I=k("div",{class:T.previous},k("button",{"aria-disabled":w?"true":"false","aria-label":l.pagination.previous,bind:this,class:this.classes(y.widgetButton,T.previousButton,(x||w)&&y.buttonDisabled),disabled:w,onclick:this._previousClick,title:l.pagination.previous,type:"button"},k("div",{class:g.reverse}))),O=k("div",{class:T.next},k("button",{"aria-disabled":w?"true":"false","aria-label":l.pagination.next,bind:this,class:this.classes(y.widgetButton,T.nextButton,(x||w)&&y.buttonDisabled),disabled:w,onclick:this._nextClick,title:l.pagination.next,type:"button"},k("div",{class:g.forward}))),A=i?.length>0,V=A&&k("div",{class:T.actions,title:l.options},k("calcite-action-menu",{class:T.actionsButton,label:l.options},i.toArray().map((t=>k("calcite-action",{bind:this,icon:t.icon,id:t.id,onclick:()=>this.viewModel.triggerAction(t),text:t.title,textEnabled:!0,title:t.title})))));return k("div",{afterCreate:t=>{this.addHandles(j(t,(()=>this.scheduleRender())))},"aria-label":r.widgetLabel,class:this.classes(T.timeSlider,y.widget,`${T.timeSliderMode}${u}`,`${T.timeSliderLayout}${E}`,!n&&y.disabled,f&&T.timeSliderOutOfBounds,A&&T.hasActions,_())},"wide"===E&&k("div",{class:T.timeSliderRow},k("div",{class:T.playbackControls},[F,D,U,Z,B,I,O]),V),"compact"===E&&[k("div",{class:T.timeSliderRow,key:"time-slider-row-1"},[D,V]),k("div",{class:T.timeSliderRow,key:"time-slider-row-2"},[Z]),k("div",{class:T.timeSliderRow,key:"time-slider-row-3"},[U,I,F,O,B])])}updateWebDocument(t){this.viewModel?.updateWebDocument(t)}_createLabel(t){if(null==this.labelFormatFunction)return;const e=t.getAttribute("data-type"),i=t.getAttribute("data-layout"),s=t["data-date"];this.labelFormatFunction(s,e,t,i)}_formatDate(t){return m(t,this._dateFormat)}_formatTime(t){return m(t,this._timeFormat)}_getIntlOptions(t){const{timeZone:e}=this;return{...u(t),timeZone:e}}_getTickPositions(t){const{fullTimeExtent:e}=this;if(null==e?.start||null==e.end)return[];const{start:i,end:s}=e,o=[],{value:r,unit:l}=t;let m=a(i,l,this.timeZone);for(;m.getTime()<=s.getTime();)m.getTime()>=i.getTime()&&o.push(m.getTime()),m=n(m,r,l,this.timeZone);return o}_updateSliderSteps(){this._slider.steps=null!=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:i(this.viewModel.state)}}_previousClick(){this.viewModel.previous()}_nextClick(){this.viewModel.next()}};t([r()],C.prototype,"_dateFormat",null),t([r()],C.prototype,"_timeFormat",null),t([r()],C.prototype,"actions",null),t([r()],C.prototype,"disabled",void 0),t([r()],C.prototype,"effectiveStops",null),t([r()],C.prototype,"fullTimeExtent",null),t([r()],C.prototype,"icon",null),t([r({readOnly:!0})],C.prototype,"interactive",null),t([r()],C.prototype,"label",null),t([r()],C.prototype,"labelFormatFunction",void 0),t([r({value:"auto"})],C.prototype,"layout",null),t([r()],C.prototype,"loop",null),t([r(),x("esri/widgets/TimeSlider/t9n/TimeSlider")],C.prototype,"messages",void 0),t([r(),x("esri/t9n/common")],C.prototype,"messagesCommon",void 0),t([r()],C.prototype,"mode",null),t([r()],C.prototype,"playRate",null),t([r()],C.prototype,"stops",null),t([r()],C.prototype,"tickConfigs",void 0),t([r()],C.prototype,"tickFormats",null),t([r()],C.prototype,"timeExtent",null),t([r({nonNullable:!0})],C.prototype,"timeVisible",void 0),t([r()],C.prototype,"timeZone",null),t([r()],C.prototype,"view",null),t([r({type:E}),w("trigger-action")],C.prototype,"viewModel",void 0),t([b()],C.prototype,"_playOrStopClick",null),t([b()],C.prototype,"_previousClick",null),t([b()],C.prototype,"_nextClick",null),C=t([l("esri.widgets.TimeSlider")],C);const D=C;export{D as default};