smart.dateformatpanel.js

/* Smart UI v15.2.0 (2023-04-20) 
Copyright (c) 2011-2023 jQWidgets. 
License: https://htmlelements.com/license/ */ //

Smart.Utilities.Assign("DateFormatPanel",class{constructor(e,a,t,s="en",l=""){const d=this;e&&(d.formatVariants=e,d.inputDateTimeFormats=a,d.value="",d.customDateTimeContainer=document.querySelector(t),d._setLocalizationSettings(s,l),d._initSmartInputHolder(),d._initAddMoreFormatsButton(),d._initDateTimeFormatHolder())}_setLocalizationSettings(e,a){const t=this;t.locale=e,t.messages=a,t.defaultLocale="en",t.defaultMessages={en:{apply:"apply",date:"date",time:"time",day:"day",month:"month",year:"year",hours:"hours",hour:"hour",minutes:"minutes",minute:"minute",seconds:"seconds",second:"second",milliseconds:"milliseconds",ampm:"am/pm",delete:"delete"}},t.messages||(t.messages=t.defaultMessages),t.messages[t.locale]||(t.messages[t.defaultLocale]||(t.messages=t.defaultMessages),t.locale=t.defaultLocale)}_initSmartInputHolder(){const e=this;e.smartInputButtonsElementsHolder=document.createElement("div"),e.smartInputButtonsElementsHolder.classList.add("smart-input-buttons-elements-holder"),e.borderHolder=document.createElement("div"),e.borderHolder.classList.add("smart-input-and-add-formats-holder"),e.smartInputHolder=document.createElement("div"),e.smartInputHolder.classList.add("smart-input-list-holder"),e.borderHolder.appendChild(e.smartInputHolder),e.smartInputButtonsElementsHolder.appendChild(e.borderHolder),e.customDateTimeContainer.prepend(e.smartInputButtonsElementsHolder)}_initAddMoreFormatsButton(){const e=this;e.addFormatHolder=document.createElement("smart-drop-down-button"),e.addFormatHolder.setAttribute("drop-down-width","auto"),e.addFormatHolder.placeholder="",e.addFormatHolder.classList.add("add-format-holder"),e.addFormatHolder.classList.add("smart-hidden");let a=document.createElement("div");a.classList.add("all-format-holders");let t=document.createElement("div");t.classList.add("format-holder");let s=document.createElement("span");s.innerHTML=e.messages[e.locale].date?e.messages[e.locale].date.toUpperCase():e.defaultMessages[e.defaultLocale].date.toUpperCase(),s.classList.add("bold"),t.appendChild(s);let l=document.createElement("smart-button");l.innerHTML=e.messages[e.locale].day?e.messages[e.locale].day.charAt(0).toUpperCase()+e.messages[e.locale].day.slice(1):e.defaultMessages[e.defaultLocale].day.charAt(0).toUpperCase()+e.defaultMessages[e.defaultLocale].day.slice(1),e.addDayFormatClassName="add-day-format",l.classList.add(e.addDayFormatClassName),l.classList.add("flat"),l.classList.add("text-tramsform-none");const d=()=>e.addNewFormat("dd");l.addEventListener("click",d),l[e.addDayFormatClassName]=d,t.appendChild(l);let o=document.createElement("smart-button");o.innerHTML=e.messages[e.locale].month?e.messages[e.locale].month.charAt(0).toUpperCase()+e.messages[e.locale].month.slice(1):e.defaultMessages[e.defaultLocale].month.charAt(0).toUpperCase()+e.defaultMessages[e.defaultLocale].month.slice(1),e.addMonthFormatClassName="add-month-format",o.classList.add(e.addMonthFormatClassName),o.classList.add("flat"),o.classList.add("text-tramsform-none");const r=()=>e.addNewFormat("MM");o.addEventListener("click",r),o[e.addMonthFormatClassName]=r,t.appendChild(o);let m=document.createElement("smart-button");m.innerHTML=e.messages[e.locale].year?e.messages[e.locale].year.charAt(0).toUpperCase()+e.messages[e.locale].year.slice(1):e.defaultMessages[e.defaultLocale].year.charAt(0).toUpperCase()+e.defaultMessages[e.defaultLocale].year.slice(1),e.addYearFormatClassName="add-year-format",m.classList.add(e.addYearFormatClassName),m.classList.add("flat"),m.classList.add("text-tramsform-none");const n=()=>e.addNewFormat("yyyy");m.addEventListener("click",n),m[e.addYearFormatClassName]=n,t.appendChild(m),a.appendChild(t),t=document.createElement("div"),t.classList.add("format-holder"),s=document.createElement("span"),s.innerHTML=e.messages[e.locale].time?e.messages[e.locale].time.toUpperCase():e.defaultMessages[e.defaultLocale].time.toUpperCase(),s.classList.add("bold"),t.appendChild(s);let i=document.createElement("smart-button");i.innerHTML=e.messages[e.locale].hours?e.messages[e.locale].hours.charAt(0).toUpperCase()+e.messages[e.locale].hours.slice(1):e.defaultMessages[e.defaultLocale].hours.charAt(0).toUpperCase()+e.defaultMessages[e.defaultLocale].hours.slice(1),e.addHourFormatClassName="add-hour-format",i.classList.add(e.addHourFormatClassName),i.classList.add("flat"),i.classList.add("text-tramsform-none");const c=()=>e.addNewFormat("HH");i.addEventListener("click",c),i[e.addHourFormatClassName]=c,t.appendChild(i);let u=document.createElement("smart-button");u.innerHTML=e.messages[e.locale].minutes?e.messages[e.locale].minutes.charAt(0).toUpperCase()+e.messages[e.locale].minutes.slice(1):e.defaultMessages[e.defaultLocale].minutes.charAt(0).toUpperCase()+e.defaultMessages[e.defaultLocale].minutes.slice(1),e.addMinutesFormatClassName="add-minute-format",u.classList.add(e.addMinutesFormatClassName),u.classList.add("flat"),u.classList.add("text-tramsform-none");const p=()=>e.addNewFormat("mm");u.addEventListener("click",p),u[e.addMinutesFormatClassName]=p,t.appendChild(u);let h=document.createElement("smart-button");h.innerHTML=e.messages[e.locale].seconds?e.messages[e.locale].seconds.charAt(0).toUpperCase()+e.messages[e.locale].seconds.slice(1):e.defaultMessages[e.defaultLocale].seconds.charAt(0).toUpperCase()+e.defaultMessages[e.defaultLocale].seconds.slice(1),e.addSecondFormatClassName="add-second-format",h.classList.add(e.addSecondFormatClassName),h.classList.add("flat"),h.classList.add("text-tramsform-none");const f=()=>e.addNewFormat("ss");h.addEventListener("click",f),h[e.addSecondFormatClassName]=f,t.appendChild(h);let g=document.createElement("smart-button");g.innerHTML=e.messages[e.locale].milliseconds?e.messages[e.locale].milliseconds.charAt(0).toUpperCase()+e.messages[e.locale].milliseconds.slice(1):e.defaultMessages[e.defaultLocale].milliseconds.charAt(0).toUpperCase()+e.defaultMessages[e.defaultLocale].milliseconds.slice(1),e.addMillisecondFormatClassName="add-millisecond-format",g.classList.add(e.addMillisecondFormatClassName),g.classList.add("flat"),g.classList.add("text-tramsform-none");const L=()=>e.addNewFormat("fff");g.addEventListener("click",L),g[e.addMillisecondFormatClassName]=L,t.appendChild(g);let C=document.createElement("smart-button");C.innerHTML=e.messages[e.locale].ampm?e.messages[e.locale].ampm.toUpperCase():e.defaultMessages[e.defaultLocale].ampm.toUpperCase(),e.addAmPmFormatClassName="add-ampm-format",C.classList.add(e.addAmPmFormatClassName),C.classList.add("flat"),C.classList.add("text-tramsform-none");const F=()=>e.addNewFormat("tt");C.addEventListener("click",F),C[e.addAmPmFormatClassName]=F,t.appendChild(C),a.appendChild(t),e.addFormatHolder.appendChild(a),e.borderHolder.appendChild(e.addFormatHolder),e.smartInputButtonsElementsHolder.appendChild(e.borderHolder);let M=document.createElement("smart-button");M.classList.add("use-format-button"),M.disabled=!0,M.classList.add("success"),M.innerHTML=e.messages[e.locale].apply?e.messages[e.locale].apply:e.defaultMessages[e.defaultLocale].apply;const v=()=>e.value=e.getFormat();M.addEventListener("click",v),M["apply-button-event-listener"]=v,e.useThisFormatHolder=M,e.smartInputButtonsElementsHolder.appendChild(e.useThisFormatHolder),e.customDateTimeContainer.appendChild(e.smartInputButtonsElementsHolder)}_initDateTimeFormatHolder(){const e=this;let a=document.createElement("div");const t=new Date;e.currentDate=t,e.dateTime=new Smart.Utilities.DateTime(e.currentDate);const s=Smart.Utilities.DateTime.getLocalizedNames(e.locale);e.dateTime.calendar.days=s.days,e.dateTime.calendar.months=s.months,e.dateTime.calendar.locale=e.locale;let l=document.createElement("ul");l.classList.add("date-time-format-list");for(let a=0;a<e.inputDateTimeFormats.length;a++){let t=document.createElement("li");t.classList.add("date-time-format");let s=e.inputDateTimeFormats[a],d=e.dateTime.toString(s);t.innerHTML=d,t.dataset.fullFormat=s;const o=()=>e.addNewFormat(t);t.addEventListener("click",o),t["date-time-format-"+s]=o,l.appendChild(t),0===a&&e.addNewFormat(t)}a.appendChild(l),e.customDateTimeContainer.appendChild(a)}detach(){this._removeEventListeners()}_removeEventListeners(){const e=this;let a=e.customDateTimeContainer.querySelectorAll("li.date-time-format");for(let e=0;e<a.length;e++){let t=a[e];t.removeEventListener("click",t["date-time-format-"+t.dataset.fullFormat]),delete t["date-time-format-"+t.dataset.fullFormat]}e.useThisFormatHolder.removeEventListener("click",e.useThisFormatHolder["apply-button-event-listener"]),delete e.useThisFormatHolder["apply-button-event-listener"],e._detachAddBtnEvent(e.addDayFormatClassName),e._detachAddBtnEvent(e.addMonthFormatClassName),e._detachAddBtnEvent(e.addYearFormatClassName),e._detachAddBtnEvent(e.addHourFormatClassName),e._detachAddBtnEvent(e.addMinutesFormatClassName),e._detachAddBtnEvent(e.addSecondFormatClassName),e._detachAddBtnEvent(e.addMillisecondFormatClassName),e._detachAddBtnEvent(e.addAmPmFormatClassName);let t=e.customDateTimeContainer.querySelectorAll(".smart-input-list-holder smart-input.format-smart-input-list");for(let e=0;e<t.length;e++){let a=t[e];a.removeEventListener("change",a["smart-input-format"+e]),delete a["smart-input-format"+e]}}_detachAddBtnEvent(e){const a=this.customDateTimeContainer.querySelector(".all-format-holders ."+e);a.removeEventListener("click",a[e]),delete a[e]}getFormat(){const e=this.smartInputHolderChildNodes;let a="";for(let t=0;t<e.length;t++)e[t].dataset.format&&0!==e[t].dataset.format.length?a+=e[t].dataset.format:e[t].value&&(a+=e[t].value);return a}addNewFormat(e){const a=this;let t,s,l=!1;a.dateTimeFullFormatFirstPart="",e.dataset?(s=e.dataset.fullFormat,a.smartInputHolder&&(a.smartInputHolder.innerHTML="")):(l=!0,s=" ( "+e+" ) "),t=new Smart.Utilities.DateTime(s),a.useThisFormatHolder.disabled=!1,a.customDateTimeContainer.querySelector(".smart-input-and-add-formats-holder").classList.remove("smart-hidden"),a._showElement(a.addFormatHolder);let d=t.getParseRegExp(t.calendar,s),o=Object.keys(d.groups).length;for(let e=0;e<o;e++){let t=d.groups[e],r=d.groups[e+1],m=document.createElement("smart-input");m.dropDownWidth="auto",m.dropDownButtonPosition="right",m.readonly=!0,m.dataset.format=t;const n=()=>a._handleSmartInputFormatChange(m);m.addEventListener("change",n),m["smart-input-format"+e]=n,m.classList.add("format-smart-input-list"),l&&a._addSignSmartInput(a.smartInputHolder,s,t,r,l),a.formatVariants.day[t]?a._setSmartInputDataSource(a.formatVariants.day,t,m,a.messages[a.locale].day?a.messages[a.locale].day.charAt(0).toUpperCase()+a.messages[a.locale].day.slice(1):a.defaultMessages[a.defaultLocale].day.charAt(0).toUpperCase()+a.defaultMessages[a.defaultLocale].day.slice(1)):a.formatVariants.month[t]?a._setSmartInputDataSource(a.formatVariants.month,t,m,a.messages[a.locale].month?a.messages[a.locale].month.charAt(0).toUpperCase()+a.messages[a.locale].month.slice(1):a.defaultMessages[a.defaultLocale].month.charAt(0).toUpperCase()+a.defaultMessages[a.defaultLocale].month.slice(1)):a.formatVariants.year[t]?a._setSmartInputDataSource(a.formatVariants.year,t,m,a.messages[a.locale].year?a.messages[a.locale].year.charAt(0).toUpperCase()+a.messages[a.locale].year.slice(1):a.defaultMessages[a.defaultLocale].year.charAt(0).toUpperCase()+a.defaultMessages[a.defaultLocale].year.slice(1)):a.formatVariants.hour[t]?a._setSmartInputDataSource(a.formatVariants.hour,t,m,a.messages[a.locale].hour?a.messages[a.locale].hour.charAt(0).toUpperCase()+a.messages[a.locale].hour.slice(1):a.defaultMessages[a.defaultLocale].hour.charAt(0).toUpperCase()+a.defaultMessages[a.defaultLocale].hour.slice(1)):a.formatVariants.minute[t]?a._setSmartInputDataSource(a.formatVariants.minute,t,m,a.messages[a.locale].minute?a.messages[a.locale].minute.charAt(0).toUpperCase()+a.messages[a.locale].minute.slice(1):a.defaultMessages[a.defaultLocale].minute.charAt(0).toUpperCase()+a.defaultMessages[a.defaultLocale].minute.slice(1)):a.formatVariants.second[t]?a._setSmartInputDataSource(a.formatVariants.second,t,m,a.messages[a.locale].second?a.messages[a.locale].second.charAt(0).toUpperCase()+a.messages[a.locale].second.slice(1):a.defaultMessages[a.defaultLocale].second.charAt(0).toUpperCase()+a.defaultMessages[a.defaultLocale].second.slice(1)):a.formatVariants.millisecond[t]?a._setSmartInputDataSource(a.formatVariants.millisecond,t,m,a.messages[a.locale].milliseconds?a.messages[a.locale].milliseconds.charAt(0).toUpperCase()+a.messages[a.locale].milliseconds.slice(1):a.defaultMessages[a.defaultLocale].milliseconds.charAt(0).toUpperCase()+a.defaultMessages[a.defaultLocale].milliseconds.slice(1)):a.formatVariants.ampm[t]&&a._setSmartInputDataSource(a.formatVariants.ampm,t,m,a.messages[a.locale].ampm?a.messages[a.locale].ampm.charAt(0).toUpperCase()+a.messages[a.locale].ampm.slice(1):a.defaultMessages[a.defaultLocale].ampm.charAt(0).toUpperCase()+a.defaultMessages[a.defaultLocale].ampm.slice(1)),a.smartInputHolder.appendChild(m),m.$.scrollView.attached=function(){requestAnimationFrame((()=>{a.setActiveSmartInput(m)}))},e+1<o&&a._addSignSmartInput(a.smartInputHolder,s,t,r,l)}a.smartInputHolderChildNodes=a.smartInputHolder.childNodes}_setSmartInputDataSource(e,a,t,s){const l=this;let d,o,r=[];for(let t in e){let m=e[t];t===a&&(o=t+l.dateTime.toString("("+t+")")+" - "+m,d=s+" "+l.dateTime.toString("("+t+")")),r.push(t+l.dateTime.toString("("+t+")")+" - "+m)}t.dataset.valueTitle=s,t.dataset.selectedValue=o,r.push(l.messages[l.locale].delete?l.messages[l.locale].delete.charAt(0).toUpperCase()+l.messages[l.locale].delete.slice(1):l.defaultMessages[l.defaultLocale].delete.charAt(0).toUpperCase()+l.defaultMessages[l.defaultLocale].delete.slice(1)),t.dataSource=r,t.value=d}_handleSmartInputFormatChange(e){const a=this;e.value===(a.messages[a.locale].delete?a.messages[a.locale].delete.charAt(0).toUpperCase()+a.messages[a.locale].delete.slice(1):a.defaultMessages[a.defaultLocale].delete.charAt(0).toUpperCase()+a.defaultMessages[a.defaultLocale].delete.slice(1))?(1===e.parentNode.childNodes.length&&(a.useThisFormatHolder.disabled=!0,a.customDateTimeContainer.querySelector(".smart-input-and-add-formats-holder").classList.add("smart-hidden"),a._hideElement(a.addFormatHolder)),e.nextElementSibling?e.parentNode.removeChild(e.nextElementSibling):e.previousSibling&&e.parentNode.removeChild(e.previousSibling),e.parentNode.removeChild(e)):(e.dataset.selectedValue=e.value,e.dataset.format=e.value.split("(")[0],e.value=e.dataset.valueTitle+a.dateTime.toString("("+e.dataset.format+")"))}setActiveSmartInput(e){let a=document.querySelector('li[value="'+e.dataset.selectedValue+'"]'),t=a.parentNode.querySelectorAll("li");for(let e=0;e<t.length;e++){let a=t[e];a.classList.contains("active")&&a.classList.remove("active")}a.classList.add("active")}_hideElement(e){e&&e.classList.add("smart-hidden")}_showElement(e){e&&e.classList.remove("smart-hidden")}_addSignSmartInput(e,a,t,s,l){const d=this;let o=document.createElement("smart-input");o.dropDownWidth="auto",o.dropDownButtonPosition="right",o.classList.add("sign-smart-input");let r=["-","/",","];d.dateTimeFullFormatFirstPart||(d.dateTimeFullFormatFirstPart=a);let m=d.dateTimeFullFormatFirstPart.split(t)[1].split(s)[0];l&&(m="-"),d.dateTimeFullFormatFirstPart=d.dateTimeFullFormatFirstPart.slice(d.dateTimeFullFormatFirstPart.indexOf(t)+t.length,d.dateTimeFullFormatFirstPart.length);let n=!0;for(let e=0;e<r.length;e++)m.trim()===r[e]&&(r[e]=m),m!==r[e]&&m.trim()!==r[e]||(n=!1);n&&r.push(m),o.dataSource=r,o.value=m,e.appendChild(o)}});