diff --git a/dist/js/mdDateTimePicker.js b/dist/js/mdDateTimePicker.js index d352aab..26d6fb6 100644 --- a/dist/js/mdDateTimePicker.js +++ b/dist/js/mdDateTimePicker.js @@ -1,1455 +1,1462 @@ (function (global, factory) { - if (typeof define === "function" && define.amd) { - define(['exports', 'moment', 'draggabilly'], factory); - } else if (typeof exports !== "undefined") { - factory(exports, require('moment'), require('draggabilly')); - } else { - var mod = { - exports: {} - }; - factory(mod.exports, global.moment, global.draggabilly); - global.mdDateTimePicker = mod.exports; - } + if (typeof define === "function" && define.amd) { + define(['exports', 'moment', 'draggabilly'], factory); + } else if (typeof exports !== "undefined") { + factory(exports, require('moment'), require('draggabilly')); + } else { + var mod = { + exports: {} + }; + factory(mod.exports, global.moment, global.draggabilly); + global.mdDateTimePicker = mod.exports; + } })(this, function (exports, _moment, _draggabilly) { - 'use strict'; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _moment2 = _interopRequireDefault(_moment); - - var _draggabilly2 = _interopRequireDefault(_draggabilly); - - function _interopRequireDefault(obj) { - return obj && obj.__esModule ? obj : { - default: obj - }; - } - - function _classCallCheck(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - } - - var _createClass = function () { - function defineProperties(target, props) { - for (var i = 0, descriptor; i < props.length; i++) { - descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || !1; - descriptor.configurable = !0; - if ("value" in descriptor) descriptor.writable = !0; - Object.defineProperty(target, descriptor.key, descriptor); - } - } - - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; - }(); - - var mdDateTimePicker = function () { - /** - * [constructor of the mdDateTimePicker] - * - * @method constructor - * - * @param {String} type = 'date' or 'time [type of dialog] - * @param {moment} init [initial value for the dialog date or time, defaults to today] [@default = today] - * @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 {element} trigger [element on which all the events will be dispatched e.g var foo = document.getElementById('bar'), here element = foo] - * @param {String} ok = 'ok' [ok button's text] - * @param {String} cancel = 'cancel' [cancel button's text] - * @param {Boolean} colon = true [add an option to enable quote in 24 hour mode] - * @param {Boolean} autoClose = false [close dialog on date/time selection] - * @param {Boolean} inner24 = false [if 24-hour mode and (true), the PM hours shows in an inner dial] - * @param {String} prevHandle =
[The HTML content of the handle to go to previous month] - * @param {String} nextHandle =
[The HTML content of the handle to go to next month] - * - * @return {Object} [mdDateTimePicker] - */ - function mdDateTimePicker(_ref) { - var type = _ref.type, - _ref$init = _ref.init, - init = _ref$init === undefined ? (0, _moment2.default)() : _ref$init, - _ref$past = _ref.past, - past = _ref$past === undefined ? (0, _moment2.default)().subtract(21, 'years') : _ref$past, - _ref$future = _ref.future, - future = _ref$future === undefined ? init : _ref$future, - _ref$mode = _ref.mode, - mode = _ref$mode === undefined ? !1 : _ref$mode, - _ref$orientation = _ref.orientation, - orientation = _ref$orientation === undefined ? 'LANDSCAPE' : _ref$orientation, - _ref$trigger = _ref.trigger, - trigger = _ref$trigger === undefined ? '' : _ref$trigger, - _ref$ok = _ref.ok, - ok = _ref$ok === undefined ? 'ok' : _ref$ok, - _ref$cancel = _ref.cancel, - cancel = _ref$cancel === undefined ? 'cancel' : _ref$cancel, - _ref$colon = _ref.colon, - colon = _ref$colon === undefined ? !0 : _ref$colon, - _ref$autoClose = _ref.autoClose, - autoClose = _ref$autoClose === undefined ? !1 : _ref$autoClose, - _ref$inner = _ref.inner24, - inner24 = _ref$inner === undefined ? !1 : _ref$inner, - _ref$prevHandle = _ref.prevHandle, - prevHandle = _ref$prevHandle === undefined ? '
' : _ref$prevHandle, - _ref$nextHandle = _ref.nextHandle, - nextHandle = _ref$nextHandle === undefined ? '
' : _ref$nextHandle; - - _classCallCheck(this, mdDateTimePicker); - - this._type = type; - this._init = init; - this._past = past; - this._future = future; - this._mode = mode; - this._orientation = orientation; - this._trigger = trigger; - this._ok = ok; - this._cancel = cancel; - this._colon = colon; - this._autoClose = autoClose; - this._inner24 = inner24; - this._prevHandle = prevHandle; - this._nextHandle = nextHandle; - - /** - * [dialog selected classes have the same structure as dialog but one level down] - * @type {Object} - * All declarations starting with _ are considered @private - * e.g - * sDialog = { - * picker: 'some-picker-selected' - * } - */ - this._sDialog = {}; - // attach the dialog if not present - if (typeof document !== 'undefined' && !document.getElementById('mddtp-picker__' + this._type)) { - this._buildDialog(); - } - } - - /** - * [time to get or set the current picker's moment] - * - * @method time - * - * @param {moment} m - * - */ - - - _createClass(mdDateTimePicker, [{ - key: 'hide', - value: function hide() { - this._selectDialog(); - this._hideDialog(); - } - }, { - key: 'show', - value: function show() { - this._selectDialog(); - if (this._type === 'date') { - this._initDateDialog(this._init); - } else if (this._type === 'time') { - this._initTimeDialog(this._init); - } - this._showDialog(); - } - }, { - key: 'isOpen', - value: function isOpen() { - this._selectDialog(); - - return !!mdDateTimePicker.dialog.state; - } - }, { - key: 'isClosed', - value: function isClosed() { - this._selectDialog(); - - return !mdDateTimePicker.dialog.state; - } - }, { - key: 'toggle', - value: function toggle() { - this._selectDialog(); - // work according to the current state of the dialog - if (mdDateTimePicker.dialog.state) { - this.hide(); - } else { - this.show(); - } - } - }, { - key: '_selectDialog', - value: function _selectDialog() { - // now do what you normally would do - this._sDialog.picker = document.getElementById('mddtp-picker__' + [this._type]); - /** - * [sDialogEls stores all inner components of the selected dialog or sDialog to be later getElementById] + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + var _moment2 = _interopRequireDefault(_moment); + + var _draggabilly2 = _interopRequireDefault(_draggabilly); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj + }; + } + + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + + var _createClass = function () { + function defineProperties(target, props) { + for (var i = 0, descriptor; i < props.length; i++) { + descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || !1; + descriptor.configurable = !0; + if ("value" in descriptor) descriptor.writable = !0; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + var mdDateTimePicker = function () { + /** + * [constructor of the mdDateTimePicker] * - * @type {Array} + * @method constructor + * + * @param {String} type = 'date' or 'time [type of dialog] + * @param {moment} init [initial value for the dialog date or time, defaults to today] [@default = today] + * @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 {element} trigger [element on which all the events will be dispatched e.g var foo = document.getElementById('bar'), here element = foo] + * @param {String} ok = 'ok' [ok button's text] + * @param {String} cancel = 'cancel' [cancel button's text] + * @param {Boolean} colon = true [add an option to enable quote in 24 hour mode] + * @param {Boolean} autoClose = false [close dialog on date/time selection] + * @param {Boolean} inner24 = false [if 24-hour mode and (true), the PM hours shows in an inner dial] + * @param {String} prevHandle =
[The HTML content of the handle to go to previous month] + * @param {String} nextHandle =
[The HTML content of the handle to go to next month] + * + * @return {Object} [mdDateTimePicker] */ - var sDialogEls = ['viewHolder', 'years', 'header', 'cancel', 'ok', 'left', 'right', 'previous', 'current', 'next', 'subtitle', 'title', 'titleDay', 'titleMonth', 'AM', 'PM', 'needle', 'hourView', 'minuteView', 'hour', 'minute', 'fakeNeedle', 'circularHolder', 'circle', 'dotSpan'], - i = sDialogEls.length; - - while (i--) { - this._sDialog[sDialogEls[i]] = document.getElementById('mddtp-' + this._type + '__' + sDialogEls[i]); - } - - this._sDialog.tDate = this._init.clone(); - this._sDialog.sDate = this._init.clone(); - } - }, { - key: '_showDialog', - value: function _showDialog() { - var me = this, - zoomIn = 'zoomIn'; - - mdDateTimePicker.dialog.state = !0; - this._sDialog.picker.classList.remove('mddtp-picker--inactive'); - this._sDialog.picker.classList.add(zoomIn); - // if the dialog is forced into portrait mode - if (this._orientation === 'PORTRAIT') { - this._sDialog.picker.classList.add('mddtp-picker--portrait'); - } - setTimeout(function () { - me._sDialog.picker.classList.remove(zoomIn); - }, 300); - } - }, { - key: '_hideDialog', - value: function _hideDialog() { - var me = this, - years = this._sDialog.years, - title = me._sDialog.title, - subtitle = me._sDialog.subtitle, - viewHolder = this._sDialog.viewHolder, - AM = this._sDialog.AM, - PM = this._sDialog.PM, - minute = this._sDialog.minute, - hour = this._sDialog.hour, - minuteView = this._sDialog.minuteView, - hourView = this._sDialog.hourView, - picker = this._sDialog.picker, - needle = this._sDialog.needle, - dotSpan = this._sDialog.dotSpan, - active = 'mddtp-picker__color--active', - inactive = 'mddtp-picker--inactive', - invisible = 'mddtp-picker__years--invisible', - zoomIn = 'zoomIn', - zoomOut = 'zoomOut', - hidden = 'mddtp-picker__circularView--hidden', - selection = 'mddtp-picker__selection'; - - mdDateTimePicker.dialog.state = !1; - mdDateTimePicker.dialog.view = !0; - this._sDialog.picker.classList.add(zoomOut); - // reset classes - if (this._type === 'date') { - years.classList.remove(zoomIn, zoomOut); - years.classList.add(invisible); - title.classList.remove(active); - subtitle.classList.add(active); - viewHolder.classList.remove(zoomOut); - } else { - AM.classList.remove(active); - PM.classList.remove(active); - minute.classList.remove(active); - hour.classList.add(active); - minuteView.classList.add(hidden); - hourView.classList.remove(hidden); - subtitle.setAttribute('style', 'display: none'); - dotSpan.setAttribute('style', 'display: none'); - needle.className = selection; - } - setTimeout(function () { - // remove portrait mode - me._sDialog.picker.classList.remove('mddtp-picker--portrait'); - me._sDialog.picker.classList.remove(zoomOut); - me._sDialog.picker.classList.add(inactive); - // clone elements and add them again to clear events attached to them - var pickerClone = picker.cloneNode(!0); - picker.parentNode.replaceChild(pickerClone, picker); - }, 300); - } - }, { - key: '_buildDialog', - value: function _buildDialog() { - var type = this._type, - docfrag = document.createDocumentFragment(), - container = document.createElement('div'), - header = document.createElement('div'), - body = document.createElement('div'), - action = document.createElement('div'), - cancel = document.createElement('button'), - ok = document.createElement('button'); - // outer most container of the picker - - // header container of the picker - - // body container of the picker - - // action elements container - - // ... add properties to them - container.id = 'mddtp-picker__' + type; - container.classList.add('mddtp-picker'); - container.classList.add('mddtp-picker-' + type); - container.classList.add('mddtp-picker--inactive'); - container.classList.add('animated'); - this._addId(header, 'header'); - this._addClass(header, 'header'); - // add header to container - container.appendChild(header); - this._addClass(body, 'body'); - body.appendChild(action); - // add body to container - container.appendChild(body); - // add stuff to header and body according to dialog type - if (this._type === 'date') { - var subtitle = document.createElement('div'), - title = document.createElement('div'), - titleDay = document.createElement('div'), - titleMonth = document.createElement('div'), - viewHolder = document.createElement('div'), - views = document.createElement('ul'), - previous = document.createElement('li'), - current = document.createElement('li'), - next = document.createElement('li'), - left = document.createElement('button'), - right = document.createElement('button'), - years = document.createElement('ul'); - - // inside header - // adding properties to them - this._addId(subtitle, 'subtitle'); - this._addClass(subtitle, 'subtitle'); - this._addId(title, 'title'); - this._addClass(title, 'title', ['mddtp-picker__color--active']); - this._addId(titleDay, 'titleDay'); - this._addId(titleMonth, 'titleMonth'); - // add title stuff to it - title.appendChild(titleDay); - title.appendChild(titleMonth); - // add them to header - header.appendChild(subtitle); - header.appendChild(title); - // inside body - // inside viewHolder - this._addId(viewHolder, 'viewHolder'); - this._addClass(viewHolder, 'viewHolder', ['animated']); - this._addClass(views, 'views'); - this._addId(previous, 'previous'); - previous.classList.add('mddtp-picker__view'); - this._addId(current, 'current'); - current.classList.add('mddtp-picker__view'); - this._addId(next, 'next'); - next.classList.add('mddtp-picker__view'); - // fill the views - this._addView(previous); - this._addView(current); - this._addView(next); - // add them - viewHolder.appendChild(views); - views.appendChild(previous); - views.appendChild(current); - views.appendChild(next); - // inside body again - this._addId(left, 'left'); - left.classList.add('mddtp-button'); - this._addClass(left, 'left'); - left.setAttribute('type', 'button'); - left.innerHTML = this._prevHandle; - - this._addId(right, 'right'); - right.classList.add('mddtp-button'); - this._addClass(right, 'right'); - right.setAttribute('type', 'button'); - right.innerHTML = this._nextHandle; - - this._addId(years, 'years'); - this._addClass(years, 'years', ['mddtp-picker__years--invisible', 'animated']); - // add them to body - body.appendChild(viewHolder); - body.appendChild(left); - body.appendChild(right); - body.appendChild(years); - } else { - var _title = document.createElement('div'), - hour = document.createElement('span'), - span = document.createElement('span'), - minute = document.createElement('span'), - _subtitle = document.createElement('div'), - AM = document.createElement('div'), - PM = document.createElement('div'), - circularHolder = document.createElement('div'), - needle = document.createElement('div'), - dot = document.createElement('span'), - line = document.createElement('span'), - circle = document.createElement('span'), - minuteView = document.createElement('div'), - fakeNeedle = document.createElement('div'), - hourView = document.createElement('div'); - - // add properties to them - // inside header - this._addId(_title, 'title'); - this._addClass(_title, 'title'); - this._addId(hour, 'hour'); - hour.classList.add('mddtp-picker__color--active'); - span.textContent = ':'; - this._addId(span, 'dotSpan'); - span.setAttribute('style', 'display: none'); - this._addId(minute, 'minute'); - this._addId(_subtitle, 'subtitle'); - this._addClass(_subtitle, 'subtitle'); - _subtitle.setAttribute('style', 'display: none'); - this._addId(AM, 'AM'); - //AM.textContent = 'AM' - // Change to 'AM' to Locale Meridiem - AM.textContent = (0, _moment2.default)().localeData().meridiem(1, 1, !0); - this._addId(PM, 'PM'); - //PM.textContent = 'PM' - // Change to 'PM' to Locale Meridiem - PM.textContent = (0, _moment2.default)().localeData().meridiem(13, 1, !0); - // add them to title and subtitle - _title.appendChild(hour); - _title.appendChild(span); - _title.appendChild(minute); - _subtitle.appendChild(AM); - _subtitle.appendChild(PM); - // add them to header - header.appendChild(_title); - header.appendChild(_subtitle); - // inside body - this._addId(circularHolder, 'circularHolder'); - this._addClass(circularHolder, 'circularHolder'); - this._addId(needle, 'needle'); - needle.classList.add('mddtp-picker__selection'); - this._addClass(dot, 'dot'); - this._addClass(line, 'line'); - this._addId(circle, 'circle'); - this._addClass(circle, 'circle'); - this._addId(minuteView, 'minuteView'); - minuteView.classList.add('mddtp-picker__circularView'); - minuteView.classList.add('mddtp-picker__circularView--hidden'); - this._addId(fakeNeedle, 'fakeNeedle'); - fakeNeedle.classList.add('mddtp-picker__circle--fake'); - this._addId(hourView, 'hourView'); - hourView.classList.add('mddtp-picker__circularView'); - // add them to needle - needle.appendChild(dot); - needle.appendChild(line); - needle.appendChild(circle); - // add them to circularHolder - circularHolder.appendChild(needle); - circularHolder.appendChild(minuteView); - circularHolder.appendChild(fakeNeedle); - circularHolder.appendChild(hourView); - // add them to body - body.appendChild(circularHolder); - } - action.classList.add('mddtp-picker__action'); - - if (this._autoClose === !0) { - action.style.display = "none"; - } - - this._addId(cancel, 'cancel'); - cancel.classList.add('mddtp-button'); - cancel.setAttribute('type', 'button'); - this._addId(ok, 'ok'); - ok.classList.add('mddtp-button'); - ok.setAttribute('type', 'button'); - // add actions - action.appendChild(cancel); - action.appendChild(ok); - // add actions to body - body.appendChild(action); - docfrag.appendChild(container); - // add the container to the end of body - document.getElementsByTagName('body').item(0).appendChild(docfrag); - } - }, { - key: '_initTimeDialog', - value: function _initTimeDialog(m) { - var hour = this._sDialog.hour, - minute = this._sDialog.minute, - subtitle = this._sDialog.subtitle, - dotSpan = this._sDialog.dotSpan; - - // switch according to 12 hour or 24 hour mode - if (this._mode) { - // CHANGED exception case for 24 => 0 issue #57 - var text = parseInt(m.format('H'), 10); - if (text === 0) { - text = '00'; - } - this._fillText(hour, text); - // add the configurable colon in this mode issue #56 - if (this._colon) { - dotSpan.removeAttribute('style'); - } - } else { - this._fillText(hour, m.format('h')); - //this._sDialog[m.format('A')].classList.add('mddtp-picker__color--active') - // Using isPM function for Find PM - if (m._locale.isPM(m.format('A'))) { - this._sDialog.PM.classList.add('mddtp-picker__color--active'); - } else { - this._sDialog.AM.classList.add('mddtp-picker__color--active'); - } - subtitle.removeAttribute('style'); - dotSpan.removeAttribute('style'); - } - this._fillText(minute, m.format('mm')); - this._initHour(); - this._initMinute(); - this._attachEventHandlers(); - this._changeM(); - this._dragDial(); - this._switchToView(hour); - this._switchToView(minute); - this._addClockEvent(); - this._setButtonText(); - } - }, { - key: '_initHour', - value: function _initHour() { - var hourView = this._sDialog.hourView, - needle = this._sDialog.needle, - hour = 'mddtp-hour__selected', - selected = 'mddtp-picker__cell--selected', - rotate = 'mddtp-picker__cell--rotate-', - rotate24 = 'mddtp-picker__cell--rotate24', - cell = 'mddtp-picker__cell', - docfrag = document.createDocumentFragment(), - hourNow = void 0; - - if (this._mode) { - var degreeStep = this._inner24 === !0 ? 10 : 5; - hourNow = parseInt(this._sDialog.tDate.format('H'), 10); - for (var i = 1, j = degreeStep; i <= 24; i++, j += degreeStep) { - var div = document.createElement('div'), - span = document.createElement('span'); - - div.classList.add(cell); - // CHANGED exception case for 24 => 0 issue #57 - if (i === 24) { - span.textContent = '00'; - } else { - span.textContent = i; - } - - var position = j; - if (this._inner24 === !0 && i > 12) { - position -= 120; - div.classList.add(rotate24); - } - - div.classList.add(rotate + position); - if (hourNow === i) { - div.id = hour; - div.classList.add(selected); - needle.classList.add(rotate + position); - } - // CHANGED exception case for 24 => 0 issue #58 - if (i === 24 && hourNow === 0) { - div.id = hour; - div.classList.add(selected); - needle.classList.add(rotate + position); - } - div.appendChild(span); - docfrag.appendChild(div); - } - } else { - hourNow = parseInt(this._sDialog.tDate.format('h'), 10); - for (var _i = 1, _j = 10; _i <= 12; _i++, _j += 10) { - var _div = document.createElement('div'), - _span = document.createElement('span'); - - _div.classList.add(cell); - _span.textContent = _i; - _div.classList.add(rotate + _j); - if (hourNow === _i) { - _div.id = hour; - _div.classList.add(selected); - needle.classList.add(rotate + _j); - } - _div.appendChild(_span); - docfrag.appendChild(_div); - } - } - //empty the hours - while (hourView.lastChild) { - hourView.removeChild(hourView.lastChild); - } - // set inner html accordingly - hourView.appendChild(docfrag); - } - }, { - key: '_initMinute', - value: function _initMinute() { - var minuteView = this._sDialog.minuteView, - minuteNow = parseInt(this._sDialog.tDate.format('m'), 10), - sMinute = 'mddtp-minute__selected', - selected = 'mddtp-picker__cell--selected', - rotate = 'mddtp-picker__cell--rotate-', - cell = 'mddtp-picker__cell', - docfrag = document.createDocumentFragment(); - - for (var i = 5, j = 10; i <= 60; i += 5, j += 10) { - var div = document.createElement('div'), - span = document.createElement('span'); - - div.classList.add(cell); - if (i === 60) { - span.textContent = this._numWithZero(0); - } else { - span.textContent = this._numWithZero(i); - } - if (minuteNow === 0) { - minuteNow = 60; - } - div.classList.add(rotate + j); - // (minuteNow === 1 && i === 60) for corner case highlight 00 at 01 - if (minuteNow === i || minuteNow - 1 === i || minuteNow + 1 === i || minuteNow === 1 && i === 60) { - div.id = sMinute; - div.classList.add(selected); - } - div.appendChild(span); - docfrag.appendChild(div); - } - //empty the hours - while (minuteView.lastChild) { - minuteView.removeChild(minuteView.lastChild); - } - // set inner html accordingly - minuteView.appendChild(docfrag); - } - }, { - key: '_initDateDialog', - value: function _initDateDialog(m) { - var subtitle = this._sDialog.subtitle, - title = this._sDialog.title, - titleDay = this._sDialog.titleDay, - titleMonth = this._sDialog.titleMonth; - - this._fillText(subtitle, m.format('YYYY')); - this._fillText(titleDay, m.format('ddd, ')); - this._fillText(titleMonth, m.format('MMM D')); - this._initYear(); - this._initViewHolder(); - this._attachEventHandlers(); - this._changeMonth(); - this._switchToView(subtitle); - this._switchToView(title); - this._setButtonText(); - } - }, { - key: '_initViewHolder', - value: function _initViewHolder() { - var m = this._sDialog.tDate, - current = this._sDialog.current, - previous = this._sDialog.previous, - next = this._sDialog.next, - past = this._past, - future = this._future; - - if (m.isBefore(past, 'month')) { - m = past.clone(); - } - if (m.isAfter(future, 'month')) { - m = future.clone(); - } - this._sDialog.tDate = m; - this._initMonth(current, m); - this._initMonth(next, (0, _moment2.default)(this._getMonth(m, 1))); - this._initMonth(previous, (0, _moment2.default)(this._getMonth(m, -1))); - this._toMoveMonth(); - } - }, { - key: '_initMonth', - value: function _initMonth(view, m) { - var displayMonth = m.format('MMMM YYYY'), - innerDivs = view.getElementsByTagName('div'); - // get the .mddtp-picker__month element using innerDivs[0] - - this._fillText(innerDivs[0], displayMonth); - var docfrag = document.createDocumentFragment(), - tr = innerDivs[3], - firstDayOfMonth = _moment2.default.weekdays(!0).indexOf(_moment2.default.weekdays(!1, (0, _moment2.default)(m).date(1).day())), - today = -1, - selected = -1, - lastDayOfMonth = parseInt((0, _moment2.default)(m).endOf('month').format('D'), 10) + firstDayOfMonth - 1, - past = firstDayOfMonth, - cellClass = 'mddtp-picker__cell', - future = lastDayOfMonth; - // get the .mddtp-picker__tr element using innerDivs[3] - - /* - * @netTrek - first day of month dependented from moment.locale + function mdDateTimePicker(_ref) { + var type = _ref.type, + _ref$init = _ref.init, + init = _ref$init === undefined ? (0, _moment2.default)() : _ref$init, + _ref$past = _ref.past, + past = _ref$past === undefined ? (0, _moment2.default)().subtract(21, 'years') : _ref$past, + _ref$future = _ref.future, + future = _ref$future === undefined ? init : _ref$future, + _ref$mode = _ref.mode, + mode = _ref$mode === undefined ? !1 : _ref$mode, + _ref$orientation = _ref.orientation, + orientation = _ref$orientation === undefined ? 'LANDSCAPE' : _ref$orientation, + _ref$trigger = _ref.trigger, + trigger = _ref$trigger === undefined ? '' : _ref$trigger, + _ref$ok = _ref.ok, + ok = _ref$ok === undefined ? 'ok' : _ref$ok, + _ref$cancel = _ref.cancel, + cancel = _ref$cancel === undefined ? 'cancel' : _ref$cancel, + _ref$colon = _ref.colon, + colon = _ref$colon === undefined ? !0 : _ref$colon, + _ref$autoClose = _ref.autoClose, + autoClose = _ref$autoClose === undefined ? !1 : _ref$autoClose, + _ref$inner = _ref.inner24, + inner24 = _ref$inner === undefined ? !1 : _ref$inner, + _ref$prevHandle = _ref.prevHandle, + prevHandle = _ref$prevHandle === undefined ? '
' : _ref$prevHandle, + _ref$nextHandle = _ref.nextHandle, + nextHandle = _ref$nextHandle === undefined ? '
' : _ref$nextHandle; + + _classCallCheck(this, mdDateTimePicker); + + this._type = type; + this._init = init; + this._past = past; + this._future = future; + this._mode = mode; + this._orientation = orientation; + this._trigger = trigger; + this._ok = ok; + this._cancel = cancel; + this._colon = colon; + this._autoClose = autoClose; + this._inner24 = inner24; + this._prevHandle = prevHandle; + this._nextHandle = nextHandle; + + /** + * [dialog selected classes have the same structure as dialog but one level down] + * @type {Object} + * All declarations starting with _ are considered @private + * e.g + * sDialog = { + * picker: 'some-picker-selected' + * } + */ + this._sDialog = {}; + + // attach the dialog if not present + if (typeof document !== 'undefined' && !document.getElementById('mddtp-picker__' + this._type)) { + this._buildDialog(); + } + } + + /** + * [time to get or set the current picker's moment] + * + * @method time + * */ - if ((0, _moment2.default)().isSame(m, 'month')) { - today = parseInt((0, _moment2.default)().format('D'), 10); - today += firstDayOfMonth - 1; - } - if (this._past.isSame(m, 'month')) { - past = parseInt(this._past.format('D'), 10); - past += firstDayOfMonth - 1; - } - if (this._future.isSame(m, 'month')) { - future = parseInt(this._future.format('D'), 10); - future += firstDayOfMonth - 1; - } - if (this._sDialog.sDate.isSame(m, 'month')) { - selected = parseInt((0, _moment2.default)(m).format('D'), 10); - selected += firstDayOfMonth - 1; - } - for (var i = 0; i < 42; i++) { - // create cell - var cell = document.createElement('span'), - currentDay = i - firstDayOfMonth + 1; - - if (i >= firstDayOfMonth && i <= lastDayOfMonth) { - if (i > future || i < past) { - cell.classList.add(cellClass + '--disabled'); - } else { - cell.classList.add(cellClass); - } - this._fillText(cell, currentDay); - } - if (today === i) { - cell.classList.add(cellClass + '--today'); - } - if (selected === i) { - cell.classList.add(cellClass + '--selected'); - cell.id = 'mddtp-date__selected'; - } - docfrag.appendChild(cell); - } - //empty the tr - while (tr.lastChild) { - tr.removeChild(tr.lastChild); - } - // set inner html accordingly - tr.appendChild(docfrag); - this._addCellClickEvent(tr); - } - }, { - key: '_initYear', - value: function _initYear() { - var years = this._sDialog.years, - currentYear = this._sDialog.tDate.year(), - docfrag = document.createDocumentFragment(), - past = this._past.year(), - future = this._future.year(); - - for (var year = past, li; year <= future; year++) { - li = document.createElement('li'); - - li.textContent = year; - if (year === currentYear) { - li.id = 'mddtp-date__currentYear'; - li.classList.add('mddtp-picker__li--current'); - } - docfrag.appendChild(li); - } - //empty the years ul - while (years.lastChild) { - years.removeChild(years.lastChild); - } - // set inner html accordingly - years.appendChild(docfrag); - // attach event handler to the ul to get the benefit of event delegation - this._changeYear(years); - } - }, { - key: '_pointNeedle', - value: function _pointNeedle(me) { - var spoke = 60, - value = void 0, - circle = this._sDialog.circle, - fakeNeedle = this._sDialog.fakeNeedle, - circularHolder = this._sDialog.circularHolder, - selection = 'mddtp-picker__selection', - needle = me._sDialog.needle; - - // move the needle to correct position - needle.className = ''; - needle.classList.add(selection); - if (!mdDateTimePicker.dialog.view) { - value = me._sDialog.sDate.format('m'); - - // Need to desactivate for the autoClose mode as it mess things up. If you have an idea, feel free to give it a shot ! - if (me._autoClose !== !0) { - // move the fakeNeedle to correct position - setTimeout(function () { - var hOffset = circularHolder.getBoundingClientRect(), - cOffset = circle.getBoundingClientRect(); - - fakeNeedle.setAttribute('style', 'left:' + (cOffset.left - hOffset.left) + 'px;top:' + (cOffset.top - hOffset.top) + 'px'); - }, 300); - } - } else { - if (me._mode) { - spoke = 24; - value = parseInt(me._sDialog.sDate.format('H'), 10); - // CHANGED exception for 24 => 0 issue #58 - if (value === 0) { - value = 24; - } - } else { - spoke = 12; - value = me._sDialog.sDate.format('h'); - } - } - var rotationClass = me._calcRotation(spoke, parseInt(value, 10)); - if (rotationClass) { - needle.classList.add(rotationClass); - } - } - }, { - key: '_switchToView', - value: function _switchToView(el) { - var me = this; - // attach the view change button - if (this._type == 'date') { - el.onclick = function () { - me._switchToDateView(el, me); - }; - } else { - if (this._inner24 === !0 && me._mode) { - if (parseInt(me._sDialog.sDate.format('H'), 10) > 12) { - me._sDialog.needle.classList.add('mddtp-picker__cell--rotate24'); - } else { - me._sDialog.needle.classList.remove('mddtp-picker__cell--rotate24'); - } - } - - el.onclick = function () { - me._switchToTimeView(me); - }; - } - } - }, { - key: '_switchToTimeView', - value: function _switchToTimeView(me) { - var hourView = me._sDialog.hourView, - minuteView = me._sDialog.minuteView, - hour = me._sDialog.hour, - minute = me._sDialog.minute, - activeClass = 'mddtp-picker__color--active', - hidden = 'mddtp-picker__circularView--hidden', - selection = 'mddtp-picker__selection'; - - // toggle view classes - hourView.classList.toggle(hidden); - minuteView.classList.toggle(hidden); - hour.classList.toggle(activeClass); - minute.classList.toggle(activeClass); - // move the needle to correct position - // toggle the view type - mdDateTimePicker.dialog.view = !mdDateTimePicker.dialog.view; - me._pointNeedle(me); - } - }, { - key: '_switchToDateView', - value: function _switchToDateView(el, me) { - el.setAttribute('disabled', ''); - var viewHolder = me._sDialog.viewHolder, - years = me._sDialog.years, - title = me._sDialog.title, - subtitle = me._sDialog.subtitle, - currentYear = document.getElementById('mddtp-date__currentYear'); - - if (mdDateTimePicker.dialog.view) { - viewHolder.classList.add('zoomOut'); - years.classList.remove('mddtp-picker__years--invisible'); - years.classList.add('zoomIn'); - // scroll into the view - currentYear.scrollIntoViewIfNeeded && currentYear.scrollIntoViewIfNeeded(); - } else { - years.classList.add('zoomOut'); - viewHolder.classList.remove('zoomOut'); - viewHolder.classList.add('zoomIn'); - setTimeout(function () { - years.classList.remove('zoomIn', 'zoomOut'); - years.classList.add('mddtp-picker__years--invisible'); - viewHolder.classList.remove('zoomIn'); - }, 300); - } - title.classList.toggle('mddtp-picker__color--active'); - subtitle.classList.toggle('mddtp-picker__color--active'); - mdDateTimePicker.dialog.view = !mdDateTimePicker.dialog.view; - setTimeout(function () { - el.removeAttribute('disabled'); - }, 300); - } - }, { - key: '_addClockEvent', - value: function _addClockEvent() { - var me = this, - hourView = this._sDialog.hourView, - minuteView = this._sDialog.minuteView, - sClass = 'mddtp-picker__cell--selected'; - - hourView.onclick = function (e) { - var sHour = 'mddtp-hour__selected', - selectedHour = document.getElementById(sHour), - setHour = 0; - - if (e.target && e.target.nodeName == 'SPAN') { - // clear the previously selected hour - selectedHour.id = ''; - selectedHour.classList.remove(sClass); - // select the new hour - e.target.parentNode.classList.add(sClass); - e.target.parentNode.id = sHour; - // set the sDate according to 24 or 12 hour mode - if (me._mode) { - setHour = parseInt(e.target.textContent, 10); - } else { - if (me._sDialog.sDate.format('A') === 'AM') { - setHour = e.target.textContent; - } else { - setHour = parseInt(e.target.textContent, 10) + 12; - } - } - me._sDialog.sDate.hour(setHour); - // set the display hour - me._sDialog.hour.textContent = e.target.textContent; - // switch the view - me._pointNeedle(me); - setTimeout(function () { - me._switchToTimeView(me); - }, 700); - } - }; - minuteView.onclick = function (e) { - var sMinute = 'mddtp-minute__selected', - selectedMinute = document.getElementById(sMinute), - setMinute = 0; - - if (e.target && e.target.nodeName == 'SPAN') { - // clear the previously selected hour - if (selectedMinute) { - selectedMinute.id = ''; - selectedMinute.classList.remove(sClass); - } - // select the new minute - e.target.parentNode.classList.add(sClass); - e.target.parentNode.id = sMinute; - // set the sDate minute - setMinute = e.target.textContent; - me._sDialog.sDate.minute(setMinute); - // set the display minute - me._sDialog.minute.textContent = setMinute; - me._pointNeedle(me); - - if (me._autoClose === !0) { - me._sDialog.ok.onclick(); - } - } - }; - } - }, { - key: '_addCellClickEvent', - value: function _addCellClickEvent(el) { - var me = this; - el.onclick = function (e) { - if (e.target && e.target.nodeName == 'SPAN' && e.target.classList.contains('mddtp-picker__cell')) { - var day = e.target.textContent, - currentDate = me._sDialog.tDate.date(day), - sId = 'mddtp-date__selected', - sClass = 'mddtp-picker__cell--selected', - selected = document.getElementById(sId), - subtitle = me._sDialog.subtitle, - titleDay = me._sDialog.titleDay, - titleMonth = me._sDialog.titleMonth; - - if (selected) { - selected.classList.remove(sClass); - selected.id = ''; - } - e.target.classList.add(sClass); - e.target.id = sId; - - // update temp date object with the date selected - me._sDialog.sDate = currentDate.clone(); - - me._fillText(subtitle, currentDate.year()); - me._fillText(titleDay, currentDate.format('ddd, ')); - me._fillText(titleMonth, currentDate.format('MMM D')); - - if (me._autoClose === !0) { - me._sDialog.ok.onclick(); - } - } - }; - } - }, { - key: '_toMoveMonth', - value: function _toMoveMonth() { - var m = this._sDialog.tDate, - left = this._sDialog.left, - right = this._sDialog.right, - past = this._past, - future = this._future; - - left.removeAttribute('disabled'); - right.removeAttribute('disabled'); - left.classList.remove('mddtp-button--disabled'); - right.classList.remove('mddtp-button--disabled'); - if (m.isSame(past, 'month')) { - left.setAttribute('disabled', ''); - left.classList.add('mddtp-button--disabled'); - } - if (m.isSame(future, 'month')) { - right.setAttribute('disabled', ''); - right.classList.add('mddtp-button--disabled'); - } - } - }, { - key: '_changeMonth', - value: function _changeMonth() { - var me = this, - left = this._sDialog.left, - right = this._sDialog.right, - mLeftClass = 'mddtp-picker__view--left', - mRightClass = 'mddtp-picker__view--right', - pause = 'mddtp-picker__view--pause'; - - left.onclick = function () { - moveStep(mRightClass, me._sDialog.previous); - }; - - right.onclick = function () { - moveStep(mLeftClass, me._sDialog.next); - }; - - function moveStep(aClass, to) { - /** - * [stepBack to know if the to step is going back or not] - * - * @type {Boolean} - */ - var stepBack = !1, - next = me._sDialog.next, - current = me._sDialog.current, - previous = me._sDialog.previous; - - left.setAttribute('disabled', ''); - right.setAttribute('disabled', ''); - current.classList.add(aClass); - previous.classList.add(aClass); - next.classList.add(aClass); - var clone = to.cloneNode(!0), - del = void 0; - - if (to === next) { - del = previous; - current.parentNode.appendChild(clone); - next.id = current.id; - current.id = previous.id; - previous = current; - current = next; - next = clone; - } else { - stepBack = !0; - del = next; - previous.id = current.id; - current.id = next.id; - next = current; - current = previous; - } - setTimeout(function () { - if (to === previous) { - current.parentNode.insertBefore(clone, current); - previous = clone; - } - // update real values to match these values - me._sDialog.next = next; - me._sDialog.current = current; - me._sDialog.previous = previous; - current.classList.add(pause); - next.classList.add(pause); - previous.classList.add(pause); - current.classList.remove(aClass); - next.classList.remove(aClass); - previous.classList.remove(aClass); - del.parentNode.removeChild(del); - }, 300); - // REVIEW replace below code with requestAnimationFrame - setTimeout(function () { - current.classList.remove(pause); - next.classList.remove(pause); - previous.classList.remove(pause); - if (stepBack) { - me._sDialog.tDate = me._getMonth(me._sDialog.tDate, -1); - } else { - me._sDialog.tDate = me._getMonth(me._sDialog.tDate, 1); - } - me._initViewHolder(); - }, 350); - setTimeout(function () { - if (!left.classList.contains('mddtp-button--disabled')) { - left.removeAttribute('disabled'); - } - if (!right.classList.contains('mddtp-button--disabled')) { - right.removeAttribute('disabled'); - } - }, 400); - } - } - }, { - key: '_changeYear', - value: function _changeYear(el) { - var me = this; - el.onclick = function (e) { - if (e.target && e.target.nodeName == 'LI') { - var selected = document.getElementById('mddtp-date__currentYear'); - // clear previous selected - selected.id = ''; - selected.classList.remove('mddtp-picker__li--current'); - // add the properties to the newer one - e.target.id = 'mddtp-date__currentYear'; - e.target.classList.add('mddtp-picker__li--current'); - // switch view - me._switchToDateView(el, me); - // set the tdate to it - me._sDialog.tDate.year(parseInt(e.target.textContent, 10)); - // update the dialog - me._initViewHolder(); - } - }; - } - }, { - key: '_changeM', - value: function _changeM() { - var me = this, - AM = this._sDialog.AM, - PM = this._sDialog.PM; - - AM.onclick = function (e) { - //let m = me._sDialog.sDate.format('A') - // Change Locale Meridiem to AM/PM String - var m = 'AM'; - if (me._sDialog.sDate._locale.isPM(me._sDialog.sDate.format('A'))) { - m = 'PM'; - } - if (m === 'PM') { - me._sDialog.sDate.subtract(12, 'h'); - AM.classList.toggle('mddtp-picker__color--active'); - PM.classList.toggle('mddtp-picker__color--active'); - } - }; - PM.onclick = function (e) { - //let m = me._sDialog.sDate.format('A') - // Change Locale Meridiem to AM/PM String - var m = 'AM'; - if (me._sDialog.sDate._locale.isPM(me._sDialog.sDate.format('A'))) { - m = 'PM'; - } - 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', - value: function _dragDial() { - var me = this, - needle = this._sDialog.needle, - circle = this._sDialog.circle, - fakeNeedle = this._sDialog.fakeNeedle, - circularHolder = this._sDialog.circularHolder, - minute = this._sDialog.minute, - quick = 'mddtp-picker__selection--quick', - selection = 'mddtp-picker__selection', - selected = 'mddtp-picker__cell--selected', - rotate = 'mddtp-picker__cell--rotate-', - hOffset = circularHolder.getBoundingClientRect(), - divides = void 0, - fakeNeedleDraggabilly = new _draggabilly2.default(fakeNeedle, { - containment: !0 - }); - - fakeNeedleDraggabilly.on('pointerDown', function (e) { - //console.info ( 'pointerDown' , e ); - hOffset = circularHolder.getBoundingClientRect(); - }); - /** - * netTrek - * fixes for iOS - drag - */ - fakeNeedleDraggabilly.on('pointerMove', function (e) { - - var clientX = e.clientX, - clientY = e.clientY; - - - if (clientX === undefined) { - - if (e.pageX === undefined) { - if (e.touches && e.touches.length > 0) { - clientX = e.touches[0].clientX; - clientY = e.touches[0].clientY; - } else { - console.error('coult not detect pageX, pageY'); - } - } else { - clientX = pageX - document.body.scrollLeft - document.documentElement.scrollLeft; - clientY = pageY - document.body.scrollTop - document.documentElement.scrollTop; - } - } - //console.info ( 'Drag clientX' , clientX, clientY, e ); - - var xPos = clientX - hOffset.left - hOffset.width / 2, - yPos = clientY - hOffset.top - hOffset.height / 2, - slope = Math.atan2(-yPos, xPos); - - needle.className = ''; - if (slope < 0) { - slope += 2 * Math.PI; - } - slope *= 180 / Math.PI; - slope = 360 - slope; - if (slope > 270) { - slope -= 360; - } - divides = parseInt(slope / 6); - var same = Math.abs(6 * divides - slope), - upper = Math.abs(6 * (divides + 1) - slope); - - if (upper < same) { - divides++; - } - divides += 15; - needle.classList.add(selection); - needle.classList.add(quick); - needle.classList.add(rotate + divides * 2); - }); - /** - * netTrek - * fixes for iOS - drag - */ - var onDragEnd = function onDragEnd(e) { - var minuteViewChildren = me._sDialog.minuteView.getElementsByTagName('div'), - sMinute = 'mddtp-minute__selected', - selectedMinute = document.getElementById(sMinute), - cOffset = circle.getBoundingClientRect(); - - fakeNeedle.setAttribute('style', 'left:' + (cOffset.left - hOffset.left) + 'px;top:' + (cOffset.top - hOffset.top) + 'px'); - needle.classList.remove(quick); - var select = divides; - if (select === 1) { - select = 60; - } - select = me._nearestDivisor(select, 5); - // normalize 60 => 0 - if (divides === 60) { - divides = 0; - } - // remove previously selected value - if (selectedMinute) { - selectedMinute.id = ''; - selectedMinute.classList.remove(selected); - } - // add the new selected - if (select > 0) { - select /= 5; - select--; - minuteViewChildren[select].id = sMinute; - minuteViewChildren[select].classList.add(selected); - } - minute.textContent = me._numWithZero(divides); - me._sDialog.sDate.minutes(divides); - }; - - fakeNeedleDraggabilly.on('pointerUp', onDragEnd); - fakeNeedleDraggabilly.on('dragEnd', onDragEnd); - } - }, { - key: '_attachEventHandlers', - value: function _attachEventHandlers() { - var me = this, - ok = this._sDialog.ok, - cancel = this._sDialog.cancel, - onCancel = new CustomEvent('onCancel'), - onOk = new CustomEvent('onOk'); - // create cutom events to dispatch - - cancel.onclick = function () { - me.toggle(); - if (me._trigger) { - me._trigger.dispatchEvent(onCancel); - } - }; - ok.onclick = function () { - me._init = me._sDialog.sDate; - me.toggle(); - if (me._trigger) { - me._trigger.dispatchEvent(onOk); - } - }; - } - }, { - key: '_setButtonText', - value: function _setButtonText() { - this._sDialog.cancel.textContent = this._cancel; - this._sDialog.ok.textContent = this._ok; - } - }, { - key: '_getMonth', - value: function _getMonth(moment, count) { - var m = void 0; - m = moment.clone(); - if (count > 0) { - return m.add(Math.abs(count), 'M'); - } else { - return m.subtract(Math.abs(count), 'M'); - } - } - }, { - key: '_nearestDivisor', - value: function _nearestDivisor(number, divided) { - if (number % divided === 0) { - return number; - } else if ((number - 1) % divided === 0) { - return number - 1; - } else if ((number + 1) % divided === 0) { - return number + 1; - } - return -1; - } - }, { - key: '_numWithZero', - value: function _numWithZero(n) { - return n > 9 ? '' + n : '0' + n; - } - }, { - key: '_fillText', - value: function _fillText(el, text) { - if (el.firstChild) { - el.firstChild.nodeValue = text; - } else { - el.appendChild(document.createTextNode(text)); - } - } - }, { - key: '_addId', - value: function _addId(el, id) { - el.id = 'mddtp-' + this._type + '__' + id; - } - }, { - key: '_addClass', - value: function _addClass(el, aClass, more) { - el.classList.add('mddtp-picker__' + aClass); - var i = 0; - if (more) { - i = more.length; - more.reverse(); - } - while (i--) { - el.classList.add(more[i]); - } - } - }, { - key: '_addView', - value: function _addView(view) { - var month = document.createElement('div'), - grid = document.createElement('div'), - th = document.createElement('div'), - tr = document.createElement('div'), - weekDays = _moment2.default.weekdaysMin(!0).reverse(), - week = 7; - /** - * @netTrek - weekday dependented from moment.locale - */ - while (week--) { - var span = document.createElement('span'); - span.textContent = weekDays[week]; - th.appendChild(span); - } - // add properties to them - this._addClass(month, 'month'); - this._addClass(grid, 'grid'); - this._addClass(th, 'th'); - this._addClass(tr, 'tr'); - // add them to the view - view.appendChild(month); - view.appendChild(grid); - grid.appendChild(th); - grid.appendChild(tr); - } - }, { - key: '_calcRotation', - value: function _calcRotation(spoke, value) { - // set clocks top and right side value - if (spoke === 12) { - value *= 10; - } else if (spoke === 24) { - value *= 5; - } else { - value *= 2; - } - // special case for 00 => 60 - if (spoke === 60 && value === 0) { - value = 120; - } - return 'mddtp-picker__cell--rotate-' + value; - } - }, { - key: 'time', - get: function get() { - return this._init; - }, - set: function set(m) { - if (m) { - this._init = m; - } - } - }, { - key: 'trigger', - get: function get() { - return this._trigger; - }, - set: function set(el) { - if (el) { - this._trigger = el; - } - } - }], [{ - key: 'dialog', - get: function get() { - return mdDateTimePicker._dialog; - }, - set: function set(value) { - mdDateTimePicker.dialog = value; - } - }]); - - return mdDateTimePicker; - }(); - - mdDateTimePicker._dialog = { - view: !0, - state: !1 - }; - - exports.default = mdDateTimePicker; + _createClass(mdDateTimePicker, [{ + key: 'hide', + value: function hide() { + this._selectDialog(); + this._hideDialog(); + } + }, { + key: 'show', + value: function show() { + this._selectDialog(); + if (this._type === 'date') { + this._initDateDialog(this._init); + } else if (this._type === 'time') { + this._initTimeDialog(this._init); + } + this._showDialog(); + } + }, { + key: 'isOpen', + value: function isOpen() { + this._selectDialog(); + + return !!mdDateTimePicker.dialog.state; + } + }, { + key: 'isClosed', + value: function isClosed() { + this._selectDialog(); + + return !mdDateTimePicker.dialog.state; + } + }, { + key: 'toggle', + value: function toggle() { + this._selectDialog(); + // work according to the current state of the dialog + if (mdDateTimePicker.dialog.state) { + this.hide(); + } else { + this.show(); + } + } + }, { + key: '_selectDialog', + value: function _selectDialog() { + // now do what you normally would do + this._sDialog.picker = document.getElementById('mddtp-picker__' + [this._type]); + /** + * [sDialogEls stores all inner components of the selected dialog or sDialog to be later getElementById] + * + * @type {Array} + */ + var sDialogEls = ['viewHolder', 'years', 'header', 'cancel', 'ok', 'left', 'right', 'previous', 'current', 'next', 'subtitle', 'title', 'titleDay', 'titleMonth', 'AM', 'PM', 'needle', 'hourView', 'minuteView', 'hour', 'minute', 'fakeNeedle', 'circularHolder', 'circle', 'dotSpan'], + i = sDialogEls.length; + + while (i--) { + this._sDialog[sDialogEls[i]] = document.getElementById('mddtp-' + this._type + '__' + sDialogEls[i]); + } + + this._sDialog.tDate = this._init.clone(); + this._sDialog.sDate = this._init.clone(); + } + }, { + key: '_showDialog', + value: function _showDialog() { + var me = this, + zoomIn = 'zoomIn'; + + mdDateTimePicker.dialog.state = !0; + this._sDialog.picker.classList.remove('mddtp-picker--inactive'); + this._sDialog.picker.classList.add(zoomIn); + // if the dialog is forced into portrait mode + if (this._orientation === 'PORTRAIT') { + this._sDialog.picker.classList.add('mddtp-picker--portrait'); + } + setTimeout(function () { + me._sDialog.picker.classList.remove(zoomIn); + }, 300); + } + }, { + key: '_hideDialog', + value: function _hideDialog() { + var me = this, + years = this._sDialog.years, + title = me._sDialog.title, + subtitle = me._sDialog.subtitle, + viewHolder = this._sDialog.viewHolder, + AM = this._sDialog.AM, + PM = this._sDialog.PM, + minute = this._sDialog.minute, + hour = this._sDialog.hour, + minuteView = this._sDialog.minuteView, + hourView = this._sDialog.hourView, + picker = this._sDialog.picker, + needle = this._sDialog.needle, + dotSpan = this._sDialog.dotSpan, + active = 'mddtp-picker__color--active', + inactive = 'mddtp-picker--inactive', + invisible = 'mddtp-picker__years--invisible', + zoomIn = 'zoomIn', + zoomOut = 'zoomOut', + hidden = 'mddtp-picker__circularView--hidden', + selection = 'mddtp-picker__selection'; + + mdDateTimePicker.dialog.state = !1; + mdDateTimePicker.dialog.view = !0; + this._sDialog.picker.classList.add(zoomOut); + // reset classes + if (this._type === 'date') { + years.classList.remove(zoomIn, zoomOut); + years.classList.add(invisible); + title.classList.remove(active); + subtitle.classList.add(active); + viewHolder.classList.remove(zoomOut); + } else { + AM.classList.remove(active); + PM.classList.remove(active); + minute.classList.remove(active); + hour.classList.add(active); + minuteView.classList.add(hidden); + hourView.classList.remove(hidden); + subtitle.style.display = 'none'; + dotSpan.style.display = 'none'; + needle.className = selection; + } + setTimeout(function () { + // remove portrait mode + me._sDialog.picker.classList.remove('mddtp-picker--portrait'); + me._sDialog.picker.classList.remove(zoomOut); + me._sDialog.picker.classList.add(inactive); + // clone elements and add them again to clear events attached to them + var pickerClone = picker.cloneNode(!0); + picker.parentNode.replaceChild(pickerClone, picker); + }, 300); + } + }, { + key: '_buildDialog', + value: function _buildDialog() { + var type = this._type, + docfrag = document.createDocumentFragment(), + container = document.createElement('div'), + header = document.createElement('div'), + body = document.createElement('div'), + action = document.createElement('div'), + cancel = document.createElement('button'), + ok = document.createElement('button'); + // outer most container of the picker + + // header container of the picker + + // body container of the picker + + // action elements container + + // ... add properties to them + container.id = 'mddtp-picker__' + type; + container.classList.add('mddtp-picker'); + container.classList.add('mddtp-picker-' + type); + container.classList.add('mddtp-picker--inactive'); + container.classList.add('animated'); + this._addId(header, 'header'); + this._addClass(header, 'header'); + // add header to container + container.appendChild(header); + this._addClass(body, 'body'); + body.appendChild(action); + // add body to container + container.appendChild(body); + // add stuff to header and body according to dialog type + if (this._type === 'date') { + var subtitle = document.createElement('div'), + title = document.createElement('div'), + titleDay = document.createElement('div'), + titleMonth = document.createElement('div'), + viewHolder = document.createElement('div'), + views = document.createElement('ul'), + previous = document.createElement('li'), + current = document.createElement('li'), + next = document.createElement('li'), + left = document.createElement('button'), + right = document.createElement('button'), + years = document.createElement('ul'); + + // inside header + // adding properties to them + this._addId(subtitle, 'subtitle'); + this._addClass(subtitle, 'subtitle'); + this._addId(title, 'title'); + this._addClass(title, 'title', ['mddtp-picker__color--active']); + this._addId(titleDay, 'titleDay'); + this._addId(titleMonth, 'titleMonth'); + // add title stuff to it + title.appendChild(titleDay); + title.appendChild(titleMonth); + // add them to header + header.appendChild(subtitle); + header.appendChild(title); + // inside body + // inside viewHolder + this._addId(viewHolder, 'viewHolder'); + this._addClass(viewHolder, 'viewHolder', ['animated']); + this._addClass(views, 'views'); + this._addId(previous, 'previous'); + previous.classList.add('mddtp-picker__view'); + this._addId(current, 'current'); + current.classList.add('mddtp-picker__view'); + this._addId(next, 'next'); + next.classList.add('mddtp-picker__view'); + // fill the views + this._addView(previous); + this._addView(current); + this._addView(next); + // add them + viewHolder.appendChild(views); + views.appendChild(previous); + views.appendChild(current); + views.appendChild(next); + // inside body again + this._addId(left, 'left'); + left.classList.add('mddtp-button'); + this._addClass(left, 'left'); + left.setAttribute('type', 'button'); + left.innerHTML = this._prevHandle; + + this._addId(right, 'right'); + right.classList.add('mddtp-button'); + this._addClass(right, 'right'); + right.setAttribute('type', 'button'); + right.innerHTML = this._nextHandle; + + this._addId(years, 'years'); + this._addClass(years, 'years', ['mddtp-picker__years--invisible', 'animated']); + // add them to body + body.appendChild(viewHolder); + body.appendChild(left); + body.appendChild(right); + body.appendChild(years); + } else { + var _title = document.createElement('div'), + hour = document.createElement('span'), + span = document.createElement('span'), + minute = document.createElement('span'), + _subtitle = document.createElement('div'), + AM = document.createElement('div'), + PM = document.createElement('div'), + circularHolder = document.createElement('div'), + needle = document.createElement('div'), + dot = document.createElement('span'), + line = document.createElement('span'), + circle = document.createElement('span'), + minuteView = document.createElement('div'), + fakeNeedle = document.createElement('div'), + hourView = document.createElement('div'); + + // add properties to them + // inside header + this._addId(_title, 'title'); + this._addClass(_title, 'title'); + this._addId(hour, 'hour'); + hour.classList.add('mddtp-picker__color--active'); + span.textContent = ':'; + this._addId(span, 'dotSpan'); + span.style.display = 'none'; + this._addId(minute, 'minute'); + this._addId(_subtitle, 'subtitle'); + this._addClass(_subtitle, 'subtitle'); + _subtitle.style.display = 'none'; + this._addId(AM, 'AM'); + // AM.textContent = 'AM' + // Change to 'AM' to Locale Meridiem + AM.textContent = (0, _moment2.default)().localeData().meridiem(1, 1, !0); + this._addId(PM, 'PM'); + // PM.textContent = 'PM' + // Change to 'PM' to Locale Meridiem + PM.textContent = (0, _moment2.default)().localeData().meridiem(13, 1, !0); + // add them to title and subtitle + _title.appendChild(hour); + _title.appendChild(span); + _title.appendChild(minute); + _subtitle.appendChild(AM); + _subtitle.appendChild(PM); + // add them to header + header.appendChild(_title); + header.appendChild(_subtitle); + // inside body + this._addId(circularHolder, 'circularHolder'); + this._addClass(circularHolder, 'circularHolder'); + this._addId(needle, 'needle'); + needle.classList.add('mddtp-picker__selection'); + this._addClass(dot, 'dot'); + this._addClass(line, 'line'); + this._addId(circle, 'circle'); + this._addClass(circle, 'circle'); + this._addId(minuteView, 'minuteView'); + minuteView.classList.add('mddtp-picker__circularView'); + minuteView.classList.add('mddtp-picker__circularView--hidden'); + this._addId(fakeNeedle, 'fakeNeedle'); + fakeNeedle.classList.add('mddtp-picker__circle--fake'); + this._addId(hourView, 'hourView'); + hourView.classList.add('mddtp-picker__circularView'); + // add them to needle + needle.appendChild(dot); + needle.appendChild(line); + needle.appendChild(circle); + // add them to circularHolder + circularHolder.appendChild(needle); + circularHolder.appendChild(minuteView); + circularHolder.appendChild(fakeNeedle); + circularHolder.appendChild(hourView); + // add them to body + body.appendChild(circularHolder); + } + action.classList.add('mddtp-picker__action'); + + if (this._autoClose === !0) { + action.style.display = 'none'; + } + + this._addId(cancel, 'cancel'); + cancel.classList.add('mddtp-button'); + cancel.setAttribute('type', 'button'); + this._addId(ok, 'ok'); + ok.classList.add('mddtp-button'); + ok.setAttribute('type', 'button'); + // add actions + action.appendChild(cancel); + action.appendChild(ok); + // add actions to body + body.appendChild(action); + docfrag.appendChild(container); + // add the container to the end of body + document.getElementsByTagName('body').item(0).appendChild(docfrag); + } + }, { + key: '_initTimeDialog', + value: function _initTimeDialog(m) { + var hour = this._sDialog.hour, + minute = this._sDialog.minute, + subtitle = this._sDialog.subtitle, + dotSpan = this._sDialog.dotSpan; + + // switch according to 12 hour or 24 hour mode + if (this._mode) { + // CHANGED exception case for 24 => 0 issue #57 + var text = parseInt(m.format('H'), 10); + if (text === 0) { + text = '00'; + } + this._fillText(hour, text); + // add the configurable colon in this mode issue #56 + if (this._colon) { + dotSpan.style.display = 'initial'; + } + } else { + this._fillText(hour, m.format('h')); + // this._sDialog[m.format('A')].classList.add('mddtp-picker__color--active') + // Using isPM function for Find PM + if (m._locale.isPM(m.format('A'))) { + this._sDialog.PM.classList.add('mddtp-picker__color--active'); + } else { + this._sDialog.AM.classList.add('mddtp-picker__color--active'); + } + subtitle.style.display = 'initial'; + dotSpan.style.display = 'initial'; + } + this._fillText(minute, m.format('mm')); + this._initHour(); + this._initMinute(); + this._attachEventHandlers(); + this._changeM(); + this._dragDial(); + this._switchToView(hour); + this._switchToView(minute); + this._addClockEvent(); + this._setButtonText(); + } + }, { + key: '_initHour', + value: function _initHour() { + var hourView = this._sDialog.hourView, + needle = this._sDialog.needle, + hour = 'mddtp-hour__selected', + selected = 'mddtp-picker__cell--selected', + rotate = 'mddtp-picker__cell--rotate-', + rotate24 = 'mddtp-picker__cell--rotate24', + cell = 'mddtp-picker__cell', + docfrag = document.createDocumentFragment(), + hourNow = void 0; + + if (this._mode) { + var degreeStep = this._inner24 === !0 ? 10 : 5; + hourNow = parseInt(this._sDialog.tDate.format('H'), 10); + for (var i = 1, j = degreeStep; i <= 24; i++, j += degreeStep) { + var div = document.createElement('div'), + span = document.createElement('span'); + + div.classList.add(cell); + // CHANGED exception case for 24 => 0 issue #57 + if (i === 24) { + span.textContent = '00'; + } else { + span.textContent = i; + } + + var position = j; + if (this._inner24 === !0 && i > 12) { + position -= 120; + div.classList.add(rotate24); + } + + div.classList.add(rotate + position); + if (hourNow === i) { + div.id = hour; + div.classList.add(selected); + needle.classList.add(rotate + position); + } + // CHANGED exception case for 24 => 0 issue #58 + if (i === 24 && hourNow === 0) { + div.id = hour; + div.classList.add(selected); + needle.classList.add(rotate + position); + } + div.appendChild(span); + docfrag.appendChild(div); + } + } else { + hourNow = parseInt(this._sDialog.tDate.format('h'), 10); + for (var _i = 1, _j = 10; _i <= 12; _i++, _j += 10) { + var _div = document.createElement('div'), + _span = document.createElement('span'); + + _div.classList.add(cell); + _span.textContent = _i; + _div.classList.add(rotate + _j); + if (hourNow === _i) { + _div.id = hour; + _div.classList.add(selected); + needle.classList.add(rotate + _j); + } + _div.appendChild(_span); + docfrag.appendChild(_div); + } + } + // empty the hours + while (hourView.lastChild) { + hourView.removeChild(hourView.lastChild); + } + // set inner html accordingly + hourView.appendChild(docfrag); + } + }, { + key: '_initMinute', + value: function _initMinute() { + var minuteView = this._sDialog.minuteView, + minuteNow = parseInt(this._sDialog.tDate.format('m'), 10), + sMinute = 'mddtp-minute__selected', + selected = 'mddtp-picker__cell--selected', + rotate = 'mddtp-picker__cell--rotate-', + cell = 'mddtp-picker__cell', + docfrag = document.createDocumentFragment(); + + for (var i = 5, j = 10; i <= 60; i += 5, j += 10) { + var div = document.createElement('div'), + span = document.createElement('span'); + + div.classList.add(cell); + if (i === 60) { + span.textContent = this._numWithZero(0); + } else { + span.textContent = this._numWithZero(i); + } + if (minuteNow === 0) { + minuteNow = 60; + } + div.classList.add(rotate + j); + // (minuteNow === 1 && i === 60) for corner case highlight 00 at 01 + if (minuteNow === i || minuteNow - 1 === i || minuteNow + 1 === i || minuteNow === 1 && i === 60) { + div.id = sMinute; + div.classList.add(selected); + } + div.appendChild(span); + docfrag.appendChild(div); + } + // empty the hours + while (minuteView.lastChild) { + minuteView.removeChild(minuteView.lastChild); + } + // set inner html accordingly + minuteView.appendChild(docfrag); + } + }, { + key: '_initDateDialog', + value: function _initDateDialog(m) { + var subtitle = this._sDialog.subtitle, + title = this._sDialog.title, + titleDay = this._sDialog.titleDay, + titleMonth = this._sDialog.titleMonth; + + this._fillText(subtitle, m.format('YYYY')); + this._fillText(titleDay, m.format('ddd, ')); + this._fillText(titleMonth, m.format('MMM D')); + this._initYear(); + this._initViewHolder(); + this._attachEventHandlers(); + this._changeMonth(); + this._switchToView(subtitle); + this._switchToView(title); + this._setButtonText(); + } + }, { + key: '_initViewHolder', + value: function _initViewHolder() { + var m = this._sDialog.tDate, + current = this._sDialog.current, + previous = this._sDialog.previous, + next = this._sDialog.next, + past = this._past, + future = this._future; + + if (m.isBefore(past, 'month')) { + m = past.clone(); + } + if (m.isAfter(future, 'month')) { + m = future.clone(); + } + this._sDialog.tDate = m; + this._initMonth(current, m); + this._initMonth(next, (0, _moment2.default)(this._getMonth(m, 1))); + this._initMonth(previous, (0, _moment2.default)(this._getMonth(m, -1))); + this._toMoveMonth(); + } + }, { + key: '_initMonth', + value: function _initMonth(view, m) { + var displayMonth = m.format('MMMM YYYY'), + innerDivs = view.getElementsByTagName('div'); + // get the .mddtp-picker__month element using innerDivs[0] + + this._fillText(innerDivs[0], displayMonth); + var docfrag = document.createDocumentFragment(), + tr = innerDivs[3], + firstDayOfMonth = _moment2.default.weekdays(!0).indexOf(_moment2.default.weekdays(!1, (0, _moment2.default)(m).date(1).day())), + today = -1, + selected = -1, + lastDayOfMonth = parseInt((0, _moment2.default)(m).endOf('month').format('D'), 10) + firstDayOfMonth - 1, + past = firstDayOfMonth, + cellClass = 'mddtp-picker__cell', + future = lastDayOfMonth; + // get the .mddtp-picker__tr element using innerDivs[3] + + /* + * @netTrek - first day of month dependented from moment.locale + */ + + if ((0, _moment2.default)().isSame(m, 'month')) { + today = parseInt((0, _moment2.default)().format('D'), 10); + today += firstDayOfMonth - 1; + } + if (this._past.isSame(m, 'month')) { + past = parseInt(this._past.format('D'), 10); + past += firstDayOfMonth - 1; + } + if (this._future.isSame(m, 'month')) { + future = parseInt(this._future.format('D'), 10); + future += firstDayOfMonth - 1; + } + if (this._sDialog.sDate.isSame(m, 'month')) { + selected = parseInt((0, _moment2.default)(m).format('D'), 10); + selected += firstDayOfMonth - 1; + } + for (var i = 0; i < 42; i++) { + // create cell + var cell = document.createElement('span'), + currentDay = i - firstDayOfMonth + 1; + + if (i >= firstDayOfMonth && i <= lastDayOfMonth) { + if (i > future || i < past) { + cell.classList.add(cellClass + '--disabled'); + } else { + cell.classList.add(cellClass); + } + this._fillText(cell, currentDay); + } + if (today === i) { + cell.classList.add(cellClass + '--today'); + } + if (selected === i) { + cell.classList.add(cellClass + '--selected'); + cell.id = 'mddtp-date__selected'; + } + docfrag.appendChild(cell); + } + // empty the tr + while (tr.lastChild) { + tr.removeChild(tr.lastChild); + } + // set inner html accordingly + tr.appendChild(docfrag); + this._addCellClickEvent(tr); + } + }, { + key: '_initYear', + value: function _initYear() { + var years = this._sDialog.years, + currentYear = this._sDialog.tDate.year(), + docfrag = document.createDocumentFragment(), + past = this._past.year(), + future = this._future.year(); + + for (var year = past; year <= future; year++) { + var li = document.createElement('li'); + li.textContent = year; + if (year === currentYear) { + li.id = 'mddtp-date__currentYear'; + li.classList.add('mddtp-picker__li--current'); + } + docfrag.appendChild(li); + } + // empty the years ul + while (years.lastChild) { + years.removeChild(years.lastChild); + } + // set inner html accordingly + years.appendChild(docfrag); + // attach event handler to the ul to get the benefit of event delegation + this._changeYear(years); + } + }, { + key: '_pointNeedle', + value: function _pointNeedle(me) { + var spoke = 60, + value = void 0, + circle = this._sDialog.circle, + fakeNeedle = this._sDialog.fakeNeedle, + circularHolder = this._sDialog.circularHolder, + selection = 'mddtp-picker__selection', + needle = me._sDialog.needle; + + // move the needle to correct position + needle.className = ''; + needle.classList.add(selection); + if (!mdDateTimePicker.dialog.view) { + value = me._sDialog.sDate.format('m'); + + // Need to desactivate for the autoClose mode as it mess things up. If you have an idea, feel free to give it a shot ! + if (me._autoClose !== !0) { + // move the fakeNeedle to correct position + setTimeout(function () { + var hOffset = circularHolder.getBoundingClientRect(), + cOffset = circle.getBoundingClientRect(); + + fakeNeedle.style.left = 'left:' + (cOffset.left - hOffset.left) + 'px'; + fakeNeedle.style.top = 'top:' + (cOffset.top - hOffset.top) + 'px'; + }, 300); + } + } else if (me._mode) { + spoke = 24; + value = parseInt(me._sDialog.sDate.format('H'), 10); + // CHANGED exception for 24 => 0 issue #58 + if (value === 0) { + value = 24; + } + } else { + spoke = 12; + value = me._sDialog.sDate.format('h'); + } + + var parsedValue = parseInt(value, 10), + rotationClass = me._calcRotation(spoke, parsedValue); + + if (rotationClass) { + needle.classList.add(rotationClass); + + if (this._inner24 === !0 && spoke === 24 && parsedValue > 12) { + needle.classList.add('mddtp-picker__cell--rotate24'); + } + } + } + }, { + key: '_switchToView', + value: function _switchToView(el) { + var me = this; + // attach the view change button + if (this._type === 'date') { + el.onclick = function () { + me._switchToDateView(el, me); + }; + } else { + if (this._inner24 === !0 && me._mode) { + if (parseInt(me._sDialog.sDate.format('H'), 10) > 12) { + me._sDialog.needle.classList.add('mddtp-picker__cell--rotate24'); + } else { + me._sDialog.needle.classList.remove('mddtp-picker__cell--rotate24'); + } + } + + el.onclick = function () { + me._switchToTimeView(me); + }; + } + } + }, { + key: '_switchToTimeView', + value: function _switchToTimeView(me) { + var hourView = me._sDialog.hourView, + minuteView = me._sDialog.minuteView, + hour = me._sDialog.hour, + minute = me._sDialog.minute, + activeClass = 'mddtp-picker__color--active', + hidden = 'mddtp-picker__circularView--hidden'; + + // toggle view classes + hourView.classList.toggle(hidden); + minuteView.classList.toggle(hidden); + hour.classList.toggle(activeClass); + minute.classList.toggle(activeClass); + // move the needle to correct position + // toggle the view type + mdDateTimePicker.dialog.view = !mdDateTimePicker.dialog.view; + me._pointNeedle(me); + } + }, { + key: '_switchToDateView', + value: function _switchToDateView(el, me) { + el.setAttribute('disabled', ''); + var viewHolder = me._sDialog.viewHolder, + years = me._sDialog.years, + title = me._sDialog.title, + subtitle = me._sDialog.subtitle, + currentYear = document.getElementById('mddtp-date__currentYear'); + + if (mdDateTimePicker.dialog.view) { + viewHolder.classList.add('zoomOut'); + years.classList.remove('mddtp-picker__years--invisible'); + years.classList.add('zoomIn'); + // scroll into the view + currentYear.scrollIntoViewIfNeeded && currentYear.scrollIntoViewIfNeeded(); + } else { + years.classList.add('zoomOut'); + viewHolder.classList.remove('zoomOut'); + viewHolder.classList.add('zoomIn'); + setTimeout(function () { + years.classList.remove('zoomIn', 'zoomOut'); + years.classList.add('mddtp-picker__years--invisible'); + viewHolder.classList.remove('zoomIn'); + }, 300); + } + title.classList.toggle('mddtp-picker__color--active'); + subtitle.classList.toggle('mddtp-picker__color--active'); + mdDateTimePicker.dialog.view = !mdDateTimePicker.dialog.view; + setTimeout(function () { + el.removeAttribute('disabled'); + }, 300); + } + }, { + key: '_addClockEvent', + value: function _addClockEvent() { + var me = this, + hourView = this._sDialog.hourView, + minuteView = this._sDialog.minuteView, + sClass = 'mddtp-picker__cell--selected'; + + hourView.onclick = function (e) { + var sHour = 'mddtp-hour__selected', + selectedHour = document.getElementById(sHour), + setHour = 0; + + if (e.target && e.target.nodeName === 'SPAN') { + // clear the previously selected hour + selectedHour.id = ''; + selectedHour.classList.remove(sClass); + // select the new hour + e.target.parentNode.classList.add(sClass); + e.target.parentNode.id = sHour; + // set the sDate according to 24 or 12 hour mode + if (me._mode) { + setHour = parseInt(e.target.textContent, 10); + } else if (me._sDialog.sDate.format('A') === 'AM') { + setHour = e.target.textContent; + } else { + setHour = parseInt(e.target.textContent, 10) + 12; + } + me._sDialog.sDate.hour(setHour); + // set the display hour + me._sDialog.hour.textContent = e.target.textContent; + // switch the view + me._pointNeedle(me); + setTimeout(function () { + me._switchToTimeView(me); + }, 700); + } + }; + minuteView.onclick = function (e) { + var sMinute = 'mddtp-minute__selected', + selectedMinute = document.getElementById(sMinute), + setMinute = 0; + + if (e.target && e.target.nodeName === 'SPAN') { + // clear the previously selected hour + if (selectedMinute) { + selectedMinute.id = ''; + selectedMinute.classList.remove(sClass); + } + // select the new minute + e.target.parentNode.classList.add(sClass); + e.target.parentNode.id = sMinute; + // set the sDate minute + setMinute = e.target.textContent; + me._sDialog.sDate.minute(setMinute); + // set the display minute + me._sDialog.minute.textContent = setMinute; + me._pointNeedle(me); + + if (me._autoClose === !0) { + me._sDialog.ok.onclick(); + } + } + }; + } + }, { + key: '_addCellClickEvent', + value: function _addCellClickEvent(el) { + var me = this; + el.onclick = function (e) { + if (e.target && e.target.nodeName === 'SPAN' && e.target.classList.contains('mddtp-picker__cell')) { + var day = e.target.textContent, + currentDate = me._sDialog.tDate.date(day), + sId = 'mddtp-date__selected', + sClass = 'mddtp-picker__cell--selected', + selected = document.getElementById(sId), + subtitle = me._sDialog.subtitle, + titleDay = me._sDialog.titleDay, + titleMonth = me._sDialog.titleMonth; + + if (selected) { + selected.classList.remove(sClass); + selected.id = ''; + } + e.target.classList.add(sClass); + e.target.id = sId; + + // update temp date object with the date selected + me._sDialog.sDate = currentDate.clone(); + + me._fillText(subtitle, currentDate.year()); + me._fillText(titleDay, currentDate.format('ddd, ')); + me._fillText(titleMonth, currentDate.format('MMM D')); + + if (me._autoClose === !0) { + me._sDialog.ok.onclick(); + } + } + }; + } + }, { + key: '_toMoveMonth', + value: function _toMoveMonth() { + var m = this._sDialog.tDate, + left = this._sDialog.left, + right = this._sDialog.right, + past = this._past, + future = this._future; + + left.removeAttribute('disabled'); + right.removeAttribute('disabled'); + left.classList.remove('mddtp-button--disabled'); + right.classList.remove('mddtp-button--disabled'); + if (m.isSame(past, 'month')) { + left.setAttribute('disabled', ''); + left.classList.add('mddtp-button--disabled'); + } + if (m.isSame(future, 'month')) { + right.setAttribute('disabled', ''); + right.classList.add('mddtp-button--disabled'); + } + } + }, { + key: '_changeMonth', + value: function _changeMonth() { + var me = this, + left = this._sDialog.left, + right = this._sDialog.right, + mLeftClass = 'mddtp-picker__view--left', + mRightClass = 'mddtp-picker__view--right', + pause = 'mddtp-picker__view--pause'; + + left.onclick = function () { + moveStep(mRightClass, me._sDialog.previous); + }; + + right.onclick = function () { + moveStep(mLeftClass, me._sDialog.next); + }; + + function moveStep(aClass, to) { + /** + * [stepBack to know if the to step is going back or not] + * + * @type {Boolean} + */ + var stepBack = !1, + next = me._sDialog.next, + current = me._sDialog.current, + previous = me._sDialog.previous; + + left.setAttribute('disabled', ''); + right.setAttribute('disabled', ''); + current.classList.add(aClass); + previous.classList.add(aClass); + next.classList.add(aClass); + var clone = to.cloneNode(!0), + del = void 0; + + if (to === next) { + del = previous; + current.parentNode.appendChild(clone); + next.id = current.id; + current.id = previous.id; + previous = current; + current = next; + next = clone; + } else { + stepBack = !0; + del = next; + previous.id = current.id; + current.id = next.id; + next = current; + current = previous; + } + setTimeout(function () { + if (to === previous) { + current.parentNode.insertBefore(clone, current); + previous = clone; + } + // update real values to match these values + me._sDialog.next = next; + me._sDialog.current = current; + me._sDialog.previous = previous; + current.classList.add(pause); + next.classList.add(pause); + previous.classList.add(pause); + current.classList.remove(aClass); + next.classList.remove(aClass); + previous.classList.remove(aClass); + del.parentNode.removeChild(del); + }, 300); + // REVIEW replace below code with requestAnimationFrame + setTimeout(function () { + current.classList.remove(pause); + next.classList.remove(pause); + previous.classList.remove(pause); + if (stepBack) { + me._sDialog.tDate = me._getMonth(me._sDialog.tDate, -1); + } else { + me._sDialog.tDate = me._getMonth(me._sDialog.tDate, 1); + } + me._initViewHolder(); + }, 350); + setTimeout(function () { + if (!left.classList.contains('mddtp-button--disabled')) { + left.removeAttribute('disabled'); + } + if (!right.classList.contains('mddtp-button--disabled')) { + right.removeAttribute('disabled'); + } + }, 400); + } + } + }, { + key: '_changeYear', + value: function _changeYear(el) { + var me = this; + el.onclick = function (e) { + if (e.target && e.target.nodeName === 'LI') { + var selected = document.getElementById('mddtp-date__currentYear'); + // clear previous selected + selected.id = ''; + selected.classList.remove('mddtp-picker__li--current'); + // add the properties to the newer one + e.target.id = 'mddtp-date__currentYear'; + e.target.classList.add('mddtp-picker__li--current'); + // switch view + me._switchToDateView(el, me); + // set the tdate to it + me._sDialog.tDate.year(parseInt(e.target.textContent, 10)); + // update the dialog + me._initViewHolder(); + } + }; + } + }, { + key: '_changeM', + value: function _changeM() { + var me = this, + AM = this._sDialog.AM, + PM = this._sDialog.PM; + + AM.onclick = function () { + // let m = me._sDialog.sDate.format('A') + // Change Locale Meridiem to AM/PM String + var m = 'AM'; + if (me._sDialog.sDate._locale.isPM(me._sDialog.sDate.format('A'))) { + m = 'PM'; + } + if (m === 'PM') { + me._sDialog.sDate.subtract(12, 'h'); + AM.classList.toggle('mddtp-picker__color--active'); + PM.classList.toggle('mddtp-picker__color--active'); + } + }; + PM.onclick = function () { + // let m = me._sDialog.sDate.format('A') + // Change Locale Meridiem to AM/PM String + var m = 'AM'; + if (me._sDialog.sDate._locale.isPM(me._sDialog.sDate.format('A'))) { + m = 'PM'; + } + 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', + value: function _dragDial() { + var me = this, + needle = this._sDialog.needle, + circle = this._sDialog.circle, + fakeNeedle = this._sDialog.fakeNeedle, + circularHolder = this._sDialog.circularHolder, + minute = this._sDialog.minute, + quick = 'mddtp-picker__selection--quick', + selection = 'mddtp-picker__selection', + selected = 'mddtp-picker__cell--selected', + rotate = 'mddtp-picker__cell--rotate-', + hOffset = circularHolder.getBoundingClientRect(), + divides = void 0, + fakeNeedleDraggabilly = new _draggabilly2.default(fakeNeedle, { + containment: !0 + }); + + fakeNeedleDraggabilly.on('pointerDown', function () { + // console.info ( 'pointerDown' , e ); + hOffset = circularHolder.getBoundingClientRect(); + }); + /** + * netTrek + * fixes for iOS - drag + */ + fakeNeedleDraggabilly.on('pointerMove', function (e) { + var clientX = e.clientX, + clientY = e.clientY; + + + if (clientX === undefined) { + if (e.pageX === undefined) { + if (e.touches && e.touches.length > 0) { + clientX = e.touches[0].clientX; + clientY = e.touches[0].clientY; + } else { + throw new Error('coult not detect pageX, pageY'); + } + } else { + clientX = e.pageX - document.body.scrollLeft - document.documentElement.scrollLeft; + clientY = e.pageY - document.body.scrollTop - document.documentElement.scrollTop; + } + } + // console.info ( 'Drag clientX' , clientX, clientY, e ); + + var xPos = clientX - hOffset.left - hOffset.width / 2, + yPos = clientY - hOffset.top - hOffset.height / 2, + slope = Math.atan2(-yPos, xPos); + + needle.className = ''; + if (slope < 0) { + slope += 2 * Math.PI; + } + slope *= 180 / Math.PI; + slope = 360 - slope; + if (slope > 270) { + slope -= 360; + } + divides = parseInt(slope / 6); + var same = Math.abs(6 * divides - slope), + upper = Math.abs(6 * (divides + 1) - slope); + + if (upper < same) { + divides++; + } + divides += 15; + needle.classList.add(selection); + needle.classList.add(quick); + needle.classList.add(rotate + divides * 2); + minute.textContent = me._numWithZero(divides); + }); + /** + * netTrek + * fixes for iOS - drag + */ + var onDragEnd = function onDragEnd() { + var minuteViewChildren = me._sDialog.minuteView.getElementsByTagName('div'), + sMinute = 'mddtp-minute__selected', + selectedMinute = document.getElementById(sMinute), + cOffset = circle.getBoundingClientRect(); + + fakeNeedle.style.left = 'left:' + (cOffset.left - hOffset.left) + 'px'; + fakeNeedle.style.top = 'top:' + (cOffset.top - hOffset.top) + 'px'; + needle.classList.remove(quick); + var select = divides; + if (select === 1) { + select = 60; + } + select = me._nearestDivisor(select, 5); + // normalize 60 => 0 + if (divides === 60) { + divides = 0; + } + // remove previously selected value + if (selectedMinute) { + selectedMinute.id = ''; + selectedMinute.classList.remove(selected); + } + // add the new selected + if (select > 0) { + select /= 5; + select--; + minuteViewChildren[select].id = sMinute; + minuteViewChildren[select].classList.add(selected); + } + minute.textContent = me._numWithZero(divides); + me._sDialog.sDate.minutes(divides); + }; + + fakeNeedleDraggabilly.on('pointerUp', onDragEnd); + fakeNeedleDraggabilly.on('dragEnd', onDragEnd); + } + }, { + key: '_attachEventHandlers', + value: function _attachEventHandlers() { + var me = this, + ok = this._sDialog.ok, + cancel = this._sDialog.cancel, + onCancel = new CustomEvent('onCancel'), + onOk = new CustomEvent('onOk'); + // create cutom events to dispatch + + cancel.onclick = function () { + me.toggle(); + if (me._trigger) { + me._trigger.dispatchEvent(onCancel); + } + }; + ok.onclick = function () { + me._init = me._sDialog.sDate; + me.toggle(); + if (me._trigger) { + me._trigger.dispatchEvent(onOk); + } + }; + } + }, { + key: '_setButtonText', + value: function _setButtonText() { + this._sDialog.cancel.textContent = this._cancel; + this._sDialog.ok.textContent = this._ok; + } + }, { + key: '_getMonth', + value: function _getMonth(moment, count) { + var m = void 0; + m = moment.clone(); + if (count > 0) { + return m.add(Math.abs(count), 'M'); + } + return m.subtract(Math.abs(count), 'M'); + } + }, { + key: '_nearestDivisor', + value: function _nearestDivisor(number, divided) { + if (number % divided === 0) { + return number; + } else if ((number - 1) % divided === 0) { + return number - 1; + } else if ((number + 1) % divided === 0) { + return number + 1; + } + return -1; + } + }, { + key: '_numWithZero', + value: function _numWithZero(n) { + return n > 9 ? '' + n : '0' + n; + } + }, { + key: '_fillText', + value: function _fillText(el, text) { + if (el.firstChild) { + el.firstChild.nodeValue = text; + } else { + el.appendChild(document.createTextNode(text)); + } + } + }, { + key: '_addId', + value: function _addId(el, id) { + el.id = 'mddtp-' + this._type + '__' + id; + } + }, { + key: '_addClass', + value: function _addClass(el, aClass, more) { + el.classList.add('mddtp-picker__' + aClass); + var i = 0; + if (more) { + i = more.length; + more.reverse(); + } + while (i--) { + el.classList.add(more[i]); + } + } + }, { + key: '_addView', + value: function _addView(view) { + var month = document.createElement('div'), + grid = document.createElement('div'), + th = document.createElement('div'), + tr = document.createElement('div'), + weekDays = _moment2.default.weekdaysMin(!0).reverse(), + week = 7; + /** + * @netTrek - weekday dependented from moment.locale + */ + + while (week--) { + var span = document.createElement('span'); + span.textContent = weekDays[week]; + th.appendChild(span); + } + // add properties to them + this._addClass(month, 'month'); + this._addClass(grid, 'grid'); + this._addClass(th, 'th'); + this._addClass(tr, 'tr'); + // add them to the view + view.appendChild(month); + view.appendChild(grid); + grid.appendChild(th); + grid.appendChild(tr); + } + }, { + key: '_calcRotation', + value: function _calcRotation(spoke, value) { + // set clocks top and right side value + if (spoke === 12) { + value *= 10; + } else if (spoke === 24) { + if (this._inner24 === !0) { + if (value > 12) { + value -= 12; + } + value *= 10; + } else { + value *= 5; + } + } else { + value *= 2; + } + // special case for 00 => 60 + if (spoke === 60 && value === 0) { + value = 120; + } + return 'mddtp-picker__cell--rotate-' + value; + } + }, { + key: 'time', + get: function get() { + return this._init; + }, + set: function set(m) { + if (m) { + this._init = m; + } + } + }, { + key: 'trigger', + get: function get() { + return this._trigger; + }, + set: function set(el) { + if (el) { + this._trigger = el; + } + } + }], [{ + key: 'dialog', + get: function get() { + return mdDateTimePicker._dialog; + }, + set: function set(value) { + mdDateTimePicker._dialog = value; + } + }]); + + return mdDateTimePicker; + }(); + + mdDateTimePicker._dialog = { + view: !0, + state: !1 + }; + + exports.default = mdDateTimePicker; }); \ No newline at end of file diff --git a/dist/js/mdDateTimePicker.min.js b/dist/js/mdDateTimePicker.min.js index bb0ef38..db43718 100644 --- a/dist/js/mdDateTimePicker.min.js +++ b/dist/js/mdDateTimePicker.min.js @@ -1 +1 @@ -!function(t,e){if("function"==typeof define&&define.amd)define(["exports","moment","draggabilly"],e);else if("undefined"!=typeof exports)e(exports,require("moment"),require("draggabilly"));else{var i={exports:{}};e(i.exports,t.moment,t.draggabilly),t.mdDateTimePicker=i.exports}}(this,function(t,e,i){"use strict";function a(t){return t&&t.__esModule?t:{default:t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var d=a(e),l=a(i),o=function(){function t(t,e){for(var i,a=0;a':I,x=e.nextHandle,T=void 0===x?'
':x;s(this,t),this._type=i,this._init=l,this._past=n,this._future=r,this._mode=u,this._orientation=m,this._trigger=g,this._ok=f,this._cancel=k,this._colon=y,this._autoClose=b,this._inner24=E,this._prevHandle=M,this._nextHandle=T,this._sDialog={},"undefined"==typeof document||document.getElementById("mddtp-picker__"+this._type)||this._buildDialog()}return o(t,[{key:"hide",value:function(){this._selectDialog(),this._hideDialog()}},{key:"show",value:function(){this._selectDialog(),"date"===this._type?this._initDateDialog(this._init):"time"===this._type&&this._initTimeDialog(this._init),this._showDialog()}},{key:"isOpen",value:function(){return this._selectDialog(),!!t.dialog.state}},{key:"isClosed",value:function(){return this._selectDialog(),!t.dialog.state}},{key:"toggle",value:function(){this._selectDialog(),t.dialog.state?this.hide():this.show()}},{key:"_selectDialog",value:function(){this._sDialog.picker=document.getElementById("mddtp-picker__"+[this._type]);for(var t=["viewHolder","years","header","cancel","ok","left","right","previous","current","next","subtitle","title","titleDay","titleMonth","AM","PM","needle","hourView","minuteView","hour","minute","fakeNeedle","circularHolder","circle","dotSpan"],e=t.length;e--;)this._sDialog[t[e]]=document.getElementById("mddtp-"+this._type+"__"+t[e]);this._sDialog.tDate=this._init.clone(),this._sDialog.sDate=this._init.clone()}},{key:"_showDialog",value:function(){var e=this;t.dialog.state=!0,this._sDialog.picker.classList.remove("mddtp-picker--inactive"),this._sDialog.picker.classList.add("zoomIn"),"PORTRAIT"===this._orientation&&this._sDialog.picker.classList.add("mddtp-picker--portrait"),setTimeout(function(){e._sDialog.picker.classList.remove("zoomIn")},300)}},{key:"_hideDialog",value:function(){var e=this,i=this._sDialog.years,a=e._sDialog.title,s=e._sDialog.subtitle,d=this._sDialog.viewHolder,l=this._sDialog.AM,o=this._sDialog.PM,n=this._sDialog.minute,c=this._sDialog.hour,r=this._sDialog.minuteView,_=this._sDialog.hourView,u=this._sDialog.picker,h=this._sDialog.needle,m=this._sDialog.dotSpan,p="mddtp-picker__color--active",g="mddtp-picker__circularView--hidden";t.dialog.state=!1,t.dialog.view=!0,this._sDialog.picker.classList.add("zoomOut"),"date"===this._type?(i.classList.remove("zoomIn","zoomOut"),i.classList.add("mddtp-picker__years--invisible"),a.classList.remove(p),s.classList.add(p),d.classList.remove("zoomOut")):(l.classList.remove(p),o.classList.remove(p),n.classList.remove(p),c.classList.add(p),r.classList.add(g),_.classList.remove(g),s.setAttribute("style","display: none"),m.setAttribute("style","display: none"),h.className="mddtp-picker__selection"),setTimeout(function(){e._sDialog.picker.classList.remove("mddtp-picker--portrait"),e._sDialog.picker.classList.remove("zoomOut"),e._sDialog.picker.classList.add("mddtp-picker--inactive");var t=u.cloneNode(!0);u.parentNode.replaceChild(t,u)},300)}},{key:"_buildDialog",value:function(){var t=this._type,e=document.createDocumentFragment(),i=document.createElement("div"),a=document.createElement("div"),s=document.createElement("div"),l=document.createElement("div"),o=document.createElement("button"),n=document.createElement("button");if(i.id="mddtp-picker__"+t,i.classList.add("mddtp-picker"),i.classList.add("mddtp-picker-"+t),i.classList.add("mddtp-picker--inactive"),i.classList.add("animated"),this._addId(a,"header"),this._addClass(a,"header"),i.appendChild(a),this._addClass(s,"body"),s.appendChild(l),i.appendChild(s),"date"===this._type){var c=document.createElement("div"),r=document.createElement("div"),_=document.createElement("div"),u=document.createElement("div"),h=document.createElement("div"),m=document.createElement("ul"),p=document.createElement("li"),g=document.createElement("li"),v=document.createElement("li"),f=document.createElement("button"),D=document.createElement("button"),k=document.createElement("ul");this._addId(c,"subtitle"),this._addClass(c,"subtitle"),this._addId(r,"title"),this._addClass(r,"title",["mddtp-picker__color--active"]),this._addId(_,"titleDay"),this._addId(u,"titleMonth"),r.appendChild(_),r.appendChild(u),a.appendChild(c),a.appendChild(r),this._addId(h,"viewHolder"),this._addClass(h,"viewHolder",["animated"]),this._addClass(m,"views"),this._addId(p,"previous"),p.classList.add("mddtp-picker__view"),this._addId(g,"current"),g.classList.add("mddtp-picker__view"),this._addId(v,"next"),v.classList.add("mddtp-picker__view"),this._addView(p),this._addView(g),this._addView(v),h.appendChild(m),m.appendChild(p),m.appendChild(g),m.appendChild(v),this._addId(f,"left"),f.classList.add("mddtp-button"),this._addClass(f,"left"),f.setAttribute("type","button"),f.innerHTML=this._prevHandle,this._addId(D,"right"),D.classList.add("mddtp-button"),this._addClass(D,"right"),D.setAttribute("type","button"),D.innerHTML=this._nextHandle,this._addId(k,"years"),this._addClass(k,"years",["mddtp-picker__years--invisible","animated"]),s.appendChild(h),s.appendChild(f),s.appendChild(D),s.appendChild(k)}else{var C=document.createElement("div"),y=document.createElement("span"),L=document.createElement("span"),b=document.createElement("span"),w=document.createElement("div"),E=document.createElement("div"),I=document.createElement("div"),M=document.createElement("div"),x=document.createElement("div"),T=document.createElement("span"),A=document.createElement("span"),V=document.createElement("span"),N=document.createElement("div"),H=document.createElement("div"),B=document.createElement("div");this._addId(C,"title"),this._addClass(C,"title"),this._addId(y,"hour"),y.classList.add("mddtp-picker__color--active"),L.textContent=":",this._addId(L,"dotSpan"),L.setAttribute("style","display: none"),this._addId(b,"minute"),this._addId(w,"subtitle"),this._addClass(w,"subtitle"),w.setAttribute("style","display: none"),this._addId(E,"AM"),E.textContent=(0,d.default)().localeData().meridiem(1,1,!0),this._addId(I,"PM"),I.textContent=(0,d.default)().localeData().meridiem(13,1,!0),C.appendChild(y),C.appendChild(L),C.appendChild(b),w.appendChild(E),w.appendChild(I),a.appendChild(C),a.appendChild(w),this._addId(M,"circularHolder"),this._addClass(M,"circularHolder"),this._addId(x,"needle"),x.classList.add("mddtp-picker__selection"),this._addClass(T,"dot"),this._addClass(A,"line"),this._addId(V,"circle"),this._addClass(V,"circle"),this._addId(N,"minuteView"),N.classList.add("mddtp-picker__circularView"),N.classList.add("mddtp-picker__circularView--hidden"),this._addId(H,"fakeNeedle"),H.classList.add("mddtp-picker__circle--fake"),this._addId(B,"hourView"),B.classList.add("mddtp-picker__circularView"),x.appendChild(T),x.appendChild(A),x.appendChild(V),M.appendChild(x),M.appendChild(N),M.appendChild(H),M.appendChild(B),s.appendChild(M)}l.classList.add("mddtp-picker__action"),this._autoClose===!0&&(l.style.display="none"),this._addId(o,"cancel"),o.classList.add("mddtp-button"),o.setAttribute("type","button"),this._addId(n,"ok"),n.classList.add("mddtp-button"),n.setAttribute("type","button"),l.appendChild(o),l.appendChild(n),s.appendChild(l),e.appendChild(i),document.getElementsByTagName("body").item(0).appendChild(e)}},{key:"_initTimeDialog",value:function(t){var e=this._sDialog.hour,i=this._sDialog.minute,a=this._sDialog.subtitle,s=this._sDialog.dotSpan;if(this._mode){var d=parseInt(t.format("H"),10);0===d&&(d="00"),this._fillText(e,d),this._colon&&s.removeAttribute("style")}else this._fillText(e,t.format("h")),t._locale.isPM(t.format("A"))?this._sDialog.PM.classList.add("mddtp-picker__color--active"):this._sDialog.AM.classList.add("mddtp-picker__color--active"),a.removeAttribute("style"),s.removeAttribute("style");this._fillText(i,t.format("mm")),this._initHour(),this._initMinute(),this._attachEventHandlers(),this._changeM(),this._dragDial(),this._switchToView(e),this._switchToView(i),this._addClockEvent(),this._setButtonText()}},{key:"_initHour",value:function(){var t=this._sDialog.hourView,e=this._sDialog.needle,i="mddtp-hour__selected",a="mddtp-picker__cell--selected",s="mddtp-picker__cell--rotate-",d="mddtp-picker__cell",l=document.createDocumentFragment(),o=void 0;if(this._mode){var n=this._inner24===!0?10:5;o=parseInt(this._sDialog.tDate.format("H"),10);for(var c=1,r=n;c<=24;c++,r+=n){var _=document.createElement("div"),u=document.createElement("span");_.classList.add(d),u.textContent=24===c?"00":c;var h=r;this._inner24===!0&&c>12&&(h-=120,_.classList.add("mddtp-picker__cell--rotate24")),_.classList.add(s+h),o===c&&(_.id=i,_.classList.add(a),e.classList.add(s+h)),24===c&&0===o&&(_.id=i,_.classList.add(a),e.classList.add(s+h)),_.appendChild(u),l.appendChild(_)}}else{o=parseInt(this._sDialog.tDate.format("h"),10);for(var m=1,p=10;m<=12;m++,p+=10){var g=document.createElement("div"),v=document.createElement("span");g.classList.add(d),v.textContent=m,g.classList.add(s+p),o===m&&(g.id=i,g.classList.add(a),e.classList.add(s+p)),g.appendChild(v),l.appendChild(g)}}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=document.createDocumentFragment(),a=5,s=10;a<=60;a+=5,s+=10){var d=document.createElement("div"),l=document.createElement("span");d.classList.add("mddtp-picker__cell"),l.textContent=60===a?this._numWithZero(0):this._numWithZero(a),0===e&&(e=60),d.classList.add("mddtp-picker__cell--rotate-"+s),(e===a||e-1===a||e+1===a||1===e&&60===a)&&(d.id="mddtp-minute__selected",d.classList.add("mddtp-picker__cell--selected")),d.appendChild(l),i.appendChild(d)}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(i)}},{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),this._setButtonText()}},{key:"_initViewHolder",value:function(){var t=this._sDialog.tDate,e=this._sDialog.current,i=this._sDialog.previous,a=this._sDialog.next,s=this._past,l=this._future;t.isBefore(s,"month")&&(t=s.clone()),t.isAfter(l,"month")&&(t=l.clone()),this._sDialog.tDate=t,this._initMonth(e,t),this._initMonth(a,(0,d.default)(this._getMonth(t,1))),this._initMonth(i,(0,d.default)(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(),l=a[3],o=d.default.weekdays(!0).indexOf(d.default.weekdays(!1,(0,d.default)(e).date(1).day())),n=-1,c=-1,r=parseInt((0,d.default)(e).endOf("month").format("D"),10)+o-1,_=o,u="mddtp-picker__cell",h=r;(0,d.default)().isSame(e,"month")&&(n=parseInt((0,d.default)().format("D"),10),n+=o-1),this._past.isSame(e,"month")&&(_=parseInt(this._past.format("D"),10),_+=o-1),this._future.isSame(e,"month")&&(h=parseInt(this._future.format("D"),10),h+=o-1),this._sDialog.sDate.isSame(e,"month")&&(c=parseInt((0,d.default)(e).format("D"),10),c+=o-1);for(var m=0;m<42;m++){var p=document.createElement("span"),g=m-o+1;m>=o&&m<=r&&(m>h||m<_?p.classList.add(u+"--disabled"):p.classList.add(u),this._fillText(p,g)),n===m&&p.classList.add(u+"--today"),c===m&&(p.classList.add(u+"--selected"),p.id="mddtp-date__selected"),s.appendChild(p)}for(;l.lastChild;)l.removeChild(l.lastChild);l.appendChild(s),this._addCellClickEvent(l)}},{key:"_initYear",value:function(){for(var t,e=this._sDialog.years,i=this._sDialog.tDate.year(),a=document.createDocumentFragment(),s=this._past.year(),d=this._future.year(),l=s;l<=d;l++)t=document.createElement("li"),t.textContent=l,l===i&&(t.id="mddtp-date__currentYear",t.classList.add("mddtp-picker__li--current")),a.appendChild(t);for(;e.lastChild;)e.removeChild(e.lastChild);e.appendChild(a),this._changeYear(e)}},{key:"_pointNeedle",value:function(e){var i=60,a=void 0,s=this._sDialog.circle,d=this._sDialog.fakeNeedle,l=this._sDialog.circularHolder,o=e._sDialog.needle;o.className="",o.classList.add("mddtp-picker__selection"),t.dialog.view?e._mode?(i=24,0===(a=parseInt(e._sDialog.sDate.format("H"),10))&&(a=24)):(i=12,a=e._sDialog.sDate.format("h")):(a=e._sDialog.sDate.format("m"),e._autoClose!==!0&&setTimeout(function(){var t=l.getBoundingClientRect(),e=s.getBoundingClientRect();d.setAttribute("style","left:"+(e.left-t.left)+"px;top:"+(e.top-t.top)+"px")},300));var n=e._calcRotation(i,parseInt(a,10));n&&o.classList.add(n)}},{key:"_switchToView",value:function(t){var e=this;"date"==this._type?t.onclick=function(){e._switchToDateView(t,e)}:(this._inner24===!0&&e._mode&&(parseInt(e._sDialog.sDate.format("H"),10)>12?e._sDialog.needle.classList.add("mddtp-picker__cell--rotate24"):e._sDialog.needle.classList.remove("mddtp-picker__cell--rotate24")),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__circularView--hidden";i.classList.toggle(l),a.classList.toggle(l),s.classList.toggle("mddtp-picker__color--active"),d.classList.toggle("mddtp-picker__color--active"),t.dialog.view=!t.dialog.view,e._pointNeedle(e)}},{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&&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?parseInt(e.target.textContent,10):"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._pointNeedle(t),setTimeout(function(){t._switchToTimeView(t)},700))},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._pointNeedle(t),t._autoClose===!0&&t._sDialog.ok.onclick())}}},{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=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,c=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(c,a.format("MMM D")),e._autoClose===!0&&e._sDialog.ok.onclick()}}}},{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,d){var l=!1,o=e._sDialog.next,n=e._sDialog.current,c=e._sDialog.previous;i.setAttribute("disabled",""),a.setAttribute("disabled",""),n.classList.add(t),c.classList.add(t),o.classList.add(t);var r=d.cloneNode(!0),_=void 0;d===o?(_=c,n.parentNode.appendChild(r),o.id=n.id,n.id=c.id,c=n,n=o,o=r):(l=!0,_=o,c.id=n.id,n.id=o.id,o=n,n=c),setTimeout(function(){d===c&&(n.parentNode.insertBefore(r,n),c=r),e._sDialog.next=o,e._sDialog.current=n,e._sDialog.previous=c,n.classList.add(s),o.classList.add(s),c.classList.add(s),n.classList.remove(t),o.classList.remove(t),c.classList.remove(t),_.parentNode.removeChild(_)},300),setTimeout(function(){n.classList.remove(s),o.classList.remove(s),c.classList.remove(s),e._sDialog.tDate=l?e._getMonth(e._sDialog.tDate,-1):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--pause";i.onclick=function(){t("mddtp-picker__view--right",e._sDialog.previous)},a.onclick=function(){t("mddtp-picker__view--left",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="AM";t._sDialog.sDate._locale.isPM(t._sDialog.sDate.format("A"))&&(s="PM"),"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="AM";t._sDialog.sDate._locale.isPM(t._sDialog.sDate.format("A"))&&(s="PM"),"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,o="mddtp-picker__selection--quick",n="mddtp-picker__cell--selected",c=s.getBoundingClientRect(),r=void 0,_=new l.default(a,{containment:!0});_.on("pointerDown",function(t){c=s.getBoundingClientRect()}),_.on("pointerMove",function(t){var i=t.clientX,a=t.clientY;void 0===i&&(void 0===t.pageX?t.touches&&t.touches.length>0?(i=t.touches[0].clientX,a=t.touches[0].clientY):console.error("coult not detect pageX, pageY"):(i=pageX-document.body.scrollLeft-document.documentElement.scrollLeft,a=pageY-document.body.scrollTop-document.documentElement.scrollTop));var s=i-c.left-c.width/2,d=a-c.top-c.height/2,l=Math.atan2(-d,s);e.className="",l<0&&(l+=2*Math.PI),l*=180/Math.PI,l=360-l,l>270&&(l-=360),r=parseInt(l/6);var n=Math.abs(6*r-l);Math.abs(6*(r+1)-l)0&&(m/=5,m--,l[m].id=_,l[m].classList.add(n)),d.textContent=t._numWithZero(r),t._sDialog.sDate.minutes(r)};_.on("pointerUp",u),_.on("dragEnd",u)}},{key:"_attachEventHandlers",value:function(){var t=this,e=this._sDialog.ok,i=this._sDialog.cancel,a=new CustomEvent("onCancel"),s=new CustomEvent("onOk");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:"_setButtonText",value:function(){this._sDialog.cancel.textContent=this._cancel,this._sDialog.ok.textContent=this._ok}},{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"),l=d.default.weekdaysMin(!0).reverse(),o=7;o--;){var n=document.createElement("span");n.textContent=l[o],a.appendChild(n)}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:"time",get:function(){return this._init},set:function(t){t&&(this._init=t)}},{key:"trigger",get:function(){return this._trigger},set:function(t){t&&(this._trigger=t)}}],[{key:"dialog",get:function(){return t._dialog},set:function(e){t.dialog=e}}]),t}();n._dialog={view:!0,state:!1},t.default=n}); \ No newline at end of file +!function(t,e){if("function"==typeof define&&define.amd)define(["exports","moment","draggabilly"],e);else if("undefined"!=typeof exports)e(exports,require("moment"),require("draggabilly"));else{var i={exports:{}};e(i.exports,t.moment,t.draggabilly),t.mdDateTimePicker=i.exports}}(this,function(t,e,i){"use strict";function a(t){return t&&t.__esModule?t:{default:t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var d=a(e),l=a(i),o=function(){function t(t,e){for(var i,a=0;a':I,x=e.nextHandle,T=void 0===x?'
':x;s(this,t),this._type=i,this._init=l,this._past=n,this._future=r,this._mode=h,this._orientation=u,this._trigger=g,this._ok=f,this._cancel=k,this._colon=y,this._autoClose=w,this._inner24=E,this._prevHandle=M,this._nextHandle=T,this._sDialog={},"undefined"==typeof document||document.getElementById("mddtp-picker__"+this._type)||this._buildDialog()}return o(t,[{key:"hide",value:function(){this._selectDialog(),this._hideDialog()}},{key:"show",value:function(){this._selectDialog(),"date"===this._type?this._initDateDialog(this._init):"time"===this._type&&this._initTimeDialog(this._init),this._showDialog()}},{key:"isOpen",value:function(){return this._selectDialog(),!!t.dialog.state}},{key:"isClosed",value:function(){return this._selectDialog(),!t.dialog.state}},{key:"toggle",value:function(){this._selectDialog(),t.dialog.state?this.hide():this.show()}},{key:"_selectDialog",value:function(){this._sDialog.picker=document.getElementById("mddtp-picker__"+[this._type]);for(var t=["viewHolder","years","header","cancel","ok","left","right","previous","current","next","subtitle","title","titleDay","titleMonth","AM","PM","needle","hourView","minuteView","hour","minute","fakeNeedle","circularHolder","circle","dotSpan"],e=t.length;e--;)this._sDialog[t[e]]=document.getElementById("mddtp-"+this._type+"__"+t[e]);this._sDialog.tDate=this._init.clone(),this._sDialog.sDate=this._init.clone()}},{key:"_showDialog",value:function(){var e=this;t.dialog.state=!0,this._sDialog.picker.classList.remove("mddtp-picker--inactive"),this._sDialog.picker.classList.add("zoomIn"),"PORTRAIT"===this._orientation&&this._sDialog.picker.classList.add("mddtp-picker--portrait"),setTimeout(function(){e._sDialog.picker.classList.remove("zoomIn")},300)}},{key:"_hideDialog",value:function(){var e=this,i=this._sDialog.years,a=e._sDialog.title,s=e._sDialog.subtitle,d=this._sDialog.viewHolder,l=this._sDialog.AM,o=this._sDialog.PM,n=this._sDialog.minute,c=this._sDialog.hour,r=this._sDialog.minuteView,_=this._sDialog.hourView,h=this._sDialog.picker,m=this._sDialog.needle,u=this._sDialog.dotSpan,p="mddtp-picker__color--active",g="mddtp-picker__circularView--hidden";t.dialog.state=!1,t.dialog.view=!0,this._sDialog.picker.classList.add("zoomOut"),"date"===this._type?(i.classList.remove("zoomIn","zoomOut"),i.classList.add("mddtp-picker__years--invisible"),a.classList.remove(p),s.classList.add(p),d.classList.remove("zoomOut")):(l.classList.remove(p),o.classList.remove(p),n.classList.remove(p),c.classList.add(p),r.classList.add(g),_.classList.remove(g),s.style.display="none",u.style.display="none",m.className="mddtp-picker__selection"),setTimeout(function(){e._sDialog.picker.classList.remove("mddtp-picker--portrait"),e._sDialog.picker.classList.remove("zoomOut"),e._sDialog.picker.classList.add("mddtp-picker--inactive");var t=h.cloneNode(!0);h.parentNode.replaceChild(t,h)},300)}},{key:"_buildDialog",value:function(){var t=this._type,e=document.createDocumentFragment(),i=document.createElement("div"),a=document.createElement("div"),s=document.createElement("div"),l=document.createElement("div"),o=document.createElement("button"),n=document.createElement("button");if(i.id="mddtp-picker__"+t,i.classList.add("mddtp-picker"),i.classList.add("mddtp-picker-"+t),i.classList.add("mddtp-picker--inactive"),i.classList.add("animated"),this._addId(a,"header"),this._addClass(a,"header"),i.appendChild(a),this._addClass(s,"body"),s.appendChild(l),i.appendChild(s),"date"===this._type){var c=document.createElement("div"),r=document.createElement("div"),_=document.createElement("div"),h=document.createElement("div"),m=document.createElement("div"),u=document.createElement("ul"),p=document.createElement("li"),g=document.createElement("li"),v=document.createElement("li"),f=document.createElement("button"),D=document.createElement("button"),k=document.createElement("ul");this._addId(c,"subtitle"),this._addClass(c,"subtitle"),this._addId(r,"title"),this._addClass(r,"title",["mddtp-picker__color--active"]),this._addId(_,"titleDay"),this._addId(h,"titleMonth"),r.appendChild(_),r.appendChild(h),a.appendChild(c),a.appendChild(r),this._addId(m,"viewHolder"),this._addClass(m,"viewHolder",["animated"]),this._addClass(u,"views"),this._addId(p,"previous"),p.classList.add("mddtp-picker__view"),this._addId(g,"current"),g.classList.add("mddtp-picker__view"),this._addId(v,"next"),v.classList.add("mddtp-picker__view"),this._addView(p),this._addView(g),this._addView(v),m.appendChild(u),u.appendChild(p),u.appendChild(g),u.appendChild(v),this._addId(f,"left"),f.classList.add("mddtp-button"),this._addClass(f,"left"),f.setAttribute("type","button"),f.innerHTML=this._prevHandle,this._addId(D,"right"),D.classList.add("mddtp-button"),this._addClass(D,"right"),D.setAttribute("type","button"),D.innerHTML=this._nextHandle,this._addId(k,"years"),this._addClass(k,"years",["mddtp-picker__years--invisible","animated"]),s.appendChild(m),s.appendChild(f),s.appendChild(D),s.appendChild(k)}else{var C=document.createElement("div"),y=document.createElement("span"),L=document.createElement("span"),w=document.createElement("span"),b=document.createElement("div"),E=document.createElement("div"),I=document.createElement("div"),M=document.createElement("div"),x=document.createElement("div"),T=document.createElement("span"),V=document.createElement("span"),N=document.createElement("span"),A=document.createElement("div"),H=document.createElement("div"),B=document.createElement("div");this._addId(C,"title"),this._addClass(C,"title"),this._addId(y,"hour"),y.classList.add("mddtp-picker__color--active"),L.textContent=":",this._addId(L,"dotSpan"),L.style.display="none",this._addId(w,"minute"),this._addId(b,"subtitle"),this._addClass(b,"subtitle"),b.style.display="none",this._addId(E,"AM"),E.textContent=(0,d.default)().localeData().meridiem(1,1,!0),this._addId(I,"PM"),I.textContent=(0,d.default)().localeData().meridiem(13,1,!0),C.appendChild(y),C.appendChild(L),C.appendChild(w),b.appendChild(E),b.appendChild(I),a.appendChild(C),a.appendChild(b),this._addId(M,"circularHolder"),this._addClass(M,"circularHolder"),this._addId(x,"needle"),x.classList.add("mddtp-picker__selection"),this._addClass(T,"dot"),this._addClass(V,"line"),this._addId(N,"circle"),this._addClass(N,"circle"),this._addId(A,"minuteView"),A.classList.add("mddtp-picker__circularView"),A.classList.add("mddtp-picker__circularView--hidden"),this._addId(H,"fakeNeedle"),H.classList.add("mddtp-picker__circle--fake"),this._addId(B,"hourView"),B.classList.add("mddtp-picker__circularView"),x.appendChild(T),x.appendChild(V),x.appendChild(N),M.appendChild(x),M.appendChild(A),M.appendChild(H),M.appendChild(B),s.appendChild(M)}l.classList.add("mddtp-picker__action"),!0===this._autoClose&&(l.style.display="none"),this._addId(o,"cancel"),o.classList.add("mddtp-button"),o.setAttribute("type","button"),this._addId(n,"ok"),n.classList.add("mddtp-button"),n.setAttribute("type","button"),l.appendChild(o),l.appendChild(n),s.appendChild(l),e.appendChild(i),document.getElementsByTagName("body").item(0).appendChild(e)}},{key:"_initTimeDialog",value:function(t){var e=this._sDialog.hour,i=this._sDialog.minute,a=this._sDialog.subtitle,s=this._sDialog.dotSpan;if(this._mode){var d=parseInt(t.format("H"),10);0===d&&(d="00"),this._fillText(e,d),this._colon&&(s.style.display="initial")}else this._fillText(e,t.format("h")),t._locale.isPM(t.format("A"))?this._sDialog.PM.classList.add("mddtp-picker__color--active"):this._sDialog.AM.classList.add("mddtp-picker__color--active"),a.style.display="initial",s.style.display="initial";this._fillText(i,t.format("mm")),this._initHour(),this._initMinute(),this._attachEventHandlers(),this._changeM(),this._dragDial(),this._switchToView(e),this._switchToView(i),this._addClockEvent(),this._setButtonText()}},{key:"_initHour",value:function(){var t=this._sDialog.hourView,e=this._sDialog.needle,i="mddtp-hour__selected",a="mddtp-picker__cell--selected",s="mddtp-picker__cell--rotate-",d="mddtp-picker__cell",l=document.createDocumentFragment(),o=void 0;if(this._mode){var n=!0===this._inner24?10:5;o=parseInt(this._sDialog.tDate.format("H"),10);for(var c=1,r=n;c<=24;c++,r+=n){var _=document.createElement("div"),h=document.createElement("span");_.classList.add(d),h.textContent=24===c?"00":c;var m=r;!0===this._inner24&&c>12&&(m-=120,_.classList.add("mddtp-picker__cell--rotate24")),_.classList.add(s+m),o===c&&(_.id=i,_.classList.add(a),e.classList.add(s+m)),24===c&&0===o&&(_.id=i,_.classList.add(a),e.classList.add(s+m)),_.appendChild(h),l.appendChild(_)}}else{o=parseInt(this._sDialog.tDate.format("h"),10);for(var u=1,p=10;u<=12;u++,p+=10){var g=document.createElement("div"),v=document.createElement("span");g.classList.add(d),v.textContent=u,g.classList.add(s+p),o===u&&(g.id=i,g.classList.add(a),e.classList.add(s+p)),g.appendChild(v),l.appendChild(g)}}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=document.createDocumentFragment(),a=5,s=10;a<=60;a+=5,s+=10){var d=document.createElement("div"),l=document.createElement("span");d.classList.add("mddtp-picker__cell"),l.textContent=60===a?this._numWithZero(0):this._numWithZero(a),0===e&&(e=60),d.classList.add("mddtp-picker__cell--rotate-"+s),(e===a||e-1===a||e+1===a||1===e&&60===a)&&(d.id="mddtp-minute__selected",d.classList.add("mddtp-picker__cell--selected")),d.appendChild(l),i.appendChild(d)}for(;t.lastChild;)t.removeChild(t.lastChild);t.appendChild(i)}},{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),this._setButtonText()}},{key:"_initViewHolder",value:function(){var t=this._sDialog.tDate,e=this._sDialog.current,i=this._sDialog.previous,a=this._sDialog.next,s=this._past,l=this._future;t.isBefore(s,"month")&&(t=s.clone()),t.isAfter(l,"month")&&(t=l.clone()),this._sDialog.tDate=t,this._initMonth(e,t),this._initMonth(a,(0,d.default)(this._getMonth(t,1))),this._initMonth(i,(0,d.default)(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(),l=a[3],o=d.default.weekdays(!0).indexOf(d.default.weekdays(!1,(0,d.default)(e).date(1).day())),n=-1,c=-1,r=parseInt((0,d.default)(e).endOf("month").format("D"),10)+o-1,_=o,h="mddtp-picker__cell",m=r;(0,d.default)().isSame(e,"month")&&(n=parseInt((0,d.default)().format("D"),10),n+=o-1),this._past.isSame(e,"month")&&(_=parseInt(this._past.format("D"),10),_+=o-1),this._future.isSame(e,"month")&&(m=parseInt(this._future.format("D"),10),m+=o-1),this._sDialog.sDate.isSame(e,"month")&&(c=parseInt((0,d.default)(e).format("D"),10),c+=o-1);for(var u=0;u<42;u++){var p=document.createElement("span"),g=u-o+1;u>=o&&u<=r&&(u>m||u<_?p.classList.add(h+"--disabled"):p.classList.add(h),this._fillText(p,g)),n===u&&p.classList.add(h+"--today"),c===u&&(p.classList.add(h+"--selected"),p.id="mddtp-date__selected"),s.appendChild(p)}for(;l.lastChild;)l.removeChild(l.lastChild);l.appendChild(s),this._addCellClickEvent(l)}},{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;d<=s;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:"_pointNeedle",value:function(e){var i=60,a=void 0,s=this._sDialog.circle,d=this._sDialog.fakeNeedle,l=this._sDialog.circularHolder,o=e._sDialog.needle;o.className="",o.classList.add("mddtp-picker__selection"),t.dialog.view?e._mode?(i=24,0===(a=parseInt(e._sDialog.sDate.format("H"),10))&&(a=24)):(i=12,a=e._sDialog.sDate.format("h")):(a=e._sDialog.sDate.format("m"),!0!==e._autoClose&&setTimeout(function(){var t=l.getBoundingClientRect(),e=s.getBoundingClientRect();d.style.left="left:"+(e.left-t.left)+"px",d.style.top="top:"+(e.top-t.top)+"px"},300));var n=parseInt(a,10),c=e._calcRotation(i,n);c&&(o.classList.add(c),!0===this._inner24&&24===i&&n>12&&o.classList.add("mddtp-picker__cell--rotate24"))}},{key:"_switchToView",value:function(t){var e=this;"date"===this._type?t.onclick=function(){e._switchToDateView(t,e)}:(!0===this._inner24&&e._mode&&(parseInt(e._sDialog.sDate.format("H"),10)>12?e._sDialog.needle.classList.add("mddtp-picker__cell--rotate24"):e._sDialog.needle.classList.remove("mddtp-picker__cell--rotate24")),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__circularView--hidden";i.classList.toggle(l),a.classList.toggle(l),s.classList.toggle("mddtp-picker__color--active"),d.classList.toggle("mddtp-picker__color--active"),t.dialog.view=!t.dialog.view,e._pointNeedle(e)}},{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&&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?parseInt(e.target.textContent,10):"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._pointNeedle(t),setTimeout(function(){t._switchToTimeView(t)},700))},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._pointNeedle(t),!0===t._autoClose&&t._sDialog.ok.onclick())}}},{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=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,c=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(c,a.format("MMM D")),!0===e._autoClose&&e._sDialog.ok.onclick()}}}},{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,d){var l=!1,o=e._sDialog.next,n=e._sDialog.current,c=e._sDialog.previous;i.setAttribute("disabled",""),a.setAttribute("disabled",""),n.classList.add(t),c.classList.add(t),o.classList.add(t);var r=d.cloneNode(!0),_=void 0;d===o?(_=c,n.parentNode.appendChild(r),o.id=n.id,n.id=c.id,c=n,n=o,o=r):(l=!0,_=o,c.id=n.id,n.id=o.id,o=n,n=c),setTimeout(function(){d===c&&(n.parentNode.insertBefore(r,n),c=r),e._sDialog.next=o,e._sDialog.current=n,e._sDialog.previous=c,n.classList.add(s),o.classList.add(s),c.classList.add(s),n.classList.remove(t),o.classList.remove(t),c.classList.remove(t),_.parentNode.removeChild(_)},300),setTimeout(function(){n.classList.remove(s),o.classList.remove(s),c.classList.remove(s),e._sDialog.tDate=l?e._getMonth(e._sDialog.tDate,-1):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--pause";i.onclick=function(){t("mddtp-picker__view--right",e._sDialog.previous)},a.onclick=function(){t("mddtp-picker__view--left",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(){var a="AM";t._sDialog.sDate._locale.isPM(t._sDialog.sDate.format("A"))&&(a="PM"),"PM"===a&&(t._sDialog.sDate.subtract(12,"h"),e.classList.toggle("mddtp-picker__color--active"),i.classList.toggle("mddtp-picker__color--active"))},i.onclick=function(){var a="AM";t._sDialog.sDate._locale.isPM(t._sDialog.sDate.format("A"))&&(a="PM"),"AM"===a&&(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,o="mddtp-picker__selection--quick",n="mddtp-picker__cell--selected",c=s.getBoundingClientRect(),r=void 0,_=new l.default(a,{containment:!0});_.on("pointerDown",function(){c=s.getBoundingClientRect()}),_.on("pointerMove",function(i){var a=i.clientX,s=i.clientY;if(void 0===a)if(void 0===i.pageX){if(!(i.touches&&i.touches.length>0))throw new Error("coult not detect pageX, pageY");a=i.touches[0].clientX,s=i.touches[0].clientY}else a=i.pageX-document.body.scrollLeft-document.documentElement.scrollLeft,s=i.pageY-document.body.scrollTop-document.documentElement.scrollTop;var l=a-c.left-c.width/2,n=s-c.top-c.height/2,_=Math.atan2(-n,l);e.className="",_<0&&(_+=2*Math.PI),_*=180/Math.PI,_=360-_,_>270&&(_-=360),r=parseInt(_/6);var h=Math.abs(6*r-_);Math.abs(6*(r+1)-_)0&&(m/=5,m--,s[m].id=l,s[m].classList.add(n)),d.textContent=t._numWithZero(r),t._sDialog.sDate.minutes(r)};_.on("pointerUp",h),_.on("dragEnd",h)}},{key:"_attachEventHandlers",value:function(){var t=this,e=this._sDialog.ok,i=this._sDialog.cancel,a=new CustomEvent("onCancel"),s=new CustomEvent("onOk");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:"_setButtonText",value:function(){this._sDialog.cancel.textContent=this._cancel,this._sDialog.ok.textContent=this._ok}},{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"),l=d.default.weekdaysMin(!0).reverse(),o=7;o--;){var n=document.createElement("span");n.textContent=l[o],a.appendChild(n)}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 12===t?e*=10:24===t?!0===this._inner24?(e>12&&(e-=12),e*=10):e*=5:e*=2,60===t&&0===e&&(e=120),"mddtp-picker__cell--rotate-"+e}},{key:"time",get:function(){return this._init},set:function(t){t&&(this._init=t)}},{key:"trigger",get:function(){return this._trigger},set:function(t){t&&(this._trigger=t)}}],[{key:"dialog",get:function(){return t._dialog},set:function(e){t._dialog=e}}]),t}();n._dialog={view:!0,state:!1},t.default=n}); \ No newline at end of file diff --git a/dist/js/scroll-into-view-if-needed.js b/dist/js/scroll-into-view-if-needed.js index 92f8f95..95170fa 100644 --- a/dist/js/scroll-into-view-if-needed.js +++ b/dist/js/scroll-into-view-if-needed.js @@ -27,6 +27,7 @@ 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; } diff --git a/package.json b/package.json index 946b68a..ccd1a45 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ "test": "echo \"Error: no test specified\" && exit 1", "gulp": "gulp", "cs": "npm run cs:js && npm run cs:scss", - "cs:js" : "eslint -c .eslintrc --fix src", - "cs:scss" : "scss-lint" + "cs:js": "eslint -c .eslintrc --fix src", + "cs:scss": "scss-lint" }, "contributors": [ "Seth Westphal (https://github.com/westy92)", diff --git a/src/js/mdDateTimePicker.js b/src/js/mdDateTimePicker.js index 0c37d78..91e33ef 100644 --- a/src/js/mdDateTimePicker.js +++ b/src/js/mdDateTimePicker.js @@ -284,8 +284,8 @@ class mdDateTimePicker { hour.classList.add(active) minuteView.classList.add(hidden) hourView.classList.remove(hidden) - subtitle.setAttribute('style', 'display: none') - dotSpan.setAttribute('style', 'display: none') + subtitle.style.display = 'none' + dotSpan.style.display = 'none' needle.className = selection } setTimeout(() => { @@ -424,11 +424,11 @@ class mdDateTimePicker { hour.classList.add('mddtp-picker__color--active') span.textContent = ':' this._addId(span, 'dotSpan') - span.setAttribute('style', 'display: none') + span.style.display = 'none' this._addId(minute, 'minute') this._addId(subtitle, 'subtitle') this._addClass(subtitle, 'subtitle') - subtitle.setAttribute('style', 'display: none') + subtitle.style.display = 'none' this._addId(AM, 'AM') // AM.textContent = 'AM' // Change to 'AM' to Locale Meridiem @@ -515,7 +515,7 @@ class mdDateTimePicker { this._fillText(hour, text) // add the configurable colon in this mode issue #56 if (this._colon) { - dotSpan.removeAttribute('style') + dotSpan.style.display = 'initial' } } else { this._fillText(hour, m.format('h')) @@ -526,8 +526,8 @@ class mdDateTimePicker { } else { this._sDialog.AM.classList.add('mddtp-picker__color--active') } - subtitle.removeAttribute('style') - dotSpan.removeAttribute('style') + subtitle.style.display = 'initial' + dotSpan.style.display = 'initial' } this._fillText(minute, m.format('mm')) this._initHour() @@ -808,7 +808,8 @@ class mdDateTimePicker { setTimeout(() => { const hOffset = circularHolder.getBoundingClientRect() const cOffset = circle.getBoundingClientRect() - fakeNeedle.setAttribute('style', `left:${cOffset.left - hOffset.left}px;top:${cOffset.top - hOffset.top}px`) + fakeNeedle.style.left = `left:${cOffset.left - hOffset.left}px` + fakeNeedle.style.top = `top:${cOffset.top - hOffset.top}px` }, 300) } } else if (me._mode) { @@ -1267,7 +1268,7 @@ class mdDateTimePicker { needle.classList.add(selection) needle.classList.add(quick) needle.classList.add(rotate + (divides * 2)) - minute.textContent = me._numWithZero(divides); + minute.textContent = me._numWithZero(divides) }) /** * netTrek @@ -1278,7 +1279,8 @@ class mdDateTimePicker { const sMinute = 'mddtp-minute__selected' const selectedMinute = document.getElementById(sMinute) const cOffset = circle.getBoundingClientRect() - fakeNeedle.setAttribute('style', `left:${cOffset.left - hOffset.left}px;top:${cOffset.top - hOffset.top}px`) + fakeNeedle.style.left = `left:${cOffset.left - hOffset.left}px` + fakeNeedle.style.top = `top:${cOffset.top - hOffset.top}px` needle.classList.remove(quick) let select = divides if (select === 1) {