| 1 |
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("rome"),require("moment")):"function"==typeof define&&define.amd?define(["rome","moment"],t):e.MaterialDatetimePicker=t(e.rome,e.moment)}(this,function(e,t){"use strict";e="default"in e?e.default:e,t="default"in t?t.default:t;var i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=function(){function e(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}return function(t,i,s){return i&&e(t.prototype,i),s&&e(t,s),t}}(),n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},c=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var i=[],s=!0,n=!1,c=void 0;try{for(var a,o=e[Symbol.iterator]();!(s=(a=o.next()).done)&&(i.push(a.value),!t||i.length!==t);s=!0);}catch(e){n=!0,c=e}finally{try{!s&&o.return&&o.return()}finally{if(n)throw c}}return i}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),a=function(){function e(){i(this,e),this._events={"*":[]}}return s(e,[{key:"trigger",value:function(e,t){var i=this;return e.split(" ").forEach(function(e){i._events["*"].forEach(function(i){return i.fn.call(i.scope,e,t)}),i._events[e]&&i._events[e].forEach(function(e){e.fn.call(e.scope,t)})}),this}},{key:"on",value:function(e,t,i){return this._events[e]||(this._events[e]=[]),this._events[e].push({eventName:e,fn:t,scope:i||this}),this}},{key:"off",value:function(e,t){return this._events[e]?(t||(this._events[e]=[]),this._events[e]=this._events[e].filter(function(e){return e.fn!==t}),this):this}},{key:"once",value:function(e,t,i){var s=this;return this.on(e,function n(){t.call(i,e,t,i),s.off(e,n)},i)}}]),e}(),o="c-datepicker",r=function(){return{default:t().startOf("hour"),styles:{scrim:"c-scrim",back:o+"__back acymicon-keyboard-arrow-left",container:o+"__calendar",date:o+"__date",dayBody:o+"__days-body",dayBodyElem:o+"__day-body",dayConcealed:o+"__day--concealed",dayDisabled:o+"__day--disabled",dayHead:o+"__days-head",dayHeadElem:o+"__day-head",dayRow:o+"__days-row",dayTable:o+"__days",month:o+"__month",next:o+"__next acymicon-keyboard-arrow-right",positioned:o+"--fixed",selectedDay:o+"__day--selected",selectedTime:o+"__time--selected",time:o+"__time",timeList:o+"__time-list",timeOption:o+"__time-option",clockNum:o+"__clock__num"},format:"DD/MM/YY",container:document.body,dateValidator:void 0}};function l(e,t){var i=document.createElement("div");return i.innerHTML=t.trim(),e.appendChild(i.firstChild),this}return function(d){function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,u);var t=n(this,(u.__proto__||Object.getPrototypeOf(u)).call(this)),s=Object.assign(r().styles,e.styles);return t.options=Object.assign(r(),e),t.options.styles=s,t.on("*",function(e,i){if(t.options.el){var s=new CustomEvent(e,t,i);t.options.el.dispatchEvent(s)}}),t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(u,a),s(u,[{key:"initializeRome",value:function(t,i){var s=this.onChangeDate.bind(this);return e(t,{styles:this.options.styles,time:!1,dateValidator:i,initialValue:this.value}).on("data",s)}},{key:"open",value:function(){var e='\n<div class="'+this.options.styles.scrim+'"></div>\n';l(document.body,e),l(this.options.container,'\n<div class="c-datepicker">\n <a class="c-datepicker__toggle c-datepicker__toggle--right c-datepicker--show-time acymicon-access-time js-show-clock" title="show time picker">\n </a>\n\n <a class="c-datepicker__toggle c-datepicker__toggle--left c-datepicker--show-calendar acymicon-calendar is-selected js-show-calendar" title="show date picker">\n </a>\n\n <div class="c-datepicker__header">\n <div class="c-datepicker__header-day">\n <span class="js-day">Monday</span>\n </div>\n <div class="c-datepicker__header-date">\n <span class="c-datepicker__header-date__month js-date-month"></span>\n <span class="c-datepicker__header-date__day js-date-day"></span>\n <span class="c-datepicker__header-date__time js-date-time">\n <span class="c-datepicker__header-date__hours js-date-hours active">09</span>:<span class="c-datepicker__header-date__minutes js-date-minutes">00</span>\n </span>\n </div>\n </div>\n\n <div class="c-datepicker__calendar"></div>\n <div class="c-datepicker__clock">\n <div class="c-datepicker__clock__am-pm-toggle">\n <label class="c-datepicker__toggle--checked">\n <input checked="checked" class="c-datepicker__toggle c-datepicker__toggle--right c-datepicker__clock--am" type="radio" name="time-date-toggle" value="AM" />\n AM\n </label>\n\n <label>\n <input class="c-datepicker__toggle c-datepicker__toggle--right c-datepicker__clock--pm" type="radio" name="time-date-toggle" value="PM" />\n PM\n </label>\n </div>\n <div class="c-datepicker__mask"></div>\n <div class="c-datepicker__clock__hours js-clock-hours active">\n <div class="c-datepicker__clock__num" data-number="3">3</div>\n <div class="c-datepicker__clock__num" data-number="4">4</div>\n <div class="c-datepicker__clock__num" data-number="5">5</div>\n <div class="c-datepicker__clock__num" data-number="6">6</div>\n <div class="c-datepicker__clock__num" data-number="7">7</div>\n <div class="c-datepicker__clock__num" data-number="8">8</div>\n <div class="c-datepicker__clock__num" data-number="9">9</div>\n <div class="c-datepicker__clock__num" data-number="10">10</div>\n <div class="c-datepicker__clock__num" data-number="11">11</div>\n <div class="c-datepicker__clock__num" data-number="0">12</div>\n <div class="c-datepicker__clock__num" data-number="1">1</div>\n <div class="c-datepicker__clock__num" data-number="2">2</div>\n <div class="c-datepicker__clock-hands">\n <div class="c-datepicker__hour-hand"></div>\n </div>\n </div>\n <div class="c-datepicker__clock__minutes js-clock-minutes">\n <div class="c-datepicker__clock__num" data-number="15">15</div>\n <div class="c-datepicker__clock__num" data-number="20">20</div>\n <div class="c-datepicker__clock__num" data-number="25">25</div>\n <div class="c-datepicker__clock__num" data-number="30">30</div>\n <div class="c-datepicker__clock__num" data-number="35">35</div>\n <div class="c-datepicker__clock__num" data-number="40">40</div>\n <div class="c-datepicker__clock__num" data-number="45">45</div>\n <div class="c-datepicker__clock__num" data-number="50">50</div>\n <div class="c-datepicker__clock__num" data-number="55">55</div>\n <div class="c-datepicker__clock__num" data-number="0">0</div>\n <div class="c-datepicker__clock__num" data-number="5">5</div>\n <div class="c-datepicker__clock__num" data-number="10">10</div>\n <div class="c-datepicker__clock-hands">\n <div class="c-datepicker__hour-hand"></div>\n </div>\n </div>\n </div>\n <div class="modal-btns">\n <a class="c-btn c-btn--flat js-cancel">Cancel</a>\n <a class="c-btn c-btn--flat js-ok">OK</a>\n </div>\n</div>\n'),this.pickerEl=this.options.container.querySelector("."+o),this.scrimEl=document.body.querySelector("."+this.options.styles.scrim),this.amToggleEl=this.$(".c-datepicker__clock--am"),this.pmToggleEl=this.$(".c-datepicker__clock--pm"),this.value?(this.setDate(this.value),this.setTime(this.value)):(this.value=t(0),this.setDate(this.options.default),this.setTime(this.options.default)),this.initializeRome(this.$("."+this.options.styles.container),this.options.dateValidator),this._listenForCloseEvents(),this._show()}},{key:"close",value:function(){this._stopListeningForCloseEvents(),this._hide()}},{key:"_hide",value:function(){var e=this;return this.pickerEl.classList.remove("open"),window.setTimeout(function(){e.options.container.removeChild(e.pickerEl),document.body.removeChild(e.scrimEl),e.trigger("close")},200),this}},{key:"_show",value:function(){var e=this;return this.delegateEvents(),window.requestAnimationFrame(function(){e.scrimEl.classList.add(e.options.styles.scrim+"--shown"),e.pickerEl.classList.add(o+"--open"),e.trigger("open")}),this}},{key:"_listenForCloseEvents",value:function(){var e=this;this._onWindowKeypress=function(t){27===t.which&&e.close()},window.addEventListener("keydown",this._onWindowKeypress)}},{key:"_stopListeningForCloseEvents",value:function(){window.removeEventListener("keydown",this._onWindowKeypress),this._closeHandler=null}},{key:"delegateEvents",value:function(){var e=this;return this.$(".js-cancel").addEventListener("click",function(){return e.clickCancel()},!1),this.$(".js-ok").addEventListener("click",function(){return e.clickSubmit()},!1),this.$(".js-date-hours").addEventListener("click",function(t){return e.showHourClock(t)},!1),this.$(".js-date-minutes").addEventListener("click",function(t){return e.showMinuteClock(t)},!1),this.$(".js-clock-hours").addEventListener("mouseleave",function(t){return e.mouseOutHourClock(t)},!1),this.$(".js-clock-hours ."+this.options.styles.clockNum).forEach(function(t){t.addEventListener("click",function(t){return e.clickClickHour(t).showMinuteClock()},!1),t.addEventListener("mouseenter",function(t){return e.mouseInHourClock(t)},!1)}),this.$(".js-clock-minutes").addEventListener("mouseleave",function(t){return e.mouseOutMinuteClock(t)},!1),this.$(".js-clock-minutes ."+this.options.styles.clockNum).forEach(function(t){t.addEventListener("click",function(t){return e.clickClockMinute(t)},!1),t.addEventListener("mouseenter",function(t){return e.mouseInMinuteClock(t)},!1)}),this.$(".c-datepicker__clock--am").addEventListener("click",function(t){return e.clickAm(t)},!1),this.$(".c-datepicker__clock--pm").addEventListener("click",function(t){return e.clickPm(t)},!1),this.$(".js-show-calendar").addEventListener("click",function(t){return e.clickShowCalendar(t)},!1),this.$(".js-date-day").addEventListener("click",function(t){return e.clickShowCalendar(t)},!1),this.$(".js-date-month").addEventListener("click",function(t){return e.clickShowCalendar(t)},!1),this.$(".js-show-clock").addEventListener("click",function(t){return e.clickShowClock(t)},!1),this.scrimEl.addEventListener("click",function(){return e.close()},!1),this}},{key:"clickSubmit",value:function(){return this.close(),this.trigger("submit",this.value,this),this}},{key:"clickCancel",value:function(){return this.close(),this.trigger("cancel",this.value,this),this}},{key:"clickClickHour",value:function(e){var i=t(this.value),s=parseInt(e.currentTarget.getAttribute("data-number"),10);return 0===s&&"pm"===this.meridiem?s=12:"pm"===this.meridiem&&(s+=12),i.hour(s),this.set(i),this}},{key:"clickClockMinute",value:function(e){var i=t(this.value),s=parseInt(e.currentTarget.getAttribute("data-number"),10);return i.minute(s),this.set(i),this}},{key:"onChangeDate",value:function(e){var i=t(this.value),s=e.split("-"),n=c(s,3),a=n[0],o=n[1],r=n[2];return i.set({year:a,month:o-1,date:r}),this.set(i),this}},{key:"mouseInHourClock",value:function(){var e=this.$(".js-clock-hours ."+this.options.styles.clockNum+"--active");e&&e.classList.add("hide-hand")}},{key:"mouseInMinuteClock",value:function(){var e=this.$(".js-clock-minutes ."+this.options.styles.clockNum+"--active");e&&e.classList.add("hide-hand")}},{key:"mouseOutHourClock",value:function(){var e=this.$(".js-clock-hours ."+this.options.styles.clockNum+"--active.hide-hand");e&&e.classList.remove("hide-hand")}},{key:"mouseOutMinuteClock",value:function(){var e=this.$(".js-clock-minutes ."+this.options.styles.clockNum+"--active.hide-hand");e&&e.classList.remove("hide-hand")}},{key:"clickAm",value:function(){var e=t(this.value);return"pm"===this.meridiem&&(this.meridiem="am",e.hour(e.hour()-12)),this.set(e),this}},{key:"clickPm",value:function(){var e=t(this.value);return"am"===this.meridiem&&(this.meridiem="pm",e.hour(e.hour()+12)),this.set(e),this}},{key:"showHourClock",value:function(){this.clickShowClock(),this.$(".js-clock-hours").classList.add("active"),this.$(".js-clock-minutes").classList.remove("active"),this.$(".js-date-hours").classList.add("active"),this.$(".js-date-minutes").classList.remove("active")}},{key:"showMinuteClock",value:function(){this.clickShowClock(),this.$(".js-clock-hours").classList.remove("active"),this.$(".js-clock-minutes").classList.add("active"),this.$(".js-date-hours").classList.remove("active"),this.$(".js-date-minutes").classList.add("active")}},{key:"clickShowCalendar",value:function(){this.$(".js-show-calendar").classList.add("is-selected"),this.$(".js-show-clock").classList.remove("is-selected")}},{key:"clickShowClock",value:function(){this.$(".js-show-clock").classList.add("is-selected"),this.$(".js-show-calendar").classList.remove("is-selected")}},{key:"data",value:function(e){return console.warn("MaterialDatetimePicker#data is deprecated and will be removed in a future release. Please use get or set."),e?this.set(e):this.value}},{key:"get",value:function(){return t(this.value)}},{key:"set",value:function(e){var i=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).silent,s=void 0!==i&&i,n=t(e),c=[];n.date()===this.value.date()&&n.month()===this.value.month()&&n.year()===this.value.year()||(this.setDate(n),c.push("change:date")),n.hour()===this.value.hour()&&n.minutes()===this.value.minutes()||(this.setTime(n),c.push("change:time")),this.options.el&&("INPUT"===this.options.el.tagName?this.options.el.value=n.format(this.options.format):this.options.el.setAttribute("data-value",n.format(this.options.format))),c.length>0&&!s&&this.trigger(["change"].concat(c).join(" "),this.value,this)}},{key:"setDate",value:function(e){var i=t(e),s=i.format("MMM"),n=i.format("Do"),c=i.format("dddd"),a=i.format("YYYY");return this.$(".js-day").innerText=c,this.$(".js-date-month").innerText=s+" "+a,this.$(".js-date-day").innerText=n,this.value.year(i.year()),this.value.month(i.month()),this.value.date(i.date()),this}},{key:"setTime",value:function(e){var i=t(e),s=5*Math.round(parseInt(i.format("mm"),10)/5);i.minutes(s);var n=i.format("HH"),c=i.format("mm"),a=parseInt(n,10)%12,o=this.$(".js-clock-hours ."+this.options.styles.clockNum+"--active"),r=this.$(".js-clock-minutes ."+this.options.styles.clockNum+"--active");return this.$(".js-date-hours").innerText=n,this.$(".js-date-minutes").innerText=c,o&&o.classList.remove(this.options.styles.clockNum+"--active"),r&&r.classList.remove(this.options.styles.clockNum+"--active"),this.$(".js-clock-hours ."+this.options.styles.clockNum+'[data-number="'+a+'"]').classList.add(this.options.styles.clockNum+"--active"),this.$(".js-clock-minutes ."+this.options.styles.clockNum+'[data-number="'+s+'"]').classList.add(this.options.styles.clockNum+"--active"),this.value.hours(i.hours()),this.value.minutes(i.minutes()),this.meridiem=this.value.format("a"),"pm"===this.meridiem?(this.amToggleEl.removeAttribute("checked"),this.pmToggleEl.setAttribute("checked","checked"),this.amToggleEl.parentElement.classList.remove("c-datepicker__toggle--checked"),this.pmToggleEl.parentElement.classList.add("c-datepicker__toggle--checked")):(this.pmToggleEl.removeAttribute("checked"),this.amToggleEl.setAttribute("checked","checked"),this.pmToggleEl.parentElement.classList.remove("c-datepicker__toggle--checked"),this.amToggleEl.parentElement.classList.add("c-datepicker__toggle--checked")),this}},{key:"$",value:function(e){var t=this.pickerEl.querySelectorAll(e);return t.length>1?[].concat(function(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t<e.length;t++)i[t]=e[t];return i}return Array.from(e)}(t)):t[0]}}]),u}()}); |
