Daylight.js 8.2 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"../core/Logger.js";import{applySome as i,isNone as s}from"../core/maybe.js";import{watch as o,syncAndInitial as l,when as a}from"../core/reactiveUtils.js";import{aliasOf as r}from"../core/accessorSupport/decorators/aliasOf.js";import"../core/arrayUtils.js";import"../core/has.js";import"../core/accessorSupport/ensureType.js";import{property as n}from"../core/accessorSupport/decorators/property.js";import{subclass as d}from"../core/accessorSupport/decorators/subclass.js";import c from"./Widget.js";import{CSS as h}from"./Daylight/css.js";import p from"./Daylight/DaylightViewModel.js";import m from"./Daylight/VisibleElements.js";import{ORDERED_SEASONS as g}from"./Daylight/support/daylightUtils.js";import u from"./Daylight/support/SliderWithDropdown.js";import y from"./support/DatePicker.js";import{Heading as b}from"./support/Heading.js";import{formatSliderLabel as v,getTimezoneInfos as w}from"./support/timeWidgetUtils.js";import"./support/widgetUtils.js";import{messageBundle as _}from"./support/decorators/messageBundle.js";import{tsx as k,tsxFragment as f}from"./support/jsxFactory.js";const S=/(.*)\s(.*)/,C=t.getLogger("esri.widgets.Daylight"),M="date";let P=class extends c{constructor(e,t){super(e,t),this.headingLevel=3,this.iconClass=h.widgetIcon,this.label=void 0,this.playSpeedMultiplier=1,this.timeSliderSteps=5,this.view=null,this.viewModel=new p,this.visibleElements=new m,this.dateOrSeason=M,this._timeSlider=new u({viewModel:this.viewModel.timeSliderViewModel,labelFormatFunction:v,inputFormatFunction:v,min:0,max:1439,steps:this.timeSliderSteps??5,values:[0],labelInputsEnabled:!1,visibleElements:{labels:!0},tickConfigs:[{mode:"position",values:[0,360,720,1080,1439],labelsVisible:!0,tickCreatedFunction:this._onPrimaryTickCreated.bind(this)},{mode:"position",values:[120,240,480,600,840,960,1200,1320],tickCreatedFunction:this._onSecondaryTickCreated.bind(this)}],items:[]}),this._datePicker=new y({viewModel:this.viewModel.datePickerViewModel,commitOnMonthChange:!0}),this._onPlayDayClick=()=>{this.viewModel.toggleDayPlaying()},this._onYearPlayClick=()=>{this.viewModel.toggleYearPlaying()},this._onSeasonChange=e=>{const t=e.target;this.viewModel.currentSeason=t.value},this._onSunLightingCheckboxChange=()=>{this.viewModel.toggleSunLightingEnabled()},this._onShadowCheckboxChange=()=>{this.viewModel.toggleDirectShadowsEnabled()}}get gmtOffsets(){return i(this.timezoneMessages,w)}get _useAmPm(){const e=this._timeSlider.viewModel.getLabelForValue(0,"tick");return S.test(e)}get _labelAlignmentClass(){const e=this.viewModel.timeSliderViewModel.values?.[0]??0,t=60*(this._useAmPm?4:3),i=60*(this._useAmPm?21:21.5);return e<t?h.sliderAlignLeft:e>i?h.sliderAlignRight:null}postInitialize(){this.viewModel.isSupported&&this.own([o((()=>this.viewModel.datePickerViewModel),(e=>this._datePicker.viewModel=e),l),o((()=>this.viewModel.timeSliderViewModel),(e=>this._timeSlider.viewModel=e),l),o((()=>this.timezoneMessages?.chooseTimezone),(e=>this._timeSlider.buttonTooltip=e),l),o((()=>this.visibleElements?.timezone),(e=>this._timeSlider.showDropDown=e),l),o((()=>!this.viewModel.sunLightingEnabled),(e=>{this._datePicker.disabled=e,this._timeSlider.disabled=e}),l),a((()=>this.gmtOffsets),(e=>{this._timeSlider.items=e.map((e=>({utcOffset:e.utcOffset,name:e.short,label:[e.shortWithUTC,e.long]})))}),l),o((()=>[this.viewModel.utcOffset,this.gmtOffsets]),(()=>this._onUTCOffsetChange()),l)])}destroy(){this._datePicker.destroy(),this._timeSlider.destroy()}render(){const{messages:e,viewModel:t,visibleElements:i}=this,s=t.isSupported;return k("div",{class:this.classes(h.base,h.widget)},s?k(f,null,i.header&&k(b,{level:this.headingLevel},e.title),this._renderTimeOptions(),i.datePicker&&this._renderDateOrSeason(),i.sunLightingToggle&&this._renderSunLightingToggle(),i.shadowsToggle&&this._renderShadowsToggle()):k("div",{key:"unsupported",class:h.panelError},k("p",null,e.unsupported)))}async loadDependencies(){await Promise.all([import("@esri/calcite-components/dist/components/calcite-button.js"),import("@esri/calcite-components/dist/components/calcite-checkbox.js"),import("@esri/calcite-components/dist/components/calcite-label.js")])}_renderTimeOptions(){const{viewModel:e,visibleElements:t,messages:i}=this,{directShadowsEnabled:s,dayPlaying:o}=e,l=!e.sunLightingEnabled;return k("div",{class:this.classes(h.dayContainer,this._labelAlignmentClass,{[h.shadowOn]:s,[h.shadowOff]:!s,[h.sliderDateOn]:t.datePicker,[h.sliderDateOff]:!t.datePicker,[h.sliderAmPmOn]:this._useAmPm,[h.containerDisabled]:l}),key:"daylight-time-options"},this._timeSlider.render(),t.playButtons&&this._renderPlayPauseButton({playing:o,disabled:l,label:i?.playDay,onClick:this._onPlayDayClick}))}_renderDateOptions(){const{viewModel:e,visibleElements:t,messages:i}=this,{yearPlaying:s}=e,o=!e.sunLightingEnabled;return k("div",{key:"daylight-date-options",class:this.classes(h.dateContainer,o&&h.containerDisabled)},this._datePicker.render(),t.playButtons&&this._renderPlayPauseButton({playing:s,disabled:o,label:i?.playYear,onClick:this._onYearPlayClick}))}_renderPlayPauseButton({playing:e,disabled:t,label:i,onClick:s}){return k("calcite-button",{appearance:"solid",class:h.playPauseButton,disabled:t,"icon-start":e?"pause-f":"play-f",label:i,round:!0,title:i,type:"button",onclick:s})}_renderSeasonOptions(){const{messages:e,viewModel:t}=this,i=!t.sunLightingEnabled;return k("select",{class:this.classes(h.select,h.seasonPicker,i&&h.seasonPickerDisabled),disabled:i,value:t.currentSeason,"aria-label":e.season,onchange:this._onSeasonChange},g.map((t=>k("option",{value:t},e[t]))))}_renderDateOrSeason(){return"date"===this.dateOrSeason?this._renderDateOptions():this._renderSeasonOptions()}_renderSunLightingToggle(){const e=this.messages?.sunLightingToggle;return k("calcite-label",{key:"date-time-toggle",layout:"inline",title:e?.tooltip,scale:"s"},k("calcite-checkbox",{class:h.sunLightingCheckbox,checked:this.viewModel.sunLightingEnabled,onCalciteCheckboxChange:this._onSunLightingCheckboxChange}),e?.label)}_renderShadowsToggle(){const e=this.messages?.shadowsToggle;return k("calcite-label",{key:"shadow-toggle",layout:"inline",title:e?.tooltip,scale:"s"},k("calcite-checkbox",{class:h.shadowsCheckbox,checked:this.viewModel.directShadowsEnabled,onCalciteCheckboxChange:this._onShadowCheckboxChange}),e.label)}_onUTCOffsetChange(){const e=this.viewModel.utcOffset,t=this._timeSlider.currentItem?.utcOffset,i=this.gmtOffsets;if(s(i)||t===e)return;const o=i.findIndex((({utcOffset:t})=>t===e));o>-1&&(this._timeSlider.currentIndex=o)}_onPrimaryTickCreated(e,t,i){t.classList.add(...O,h.primaryTick),i.classList.add(...O,h.primaryTickLabel),i.onclick=t.onclick=this._makeGoToTime(e);const s=i.textContent.match(S);s&&(i.innerHTML=`${s[1]}<br><div class=${h.primaryTickAmPm}>${s[2]}</div>`)}_onSecondaryTickCreated(e,t){t.classList.add(...O,h.secondaryTick),t.onclick=this._makeGoToTime(e)}_makeGoToTime(e){return()=>{this.viewModel.timeSliderPosition=e}}};e([n({readOnly:!0})],P.prototype,"gmtOffsets",null),e([n(),_("esri/widgets/Daylight/t9n/Daylight")],P.prototype,"messages",void 0),e([n(),_("esri/widgets/support/t9n/timezone")],P.prototype,"timezoneMessages",void 0),e([n()],P.prototype,"headingLevel",void 0),e([n()],P.prototype,"iconClass",void 0),e([n({aliasOf:{source:"messages.title",overridable:!0}})],P.prototype,"label",void 0),e([r("viewModel.playSpeedMultiplier")],P.prototype,"playSpeedMultiplier",void 0),e([r("_timeSlider.steps")],P.prototype,"timeSliderSteps",void 0),e([r("viewModel.view")],P.prototype,"view",void 0),e([n({type:p})],P.prototype,"viewModel",void 0),e([n({type:m,nonNullable:!0})],P.prototype,"visibleElements",void 0),e([n({cast:e=>"season"===e||"date"===e?e:(C.warn(`"${e}" is not a valid option. Acceptable values are only "date" or "season". Defaulting to "${M}".`),M)})],P.prototype,"dateOrSeason",void 0),e([n()],P.prototype,"_timeSlider",void 0),e([n()],P.prototype,"_useAmPm",null),e([n()],P.prototype,"_labelAlignmentClass",null),e([n()],P.prototype,"_datePicker",void 0),P=e([d("esri.widgets.Daylight")],P);const O=["esri-interactive","esri-widget__anchor"],T=P;export{T as default};