assets/javascripts/materialize/timepicker.js in materialize-sass-1.0.0.alpha2 vs assets/javascripts/materialize/timepicker.js in materialize-sass-1.0.0.alpha3

- old
+ new

@@ -1,618 +1,618 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; 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 _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + (function ($) { - 'use strict'; + 'use strict'; - var _defaults = { - dialRadius: 135, - outerRadius: 105, - innerRadius: 70, - tickRadius: 20, - duration: 350, - container: null, - defaultTime: 'now', // default time, 'now' or '13:14' e.g. - fromnow: 0, // Millisecond offset from the defaultTime - doneText: 'Ok', // done button text - clearText: 'Clear', - cancelText: 'Cancel', - autoClose: false, // auto close when minute is selected - twelveHour: true, // change to 12 hour AM/PM clock from 24 hour - vibrate: true // vibrate the device when dragging clock hand - }; + var _defaults = { + dialRadius: 135, + outerRadius: 105, + innerRadius: 70, + tickRadius: 20, + duration: 350, + container: null, + defaultTime: 'now', // default time, 'now' or '13:14' e.g. + fromnow: 0, // Millisecond offset from the defaultTime + doneText: 'Ok', // done button text + clearText: 'Clear', + cancelText: 'Cancel', + autoClose: false, // auto close when minute is selected + twelveHour: true, // change to 12 hour AM/PM clock from 24 hour + vibrate: true // vibrate the device when dragging clock hand + }; - /** + /** * @class * */ - var Timepicker = function () { - function Timepicker(el, options) { - _classCallCheck(this, Timepicker); + var Timepicker = function (_Component) { + _inherits(Timepicker, _Component); - // If exists, destroy and reinitialize - if (!!el.M_Timepicker) { - el.M_Timepicker.destroy(); - } + function Timepicker(el, options) { + _classCallCheck(this, Timepicker); - this.el = el; - this.$el = $(el); - this.el.M_Timepicker = this; + var _this = _possibleConstructorReturn(this, (Timepicker.__proto__ || Object.getPrototypeOf(Timepicker)).call(this, Timepicker, el, options)); - this.options = $.extend({}, Timepicker.defaults, options); + _this.el.M_Timepicker = _this; - this.id = M.guid(); - this._insertHTMLIntoDOM(); - this._setupModal(); - this._setupVariables(); - this._setupEventHandlers(); + _this.options = $.extend({}, Timepicker.defaults, options); - this._clockSetup(); - this._pickerSetup(); - } + _this.id = M.guid(); + _this._insertHTMLIntoDOM(); + _this._setupModal(); + _this._setupVariables(); + _this._setupEventHandlers(); - _createClass(Timepicker, [{ - key: 'destroy', + _this._clockSetup(); + _this._pickerSetup(); + return _this; + } + _createClass(Timepicker, [{ + key: 'destroy', - /** + + /** * Teardown component */ - value: function destroy() { - this._removeEventHandlers(); - this.modal.destroy(); - $(this.modalEl).remove(); - this.el.M_Timepicker = undefined; - } + value: function destroy() { + this._removeEventHandlers(); + this.modal.destroy(); + $(this.modalEl).remove(); + this.el.M_Timepicker = undefined; + } - /** + /** * Setup Event Handlers */ - }, { - key: '_setupEventHandlers', - value: function _setupEventHandlers() { - this._handleInputKeydownBound = this._handleInputKeydown.bind(this); - this._handleInputClickBound = this._handleInputClick.bind(this); - this._handleClockClickStartBound = this._handleClockClickStart.bind(this); - this._handleDocumentClickMoveBound = this._handleDocumentClickMove.bind(this); - this._handleDocumentClickEndBound = this._handleDocumentClickEnd.bind(this); + }, { + key: '_setupEventHandlers', + value: function _setupEventHandlers() { + this._handleInputKeydownBound = this._handleInputKeydown.bind(this); + this._handleInputClickBound = this._handleInputClick.bind(this); + this._handleClockClickStartBound = this._handleClockClickStart.bind(this); + this._handleDocumentClickMoveBound = this._handleDocumentClickMove.bind(this); + this._handleDocumentClickEndBound = this._handleDocumentClickEnd.bind(this); - this.el.addEventListener('click', this._handleInputClickBound); - this.el.addEventListener('keydown', this._handleInputKeydownBound); - this.plate.addEventListener('mousedown', this._handleClockClickStartBound); - this.plate.addEventListener('touchstart', this._handleClockClickStartBound); + this.el.addEventListener('click', this._handleInputClickBound); + this.el.addEventListener('keydown', this._handleInputKeydownBound); + this.plate.addEventListener('mousedown', this._handleClockClickStartBound); + this.plate.addEventListener('touchstart', this._handleClockClickStartBound); - $(this.spanHours).on('click', this.showView.bind(this, 'hours')); - $(this.spanMinutes).on('click', this.showView.bind(this, 'minutes')); - } - }, { - key: '_removeEventHandlers', - value: function _removeEventHandlers() { - this.el.removeEventListener('click', this._handleInputClickBound); - this.el.removeEventListener('keydown', this._handleInputKeydownBound); - } - }, { - key: '_handleInputClick', - value: function _handleInputClick() { - this.open(); - } - }, { - key: '_handleInputKeydown', - value: function _handleInputKeydown(e) { - if (e.which === M.keys.ENTER) { - e.preventDefault(); - this.open(); - } - } - }, { - key: '_handleClockClickStart', - value: function _handleClockClickStart(e) { - e.preventDefault(); - var clockPlateBR = this.plate.getBoundingClientRect(); - var offset = { x: clockPlateBR.left, y: clockPlateBR.top }; + $(this.spanHours).on('click', this.showView.bind(this, 'hours')); + $(this.spanMinutes).on('click', this.showView.bind(this, 'minutes')); + } + }, { + key: '_removeEventHandlers', + value: function _removeEventHandlers() { + this.el.removeEventListener('click', this._handleInputClickBound); + this.el.removeEventListener('keydown', this._handleInputKeydownBound); + } + }, { + key: '_handleInputClick', + value: function _handleInputClick() { + this.open(); + } + }, { + key: '_handleInputKeydown', + value: function _handleInputKeydown(e) { + if (e.which === M.keys.ENTER) { + e.preventDefault(); + this.open(); + } + } + }, { + key: '_handleClockClickStart', + value: function _handleClockClickStart(e) { + e.preventDefault(); + var clockPlateBR = this.plate.getBoundingClientRect(); + var offset = { x: clockPlateBR.left, y: clockPlateBR.top }; - this.x0 = offset.x + this.options.dialRadius; - this.y0 = offset.y + this.options.dialRadius; - this.moved = false; - var clickPos = Timepicker._Pos(e); - this.dx = clickPos.x - this.x0; - this.dy = clickPos.y - this.y0; + this.x0 = offset.x + this.options.dialRadius; + this.y0 = offset.y + this.options.dialRadius; + this.moved = false; + var clickPos = Timepicker._Pos(e); + this.dx = clickPos.x - this.x0; + this.dy = clickPos.y - this.y0; - // Set clock hands - this.setHand(this.dx, this.dy, false); + // Set clock hands + this.setHand(this.dx, this.dy, false); - // Mousemove on document - document.addEventListener('mousemove', this._handleDocumentClickMoveBound); - document.addEventListener('touchmove', this._handleDocumentClickMoveBound); + // Mousemove on document + document.addEventListener('mousemove', this._handleDocumentClickMoveBound); + document.addEventListener('touchmove', this._handleDocumentClickMoveBound); - // Mouseup on document - document.addEventListener('mouseup', this._handleDocumentClickEndBound); - document.addEventListener('touchend', this._handleDocumentClickEndBound); - } - }, { - key: '_handleDocumentClickMove', - value: function _handleDocumentClickMove(e) { - e.preventDefault(); - var clickPos = Timepicker._Pos(e); - var x = clickPos.x - this.x0; - var y = clickPos.y - this.y0; - this.moved = true; - this.setHand(x, y, false, true); - } - }, { - key: '_handleDocumentClickEnd', - value: function _handleDocumentClickEnd(e) { - e.preventDefault(); - document.removeEventListener('mouseup', this._handleDocumentClickEndBound); - document.removeEventListener('touchend', this._handleDocumentClickEndBound); - var clickPos = Timepicker._Pos(e); - var x = clickPos.x - this.x0; - var y = clickPos.y - this.y0; - if (this.moved && x === this.dx && y === this.dy) { - this.setHand(x, y); - } + // Mouseup on document + document.addEventListener('mouseup', this._handleDocumentClickEndBound); + document.addEventListener('touchend', this._handleDocumentClickEndBound); + } + }, { + key: '_handleDocumentClickMove', + value: function _handleDocumentClickMove(e) { + e.preventDefault(); + var clickPos = Timepicker._Pos(e); + var x = clickPos.x - this.x0; + var y = clickPos.y - this.y0; + this.moved = true; + this.setHand(x, y, false, true); + } + }, { + key: '_handleDocumentClickEnd', + value: function _handleDocumentClickEnd(e) { + e.preventDefault(); + document.removeEventListener('mouseup', this._handleDocumentClickEndBound); + document.removeEventListener('touchend', this._handleDocumentClickEndBound); + var clickPos = Timepicker._Pos(e); + var x = clickPos.x - this.x0; + var y = clickPos.y - this.y0; + if (this.moved && x === this.dx && y === this.dy) { + this.setHand(x, y); + } - if (this.currentView === 'hours') { - this.showView('minutes', this.options.duration / 2); - } else if (this.options.autoClose) { - this.minutesView.addClass('timepicker-dial-out'); - setTimeout(function () { - this.done(); - }, this.options.duration / 2); - } + if (this.currentView === 'hours') { + this.showView('minutes', this.options.duration / 2); + } else if (this.options.autoClose) { + this.minutesView.addClass('timepicker-dial-out'); + setTimeout(function () { + this.done(); + }, this.options.duration / 2); + } - // Unbind mousemove event - document.removeEventListener('mousemove', this._handleDocumentClickMoveBound); - document.removeEventListener('touchmove', this._handleDocumentClickMoveBound); - } - }, { - key: '_insertHTMLIntoDOM', - value: function _insertHTMLIntoDOM() { - this.$modalEl = $(Timepicker._template); - this.modalEl = this.$modalEl[0]; - this.modalEl.id = 'modal-' + this.id; + // Unbind mousemove event + document.removeEventListener('mousemove', this._handleDocumentClickMoveBound); + document.removeEventListener('touchmove', this._handleDocumentClickMoveBound); + } + }, { + key: '_insertHTMLIntoDOM', + value: function _insertHTMLIntoDOM() { + this.$modalEl = $(Timepicker._template); + this.modalEl = this.$modalEl[0]; + this.modalEl.id = 'modal-' + this.id; - // Append popover to input by default - var containerEl = document.querySelector(this.options.container); - if (this.options.container && !!containerEl) { - this.$modalEl.appendTo(containerEl); - } else { - this.$modalEl.insertBefore(this.el); - } - } - }, { - key: '_setupModal', - value: function _setupModal() { - var _this = this; + // Append popover to input by default + var containerEl = document.querySelector(this.options.container); + if (this.options.container && !!containerEl) { + this.$modalEl.appendTo(containerEl); + } else { + this.$modalEl.insertBefore(this.el); + } + } + }, { + key: '_setupModal', + value: function _setupModal() { + var _this2 = this; - this.modal = new M.Modal(this.modalEl, { - complete: function () { - _this.isOpen = false; - } - }); - } - }, { - key: '_setupVariables', - value: function _setupVariables() { - this.currentView = 'hours'; - this.vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null; + this.modal = M.Modal.init(this.modalEl, { + onCloseEnd: function () { + _this2.isOpen = false; + } + }); + } + }, { + key: '_setupVariables', + value: function _setupVariables() { + this.currentView = 'hours'; + this.vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null; - this._canvas = this.modalEl.querySelector('.timepicker-canvas'); - this.plate = this.modalEl.querySelector('.timepicker-plate'); + this._canvas = this.modalEl.querySelector('.timepicker-canvas'); + this.plate = this.modalEl.querySelector('.timepicker-plate'); - this.hoursView = this.modalEl.querySelector('.timepicker-hours'); - this.minutesView = this.modalEl.querySelector('.timepicker-minutes'); - this.spanHours = this.modalEl.querySelector('.timepicker-span-hours'); - this.spanMinutes = this.modalEl.querySelector('.timepicker-span-minutes'); - this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm'); - this.footer = this.modalEl.querySelector('.timepicker-footer'); - this.amOrPm = 'PM'; - } - }, { - key: '_pickerSetup', - value: function _pickerSetup() { - $('<button class="btn-flat timepicker-clear waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.clearText + '</button>').appendTo(this.footer).on('click', this.clear.bind(this)); + this.hoursView = this.modalEl.querySelector('.timepicker-hours'); + this.minutesView = this.modalEl.querySelector('.timepicker-minutes'); + this.spanHours = this.modalEl.querySelector('.timepicker-span-hours'); + this.spanMinutes = this.modalEl.querySelector('.timepicker-span-minutes'); + this.spanAmPm = this.modalEl.querySelector('.timepicker-span-am-pm'); + this.footer = this.modalEl.querySelector('.timepicker-footer'); + this.amOrPm = 'PM'; + } + }, { + key: '_pickerSetup', + value: function _pickerSetup() { + $('<button class="btn-flat timepicker-clear waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.clearText + '</button>').appendTo(this.footer).on('click', this.clear.bind(this)); - var confirmationBtnsContainer = $('<div class="confirmation-btns"></div>'); - $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.cancelText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.close.bind(this)); - $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.doneText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.done.bind(this)); - confirmationBtnsContainer.appendTo(this.footer); - } - }, { - key: '_clockSetup', - value: function _clockSetup() { - if (this.options.twelveHour) { - this.$amBtn = $('<div class="am-btn">AM</div>'); - this.$pmBtn = $('<div class="pm-btn">PM</div>'); - this.$amBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm); - this.$pmBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm); - } + var confirmationBtnsContainer = $('<div class="confirmation-btns"></div>'); + $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.cancelText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.close.bind(this)); + $('<button class="btn-flat timepicker-close waves-effect" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.doneText + '</button>').appendTo(confirmationBtnsContainer).on('click', this.done.bind(this)); + confirmationBtnsContainer.appendTo(this.footer); + } + }, { + key: '_clockSetup', + value: function _clockSetup() { + if (this.options.twelveHour) { + this.$amBtn = $('<div class="am-btn">AM</div>'); + this.$pmBtn = $('<div class="pm-btn">PM</div>'); + this.$amBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm); + this.$pmBtn.on('click', this._handleAmPmClick.bind(this)).appendTo(this.spanAmPm); + } - this._buildHoursView(); - this._buildMinutesView(); - this._buildSVGClock(); - } - }, { - key: '_buildSVGClock', - value: function _buildSVGClock() { - // Draw clock hands and others - var dialRadius = this.options.dialRadius; - var tickRadius = this.options.tickRadius; - var diameter = dialRadius * 2; + this._buildHoursView(); + this._buildMinutesView(); + this._buildSVGClock(); + } + }, { + key: '_buildSVGClock', + value: function _buildSVGClock() { + // Draw clock hands and others + var dialRadius = this.options.dialRadius; + var tickRadius = this.options.tickRadius; + var diameter = dialRadius * 2; - var svg = Timepicker._createSVGEl('svg'); - svg.setAttribute('class', 'timepicker-svg'); - svg.setAttribute('width', diameter); - svg.setAttribute('height', diameter); - var g = Timepicker._createSVGEl('g'); - g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); - var bearing = Timepicker._createSVGEl('circle'); - bearing.setAttribute('class', 'timepicker-canvas-bearing'); - bearing.setAttribute('cx', 0); - bearing.setAttribute('cy', 0); - bearing.setAttribute('r', 4); - var hand = Timepicker._createSVGEl('line'); - hand.setAttribute('x1', 0); - hand.setAttribute('y1', 0); - var bg = Timepicker._createSVGEl('circle'); - bg.setAttribute('class', 'timepicker-canvas-bg'); - bg.setAttribute('r', tickRadius); - g.appendChild(hand); - g.appendChild(bg); - g.appendChild(bearing); - svg.appendChild(g); - this._canvas.appendChild(svg); + var svg = Timepicker._createSVGEl('svg'); + svg.setAttribute('class', 'timepicker-svg'); + svg.setAttribute('width', diameter); + svg.setAttribute('height', diameter); + var g = Timepicker._createSVGEl('g'); + g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')'); + var bearing = Timepicker._createSVGEl('circle'); + bearing.setAttribute('class', 'timepicker-canvas-bearing'); + bearing.setAttribute('cx', 0); + bearing.setAttribute('cy', 0); + bearing.setAttribute('r', 4); + var hand = Timepicker._createSVGEl('line'); + hand.setAttribute('x1', 0); + hand.setAttribute('y1', 0); + var bg = Timepicker._createSVGEl('circle'); + bg.setAttribute('class', 'timepicker-canvas-bg'); + bg.setAttribute('r', tickRadius); + g.appendChild(hand); + g.appendChild(bg); + g.appendChild(bearing); + svg.appendChild(g); + this._canvas.appendChild(svg); - this.hand = hand; - this.bg = bg; - this.bearing = bearing; - this.g = g; - } - }, { - key: '_buildHoursView', - value: function _buildHoursView() { - var $tick = $('<div class="timepicker-tick"></div>'); - // Hours view - if (this.options.twelveHour) { - for (var i = 1; i < 13; i += 1) { - var tick = $tick.clone(); - var radian = i / 6 * Math.PI; - var radius = this.options.outerRadius; - tick.css({ - left: this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px', - top: this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px' - }); - tick.html(i === 0 ? '00' : i); - this.hoursView.appendChild(tick[0]); - // tick.on(mousedownEvent, mousedown); - } - } else { - for (var _i = 0; _i < 24; _i += 1) { - var _tick = $tick.clone(); - var _radian = _i / 6 * Math.PI; - var inner = _i > 0 && _i < 13; - var _radius = inner ? this.options.innerRadius : this.options.outerRadius; - _tick.css({ - left: this.options.dialRadius + Math.sin(_radian) * _radius - this.options.tickRadius + 'px', - top: this.options.dialRadius - Math.cos(_radian) * _radius - this.options.tickRadius + 'px' - }); - _tick.html(_i === 0 ? '00' : _i); - this.hoursView.appendChild(_tick[0]); - // tick.on(mousedownEvent, mousedown); - } - } - } - }, { - key: '_buildMinutesView', - value: function _buildMinutesView() { - var $tick = $('<div class="timepicker-tick"></div>'); - // Minutes view - for (var i = 0; i < 60; i += 5) { - var tick = $tick.clone(); - var radian = i / 30 * Math.PI; - tick.css({ - left: this.options.dialRadius + Math.sin(radian) * this.options.outerRadius - this.options.tickRadius + 'px', - top: this.options.dialRadius - Math.cos(radian) * this.options.outerRadius - this.options.tickRadius + 'px' - }); - tick.html(Timepicker._addLeadingZero(i)); - this.minutesView.appendChild(tick[0]); - } - } - }, { - key: '_handleAmPmClick', - value: function _handleAmPmClick(e) { - var $btnClicked = $(e.target); - this.amOrPm = $btnClicked.hasClass('am-btn') ? 'AM' : 'PM'; - this._updateAmPmView(); - } - }, { - key: '_updateAmPmView', - value: function _updateAmPmView() { - if (this.options.twelveHour) { - this.$amBtn.toggleClass('text-primary', this.amOrPm === 'AM'); - this.$pmBtn.toggleClass('text-primary', this.amOrPm === 'PM'); - } - } - }, { - key: '_updateTimeFromInput', - value: function _updateTimeFromInput() { - // Get the time - var value = ((this.el.value || this.options.defaultTime || '') + '').split(':'); - if (this.options.twelveHour && !(typeof value[1] === 'undefined')) { - if (value[1].indexOf("AM") > 0) { - this.amOrPm = 'AM'; - } else { - this.amOrPm = 'PM'; - } - value[1] = value[1].replace("AM", "").replace("PM", ""); - } - if (value[0] === 'now') { - var now = new Date(+new Date() + this.options.fromnow); - value = [now.getHours(), now.getMinutes()]; - if (this.options.twelveHour) { - this.amOrPm = value[0] >= 12 && value[0] < 24 ? 'PM' : 'AM'; - } - } - this.hours = +value[0] || 0; - this.minutes = +value[1] || 0; - this.spanHours.innerHTML = this.hours; - this.spanMinutes.innerHTML = Timepicker._addLeadingZero(this.minutes); + this.hand = hand; + this.bg = bg; + this.bearing = bearing; + this.g = g; + } + }, { + key: '_buildHoursView', + value: function _buildHoursView() { + var $tick = $('<div class="timepicker-tick"></div>'); + // Hours view + if (this.options.twelveHour) { + for (var i = 1; i < 13; i += 1) { + var tick = $tick.clone(); + var radian = i / 6 * Math.PI; + var radius = this.options.outerRadius; + tick.css({ + left: this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px', + top: this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px' + }); + tick.html(i === 0 ? '00' : i); + this.hoursView.appendChild(tick[0]); + // tick.on(mousedownEvent, mousedown); + } + } else { + for (var _i = 0; _i < 24; _i += 1) { + var _tick = $tick.clone(); + var _radian = _i / 6 * Math.PI; + var inner = _i > 0 && _i < 13; + var _radius = inner ? this.options.innerRadius : this.options.outerRadius; + _tick.css({ + left: this.options.dialRadius + Math.sin(_radian) * _radius - this.options.tickRadius + 'px', + top: this.options.dialRadius - Math.cos(_radian) * _radius - this.options.tickRadius + 'px' + }); + _tick.html(_i === 0 ? '00' : _i); + this.hoursView.appendChild(_tick[0]); + // tick.on(mousedownEvent, mousedown); + } + } + } + }, { + key: '_buildMinutesView', + value: function _buildMinutesView() { + var $tick = $('<div class="timepicker-tick"></div>'); + // Minutes view + for (var i = 0; i < 60; i += 5) { + var tick = $tick.clone(); + var radian = i / 30 * Math.PI; + tick.css({ + left: this.options.dialRadius + Math.sin(radian) * this.options.outerRadius - this.options.tickRadius + 'px', + top: this.options.dialRadius - Math.cos(radian) * this.options.outerRadius - this.options.tickRadius + 'px' + }); + tick.html(Timepicker._addLeadingZero(i)); + this.minutesView.appendChild(tick[0]); + } + } + }, { + key: '_handleAmPmClick', + value: function _handleAmPmClick(e) { + var $btnClicked = $(e.target); + this.amOrPm = $btnClicked.hasClass('am-btn') ? 'AM' : 'PM'; + this._updateAmPmView(); + } + }, { + key: '_updateAmPmView', + value: function _updateAmPmView() { + if (this.options.twelveHour) { + this.$amBtn.toggleClass('text-primary', this.amOrPm === 'AM'); + this.$pmBtn.toggleClass('text-primary', this.amOrPm === 'PM'); + } + } + }, { + key: '_updateTimeFromInput', + value: function _updateTimeFromInput() { + // Get the time + var value = ((this.el.value || this.options.defaultTime || '') + '').split(':'); + if (this.options.twelveHour && !(typeof value[1] === 'undefined')) { + if (value[1].toUpperCase().indexOf("AM") > 0) { + this.amOrPm = 'AM'; + } else { + this.amOrPm = 'PM'; + } + value[1] = value[1].replace("AM", "").replace("PM", ""); + } + if (value[0] === 'now') { + var now = new Date(+new Date() + this.options.fromnow); + value = [now.getHours(), now.getMinutes()]; + if (this.options.twelveHour) { + this.amOrPm = value[0] >= 12 && value[0] < 24 ? 'PM' : 'AM'; + } + } + this.hours = +value[0] || 0; + this.minutes = +value[1] || 0; + this.spanHours.innerHTML = this.hours; + this.spanMinutes.innerHTML = Timepicker._addLeadingZero(this.minutes); - this._updateAmPmView(); - } - }, { - key: 'showView', - value: function showView(view, delay) { - if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") { - // raiseCallback(this.options.beforeHourSelect); - } - var isHours = view === 'hours', - nextView = isHours ? this.hoursView : this.minutesView, - hideView = isHours ? this.minutesView : this.hoursView; - this.currentView = view; + this._updateAmPmView(); + } + }, { + key: 'showView', + value: function showView(view, delay) { + if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") { + // raiseCallback(this.options.beforeHourSelect); + } + var isHours = view === 'hours', + nextView = isHours ? this.hoursView : this.minutesView, + hideView = isHours ? this.minutesView : this.hoursView; + this.currentView = view; - $(this.spanHours).toggleClass('text-primary', isHours); - $(this.spanMinutes).toggleClass('text-primary', !isHours); + $(this.spanHours).toggleClass('text-primary', isHours); + $(this.spanMinutes).toggleClass('text-primary', !isHours); - // Transition view - hideView.classList.add('timepicker-dial-out'); - $(nextView).css('visibility', 'visible').removeClass('timepicker-dial-out'); + // Transition view + hideView.classList.add('timepicker-dial-out'); + $(nextView).css('visibility', 'visible').removeClass('timepicker-dial-out'); - // Reset clock hand - this.resetClock(delay); + // Reset clock hand + this.resetClock(delay); - // After transitions ended - clearTimeout(this.toggleViewTimer); - this.toggleViewTimer = setTimeout(function () { - $(hideView).css('visibility', 'hidden'); - }, this.options.duration); - } - }, { - key: 'resetClock', - value: function resetClock(delay) { - var view = this.currentView, - value = this[view], - isHours = view === 'hours', - unit = Math.PI / (isHours ? 6 : 30), - radian = value * unit, - radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, - x = Math.sin(radian) * radius, - y = -Math.cos(radian) * radius, - self = this; + // After transitions ended + clearTimeout(this.toggleViewTimer); + this.toggleViewTimer = setTimeout(function () { + $(hideView).css('visibility', 'hidden'); + }, this.options.duration); + } + }, { + key: 'resetClock', + value: function resetClock(delay) { + var view = this.currentView, + value = this[view], + isHours = view === 'hours', + unit = Math.PI / (isHours ? 6 : 30), + radian = value * unit, + radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, + x = Math.sin(radian) * radius, + y = -Math.cos(radian) * radius, + self = this; - if (delay) { - $(this.canvas).addClass('timepicker-canvas-out'); - setTimeout(function () { - $(self.canvas).removeClass('timepicker-canvas-out'); - self.setHand(x, y); - }, delay); - } else { - this.setHand(x, y); - } - } - }, { - key: 'setHand', - value: function setHand(x, y, roundBy5) { - var _this2 = this; + if (delay) { + $(this.canvas).addClass('timepicker-canvas-out'); + setTimeout(function () { + $(self.canvas).removeClass('timepicker-canvas-out'); + self.setHand(x, y); + }, delay); + } else { + this.setHand(x, y); + } + } + }, { + key: 'setHand', + value: function setHand(x, y, roundBy5) { + var _this3 = this; - var radian = Math.atan2(x, -y), - isHours = this.currentView === 'hours', - unit = Math.PI / (isHours || roundBy5 ? 6 : 30), - z = Math.sqrt(x * x + y * y), - inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, - radius = inner ? this.options.innerRadius : this.options.outerRadius; + var radian = Math.atan2(x, -y), + isHours = this.currentView === 'hours', + unit = Math.PI / (isHours || roundBy5 ? 6 : 30), + z = Math.sqrt(x * x + y * y), + inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, + radius = inner ? this.options.innerRadius : this.options.outerRadius; - if (this.options.twelveHour) { - radius = this.options.outerRadius; - } + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } - // Radian should in range [0, 2PI] - if (radian < 0) { - radian = Math.PI * 2 + radian; - } + // Radian should in range [0, 2PI] + if (radian < 0) { + radian = Math.PI * 2 + radian; + } - // Get the round value - var value = Math.round(radian / unit); + // Get the round value + var value = Math.round(radian / unit); - // Get the round radian - radian = value * unit; + // Get the round radian + radian = value * unit; - // Correct the hours or minutes - if (this.options.twelveHour) { - if (isHours) { - if (value === 0) value = 12; - } else { - if (roundBy5) value *= 5; - if (value === 60) value = 0; - } - } else { - if (isHours) { - if (value === 12) { - value = 0; - } - value = inner ? value === 0 ? 12 : value : value === 0 ? 0 : value + 12; - } else { - if (roundBy5) { - value *= 5; - } - if (value === 60) { - value = 0; - } - } - } + // Correct the hours or minutes + if (this.options.twelveHour) { + if (isHours) { + if (value === 0) value = 12; + } else { + if (roundBy5) value *= 5; + if (value === 60) value = 0; + } + } else { + if (isHours) { + if (value === 12) { + value = 0; + } + value = inner ? value === 0 ? 12 : value : value === 0 ? 0 : value + 12; + } else { + if (roundBy5) { + value *= 5; + } + if (value === 60) { + value = 0; + } + } + } - // Once hours or minutes changed, vibrate the device - if (this[this.currentView] !== value) { - if (this.vibrate && this.options.vibrate) { - // Do not vibrate too frequently - if (!this.vibrateTimer) { - navigator[this.vibrate](10); - this.vibrateTimer = setTimeout(function () { - _this2.vibrateTimer = null; - }, 100); - } - } - } + // Once hours or minutes changed, vibrate the device + if (this[this.currentView] !== value) { + if (this.vibrate && this.options.vibrate) { + // Do not vibrate too frequently + if (!this.vibrateTimer) { + navigator[this.vibrate](10); + this.vibrateTimer = setTimeout(function () { + _this3.vibrateTimer = null; + }, 100); + } + } + } - this[this.currentView] = value; - if (isHours) { - this['spanHours'].innerHTML = value; - } else { - this['spanMinutes'].innerHTML = Timepicker._addLeadingZero(value); - } + this[this.currentView] = value; + if (isHours) { + this['spanHours'].innerHTML = value; + } else { + this['spanMinutes'].innerHTML = Timepicker._addLeadingZero(value); + } - // Set clock hand and others' position - var cx1 = Math.sin(radian) * (radius - this.options.tickRadius), - cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), - cx2 = Math.sin(radian) * radius, - cy2 = -Math.cos(radian) * radius; - this.hand.setAttribute('x2', cx1); - this.hand.setAttribute('y2', cy1); - this.bg.setAttribute('cx', cx2); - this.bg.setAttribute('cy', cy2); - } - }, { - key: 'open', - value: function open() { - if (this.isOpen) { - return; - } + // Set clock hand and others' position + var cx1 = Math.sin(radian) * (radius - this.options.tickRadius), + cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), + cx2 = Math.sin(radian) * radius, + cy2 = -Math.cos(radian) * radius; + this.hand.setAttribute('x2', cx1); + this.hand.setAttribute('y2', cy1); + this.bg.setAttribute('cx', cx2); + this.bg.setAttribute('cy', cy2); + } + }, { + key: 'open', + value: function open() { + if (this.isOpen) { + return; + } - this.isOpen = true; - this._updateTimeFromInput(); - this.showView('hours'); - this.modal.open(); - } - }, { - key: 'close', - value: function close() { - if (!this.isOpen) { - return; - } + this.isOpen = true; + this._updateTimeFromInput(); + this.showView('hours'); + this.modal.open(); + } + }, { + key: 'close', + value: function close() { + if (!this.isOpen) { + return; + } - this.isOpen = false; - this.modal.close(); - } + this.isOpen = false; + this.modal.close(); + } - /** + /** * Finish timepicker selection. */ - }, { - key: 'done', - value: function done(e, clearValue) { - // Set input value - var last = this.el.value; - var value = clearValue ? '' : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes); - this.time = value; - if (!clearValue && this.options.twelveHour) { - value = value + ' ' + this.amOrPm; - } - this.el.value = value; + }, { + key: 'done', + value: function done(e, clearValue) { + // Set input value + var last = this.el.value; + var value = clearValue ? '' : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes); + this.time = value; + if (!clearValue && this.options.twelveHour) { + value = value + ' ' + this.amOrPm; + } + this.el.value = value; - // Trigger change event - if (value !== last) { - this.$el.trigger('change'); - } + // Trigger change event + if (value !== last) { + this.$el.trigger('change'); + } - this.close(); - this.el.focus(); - } - }, { - key: 'clear', - value: function clear() { - this.done(null, true); - } - }], [{ - key: 'init', - value: function init($els, options) { - var arr = []; - $els.each(function () { - arr.push(new Timepicker(this, options)); - }); - return arr; - } - }, { - key: '_addLeadingZero', - value: function _addLeadingZero(num) { - return (num < 10 ? '0' : '') + num; - } - }, { - key: '_createSVGEl', - value: function _createSVGEl(name) { - var svgNS = 'http://www.w3.org/2000/svg'; - return document.createElementNS(svgNS, name); - } + this.close(); + this.el.focus(); + } + }, { + key: 'clear', + value: function clear() { + this.done(null, true); + } + }], [{ + key: 'init', + value: function init(els, options) { + return _get(Timepicker.__proto__ || Object.getPrototypeOf(Timepicker), 'init', this).call(this, this, els, options); + } + }, { + key: '_addLeadingZero', + value: function _addLeadingZero(num) { + return (num < 10 ? '0' : '') + num; + } + }, { + key: '_createSVGEl', + value: function _createSVGEl(name) { + var svgNS = 'http://www.w3.org/2000/svg'; + return document.createElementNS(svgNS, name); + } - /** + /** * @typedef {Object} Point * @property {number} x The X Coordinate * @property {number} y The Y Coordinate */ - /** + /** * Get x position of mouse or touch event * @param {Event} e * @return {Point} x and y location */ - }, { - key: '_Pos', - value: function _Pos(e) { - if (e.targetTouches && e.targetTouches.length >= 1) { - return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY }; - } - // mouse event - return { x: e.clientX, y: e.clientY }; - } + }, { + key: '_Pos', + value: function _Pos(e) { + if (e.targetTouches && e.targetTouches.length >= 1) { + return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY }; + } + // mouse event + return { x: e.clientX, y: e.clientY }; + } - /** + /** * Get Instance */ - }, { - key: 'getInstance', - value: function getInstance(el) { - var domElem = !!el.jquery ? el[0] : el; - return domElem.M_Timepicker; - } - }, { - key: 'defaults', - get: function () { - return _defaults; - } - }]); + }, { + key: 'getInstance', + value: function getInstance(el) { + var domElem = !!el.jquery ? el[0] : el; + return domElem.M_Timepicker; + } + }, { + key: 'defaults', + get: function () { + return _defaults; + } + }]); - return Timepicker; - }(); + return Timepicker; + }(Component); - Timepicker._template = ['<div class= "modal timepicker-modal">', '<div class="modal-content timepicker-container">', '<div class="timepicker-digital-display">', '<div class="timepicker-text-container">', '<div class="timepicker-display-column">', '<span class="timepicker-span-hours text-primary"></span>', ':', '<span class="timepicker-span-minutes"></span>', '</div>', '<div class="timepicker-display-column timepicker-display-am-pm">', '<div class="timepicker-span-am-pm"></div>', '</div>', '</div>', '</div>', '<div class="timepicker-analog-display">', '<div class="timepicker-plate">', '<div class="timepicker-canvas"></div>', '<div class="timepicker-dial timepicker-hours"></div>', '<div class="timepicker-dial timepicker-minutes timepicker-dial-out"></div>', '</div>', '<div class="timepicker-footer"></div>', '</div>', '</div>', '</div>'].join(''); + Timepicker._template = ['<div class= "modal timepicker-modal">', '<div class="modal-content timepicker-container">', '<div class="timepicker-digital-display">', '<div class="timepicker-text-container">', '<div class="timepicker-display-column">', '<span class="timepicker-span-hours text-primary"></span>', ':', '<span class="timepicker-span-minutes"></span>', '</div>', '<div class="timepicker-display-column timepicker-display-am-pm">', '<div class="timepicker-span-am-pm"></div>', '</div>', '</div>', '</div>', '<div class="timepicker-analog-display">', '<div class="timepicker-plate">', '<div class="timepicker-canvas"></div>', '<div class="timepicker-dial timepicker-hours"></div>', '<div class="timepicker-dial timepicker-minutes timepicker-dial-out"></div>', '</div>', '<div class="timepicker-footer"></div>', '</div>', '</div>', '</div>'].join(''); - M.Timepicker = Timepicker; + M.Timepicker = Timepicker; - if (M.jQueryLoaded) { - M.initializeJqueryWrapper(Timepicker, 'timepicker', 'M_Timepicker'); - } + if (M.jQueryLoaded) { + M.initializeJqueryWrapper(Timepicker, 'timepicker', 'M_Timepicker'); + } })(cash);