diff --git a/bower.json b/bower.json index b0a36ca..d86bb1c 100644 --- a/bower.json +++ b/bower.json @@ -28,14 +28,18 @@ "babel-plugin-transform-property-literals": "^6.5.0", "babel-preset-es2015": "^6.6.0", "browser-sync": "^2.6.5", - "gulp": "^3.9.0", + "chokidar": "^1.4.3", + "del": "^2.2.0", + "gulp": "github:gulpjs/gulp#4.0", "gulp-autoprefixer": "^3.0.2", "gulp-babel": "^6.1.2", "gulp-cache": "^0.2.8", "gulp-concat": "^2.5.2", + "gulp-imagemin": "^2.4.0", "gulp-minify-css": "1.0.0", "gulp-plumber": "1.0.0", "gulp-rename": "^1.2.0", + "gulp-replace": "^0.5.4", "gulp-sass": "^2.0.0", "gulp-uglify": "^1.2.0", "webpack": "^1.12.14" diff --git a/dist/demo.html b/dist/demo.html index 9444f41..137b8b8 100644 --- a/dist/demo.html +++ b/dist/demo.html @@ -15,6 +15,10 @@

Date dialog

+
+ This input is updated with x's value on clicking ok + +

Time dialog

@@ -70,6 +74,11 @@

Time dialog

