jspanel4
Version:
A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
1 lines • 12.5 kB
JavaScript
;function _createForOfIteratorHelper(e,a){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!t){if(Array.isArray(e)||(t=_unsupportedIterableToArray(e))||a&&e&&"number"==typeof e.length){t&&(e=t);var r=0,l=function(){};return{s:l,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:l}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var n,s=!0,o=!1;return{s:function(){t=t.call(e)},n:function(){var e=t.next();return s=e.done,e},e:function(e){o=!0,n=e},f:function(){try{s||null==t.return||t.return()}finally{if(o)throw n}}}}function _unsupportedIterableToArray(e,a){if(e){if("string"==typeof e)return _arrayLikeToArray(e,a);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(e,a):void 0}}function _arrayLikeToArray(e,a){(null==a||a>e.length)&&(a=e.length);for(var t=0,r=new Array(a);t<a;t++)r[t]=e[t];return r}jsPanel.datepicker||(jsPanel.icons.chevronLeft='<svg focusable="false" class="jsPanel-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><g transform="matrix(6.12323e-17,-1,1,6.12323e-17,0.0375,22.0375)"><path fill="currentColor" d="M2.1,15.2L2.9,16C3.1,16.2 3.4,16.2 3.6,16L11,8.7L18.4,16C18.6,16.2 18.9,16.2 19.1,16L19.9,15.2C20.1,15 20.1,14.7 19.9,14.5L11.3,6C11.1,5.8 10.8,5.8 10.6,6L2.1,14.5C2,14.7 2,15 2.1,15.2Z"/></g></svg>',jsPanel.icons.chevronRight='<svg focusable="false" class="jsPanel-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><g transform="matrix(6.12323e-17,1,-1,6.12323e-17,22.0375,-0.0375)"><path fill="currentColor" d="M2.1,15.2L2.9,16C3.1,16.2 3.4,16.2 3.6,16L11,8.7L18.4,16C18.6,16.2 18.9,16.2 19.1,16L19.9,15.2C20.1,15 20.1,14.7 19.9,14.5L11.3,6C11.1,5.8 10.8,5.8 10.6,6L2.1,14.5C2,14.7 2,15 2.1,15.2Z"/></g></svg>',jsPanel.icons.square='<svg focusable="false" class="jsPanel-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><g transform="matrix(0.0401786,0,0,0.0401786,2,0.714286)"><path fill="currentColor" d="M400,32L48,32C21.5,32 0,53.5 0,80L0,432C0,458.5 21.5,480 48,480L400,480C426.5,480 448,458.5 448,432L448,80C448,53.5 426.5,32 400,32ZM394,432L54,432C50.7,432 48,429.3 48,426L48,86C48,82.7 50.7,80 54,80L394,80C397.3,80 400,82.7 400,86L400,426C400,429.3 397.3,432 394,432Z"/></g></svg>',jsPanel.icons.undo='<svg focusable="false" class="jsPanel-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><g transform="matrix(2.18687e-18,0.0357143,-0.0357143,2.18687e-18,20.1429,2)"><path fill="currentColor" d="M12,8L39.711,8C46.45,8 51.868,13.548 51.708,20.286L49.361,118.854C93.925,51.834 170.212,7.73 256.793,8.001C393.18,8.428 504.213,120.009 504,256.396C503.786,393.181 392.835,504 256,504C192.074,504 133.798,479.813 89.822,440.092C84.709,435.474 84.468,427.531 89.34,422.659L109.078,402.921C113.576,398.423 120.831,398.136 125.579,402.369C160.213,433.246 205.895,452 256,452C364.322,452 452,364.338 452,256C452,147.678 364.338,60 256,60C176.455,60 108.059,107.282 77.325,175.302L203.714,172.293C210.451,172.133 216,177.55 216,184.29L216,212C216,218.627 210.627,224 204,224L12,224C5.373,224 0,218.627 0,212L0,20C0,13.373 5.373,8 12,8Z"/></g></svg>',jsPanel.datepicker={version:"0.3.2",date:"2020-06-19 09:48",defaults:{locale:"en",startdate:void 0,months:1,showWeekNumbers:!0,ondateselect:void 0,onrangeselect:void 0,onselectionclear:void 0,callback:void 0},keyValue:void 0,generateHTML:function(){var e=document.createElement("div");e.className="jsPanel-cal-wrapper",e.innerHTML='<div class="jsPanel-cal-sub jsPanel-cal-clear" title="Clear all selections">'.concat(jsPanel.icons.square,'</div>\n <div class="jsPanel-cal-sub jsPanel-cal-back" title="Go back one month">').concat(jsPanel.icons.chevronLeft,'</div>\n <div class="jsPanel-cal-sub jsPanel-cal-month"></div>\n <div class="jsPanel-cal-sub jsPanel-cal-forward" title="Go forward one month">').concat(jsPanel.icons.chevronRight,'</div>\n <div class="jsPanel-cal-sub jsPanel-cal-reset" title="Reset to current month">').concat(jsPanel.icons.undo,'</div>\n <div class="jsPanel-cal-sub jsPanel-cal-blank3"></div>\n <div class="jsPanel-cal-sub day-name day-name-0"></div>\n <div class="jsPanel-cal-sub day-name day-name-1"></div>\n <div class="jsPanel-cal-sub day-name day-name-2"></div>\n <div class="jsPanel-cal-sub day-name day-name-3"></div>\n <div class="jsPanel-cal-sub day-name day-name-4"></div>\n <div class="jsPanel-cal-sub day-name day-name-5"></div>\n <div class="jsPanel-cal-sub day-name day-name-6"></div>');for(var a=0;a<6;a++)e.innerHTML+='<div class="jsPanel-cal-sub week week-'.concat(a,'"></div>');for(var t=1;t<43;t++)e.innerHTML+='<div class="jsPanel-cal-sub day day-'.concat(t,'"></div>');return e},fillMonth:function(e){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:moment();moment.locale(e.options.locale);var t=moment(a)||moment(e.options.startdate);t.locale(e.options.locale);var r=t.month(),l=t.date(1).weekday(),n=t.localeData(),s=e.querySelector(".jsPanel-cal-month");s.innerHTML=t.format("MMMM YYYY"),s.dataset.date=t.format("YYYY-MM-DD");var o=e.querySelectorAll(".jsPanel-cal-sub.day-name"),c=n.weekdaysMin();if(1===n.firstDayOfWeek()){for(var d=0,i=1;d<7;d++,i++)o[d].textContent=c[i];o[6].textContent=c[0],o[5].classList.add("weekend"),o[6].classList.add("weekend")}else{for(var f=0;f<7;f++)o[f].textContent=c[f];o[0].classList.add("weekend"),o[6].classList.add("weekend")}var v,u=t.subtract(++l,"days"),y=_createForOfIteratorHelper(e.querySelectorAll(".jsPanel-cal-sub.day"));try{for(y.s();!(v=y.n()).done;){var m=v.value;m.classList.remove("today","notInMonth","selected","range","remove-border-radius-right","remove-border-radius-left");var p=u.add(1,"days");m.textContent=p.format("D"),m.dataset.date=t.format("YYYY-MM-DD"),p.month()!==r?m.classList.add("notInMonth"):m.dataset.date===moment().format("YYYY-MM-DD")&&m.classList.add("today")}}catch(e){y.e(e)}finally{y.f()}e.options.showWeekNumbers&&e.querySelectorAll(".jsPanel-cal-sub.week").forEach(function(a,t){a.textContent=moment(e.querySelector(".jsPanel-cal-sub.day-".concat(7*(t+1))).dataset.date).week()})},deselectAllDays:function(e){var a,t=_createForOfIteratorHelper(e.querySelectorAll(".jsPanel-cal-sub.day"));try{for(t.s();!(a=t.n()).done;){a.value.classList.remove("selected","range","remove-border-radius-right","remove-border-radius-left")}}catch(e){t.e(e)}finally{t.f()}},restoreSelections:function(e){var a,t=e.querySelectorAll(".jsPanel-cal-sub.day"),r=_createForOfIteratorHelper(t);try{for(r.s();!(a=r.n()).done;){var l=a.value;e.selectedDays.has(l.dataset.date)&&l.classList.add("selected")}}catch(e){r.e(e)}finally{r.f()}if(e.selectedRange.size){var n,s=e.selectedRange.values().next().value.split("/"),o=_createForOfIteratorHelper(t);try{for(o.s();!(n=o.n()).done;){var c=n.value,d=c.dataset.date;d>=s[0]&&d<=s[1]&&(c.classList.add("selected","range"),d===s[0]?c.classList.add("remove-border-radius-right"):d===s[1]?c.classList.add("remove-border-radius-left"):(d>s[0]||d<s[1])&&c.classList.add("remove-border-radius-right","remove-border-radius-left"))}}catch(e){o.e(e)}finally{o.f()}}},create:function(e){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.style.display="flex",e.selectedDays=new Set,e.selectedRange=new Set;for(var t,r=Object.assign({},this.defaults,a),l=0;l<r.months;l++)(t=this.generateHTML()).options=r,e.append(t),this.fillMonth(t,r.startdate),r.startdate=moment(r.startdate).add(1,"months");var n,s,o=e.querySelectorAll(".jsPanel-cal-wrapper"),c=_createForOfIteratorHelper(o);try{for(c.s();!(n=c.n()).done;){var d,i=n.value,f=_createForOfIteratorHelper(i.querySelectorAll(".jsPanel-cal-clear"));try{for(f.s();!(d=f.n()).done;){d.value.addEventListener("click",function(a){r.onselectionclear&&"function"==typeof r.onselectionclear&&r.onselectionclear.call(e,e,a),a.defaultPrevented||(jsPanel.datepicker.deselectAllDays(e),e.selectedDays.clear(),e.selectedRange.clear())})}}catch(e){f.e(e)}finally{f.f()}var v,u=_createForOfIteratorHelper(i.querySelectorAll(".jsPanel-cal-back"));try{for(u.s();!(v=u.n()).done;){v.value.addEventListener("click",function(){var a,t=_createForOfIteratorHelper(o);try{for(t.s();!(a=t.n()).done;){var r=a.value,l=r.querySelector(".jsPanel-cal-month").dataset.date,n=moment(l).subtract(1,"months").format("YYYY-MM");jsPanel.datepicker.fillMonth(r,n)}}catch(e){t.e(e)}finally{t.f()}jsPanel.datepicker.deselectAllDays(e),jsPanel.datepicker.restoreSelections(e)})}}catch(e){u.e(e)}finally{u.f()}var y,m=_createForOfIteratorHelper(i.querySelectorAll(".jsPanel-cal-forward"));try{for(m.s();!(y=m.n()).done;){y.value.addEventListener("click",function(){var a,t=_createForOfIteratorHelper(o);try{for(t.s();!(a=t.n()).done;){var r=a.value,l=r.querySelector(".jsPanel-cal-month").dataset.date,n=moment(l).add(1,"months").format("YYYY-MM");jsPanel.datepicker.fillMonth(r,n)}}catch(e){t.e(e)}finally{t.f()}jsPanel.datepicker.deselectAllDays(e),jsPanel.datepicker.restoreSelections(e)})}}catch(e){m.e(e)}finally{m.f()}var p,h=_createForOfIteratorHelper(i.querySelectorAll(".jsPanel-cal-reset"));try{for(h.s();!(p=h.n()).done;){p.value.addEventListener("click",function(a){for(var t=a.target.closest(".jsPanel-cal-wrapper"),r=0;t.previousSibling;)r++,t=t.previousSibling;var l,n=moment().subtract(r,"months"),s=_createForOfIteratorHelper(o);try{for(s.s();!(l=s.n()).done;){var c=l.value;jsPanel.datepicker.fillMonth(c,n),n=moment(n).add(1,"months")}}catch(e){s.e(e)}finally{s.f()}jsPanel.datepicker.deselectAllDays(e),jsPanel.datepicker.restoreSelections(e)})}}catch(e){h.e(e)}finally{h.f()}}}catch(e){c.e(e)}finally{c.f()}return e.addEventListener("click",function(a){a.preventDefault();var t=a.target,l=a.altKey,n=a.ctrlKey,s=a.shiftKey;if(t.classList.contains("day")){var o=t.classList.contains("selected"),c=t.dataset.date;if(n||s||l){if(!l&&n&&!s){e.selectedRange.clear();var d,i=_createForOfIteratorHelper(e.querySelectorAll(".day"));try{for(i.s();!(d=i.n()).done;){var f=d.value;f.classList.contains("selected")&&f.classList.contains("range")&&f.classList.remove("range","selected")}}catch(e){i.e(e)}finally{i.f()}o?(t.classList.remove("selected"),e.selectedDays.delete(c)):(t.classList.add("selected"),e.selectedDays.add(c))}}else jsPanel.datepicker.deselectAllDays(e),e.selectedDays.clear(),o?t.classList.remove("selected"):(t.classList.add("selected"),e.selectedDays.add(c));r.ondateselect&&"function"==typeof r.ondateselect&&r.ondateselect.call(e,e,c,a)}}),e.addEventListener("pointerdown",function(a){a.preventDefault();var t=a.target,r=a.altKey,l=a.ctrlKey,n=a.shiftKey,o=a.target.dataset.date,c=a.target.dataset.date,d=[o,o],i=function(a){a.preventDefault(),s=!0,e.selectedDays.size&&e.selectedDays.clear(),a.target.classList.contains("day")&&(c=a.target.dataset.date,d=[o,c].sort(function(e,a){return moment(e).unix()-moment(a).unix()}));var t,r=_createForOfIteratorHelper(e.querySelectorAll(".day"));try{for(r.s();!(t=r.n()).done;){var l=t.value,n=l.dataset.date;l.classList.remove("remove-border-radius-right","remove-border-radius-left"),n<d[0]||n>d[1]?l.classList.remove("selected","range"):(l.classList.add("selected","range"),n===d[0]?l.classList.add("remove-border-radius-right"):n===d[1]?l.classList.add("remove-border-radius-left"):(n>d[0]||n<d[1])&&l.classList.add("remove-border-radius-right","remove-border-radius-left"))}}catch(e){r.e(e)}finally{r.f()}e.selectedRange.clear(),e.selectedRange.add(e.querySelector('.day[data-date="'.concat(d[0],'"]')).dataset.date+"/"+e.querySelector('.day[data-date="'.concat(d[1],'"]')).dataset.date)};t.classList.contains("day")&&!r&&!l&&n&&(e.addEventListener("pointermove",i),e.addEventListener("pointerup",function(){e.removeEventListener("pointermove",i)}))}),e.addEventListener("pointerup",function(a){s&&r.onrangeselect&&"function"==typeof r.onrangeselect&&(r.onrangeselect.call(e,e,e.selectedRange,a),s=void 0),s=void 0}),r.callback&&r.callback.call(e,e),e}},document.addEventListener("keydown",function(e){e.key.match(/^[2-9]$/)?jsPanel.datepicker.keyValue=e.key:e.key.match(/^1$/)&&(jsPanel.datepicker.keyValue=12)}),document.addEventListener("keyup",function(){jsPanel.datepicker.keyValue=void 0})),"undefined"!=typeof module&&(module.exports=jsPanel);