-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathsmart.daterangeinput.js
6 lines (4 loc) · 21.1 KB
/
smart.daterangeinput.js
1
2
3
4
5
6
/* Smart UI v15.2.0 (2023-04-20)
Copyright (c) 2011-2023 jQWidgets.
License: https://htmlelements.com/license/ */ //
Smart("smart-date-range-input",class extends Smart.Input{static get properties(){return{dropDownButtonPosition:{allowedValues:["none","left","right"],value:"right",defaultReflectToAttribute:!0,type:"string"},dateFormat:{type:"object",value:{day:"numeric",month:"numeric",year:"numeric"}},dropDownHeight:{type:"any",value:"auto"},icons:{type:"boolean",value:!1},max:{value:new Date(2100,1,1),type:"any",defaultValue:new Date(2100,1,1)},messages:{value:{en:{done:"Done",today:"Today",clear:"Clear",hours:"Hours",minutes:"Minutes",am:"am",pm:"pm"}},type:"object",extend:!0},min:{value:new Date(1900,1,1),type:"any",defaultValue:new Date(1900,1,1)},months:{value:1,type:"number",defaultValue:1},separator:{value:" - ",type:"string"},timeFormat:{type:"object",value:{hour:"2-digit",minute:"2-digit"}},timepicker:{value:!1,type:"boolean"},value:{type:"any",value:"",validator:"_valueValidator"},valueType:{allowedValues:["string","object"],value:"string",type:"string"}}}template(){return'<div id="inputContainer" role="presentation"><input class="smart-input" id=\'input\' readonly=\'[[readonly]]\' placeholder=\'[[placeholder]]\' type=\'[[type]]\' name=\'[[name]]\' disabled=\'[[disabled]]\' aria-label="[[placeholder]]" /><span class="smart-hidden smart-hint" id="span">[[hint]]</span><div id="dropDownButton" tabindex=-1 class="smart-drop-down-button" role="button" aria-label="Toggle popup"><div id="arrow" class="arrow" aria-hidden="true"></div></div></div>'}static get listeners(){return{"input.change":"_changeHandler","input.focus":"_focusHandler","input.blur":"_blurHandler","input.keydown":"_keyDownHandler","input.keyup":"_keyUpHandler","input.keypress":"_keyPressHandler","dropDownButton.down":"_dropDownButtonDownHandler","inputContainer.down":"_downHandler","document.up":"_documentUpHandler"}}focus(){this.$.input.focus()}select(){const e=this;e.readonly?e.$.input.focus():e.$.input.select()}_documentUpHandler(e){const t=this,l=t.shadowRoot||t.isInShadowDOM?e.originalEvent.composedPath()[0]:e.originalEvent.target;t.contains(l)?requestAnimationFrame((()=>{const e=t.$.calendar;t.opened&&1===e.selectedDates.length&&!e._newRangeSelectionStarted&&(e._newRangeSelectionStarted=!0)})):t.$.scrollView.contains(l.shadowParent||l)?t._isPointerDown&&(t._isPointerDown=!1,t.opened&&(t._preventLookup=!0),t.$.input.focus()):(t.opened&&(t._preventLookup=!0),t._isPointerDown=!1,t.close())}_changeHandler(e){e.stopPropagation(),this._performSelect(void 0)}_focusHandler(){const e=this;e.setAttribute("focus",""),(e.readonly||0!==e.minLength||0!==e.$.input.value.length||e._preventLookup)&&(e.$.fireEvent("focus"),delete e._preventLookup)}_blurHandler(){const e=this;e.opened||e.removeAttribute("focus"),e.$.fireEvent("blur"),delete e._preventLookup}_performSelect(e,t){const l=this,r=l.$.calendar;let i,a,s,o=l.$.input.value.split(l.separator);void 0!==e&&"object"!=typeof e&&(s=e,e=void 0);let n=l._oldValue?l._oldValue:l._formatValue(void 0!==s?s:l.value,"string");if(e){let t,r;e.type&&(e.preventDefault(),e.stopPropagation()),l.timepicker&&l._timepicker&&(t=l._timepicker._from,r=l._timepicker._to),o=e.detail?e.detail.value.slice(0).sort(((e,t)=>e.getTime()-t.getTime())):"",o.length?1===o.length?(i=new Date(o[0]),t&&i.setHours(t.hours,t.minutes),o=[i]):(i=new Date(o[0]),a=new Date(o[o.length-1]),t&&i.setHours(t.hours,t.minutes),r&&a.setHours(r.hours,r.minutes),o=[i,a]):o=""}else{if(o=l.$.input.value.split(l.separator),o.length){if(1===o.length)o=new Date(l.$.input.value.trim()),isNaN(o.getTime())?o="":(i=new Date(o),l._noCalendarChange=!0,r.selectedDates=[o],o=[i]);else if(o=o.map((e=>new Date(e))).filter((e=>!isNaN(e.getTime()))),o.sort(((e,t)=>e.getTime()-t.getTime())),o.length){let e=[],t=o[0];if(i=new Date(o[0]),o.length>1&&(a=o[o.length-1]),e.push(new Date(t)),i&&a){const l=new Date(t);if(t=new Date(l.setDate(l.getDate()+1)),t.getTime()<=a.getTime()){for(;t.getTime()<a.getTime()&&(t.getDate()!==a.getDate()||t.getMonth()!==a.getMonth()||t.getFullYear()!==a.getFullYear());)e.push(new Date(t)),t.setDate(t.getDate()+1);e.push(t)}}l._noCalendarChange=!0,r.selectedDates=e}}else o="";if((!o||!o.length)&&r.isRendered&&(l._noCalendarChange=!0,r.clearSelection(),l._timepicker)){l._timepicker.classList.add("smart-visibility-hidden");const e=l.$.scrollView.querySelectorAll(".smart-timepicker-button");for(let t=0;t<e.length;t++)e[t].removeAttribute("selected")}}l.timepicker&&l._timepicker&&(i&&(l._timepicker._from={hours:i.getHours(),minutes:i.getMinutes()}),a&&(l._timepicker._to={hours:a.getHours(),minutes:a.getMinutes()})),r.isRendered?l._setTimePickerButtons(i,a):r.whenRendered((()=>l._setTimePickerButtons(i,a))),l.set("value",l.$.input.value=l._oldValue=o=l._formatDate(o)),t||o===n||(l.$.fireEvent("change",{value:l._formatValue(o),label:o,oldValue:l._formatValue(n),oldLabel:n}),l._updateTargetValue()),delete l._noCalendarChange}_setTimePickerButtons(e,t){const l=this,r=l.$.scrollView.querySelector(".smart-timepicker-button.from"),i=l.$.scrollView.querySelector(".smart-timepicker-button.to");r&&(e&&!isNaN(e.getTime())?r.textContent=e.toLocaleTimeString(l.locale,l.timeFormat):r.textContent=""),i&&(t&&!isNaN(t.getTime())?i.textContent=t.toLocaleTimeString(l.locale,l.timeFormat):i.textContent="")}_formatValue(e,t){const l=this;if(t||(t=l.valueType),"string"===t&&"string"==typeof e||"object"===t&&e.from)return e;let r,i,a;return Array.isArray(e)?(r=e[0],i=e[e.length-1]):"object"==typeof e?(r=e.from,i=e.to):(a=e.split(l.separator),a.length&&(a=a.map((e=>new Date(e))).filter((e=>!isNaN(e.getTime()))),a.sort(((e,t)=>e.getTime()-t.getTime())),r=a[0],i=a[a.length-1])),"string"===t?l._formatDate([r,i]):{from:new Date(r),to:new Date(i)}}_formatDate(e){const t=this;return e?(e instanceof Date&&(e=[e]),e=e.filter((e=>void 0!==e)),t.selectedDates=e,1===(e=t.timepicker?e.map((e=>new Date(e).toLocaleString(t.locale,Object.assign({},t.dateFormat,t.timeFormat)))):e.map((e=>new Date(e).toLocaleDateString(t.locale,t.dateFormat)))).length?e[0]:e.join(t.separator)):""}_open(){const e=this,t=e.getBoundingClientRect(),l=window.scrollX,r=window.scrollY;let i=0,a=0;if(!this.opened){if(e.timer&&clearTimeout(e.timer),document.body.appendChild(e.$.scrollView),e.setAttribute("aria-owns",e.$.scrollView.id),e.readonly||e.$.input.setAttribute("aria-controls",e.$.scrollView.id),e.$.scrollView.enableShadowDOM&&!e._importedStyle&&(e.$.scrollView.importStyle(e._getStyleUrl("smart.textbox.css")),e._importedStyle=!0),"static"!==getComputedStyle(document.body).position){const e=document.body.getBoundingClientRect();i=e.left,a=e.top}e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width",""),e.$.scrollView.style.left=-3+t.left+l-i+"px",e.$.scrollView.style.top=t.bottom+r-a+1+"px",e.$.scrollView.classList.remove("open"),e.$.scrollView.onpointerdown=function(){e._isPointerDown=!0},requestAnimationFrame((function(){const t=e.dropDownWidth,l=e.$.calendar;if(e.$.scrollView.setAttribute("open",""),e.setAttribute("open",""),e.$.dropDownButton.setAttribute("open",""),e.$.input.setAttribute("open",""),t&&"string"==typeof t&&-1!==t.indexOf("%")){const r=parseFloat(t)/100;e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width",e.offsetWidth*r+"px"),l.style.width="100%"}else if("auto"!==t&&t)e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width",parseFloat(t)+"px"),l.style.width="100%";else if("auto"===t)l.style.width=null,e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width","auto");else{l.style.width=null;let t=l.offsetWidth;e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width",Math.max(t,e.offsetWidth-8)+"px")}})),this.opened=!0}}close(){const e=this;if(!e.opened)return!1;if(e.timer&&clearTimeout(e.timer),e.timer=setTimeout((function(){e.$.scrollView.parentNode&&!e.opened&&(document.body.removeChild(e.$.scrollView),e.removeAttribute("aria-owns"),e.readonly||e.$.input.removeAttribute("aria-controls"))}),1e3),e._timepicker){e._timepicker.classList.add("smart-visibility-hidden");const t=e.$.scrollView.querySelectorAll(".smart-timepicker-button");for(let e=0;e<t.length;e++)t[e].removeAttribute("selected")}return e.$.scrollView.removeAttribute("open"),e.$.dropDownButton.removeAttribute("open"),e.$.input.removeAttribute("open"),e.removeAttribute("open"),e.opened=!1,!0}_lookup(){}_downHandler(e){const t=this;t.readonly&&t._dropDownButtonDownHandler(e)}_dropDownButtonDownHandler(e){return this.disabled||(this._toggle(),e.preventDefault(),e.stopPropagation(),e.originalEvent.preventDefault(),e.originalEvent.stopPropagation()),!1}toggle(){this._toggle()}_toggle(){const e=this;e.opened?e.close():e.open()}open(){const e=this;e._process(),e.$.input.focus(),setTimeout((function(){e.$.input.focus()}),25)}_process(){this._performSelect(void 0,!0),this._open()}_matcher(){}_sorter(){}_highlighter(){}_render(){}ensureVisible(){}_next(){}_prev(){}_move(e){e.stopPropagation()}_keyDownHandler(e){this._suppressKeyPressRepeat=![40,38,9,13,27,16,17,18].includes(e.keyCode),e.shiftKey||e.altKey||e.ctrlKey}_keyPressHandler(e){this._suppressKeyPressRepeat||e.shiftKey||e.altKey||e.ctrlKey}_keyUpHandler(e){const t=this;if(!e.shiftKey)switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:40===e.keyCode&&e.altKey&&t.open(),38===e.keyCode&&e.altKey&&t.close();break;case 27:if(!t.opened)return;t.close(),e.stopPropagation(),e.preventDefault()}}propertyChangedHandler(e,t,l){const r=this;switch(e){case"dateFormat":case"value":r.$.input.value=r._formatValue(l,"string"),r._performSelect(t);break;case"month":case"min":case"max":r.$.calendar[e]=l;break;case"theme":case"rightToLeft":case"animation":case"inverted":r.$.calendar&&(r.$.calendar[e]=l),r.$.scrollView&&(l?r.$.scrollView.setAttribute(Smart.Utilities.Core.toDash(e),"boolean"==typeof l?"":l):r.$.scrollView.removeAttribute(Smart.Utilities.Core.toDash(e)));break;case"timepicker":case"icons":if(l?r.$.scrollView.setAttribute(e,""):r.$.scrollView.removeAttribute(e),r._performSelect(void 0),!l&&r._timepicker){r._timepicker.classList.add("smart-visibility-hidden"),r._timepicker.remove();const e=r.$.scrollView.querySelectorAll(".smart-timepicker-button");for(let t=0;t<e.length;t++)e[t].removeAttribute("selected")}break;case"locale":{const e=r.$.calendar.querySelector(".smart-icon-today"),t=r.$.calendar.querySelector(".smart-icon-clear");e&&(e.innerHTML=r.localize("today")),t&&(e.innerHTML=r.localize("clear")),r._performSelect(void 0,!0),r.$.calendar.locale=l;break}default:super.propertyChangedHandler(e,t,l)}}_createElement(){const e=this,t=document.createElement("div"),l=document.createElement("smart-calendar"),r=document.createElement("template");if(t.classList.add("smart-input-drop-down-menu","smart-date-range-input-drop-down-menu"),t.setAttribute("animation",e.animation),t.setAttribute("role","presentation"),e.rightToLeft?t.setAttribute("right-to-left",""):t.removeAttribute("right-to-left"),e.inverted?t.setAttribute("inverted",""):t.removeAttribute("inverted"),t.onclick=function(l){l.stopPropagation(),l.preventDefault();const r=l.target;e.$.input.focus();const i=r.closest(".smart-timepicker-button");if(i){const a=t.querySelectorAll(".smart-timepicker-button");for(let e=0;e<a.length;e++)a[e].removeAttribute("selected");if(r.closest(".smart-icon-clear")){if(e.$.calendar.clearSelection(),e._timepicker){e._timepicker.classList.add("smart-visibility-hidden");const t=e.$.scrollView.querySelectorAll(".smart-timepicker-button");for(let e=0;e<t.length;e++)t[e].removeAttribute("selected"),t[e].setAttribute("aria-selected",!1)}return}return r.closest(".smart-icon-today")?void e.$.calendar.today():(i.setAttribute("selected",""),void e._toggleTimepicker(l))}r.closest("smart-done-button")?e.close():r.closest(".smart-timepicker")&&e._handleTimeSelection(r.closest(".smart-calendar-cell"))},!t.id){const e=t.tagName.toLowerCase();t.id=e.slice(0,1).toLowerCase()+e.slice(1)+Math.floor(65536*(1+Math.random())).toString(16).substring(1)}e.$.scrollView=t,e.classList.add("smart-input"),l.theme=e.theme,l.unfocusable=!0,l.rightToLeft=e.rightToLeft,l.animation=e.animation,l.months=e.months,l.max=e.max,l.min=e.min,l.locale=e.locale,l.viewSections=["header","footer"],l.selectionMode="range",e.button&&t.setAttribute("button",""),e.timepicker&&t.setAttribute("timepicker",""),e.icons&&t.setAttribute("icons",""),e.$.calendar||l.$.listen("change",(()=>{e._noCalendarChange?delete e._noCalendarChange:e._performSelect(event)})),r.innerHTML=`\n <div class="smart-date-range-input-footer-controls">\n <div class="smart-timepicker-buttons">\n <div class="smart-timepicker-button from"></div>\n <div class="smart-timepicker-button to"></div>\n </div>\n <div class="smart-button-controls">\n <div class="smart-icon-today smart-timepicker-button">${e.localize("today")}</div>\n <div class="smart-icon-clear smart-timepicker-button">${e.localize("clear")}</div>\n </div>\n </div>`,l.footerTemplate=r,e.$.calendar=l,t.appendChild(e.$.calendar)}_toggleTimepicker(e){const t=this;if(!t.timepicker)return void(t._timepicker&&(t._timepicker.classList.add("smart-visibility-hidden"),t._timepicker.remove()));if(!t._timepicker){const e=document.createElement("div");e.innerHTML='\n <div class="hour-selection smart-calendar-week" role="row"><div class="header" role="rowheader"></div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="0">12</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="1">01</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="2">02</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="3">03</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="4">04</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="5">05</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="6">06</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="7">07</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="8">08</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="9">09</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="10">10</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="11">11</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="12" pm>12</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="13" pm>01</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="14" pm>02</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="15" pm>03</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="16" pm>04</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="17" pm>05</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="18" pm>06</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="19" pm>07</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="20" pm>08</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="21" pm>09</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="22" pm>10</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="23" pm>11</div>\n </div>\n <div class="minute-selection smart-calendar-week" role="row"><div class="header" role="rowheader"></div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="0">00</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="5">05</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="10">10</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="15">15</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="20">20</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="25">25</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="30">30</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="35">35</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="40">40</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="45">45</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="50">50</div>\n <div class="smart-calendar-cell" role="gridcell" aria-selected="false" value="55">55</div>\n </div>',e.classList.add("smart-timepicker","smart-calendar","smart-visibility-hidden"),e.setAttribute("role","grid"),Smart.Utilities.Core.isMobile||(e.onmouseover=function(e){const t=e.target.closest(".smart-calendar-cell");t&&t.setAttribute("hover","")},e.onmouseout=function(e){const t=e.target.closest(".smart-calendar-cell");t&&t.removeAttribute("hover")}),t._timepicker=e;const l=t.$.calendar.selectedDates;if(l.length){const e=l[0],r={hours:e.getHours(),minutes:e.getMinutes()};let i;if(l.length>1){const e=l[l.length-1];i={hours:e.getHours(),minutes:e.getMinutes()}}r&&(t._timepicker._from=r),i&&(t._timepicker._to=i)}}const l=t._timepicker.querySelector(".hour-selection"),r=t._timepicker.querySelector(".minute-selection"),i=t.$.calendar;l.setAttribute("am-label",t.localize("am")),l.setAttribute("pm-label",t.localize("pm")),l.querySelector(".header").textContent=t.localize("hours"),r.querySelector(".header").textContent=t.localize("minutes"),t._timepicker.style.top=i.offsetTop+"px",t._timepicker.style.left=i.offsetLeft+"px",t._timepicker.style.width=i.offsetWidth+"px";const a=t._timepicker._rangeType;delete t._timepicker._rangeType;const s=e.target.closest(".smart-timepicker-button"),o=s.classList.contains("from")?"from":"to";s&&(t._timepicker._rangeType=o),Array.from(t._timepicker.querySelectorAll("div[selected]")).map((e=>{e.removeAttribute("selected"),e.setAttribute("aria-selected",!1)}));const n=t._timepicker[`_${o}`];if(n){const e=t._timepicker.querySelectorAll(`.hour-selection div[value="${n.hours}"], .minute-selection div[value="${n.minutes}"]`);for(let t=0;t<e.length;t++){const l=e[t];l&&(l.setAttribute("selected",!0),l.setAttribute("aria-selected",!0))}}const c=t._timepicker.classList.contains("smart-visibility-hidden");if(!c&&a&&a!==o)return;const d=t._timepicker.parentElement;if(d||t.$.scrollView.appendChild(t._timepicker),c)d?t._timepicker.classList.remove("smart-visibility-hidden"):requestAnimationFrame((()=>t._timepicker.classList.remove("smart-visibility-hidden")));else{t._timepicker.classList.add("smart-visibility-hidden");const e=t.$.scrollView.querySelectorAll(".smart-timepicker-button");for(let t=0;t<e.length;t++)e[t].removeAttribute("selected"),e[t].setAttribute("aria-selected",!1)}}_handleTimeSelection(e,t){const l=this;if(!e)return;e.closest(".hour-selection")?Array.from(l._timepicker.querySelectorAll(".hour-selection div[selected]")).map((e=>{e.removeAttribute("selected"),e.setAttribute("aria-selected",!1)})):Array.from(l._timepicker.querySelectorAll(".minute-selection div[selected]")).map((e=>{e.removeAttribute("selected"),e.setAttribute("aria-selected",!1)})),e.setAttribute("selected",!0),e.setAttribute("aria-selected",!0);const r=l._timepicker._rangeType;if(!r)return;let i=l._timepicker[`_${r}`],[a,s]=i?[i.hours,i.minutes]:[0,0];e.closest(".hour-selection")?a=parseInt(e.getAttribute("value"))||0:s=parseInt(e.getAttribute("value"))||0,l._timepicker[`_${r}`]={hours:a,minutes:s};const o=l.$.calendar.selectedDates;o.length&&l._performSelect({detail:{value:o},noChangeEvent:t})}_valueValidator(e,t){return Array.isArray(t)||"object"===this.valueType&&t.from||"string"==typeof t?t:"object"===this.valueType?{}:""}_refreshMenu(){}_setAriaRelations(){const e=this,t=e.getAttribute("aria-label");e.readonly?(e.setAttribute("role","button"),!t&&e.placeholder&&e.setAttribute("aria-label",e.placeholder),e.removeAttribute("aria-readonly"),e.$.input.setAttribute("aria-hidden",!0),e.$.input.removeAttribute("aria-controls"),e.$.dropDownButton.setAttribute("aria-hidden",!0)):(e.setAttribute("role","presentation"),t&&t===e.placeholder&&e.removeAttribute("aria-label"),e.$.input.removeAttribute("aria-hidden"),e.$.dropDownButton.removeAttribute("aria-hidden")),e.setAttribute("aria-haspopup","dialog"),e.$.scrollView.setAttribute("role","dialog")}_setActiveDescendant(){}_setInputPurpose(){}});