document.getElementById('trigger6').addEventListener('click', function() { c.toggle(); }); + // dispatch event test + x.trigger(document.getElementById('test1')); + document.getElementById('test1').addEventListener('onOk', function() { + this.value = x.time().toString(); + }); }).call(this); diff --git a/dist/js/md-date-time-picker.js b/dist/js/md-date-time-picker.js index 2cd4ee4..5f7baea 100644 --- a/dist/js/md-date-time-picker.js +++ b/dist/js/md-date-time-picker.js @@ -16,7 +16,8 @@ var _createClass = function () { function defineProperties(target, props) { for * @param {[moment]} past [the past moment till which the calendar shall render] [@default = exactly 21 Years ago from init] * @param {[moment]} future [the future moment till which the calendar shall render] [@default = init] * @param {[Boolean]} mode [this value tells whether the time dialog will have the 24 hour mode (true) or 12 hour mode (false)] [@default = false] - * @param {[string]} orientation = 'LANDSCAPE' or 'PORTRAIT' [force the orientation of the picker @default = 'LANDSCAPE'] + * @param {[string]} orientation = 'LANDSCAPE' or 'PORTRAIT' [force the orientation of the picker @default = 'LANDSCAPE'] + * @param {[element]} trigger [element on which all the events will be dispatched e.g var foo = document.getElementById('bar'), here element = foo] * * @return {[Object]} [mdDateTimePicker] */ @@ -32,7 +33,9 @@ var _createClass = function () { function defineProperties(target, props) { for _ref$mode = _ref.mode, mode = _ref$mode === undefined ? !1 : _ref$mode, _ref$orientation = _ref.orientation, - orientation = _ref$orientation === undefined ? 'LANDSCAPE' : _ref$orientation; + orientation = _ref$orientation === undefined ? 'LANDSCAPE' : _ref$orientation, + _ref$trigger = _ref.trigger, + trigger = _ref$trigger === undefined ? '' : _ref$trigger; _classCallCheck(this, mdDateTimePicker); @@ -42,6 +45,7 @@ var _createClass = function () { function defineProperties(target, props) { for this._future = future; this._mode = mode; this._orientation = orientation; + this._trigger = trigger; /** * [dialog selected classes have the same structure as dialog but one level down] @@ -80,6 +84,23 @@ var _createClass = function () { function defineProperties(target, props) { for } } + /** + * [trigger sets a new trigger for the dialog] + * + * @method trigger + * + * @param {[type]} el [element e.g var foo = document.getElementById('bar'), here el = foo] + * + */ + + }, { + key: 'trigger', + value: function trigger(el) { + if (el) { + this._trigger = el; + } + } + /** * [toggle toggle the dialog's between the visible and invisible state] * @@ -713,13 +734,13 @@ var _createClass = function () { function defineProperties(target, props) { for var me = this; // attach the view change button if (this._type == 'date') { - el.addEventListener('click', function () { + el.onclick = function () { me._switchToDateView(el, me); - }); + }; } else { - el.addEventListener('click', function () { + el.onclick = function () { me._switchToTimeView(me); - }); + }; } } @@ -833,7 +854,7 @@ var _createClass = function () { function defineProperties(target, props) { for minuteView = this._sDialog.minuteView, sClass = 'mddtp-picker__cell--selected'; - hourView.addEventListener('click', function (e) { + hourView.onclick = function (e) { var sHour = 'mddtp-hour__selected', selectedHour = document.getElementById(sHour), setHour = 0; @@ -861,8 +882,8 @@ var _createClass = function () { function defineProperties(target, props) { for // switch the view me._switchToTimeView(me); } - }); - minuteView.addEventListener('click', function (e) { + }; + minuteView.onclick = function (e) { var sMinute = 'mddtp-minute__selected', selectedMinute = document.getElementById(sMinute), setMinute = 0; @@ -884,13 +905,13 @@ var _createClass = function () { function defineProperties(target, props) { for // switch the view me._switchToTimeView(me); } - }); + }; } }, { key: '_addCellClickEvent', value: function _addCellClickEvent(el) { var me = this; - el.addEventListener('click', function (e) { + el.onclick = function (e) { if (e.target && e.target.nodeName == 'SPAN' && e.target.classList.contains('mddtp-picker__cell')) { var picker = me._sDialog.picker, day = e.target.textContent, @@ -916,7 +937,7 @@ var _createClass = function () { function defineProperties(target, props) { for me._fillText(titleDay, currentDate.format('ddd, ')); me._fillText(titleMonth, currentDate.format('MMM D')); } - }); + }; } }, { key: '_toMoveMonth', @@ -950,13 +971,13 @@ var _createClass = function () { function defineProperties(target, props) { for mRightClass = 'mddtp-picker__view--right', pause = 'mddtp-picker__view--pause'; - left.addEventListener('click', function () { + left.onclick = function () { moveStep(mRightClass, me._sDialog.previous); - }); + }; - right.addEventListener('click', function () { + right.onclick = function () { moveStep(mLeftClass, me._sDialog.next); - }); + }; function moveStep(aClass, to) { /** @@ -1046,7 +1067,7 @@ var _createClass = function () { function defineProperties(target, props) { for key: '_changeYear', value: function _changeYear(el) { var me = this; - el.addEventListener('click', function (e) { + el.onclick = function (e) { if (e.target && e.target.nodeName == 'LI') { var selected = document.getElementById('mddtp-date__currentYear'); // clear previous selected @@ -1062,7 +1083,7 @@ var _createClass = function () { function defineProperties(target, props) { for // update the dialog me._initViewHolder(); } - }); + }; } /** @@ -1080,22 +1101,22 @@ var _createClass = function () { function defineProperties(target, props) { for AM = this._sDialog.AM, PM = this._sDialog.PM; - AM.addEventListener('click', function (e) { + AM.onclick = function (e) { var m = me._sDialog.sDate.format('A'); if (m === 'PM') { me._sDialog.sDate.subtract(12, 'h'); AM.classList.toggle('mddtp-picker__color--active'); PM.classList.toggle('mddtp-picker__color--active'); } - }); - PM.addEventListener('click', function (e) { + }; + PM.onclick = function (e) { var m = me._sDialog.sDate.format('A'); if (m === 'AM') { me._sDialog.sDate.add(12, 'h'); AM.classList.toggle('mddtp-picker__color--active'); PM.classList.toggle('mddtp-picker__color--active'); } - }); + }; } }, { key: '_dragDial', @@ -1189,15 +1210,28 @@ var _createClass = function () { function defineProperties(target, props) { for value: function _attachEventHandlers() { var me = this, ok = this._sDialog.ok, - cancel = this._sDialog.cancel; - - cancel.addEventListener('click', function () { + cancel = this._sDialog.cancel, + onCancel = document.createEvent('Event'), + onOk = document.createEvent('Event'); + // create cutom events to dispatch + + // initiate the events + onCancel.initEvent('onCancel', !0, !0); + onOk.initEvent('onOk', !0, !0); + // normal events + cancel.onclick = function () { me.toggle(); - }); - ok.addEventListener('click', function () { + if (me._trigger) { + me._trigger.dispatchEvent(onCancel); + } + }; + ok.onclick = function () { me._init = me._sDialog.sDate; me.toggle(); - }); + if (me._trigger) { + me._trigger.dispatchEvent(onOk); + } + }; } /** @@ -1397,7 +1431,7 @@ var _createClass = function () { function defineProperties(target, props) { for return mdDateTimePicker; }(); /** * @package md-date-time-picker - * @version [1.0.1] + * @version [1.1.0] * @author Puranjay Jain * @license MIT * @website puranjayjain.github.io/md-date-time-picker @@ -1410,45 +1444,79 @@ var _createClass = function () { function defineProperties(target, props) { for function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -// polyfill for scrollintoviewifneeded -if (!Element.prototype.scrollIntoViewIfNeeded) { - Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) { - centerIfNeeded = arguments.length === 0 ? !0 : !!centerIfNeeded; - - var parent = this.parentNode, - parentComputedStyle = window.getComputedStyle(parent, null), - parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10), - parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'), 10), - overTop = this.offsetTop - parent.offsetTop < parent.scrollTop, - overBottom = this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth > parent.scrollTop + parent.clientHeight, - overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft, - overRight = this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth > parent.scrollLeft + parent.clientWidth, - alignWithTop = overTop && !overBottom; - - if ((overTop || overBottom) && centerIfNeeded) { - parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2; - } +(function () { + // polyfill for scrollintoviewifneeded + if (!Element.prototype.scrollIntoViewIfNeeded) { + Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) { + centerIfNeeded = arguments.length === 0 ? !0 : !!centerIfNeeded; + + var parent = this.parentNode, + parentComputedStyle = window.getComputedStyle(parent, null), + parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10), + parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'), 10), + overTop = this.offsetTop - parent.offsetTop < parent.scrollTop, + overBottom = this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth > parent.scrollTop + parent.clientHeight, + overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft, + overRight = this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth > parent.scrollLeft + parent.clientWidth, + alignWithTop = overTop && !overBottom; + + if ((overTop || overBottom) && centerIfNeeded) { + parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2; + } - if ((overLeft || overRight) && centerIfNeeded) { - parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2; - } + if ((overLeft || overRight) && centerIfNeeded) { + parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2; + } - if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) { - this.scrollIntoView(alignWithTop); - } - }; -} -// polyfill for text content for ie8 -if (Object.defineProperty && Object.getOwnPropertyDescriptor && Object.getOwnPropertyDescriptor(Element.prototype, 'textContent') && !Object.getOwnPropertyDescriptor(Element.prototype, 'textContent').get) { - (function () { - var innerText = Object.getOwnPropertyDescriptor(Element.prototype, 'innerText'); - Object.defineProperty(Element.prototype, 'textContent', { - get: function get() { - return innerText.get.call(this); - }, - set: function set(s) { - return innerText.set.call(this, s); + if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) { + this.scrollIntoView(alignWithTop); + } + }; + } + // polyfill for text content for ie8 + if (Object.defineProperty && Object.getOwnPropertyDescriptor && Object.getOwnPropertyDescriptor(Element.prototype, 'textContent') && !Object.getOwnPropertyDescriptor(Element.prototype, 'textContent').get) { + (function () { + var innerText = Object.getOwnPropertyDescriptor(Element.prototype, 'innerText'); + Object.defineProperty(Element.prototype, 'textContent', { + get: function get() { + return innerText.get.call(this); + }, + set: function set(s) { + return innerText.set.call(this, s); + } + }); + })(); + } + !window.addEventListener && function (WindowPrototype, DocumentPrototype, ElementPrototype, addEventListener, removeEventListener, dispatchEvent, registry) { + WindowPrototype[addEventListener] = DocumentPrototype[addEventListener] = ElementPrototype[addEventListener] = function (type, listener) { + var target = this; + + registry.unshift([target, type, listener, function (event) { + event.currentTarget = target; + event.preventDefault = function () { + event.returnValue = !1; + }; + event.stopPropagation = function () { + event.cancelBubble = !0; + }; + event.target = event.srcElement || target; + + listener.call(target, event); + }]); + + this.attachEvent("on" + type, registry[0][3]); + }; + + WindowPrototype[removeEventListener] = DocumentPrototype[removeEventListener] = ElementPrototype[removeEventListener] = function (type, listener) { + for (var index = 0, register; register = registry[index]; ++index) { + if (register[0] == this && register[1] == type && register[2] == listener) { + return this.detachEvent("on" + type, registry.splice(index, 1)[0][3]); + } } - }); - })(); -} \ No newline at end of file + }; + + WindowPrototype[dispatchEvent] = DocumentPrototype[dispatchEvent] = ElementPrototype[dispatchEvent] = function (eventObject) { + return this.fireEvent("on" + eventObject.type, eventObject); + }; + }(Window.prototype, HTMLDocument.prototype, Element.prototype, "addEventListener", "removeEventListener", "dispatchEvent", []); +})(); \ No newline at end of file diff --git a/dist/js/md-date-time-picker.min.js b/dist/js/md-date-time-picker.min.js index aff961b..fd13ca4 100644 --- a/dist/js/md-date-time-picker.min.js +++ b/dist/js/md-date-time-picker.min.js @@ -1 +1 @@ -"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function t(t,e){for(var i=0;i=n;n++,r+=5){var c=document.createElement("div"),_=document.createElement("span");c.classList.add(d),_.textContent=n,c.classList.add(s+r),o===n&&(c.id=i,c.classList.add(a),e.classList.add(s+r)),c.appendChild(_),l.appendChild(c)}}else{o=parseInt(this._sDialog.tDate.format("h"),10);for(var m=1,h=10;12>=m;m++,h+=10){var p=document.createElement("div"),u=document.createElement("span");p.classList.add(d),u.textContent=m,p.classList.add(s+h),o===m&&(p.id=i,p.classList.add(a),e.classList.add(s+h)),p.appendChild(u),l.appendChild(p)}}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(l)}},{key:"_initMinute",value:function(){for(var t=this._sDialog.minuteView,e=parseInt(this._sDialog.tDate.format("m"),10),i="mddtp-minute__selected",a="mddtp-picker__cell--selected",s="mddtp-picker__cell--rotate-",d="mddtp-picker__cell",l=document.createDocumentFragment(),o=5,n=10;60>=o;o+=5,n+=10){var r=document.createElement("div"),c=document.createElement("span");r.classList.add(d),60===o?c.textContent=this._numWithZero(0):c.textContent=this._numWithZero(o),0===e&&(e=60),r.classList.add(s+n),(e===o||e-1===o||e+1===o||1===e&&60===o)&&(r.id=i,r.classList.add(a)),r.appendChild(c),l.appendChild(r)}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(l)}},{key:"_initDateDialog",value:function(t){var e=this._sDialog.subtitle,i=this._sDialog.title,a=this._sDialog.titleDay,s=this._sDialog.titleMonth;this._fillText(e,t.format("YYYY")),this._fillText(a,t.format("ddd, ")),this._fillText(s,t.format("MMM D")),this._initYear(),this._initViewHolder(),this._attachEventHandlers(),this._changeMonth(),this._switchToView(e),this._switchToView(i)}},{key:"_initViewHolder",value:function(){var t=this._sDialog.tDate,e=(this._sDialog.picker,this._sDialog.current),i=this._sDialog.previous,a=this._sDialog.next,s=this._past,d=this._future;t.isBefore(s,"month")&&(t=s.clone()),t.isAfter(d,"month")&&(t=d.clone()),this._sDialog.tDate=t,this._initMonth(e,t),this._initMonth(a,moment(this._getMonth(t,1))),this._initMonth(i,moment(this._getMonth(t,-1))),this._toMoveMonth()}},{key:"_initMonth",value:function(t,e){var i=e.format("MMMM YYYY"),a=t.getElementsByTagName("div");this._fillText(a[0],i);var s=document.createDocumentFragment(),d=a[3],l=parseInt(moment(e).date(1).day(),10),o=-1,n=-1,r=parseInt(moment(e).endOf("month").format("D"),10)+l-1,c=l,_="mddtp-picker__cell",m=r;moment().isSame(e,"month")&&(o=parseInt(moment().format("D"),10),o+=l-1),this._past.isSame(e,"month")&&(c=parseInt(this._past.format("D"),10),c+=l-1),this._future.isSame(e,"month")&&(m=parseInt(this._future.format("D"),10),m+=l-1),this._sDialog.sDate.isSame(e,"month")&&(n=parseInt(moment(e).format("D"),10),n+=l-1);for(var h=0;42>h;h++){var p=document.createElement("span"),u=h-l+1;h>=l&&r>=h&&(h>m||c>h?p.classList.add(_+"--disabled"):p.classList.add(_),this._fillText(p,u)),o===h&&p.classList.add(_+"--today"),n===h&&(p.classList.add(_+"--selected"),p.id="mddtp-date__selected"),s.appendChild(p)}for(;d.lastChild;)d.removeChild(d.lastChild);d.appendChild(s),this._addCellClickEvent(d)}},{key:"_initYear",value:function(){for(var t=this._sDialog.years,e=this._sDialog.tDate.year(),i=document.createDocumentFragment(),a=this._past.year(),s=this._future.year(),d=a;s>=d;d++){var l=document.createElement("li");l.textContent=d,d===e&&(l.id="mddtp-date__currentYear",l.classList.add("mddtp-picker__li--current")),i.appendChild(l)}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(i),this._changeYear(t)}},{key:"_switchToView",value:function(t){var e=this;"date"==this._type?t.addEventListener("click",function(){e._switchToDateView(t,e)}):t.addEventListener("click",function(){e._switchToTimeView(e)})}},{key:"_switchToTimeView",value:function(e){var i=e._sDialog.hourView,a=e._sDialog.minuteView,s=e._sDialog.hour,d=e._sDialog.minute,l="mddtp-picker__color--active",o="mddtp-picker__circularView--hidden",n="mddtp-picker__selection",r=e._sDialog.needle,c=e._sDialog.circularHolder,_=e._sDialog.circle,m=e._sDialog.fakeNeedle,h=60,p=void 0;i.classList.toggle(o),a.classList.toggle(o),s.classList.toggle(l),d.classList.toggle(l),r.className="",r.classList.add(n),t.dialog.view?(p=e._sDialog.sDate.format("m"),setTimeout(function(){var t=c.getBoundingClientRect(),e=_.getBoundingClientRect();m.setAttribute("style","left:"+(e.left-t.left)+"px;top:"+(e.top-t.top)+"px")},300)):e._mode?(h=24,p=e._sDialog.sDate.format("H")):(h=12,p=e._sDialog.sDate.format("h"));var u=e._calcRotation(h,parseInt(p,10));u&&r.classList.add(u),t.dialog.view=!t.dialog.view}},{key:"_switchToDateView",value:function(e,i){e.setAttribute("disabled","");var a=i._sDialog.viewHolder,s=i._sDialog.years,d=i._sDialog.title,l=i._sDialog.subtitle,o=document.getElementById("mddtp-date__currentYear");t.dialog.view?(a.classList.add("zoomOut"),s.classList.remove("mddtp-picker__years--invisible"),s.classList.add("zoomIn"),o.scrollIntoViewIfNeeded()):(s.classList.add("zoomOut"),a.classList.remove("zoomOut"),a.classList.add("zoomIn"),setTimeout(function(){s.classList.remove("zoomIn","zoomOut"),s.classList.add("mddtp-picker__years--invisible"),a.classList.remove("zoomIn")},300)),d.classList.toggle("mddtp-picker__color--active"),l.classList.toggle("mddtp-picker__color--active"),t.dialog.view=!t.dialog.view,setTimeout(function(){e.removeAttribute("disabled")},300)}},{key:"_addClockEvent",value:function(){var t=this,e=this._sDialog.hourView,i=this._sDialog.minuteView,a="mddtp-picker__cell--selected";e.addEventListener("click",function(e){var i="mddtp-hour__selected",s=document.getElementById(i),d=0;e.target&&"SPAN"==e.target.nodeName&&(s.id="",s.classList.remove(a),e.target.parentNode.classList.add(a),e.target.parentNode.id=i,d=t._mode?e.target.textContent:"AM"===t._sDialog.sDate.format("A")?e.target.textContent:parseInt(e.target.textContent,10)+12,t._sDialog.sDate.hour(d),t._sDialog.hour.textContent=e.target.textContent,t._switchToTimeView(t))}),i.addEventListener("click",function(e){var i="mddtp-minute__selected",s=document.getElementById(i),d=0;e.target&&"SPAN"==e.target.nodeName&&(s&&(s.id="",s.classList.remove(a)),e.target.parentNode.classList.add(a),e.target.parentNode.id=i,d=e.target.textContent,t._sDialog.sDate.minute(d),t._sDialog.minute.textContent=d,t._switchToTimeView(t))})}},{key:"_addCellClickEvent",value:function(t){var e=this;t.addEventListener("click",function(t){if(t.target&&"SPAN"==t.target.nodeName&&t.target.classList.contains("mddtp-picker__cell")){var i=(e._sDialog.picker,t.target.textContent),a=e._sDialog.tDate.date(i),s="mddtp-date__selected",d="mddtp-picker__cell--selected",l=document.getElementById(s),o=e._sDialog.subtitle,n=e._sDialog.titleDay,r=e._sDialog.titleMonth;l&&(l.classList.remove(d),l.id=""),t.target.classList.add(d),t.target.id=s,e._sDialog.sDate=a.clone(),e._fillText(o,a.year()),e._fillText(n,a.format("ddd, ")),e._fillText(r,a.format("MMM D"))}})}},{key:"_toMoveMonth",value:function(){var t=this._sDialog.tDate,e=this._sDialog.left,i=this._sDialog.right,a=this._past,s=this._future;e.removeAttribute("disabled"),i.removeAttribute("disabled"),e.classList.remove("mddtp-button--disabled"),i.classList.remove("mddtp-button--disabled"),t.isSame(a,"month")&&(e.setAttribute("disabled",""),e.classList.add("mddtp-button--disabled")),t.isSame(s,"month")&&(i.setAttribute("disabled",""),i.classList.add("mddtp-button--disabled"))}},{key:"_changeMonth",value:function(){function t(t,s){var d=!1,o=e._sDialog.next,n=e._sDialog.current,r=e._sDialog.previous;i.setAttribute("disabled",""),a.setAttribute("disabled",""),n.classList.add(t),r.classList.add(t),o.classList.add(t);var c=s.cloneNode(!0),_=void 0;s===o?(_=r,n.parentNode.appendChild(c),o.id=n.id,n.id=r.id,r=n,n=o,o=c):(d=!0,_=o,r.id=n.id,n.id=o.id,o=n,n=r),setTimeout(function(){s===r&&(n.parentNode.insertBefore(c,n),r=c),e._sDialog.next=o,e._sDialog.current=n,e._sDialog.previous=r,n.classList.add(l),o.classList.add(l),r.classList.add(l),n.classList.remove(t),o.classList.remove(t),r.classList.remove(t),_.parentNode.removeChild(_)},300),setTimeout(function(){n.classList.remove(l),o.classList.remove(l),r.classList.remove(l),d?e._sDialog.tDate=e._getMonth(e._sDialog.tDate,-1):e._sDialog.tDate=e._getMonth(e._sDialog.tDate,1),e._initViewHolder()},350),setTimeout(function(){i.classList.contains("mddtp-button--disabled")||i.removeAttribute("disabled"),a.classList.contains("mddtp-button--disabled")||a.removeAttribute("disabled")},400)}var e=this,i=this._sDialog.left,a=this._sDialog.right,s="mddtp-picker__view--left",d="mddtp-picker__view--right",l="mddtp-picker__view--pause";i.addEventListener("click",function(){t(d,e._sDialog.previous)}),a.addEventListener("click",function(){t(s,e._sDialog.next)})}},{key:"_changeYear",value:function(t){var e=this;t.addEventListener("click",function(i){if(i.target&&"LI"==i.target.nodeName){var a=document.getElementById("mddtp-date__currentYear");a.id="",a.classList.remove("mddtp-picker__li--current"),i.target.id="mddtp-date__currentYear",i.target.classList.add("mddtp-picker__li--current"),e._switchToDateView(t,e),e._sDialog.tDate.year(parseInt(i.target.textContent,10)),e._initViewHolder()}})}},{key:"_changeM",value:function(){var t=this,e=this._sDialog.AM,i=this._sDialog.PM;e.addEventListener("click",function(a){var s=t._sDialog.sDate.format("A");"PM"===s&&(t._sDialog.sDate.subtract(12,"h"),e.classList.toggle("mddtp-picker__color--active"),i.classList.toggle("mddtp-picker__color--active"))}),i.addEventListener("click",function(a){var s=t._sDialog.sDate.format("A");"AM"===s&&(t._sDialog.sDate.add(12,"h"),e.classList.toggle("mddtp-picker__color--active"),i.classList.toggle("mddtp-picker__color--active"))})}},{key:"_dragDial",value:function(){var t=this,e=this._sDialog.needle,i=this._sDialog.circle,a=this._sDialog.fakeNeedle,s=this._sDialog.circularHolder,d=this._sDialog.minute,l="mddtp-picker__selection--quick",o="mddtp-picker__selection",n="mddtp-picker__cell--selected",r="mddtp-picker__cell--rotate-",c=s.getBoundingClientRect(),_=void 0,m=new Draggabilly(a,{containment:!0});m.on("pointerDown",function(){c=s.getBoundingClientRect()}),m.on("dragMove",function(t){var i=t.clientX-c.left-c.width/2,a=t.clientY-c.top-c.height/2,s=Math.atan2(-a,i);e.className="",0>s&&(s+=2*Math.PI),s*=180/Math.PI,s=360-s,s>270&&(s-=360),_=parseInt(s/6);var d=Math.abs(6*_-s),n=Math.abs(6*(_+1)-s);d>n&&_++,_+=15,e.classList.add(o,l,r+2*_)}),m.on("dragEnd",function(){var s=t._sDialog.minuteView.getElementsByTagName("div"),o="mddtp-minute__selected",r=document.getElementById(o),m=i.getBoundingClientRect();a.setAttribute("style","left:"+(m.left-c.left)+"px;top:"+(m.top-c.top)+"px"),e.classList.remove(l);var h=_;1===h&&(h=60),h=t._nearestDivisor(h,5),60===_&&(_=0),r&&(r.id="",r.classList.remove(n)),h>0&&(h/=5,h--,s[h].id=o,s[h].classList.add(n)),d.textContent=t._numWithZero(_),t._sDialog.sDate.minutes(_)})}},{key:"_attachEventHandlers",value:function(){var t=this,e=this._sDialog.ok,i=this._sDialog.cancel;i.addEventListener("click",function(){t.toggle()}),e.addEventListener("click",function(){t._init=t._sDialog.sDate,t.toggle()})}},{key:"_getMonth",value:function(t,e){var i=void 0;return i=t.clone(),e>0?i.add(Math.abs(e),"M"):i.subtract(Math.abs(e),"M")}},{key:"_nearestDivisor",value:function(t,e){return t%e===0?t:(t-1)%e===0?t-1:(t+1)%e===0?t+1:-1}},{key:"_numWithZero",value:function(t){return t>9?""+t:"0"+t}},{key:"_fillText",value:function(t,e){t.firstChild?t.firstChild.nodeValue=e:t.appendChild(document.createTextNode(e))}},{key:"_addId",value:function(t,e){t.id="mddtp-"+this._type+"__"+e}},{key:"_addClass",value:function(t,e,i){t.classList.add("mddtp-picker__"+e);var a=0;for(i&&(a=i.length,i.reverse());a--;)t.classList.add(i[a])}},{key:"_addView",value:function(t){for(var e=document.createElement("div"),i=document.createElement("div"),a=document.createElement("div"),s=document.createElement("div"),d=["S","F","T","W","T","M","S"],l=7;l--;){var o=document.createElement("span");o.textContent=d[l],a.appendChild(o)}this._addClass(e,"month"),this._addClass(i,"grid"),this._addClass(a,"th"),this._addClass(s,"tr"),t.appendChild(e),t.appendChild(i),i.appendChild(a),i.appendChild(s)}},{key:"_calcRotation",value:function(t,e){return e*=12===t?10:24===t?5:2,60===t&&0===e&&(e=120),"mddtp-picker__cell--rotate-"+e}}],[{key:"dialog",get:function(){return _dialog}}]),t}();Element.prototype.scrollIntoViewIfNeeded||(Element.prototype.scrollIntoViewIfNeeded=function(t){t=0===arguments.length?!0:!!t;var e=this.parentNode,i=window.getComputedStyle(e,null),a=parseInt(i.getPropertyValue("border-top-width"),10),s=parseInt(i.getPropertyValue("border-left-width"),10),d=this.offsetTop-e.offsetTope.scrollTop+e.clientHeight,o=this.offsetLeft-e.offsetLefte.scrollLeft+e.clientWidth,r=d&&!l;(d||l)&&t&&(e.scrollTop=this.offsetTop-e.offsetTop-e.clientHeight/2-a+this.clientHeight/2),(o||n)&&t&&(e.scrollLeft=this.offsetLeft-e.offsetLeft-e.clientWidth/2-s+this.clientWidth/2),(d||l||o||n)&&!t&&this.scrollIntoView(r)}),Object.defineProperty&&Object.getOwnPropertyDescriptor&&Object.getOwnPropertyDescriptor(Element.prototype,"textContent")&&!Object.getOwnPropertyDescriptor(Element.prototype,"textContent").get&&!function(){var t=Object.getOwnPropertyDescriptor(Element.prototype,"innerText");Object.defineProperty(Element.prototype,"textContent",{get:function(){return t.get.call(this)},set:function(e){return t.set.call(this,e)}})}(); \ No newline at end of file +"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function t(t,e){for(var i=0;i=n;n++,r+=5){var c=document.createElement("div"),_=document.createElement("span");c.classList.add(d),_.textContent=n,c.classList.add(s+r),o===n&&(c.id=i,c.classList.add(a),e.classList.add(s+r)),c.appendChild(_),l.appendChild(c)}}else{o=parseInt(this._sDialog.tDate.format("h"),10);for(var h=1,m=10;12>=h;h++,m+=10){var p=document.createElement("div"),u=document.createElement("span");p.classList.add(d),u.textContent=h,p.classList.add(s+m),o===h&&(p.id=i,p.classList.add(a),e.classList.add(s+m)),p.appendChild(u),l.appendChild(p)}}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(l)}},{key:"_initMinute",value:function(){for(var t=this._sDialog.minuteView,e=parseInt(this._sDialog.tDate.format("m"),10),i="mddtp-minute__selected",a="mddtp-picker__cell--selected",s="mddtp-picker__cell--rotate-",d="mddtp-picker__cell",l=document.createDocumentFragment(),o=5,n=10;60>=o;o+=5,n+=10){var r=document.createElement("div"),c=document.createElement("span");r.classList.add(d),60===o?c.textContent=this._numWithZero(0):c.textContent=this._numWithZero(o),0===e&&(e=60),r.classList.add(s+n),(e===o||e-1===o||e+1===o||1===e&&60===o)&&(r.id=i,r.classList.add(a)),r.appendChild(c),l.appendChild(r)}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(l)}},{key:"_initDateDialog",value:function(t){var e=this._sDialog.subtitle,i=this._sDialog.title,a=this._sDialog.titleDay,s=this._sDialog.titleMonth;this._fillText(e,t.format("YYYY")),this._fillText(a,t.format("ddd, ")),this._fillText(s,t.format("MMM D")),this._initYear(),this._initViewHolder(),this._attachEventHandlers(),this._changeMonth(),this._switchToView(e),this._switchToView(i)}},{key:"_initViewHolder",value:function(){var t=this._sDialog.tDate,e=(this._sDialog.picker,this._sDialog.current),i=this._sDialog.previous,a=this._sDialog.next,s=this._past,d=this._future;t.isBefore(s,"month")&&(t=s.clone()),t.isAfter(d,"month")&&(t=d.clone()),this._sDialog.tDate=t,this._initMonth(e,t),this._initMonth(a,moment(this._getMonth(t,1))),this._initMonth(i,moment(this._getMonth(t,-1))),this._toMoveMonth()}},{key:"_initMonth",value:function(t,e){var i=e.format("MMMM YYYY"),a=t.getElementsByTagName("div");this._fillText(a[0],i);var s=document.createDocumentFragment(),d=a[3],l=parseInt(moment(e).date(1).day(),10),o=-1,n=-1,r=parseInt(moment(e).endOf("month").format("D"),10)+l-1,c=l,_="mddtp-picker__cell",h=r;moment().isSame(e,"month")&&(o=parseInt(moment().format("D"),10),o+=l-1),this._past.isSame(e,"month")&&(c=parseInt(this._past.format("D"),10),c+=l-1),this._future.isSame(e,"month")&&(h=parseInt(this._future.format("D"),10),h+=l-1),this._sDialog.sDate.isSame(e,"month")&&(n=parseInt(moment(e).format("D"),10),n+=l-1);for(var m=0;42>m;m++){var p=document.createElement("span"),u=m-l+1;m>=l&&r>=m&&(m>h||c>m?p.classList.add(_+"--disabled"):p.classList.add(_),this._fillText(p,u)),o===m&&p.classList.add(_+"--today"),n===m&&(p.classList.add(_+"--selected"),p.id="mddtp-date__selected"),s.appendChild(p)}for(;d.lastChild;)d.removeChild(d.lastChild);d.appendChild(s),this._addCellClickEvent(d)}},{key:"_initYear",value:function(){for(var t=this._sDialog.years,e=this._sDialog.tDate.year(),i=document.createDocumentFragment(),a=this._past.year(),s=this._future.year(),d=a;s>=d;d++){var l=document.createElement("li");l.textContent=d,d===e&&(l.id="mddtp-date__currentYear",l.classList.add("mddtp-picker__li--current")),i.appendChild(l)}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(i),this._changeYear(t)}},{key:"_switchToView",value:function(t){var e=this;"date"==this._type?t.onclick=function(){e._switchToDateView(t,e)}:t.onclick=function(){e._switchToTimeView(e)}}},{key:"_switchToTimeView",value:function(e){var i=e._sDialog.hourView,a=e._sDialog.minuteView,s=e._sDialog.hour,d=e._sDialog.minute,l="mddtp-picker__color--active",o="mddtp-picker__circularView--hidden",n="mddtp-picker__selection",r=e._sDialog.needle,c=e._sDialog.circularHolder,_=e._sDialog.circle,h=e._sDialog.fakeNeedle,m=60,p=void 0;i.classList.toggle(o),a.classList.toggle(o),s.classList.toggle(l),d.classList.toggle(l),r.className="",r.classList.add(n),t.dialog.view?(p=e._sDialog.sDate.format("m"),setTimeout(function(){var t=c.getBoundingClientRect(),e=_.getBoundingClientRect();h.setAttribute("style","left:"+(e.left-t.left)+"px;top:"+(e.top-t.top)+"px")},300)):e._mode?(m=24,p=e._sDialog.sDate.format("H")):(m=12,p=e._sDialog.sDate.format("h"));var u=e._calcRotation(m,parseInt(p,10));u&&r.classList.add(u),t.dialog.view=!t.dialog.view}},{key:"_switchToDateView",value:function(e,i){e.setAttribute("disabled","");var a=i._sDialog.viewHolder,s=i._sDialog.years,d=i._sDialog.title,l=i._sDialog.subtitle,o=document.getElementById("mddtp-date__currentYear");t.dialog.view?(a.classList.add("zoomOut"),s.classList.remove("mddtp-picker__years--invisible"),s.classList.add("zoomIn"),o.scrollIntoViewIfNeeded()):(s.classList.add("zoomOut"),a.classList.remove("zoomOut"),a.classList.add("zoomIn"),setTimeout(function(){s.classList.remove("zoomIn","zoomOut"),s.classList.add("mddtp-picker__years--invisible"),a.classList.remove("zoomIn")},300)),d.classList.toggle("mddtp-picker__color--active"),l.classList.toggle("mddtp-picker__color--active"),t.dialog.view=!t.dialog.view,setTimeout(function(){e.removeAttribute("disabled")},300)}},{key:"_addClockEvent",value:function(){var t=this,e=this._sDialog.hourView,i=this._sDialog.minuteView,a="mddtp-picker__cell--selected";e.onclick=function(e){var i="mddtp-hour__selected",s=document.getElementById(i),d=0;e.target&&"SPAN"==e.target.nodeName&&(s.id="",s.classList.remove(a),e.target.parentNode.classList.add(a),e.target.parentNode.id=i,d=t._mode?e.target.textContent:"AM"===t._sDialog.sDate.format("A")?e.target.textContent:parseInt(e.target.textContent,10)+12,t._sDialog.sDate.hour(d),t._sDialog.hour.textContent=e.target.textContent,t._switchToTimeView(t))},i.onclick=function(e){var i="mddtp-minute__selected",s=document.getElementById(i),d=0;e.target&&"SPAN"==e.target.nodeName&&(s&&(s.id="",s.classList.remove(a)),e.target.parentNode.classList.add(a),e.target.parentNode.id=i,d=e.target.textContent,t._sDialog.sDate.minute(d),t._sDialog.minute.textContent=d,t._switchToTimeView(t))}}},{key:"_addCellClickEvent",value:function(t){var e=this;t.onclick=function(t){if(t.target&&"SPAN"==t.target.nodeName&&t.target.classList.contains("mddtp-picker__cell")){var i=(e._sDialog.picker,t.target.textContent),a=e._sDialog.tDate.date(i),s="mddtp-date__selected",d="mddtp-picker__cell--selected",l=document.getElementById(s),o=e._sDialog.subtitle,n=e._sDialog.titleDay,r=e._sDialog.titleMonth;l&&(l.classList.remove(d),l.id=""),t.target.classList.add(d),t.target.id=s,e._sDialog.sDate=a.clone(),e._fillText(o,a.year()),e._fillText(n,a.format("ddd, ")),e._fillText(r,a.format("MMM D"))}}}},{key:"_toMoveMonth",value:function(){var t=this._sDialog.tDate,e=this._sDialog.left,i=this._sDialog.right,a=this._past,s=this._future;e.removeAttribute("disabled"),i.removeAttribute("disabled"),e.classList.remove("mddtp-button--disabled"),i.classList.remove("mddtp-button--disabled"),t.isSame(a,"month")&&(e.setAttribute("disabled",""),e.classList.add("mddtp-button--disabled")),t.isSame(s,"month")&&(i.setAttribute("disabled",""),i.classList.add("mddtp-button--disabled"))}},{key:"_changeMonth",value:function(){function t(t,s){var d=!1,o=e._sDialog.next,n=e._sDialog.current,r=e._sDialog.previous;i.setAttribute("disabled",""),a.setAttribute("disabled",""),n.classList.add(t),r.classList.add(t),o.classList.add(t);var c=s.cloneNode(!0),_=void 0;s===o?(_=r,n.parentNode.appendChild(c),o.id=n.id,n.id=r.id,r=n,n=o,o=c):(d=!0,_=o,r.id=n.id,n.id=o.id,o=n,n=r),setTimeout(function(){s===r&&(n.parentNode.insertBefore(c,n),r=c),e._sDialog.next=o,e._sDialog.current=n,e._sDialog.previous=r,n.classList.add(l),o.classList.add(l),r.classList.add(l),n.classList.remove(t),o.classList.remove(t),r.classList.remove(t),_.parentNode.removeChild(_)},300),setTimeout(function(){n.classList.remove(l),o.classList.remove(l),r.classList.remove(l),d?e._sDialog.tDate=e._getMonth(e._sDialog.tDate,-1):e._sDialog.tDate=e._getMonth(e._sDialog.tDate,1),e._initViewHolder()},350),setTimeout(function(){i.classList.contains("mddtp-button--disabled")||i.removeAttribute("disabled"),a.classList.contains("mddtp-button--disabled")||a.removeAttribute("disabled")},400)}var e=this,i=this._sDialog.left,a=this._sDialog.right,s="mddtp-picker__view--left",d="mddtp-picker__view--right",l="mddtp-picker__view--pause";i.onclick=function(){t(d,e._sDialog.previous)},a.onclick=function(){t(s,e._sDialog.next)}}},{key:"_changeYear",value:function(t){var e=this;t.onclick=function(i){if(i.target&&"LI"==i.target.nodeName){var a=document.getElementById("mddtp-date__currentYear");a.id="",a.classList.remove("mddtp-picker__li--current"),i.target.id="mddtp-date__currentYear",i.target.classList.add("mddtp-picker__li--current"),e._switchToDateView(t,e),e._sDialog.tDate.year(parseInt(i.target.textContent,10)),e._initViewHolder()}}}},{key:"_changeM",value:function(){var t=this,e=this._sDialog.AM,i=this._sDialog.PM;e.onclick=function(a){var s=t._sDialog.sDate.format("A");"PM"===s&&(t._sDialog.sDate.subtract(12,"h"),e.classList.toggle("mddtp-picker__color--active"),i.classList.toggle("mddtp-picker__color--active"))},i.onclick=function(a){var s=t._sDialog.sDate.format("A");"AM"===s&&(t._sDialog.sDate.add(12,"h"),e.classList.toggle("mddtp-picker__color--active"),i.classList.toggle("mddtp-picker__color--active"))}}},{key:"_dragDial",value:function(){var t=this,e=this._sDialog.needle,i=this._sDialog.circle,a=this._sDialog.fakeNeedle,s=this._sDialog.circularHolder,d=this._sDialog.minute,l="mddtp-picker__selection--quick",o="mddtp-picker__selection",n="mddtp-picker__cell--selected",r="mddtp-picker__cell--rotate-",c=s.getBoundingClientRect(),_=void 0,h=new Draggabilly(a,{containment:!0});h.on("pointerDown",function(){c=s.getBoundingClientRect()}),h.on("dragMove",function(t){var i=t.clientX-c.left-c.width/2,a=t.clientY-c.top-c.height/2,s=Math.atan2(-a,i);e.className="",0>s&&(s+=2*Math.PI),s*=180/Math.PI,s=360-s,s>270&&(s-=360),_=parseInt(s/6);var d=Math.abs(6*_-s),n=Math.abs(6*(_+1)-s);d>n&&_++,_+=15,e.classList.add(o,l,r+2*_)}),h.on("dragEnd",function(){var s=t._sDialog.minuteView.getElementsByTagName("div"),o="mddtp-minute__selected",r=document.getElementById(o),h=i.getBoundingClientRect();a.setAttribute("style","left:"+(h.left-c.left)+"px;top:"+(h.top-c.top)+"px"),e.classList.remove(l);var m=_;1===m&&(m=60),m=t._nearestDivisor(m,5),60===_&&(_=0),r&&(r.id="",r.classList.remove(n)),m>0&&(m/=5,m--,s[m].id=o,s[m].classList.add(n)),d.textContent=t._numWithZero(_),t._sDialog.sDate.minutes(_)})}},{key:"_attachEventHandlers",value:function(){var t=this,e=this._sDialog.ok,i=this._sDialog.cancel,a=document.createEvent("Event"),s=document.createEvent("Event");a.initEvent("onCancel",!0,!0),s.initEvent("onOk",!0,!0),i.onclick=function(){t.toggle(),t._trigger&&t._trigger.dispatchEvent(a)},e.onclick=function(){t._init=t._sDialog.sDate,t.toggle(),t._trigger&&t._trigger.dispatchEvent(s)}}},{key:"_getMonth",value:function(t,e){var i=void 0;return i=t.clone(),e>0?i.add(Math.abs(e),"M"):i.subtract(Math.abs(e),"M")}},{key:"_nearestDivisor",value:function(t,e){return t%e===0?t:(t-1)%e===0?t-1:(t+1)%e===0?t+1:-1}},{key:"_numWithZero",value:function(t){return t>9?""+t:"0"+t}},{key:"_fillText",value:function(t,e){t.firstChild?t.firstChild.nodeValue=e:t.appendChild(document.createTextNode(e))}},{key:"_addId",value:function(t,e){t.id="mddtp-"+this._type+"__"+e}},{key:"_addClass",value:function(t,e,i){t.classList.add("mddtp-picker__"+e);var a=0;for(i&&(a=i.length,i.reverse());a--;)t.classList.add(i[a])}},{key:"_addView",value:function(t){for(var e=document.createElement("div"),i=document.createElement("div"),a=document.createElement("div"),s=document.createElement("div"),d=["S","F","T","W","T","M","S"],l=7;l--;){var o=document.createElement("span");o.textContent=d[l],a.appendChild(o)}this._addClass(e,"month"),this._addClass(i,"grid"),this._addClass(a,"th"),this._addClass(s,"tr"),t.appendChild(e),t.appendChild(i),i.appendChild(a),i.appendChild(s)}},{key:"_calcRotation",value:function(t,e){return e*=12===t?10:24===t?5:2,60===t&&0===e&&(e=120),"mddtp-picker__cell--rotate-"+e}}],[{key:"dialog",get:function(){return _dialog}}]),t}();!function(){Element.prototype.scrollIntoViewIfNeeded||(Element.prototype.scrollIntoViewIfNeeded=function(t){t=0===arguments.length?!0:!!t;var e=this.parentNode,i=window.getComputedStyle(e,null),a=parseInt(i.getPropertyValue("border-top-width"),10),s=parseInt(i.getPropertyValue("border-left-width"),10),d=this.offsetTop-e.offsetTope.scrollTop+e.clientHeight,o=this.offsetLeft-e.offsetLefte.scrollLeft+e.clientWidth,r=d&&!l;(d||l)&&t&&(e.scrollTop=this.offsetTop-e.offsetTop-e.clientHeight/2-a+this.clientHeight/2),(o||n)&&t&&(e.scrollLeft=this.offsetLeft-e.offsetLeft-e.clientWidth/2-s+this.clientWidth/2),(d||l||o||n)&&!t&&this.scrollIntoView(r)}),Object.defineProperty&&Object.getOwnPropertyDescriptor&&Object.getOwnPropertyDescriptor(Element.prototype,"textContent")&&!Object.getOwnPropertyDescriptor(Element.prototype,"textContent").get&&!function(){var t=Object.getOwnPropertyDescriptor(Element.prototype,"innerText");Object.defineProperty(Element.prototype,"textContent",{get:function(){return t.get.call(this)},set:function(e){return t.set.call(this,e)}})}(),!window.addEventListener&&function(t,e,i,a,s,d,l){t[a]=e[a]=i[a]=function(t,e){var i=this;l.unshift([i,t,e,function(t){t.currentTarget=i,t.preventDefault=function(){t.returnValue=!1},t.stopPropagation=function(){t.cancelBubble=!0},t.target=t.srcElement||i,e.call(i,t)}]),this.attachEvent("on"+t,l[0][3])},t[s]=e[s]=i[s]=function(t,e){for(var i,a=0;i=l[a];++a)if(i[0]==this&&i[1]==t&&i[2]==e)return this.detachEvent("on"+t,l.splice(a,1)[0][3])},t[d]=e[d]=i[d]=function(t){return this.fireEvent("on"+t.type,t)}}(Window.prototype,HTMLDocument.prototype,Element.prototype,"addEventListener","removeEventListener","dispatchEvent",[])}(); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 25c0fd4..6cad498 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,3 +1,5 @@ +'use strict'; + var gulp = require('gulp'); var plumber = require('gulp-plumber'); var rename = require('gulp-rename'); @@ -295,8 +297,8 @@ gulp.task('generate-themes', gulp.series('init-themes','themes', 'generate-style })); gulp.task('default', gulp.series('browser-sync', function () { - gulp.watch(src.scss, ['styles']); - gulp.watch(src.js, ['scripts']); - gulp.watch(src.svg, ['images']); - gulp.watch(dist.html, ['bs-reload']); + gulp.watch(src.js, 'scripts'); + gulp.watch(src.scss, 'styles'); + gulp.watch(src.svg, 'images'); + gulp.watch(dist.html, 'bs-reload'); })); diff --git a/package.json b/package.json index a6038e9..10a73db 100644 --- a/package.json +++ b/package.json @@ -1,56 +1,58 @@ { - "name": "md-date-time-picker", - "version": "1.0.1", - "description": "An implementation of the Material Design Picker components in vanilla CSS, JS and HTML", - "keywords": [ - "material", - "design", - "date", - "time", - "picker", - "pickers", - "dialog", - "calendar", - "clock", - "input" - ], - "main": "dist", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "Puranjay Jain ", - "license": "MIT", - "devDependencies": { - "babel-plugin-transform-member-expression-literals": "^6.5.0", - "babel-plugin-transform-merge-sibling-variables": "^6.5.0", - "babel-plugin-transform-minify-booleans": "^6.5.0", - "babel-plugin-transform-property-literals": "^6.5.0", - "babel-preset-es2015": "^6.6.0", - "browser-sync": "^2.6.5", - "del": "^2.2.0", - "gulp": "github:gulpjs/gulp#4.0", - "gulp-autoprefixer": "^3.0.2", - "gulp-babel": "^6.1.2", - "gulp-cache": "^0.2.8", - "gulp-concat": "^2.5.2", - "gulp-minify-css": "1.0.0", - "gulp-plumber": "1.0.0", - "gulp-rename": "^1.2.0", - "gulp-replace": "^0.5.4", - "gulp-sass": "^2.0.0", - "gulp-uglify": "^1.2.0", - "webpack": "^1.12.14" - }, - "dependencies": { - "moment": "^2.12.0", - "draggabilly": "^2.1.0" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/puranjayjain/md-date-time-picker.git" - }, - "bugs": { - "url": "https://github.com/puranjayjain/md-date-time-picker/issues" - }, - "homepage": "https://puranjayjain.github.io/md-date-time-picker" + "name": "md-date-time-picker", + "version": "1.1.0", + "description": "An implementation of the Material Design Picker components in vanilla CSS, JS and HTML", + "keywords": [ + "material", + "design", + "date", + "time", + "picker", + "pickers", + "dialog", + "calendar", + "clock", + "input" + ], + "main": "dist", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Puranjay Jain ", + "license": "MIT", + "devDependencies": { + "babel-plugin-transform-member-expression-literals": "^6.5.0", + "babel-plugin-transform-merge-sibling-variables": "^6.5.0", + "babel-plugin-transform-minify-booleans": "^6.5.0", + "babel-plugin-transform-property-literals": "^6.5.0", + "babel-preset-es2015": "^6.6.0", + "browser-sync": "^2.6.5", + "chokidar": "^1.4.3", + "del": "^2.2.0", + "gulp": "github:gulpjs/gulp#4.0", + "gulp-autoprefixer": "^3.0.2", + "gulp-babel": "^6.1.2", + "gulp-cache": "^0.2.8", + "gulp-concat": "^2.5.2", + "gulp-imagemin": "^2.4.0", + "gulp-minify-css": "1.0.0", + "gulp-plumber": "1.0.0", + "gulp-rename": "^1.2.0", + "gulp-replace": "^0.5.4", + "gulp-sass": "^2.0.0", + "gulp-uglify": "^1.2.0", + "webpack": "^1.12.14" + }, + "dependencies": { + "moment": "^2.12.0", + "draggabilly": "^2.1.0" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/puranjayjain/md-date-time-picker.git" + }, + "bugs": { + "url": "https://github.com/puranjayjain/md-date-time-picker/issues" + }, + "homepage": "https://puranjayjain.github.io/md-date-time-picker" } diff --git a/src/js/md-date-time-picker.js b/src/js/md-date-time-picker.js index e030b52..96bff01 100644 --- a/src/js/md-date-time-picker.js +++ b/src/js/md-date-time-picker.js @@ -1,6 +1,6 @@ /** * @package md-date-time-picker -* @version [1.0.1] +* @version [1.1.0] * @author Puranjay Jain * @license MIT * @website puranjayjain.github.io/md-date-time-picker @@ -24,17 +24,19 @@ class mdDateTimePicker { * @param {[moment]} past [the past moment till which the calendar shall render] [@default = exactly 21 Years ago from init] * @param {[moment]} future [the future moment till which the calendar shall render] [@default = init] * @param {[Boolean]} mode [this value tells whether the time dialog will have the 24 hour mode (true) or 12 hour mode (false)] [@default = false] - * @param {[string]} orientation = 'LANDSCAPE' or 'PORTRAIT' [force the orientation of the picker @default = 'LANDSCAPE'] + * @param {[string]} orientation = 'LANDSCAPE' or 'PORTRAIT' [force the orientation of the picker @default = 'LANDSCAPE'] + * @param {[element]} trigger [element on which all the events will be dispatched e.g var foo = document.getElementById('bar'), here element = foo] * * @return {[Object]} [mdDateTimePicker] */ - constructor({type, init = moment(), past = moment().subtract(21, 'years'), future = init, mode = false, orientation = 'LANDSCAPE'}) { + constructor({type, init = moment(), past = moment().subtract(21, 'years'), future = init, mode = false, orientation = 'LANDSCAPE', trigger = ''}) { this._type = type this._init = init this._past = past this._future = future this._mode = mode this._orientation = orientation + this._trigger = trigger /** * [dialog selected classes have the same structure as dialog but one level down] @@ -67,6 +69,20 @@ class mdDateTimePicker { } } + /** + * [trigger sets a new trigger for the dialog] + * + * @method trigger + * + * @param {[type]} el [element e.g var foo = document.getElementById('bar'), here el = foo] + * + */ + trigger(el) { + if (el) { + this._trigger = el + } + } + /** * [toggle toggle the dialog's between the visible and invisible state] * @@ -658,14 +674,14 @@ class mdDateTimePicker { let me = this // attach the view change button if (this._type == 'date') { - el.addEventListener('click',function () { + el.onclick = function () { me._switchToDateView(el, me) - }) + } } else { - el.addEventListener('click', function () { + el.onclick = function () { me._switchToTimeView(me) - }) + } } } @@ -770,7 +786,7 @@ class mdDateTimePicker { let hourView = this._sDialog.hourView let minuteView = this._sDialog.minuteView let sClass = 'mddtp-picker__cell--selected' - hourView.addEventListener('click', function (e) { + hourView.onclick = function (e) { let sHour = 'mddtp-hour__selected' let selectedHour = document.getElementById(sHour) let setHour = 0 @@ -799,8 +815,8 @@ class mdDateTimePicker { // switch the view me._switchToTimeView(me) } - }) - minuteView.addEventListener('click', function (e) { + } + minuteView.onclick = function (e) { let sMinute = 'mddtp-minute__selected' let selectedMinute = document.getElementById(sMinute) let setMinute = 0 @@ -821,12 +837,12 @@ class mdDateTimePicker { // switch the view me._switchToTimeView(me) } - }) + } } _addCellClickEvent(el) { let me = this - el.addEventListener('click', function (e) { + el.onclick = function (e) { if (e.target && e.target.nodeName == 'SPAN' && e.target.classList.contains('mddtp-picker__cell')) { let picker = me._sDialog.picker let day = e.target.textContent @@ -851,7 +867,7 @@ class mdDateTimePicker { me._fillText(titleDay, currentDate.format('ddd, ')) me._fillText(titleMonth, currentDate.format('MMM D')) } - }) + } } _toMoveMonth() { @@ -881,13 +897,13 @@ class mdDateTimePicker { let mLeftClass = 'mddtp-picker__view--left' let mRightClass = 'mddtp-picker__view--right' let pause = 'mddtp-picker__view--pause' - left.addEventListener('click', function () { + left.onclick = function () { moveStep(mRightClass, me._sDialog.previous) - }) + } - right.addEventListener('click', function () { + right.onclick = function () { moveStep(mLeftClass, me._sDialog.next) - }) + } function moveStep(aClass, to) { /** @@ -972,7 +988,7 @@ class mdDateTimePicker { */ _changeYear(el) { let me = this - el.addEventListener('click', function (e) { + el.onclick = function (e) { if (e.target && e.target.nodeName == 'LI') { let selected = document.getElementById('mddtp-date__currentYear') // clear previous selected @@ -988,7 +1004,7 @@ class mdDateTimePicker { // update the dialog me._initViewHolder() } - }) + } } /** @@ -1002,22 +1018,22 @@ class mdDateTimePicker { let me = this let AM = this._sDialog.AM let PM = this._sDialog.PM - AM.addEventListener('click', function (e) { + AM.onclick = function (e) { let m = me._sDialog.sDate.format('A') if (m === 'PM') { me._sDialog.sDate.subtract(12, 'h') AM.classList.toggle('mddtp-picker__color--active') PM.classList.toggle('mddtp-picker__color--active') } - }) - PM.addEventListener('click', function (e) { + } + PM.onclick = function (e) { let m = me._sDialog.sDate.format('A') if (m === 'AM') { me._sDialog.sDate.add(12, 'h') AM.classList.toggle('mddtp-picker__color--active') PM.classList.toggle('mddtp-picker__color--active') } - }) + } } _dragDial() { @@ -1104,13 +1120,26 @@ class mdDateTimePicker { let me = this let ok = this._sDialog.ok let cancel = this._sDialog.cancel - cancel.addEventListener('click', function () { + // create cutom events to dispatch + let onCancel = document.createEvent('Event') + let onOk = document.createEvent('Event') + // initiate the events + onCancel.initEvent('onCancel', true, true) + onOk.initEvent('onOk', true, true) + // normal events + cancel.onclick = function () { me.toggle() - }) - ok.addEventListener('click', function () { + if (me._trigger) { + me._trigger.dispatchEvent(onCancel) + } + } + ok.onclick = function () { me._init = me._sDialog.sDate me.toggle() - }) + if (me._trigger) { + me._trigger.dispatchEvent(onOk) + } + } } /** @@ -1280,51 +1309,80 @@ class mdDateTimePicker { return 'mddtp-picker__cell--rotate-' + value } } +(function() { + // polyfill for scrollintoviewifneeded + if (!Element.prototype.scrollIntoViewIfNeeded) { + Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) { + centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded -// polyfill for scrollintoviewifneeded -if (!Element.prototype.scrollIntoViewIfNeeded) { - Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) { - centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded - - let parent = this.parentNode, - parentComputedStyle = window.getComputedStyle(parent, null), - parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10), - parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'), 10), - overTop = this.offsetTop - parent.offsetTop < parent.scrollTop, - overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight), - overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft, - overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth), - alignWithTop = overTop && !overBottom + let parent = this.parentNode, + parentComputedStyle = window.getComputedStyle(parent, null), + parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10), + parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'), 10), + overTop = this.offsetTop - parent.offsetTop < parent.scrollTop, + overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight), + overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft, + overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth), + alignWithTop = overTop && !overBottom - if ((overTop || overBottom) && centerIfNeeded) { - parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2 - } + if ((overTop || overBottom) && centerIfNeeded) { + parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2 + } - if ((overLeft || overRight) && centerIfNeeded) { - parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2 - } + if ((overLeft || overRight) && centerIfNeeded) { + parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2 + } - if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) { - this.scrollIntoView(alignWithTop) + if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) { + this.scrollIntoView(alignWithTop) + } } } -} -// polyfill for text content for ie8 -if (Object.defineProperty - && Object.getOwnPropertyDescriptor - && Object.getOwnPropertyDescriptor(Element.prototype, 'textContent') - && !Object.getOwnPropertyDescriptor(Element.prototype, 'textContent').get) { - (function() { - let innerText = Object.getOwnPropertyDescriptor(Element.prototype, 'innerText') - Object.defineProperty(Element.prototype, 'textContent', - { - get: function() { - return innerText.get.call(this) - }, - set: function(s) { - return innerText.set.call(this, s) + // polyfill for text content for ie8 + if (Object.defineProperty + && Object.getOwnPropertyDescriptor + && Object.getOwnPropertyDescriptor(Element.prototype, 'textContent') + && !Object.getOwnPropertyDescriptor(Element.prototype, 'textContent').get) { + (function() { + let innerText = Object.getOwnPropertyDescriptor(Element.prototype, 'innerText') + Object.defineProperty(Element.prototype, 'textContent', + { + get: function() { + return innerText.get.call(this) + }, + set: function(s) { + return innerText.set.call(this, s) + } + } + ) + })() + } + !window.addEventListener && (function (WindowPrototype, DocumentPrototype, ElementPrototype, addEventListener, removeEventListener, dispatchEvent, registry) { + WindowPrototype[addEventListener] = DocumentPrototype[addEventListener] = ElementPrototype[addEventListener] = function (type, listener) { + let target = this + + registry.unshift([target, type, listener, function (event) { + event.currentTarget = target + event.preventDefault = function () { event.returnValue = false } + event.stopPropagation = function () { event.cancelBubble = true } + event.target = event.srcElement || target + + listener.call(target, event) + }]); + + this.attachEvent("on" + type, registry[0][3]) + }; + + WindowPrototype[removeEventListener] = DocumentPrototype[removeEventListener] = ElementPrototype[removeEventListener] = function (type, listener) { + for (let index = 0, register; register = registry[index]; ++index) { + if (register[0] == this && register[1] == type && register[2] == listener) { + return this.detachEvent("on" + type, registry.splice(index, 1)[0][3]) } } - ) - })() -} + }; + + WindowPrototype[dispatchEvent] = DocumentPrototype[dispatchEvent] = ElementPrototype[dispatchEvent] = function (eventObject) { + return this.fireEvent("on" + eventObject.type, eventObject) + }; + })(Window.prototype, HTMLDocument.prototype, Element.prototype, "addEventListener", "removeEventListener", "dispatchEvent", []) +})()