/
timepicker.js.html.js
2 lines (2 loc) · 18.5 KB
/
timepicker.js.html.js
1
2
tui.util.defineNamespace("fedoc.content", {});
fedoc.content["timepicker.js.html"] = " <div id=\"main\" class=\"main\">\n\n\n\n \n <section>\n <article>\n <pre class=\"prettyprint source linenums\"><code>/**\n * @fileoverview TimePicker Component\n * @author NHN ent FE dev <dl_javascript@nhnent.com> <minkyu.yi@nhnent.com>\n * @dependency jquery-1.8.3, code-snippet-1.0.2, spinbox.js\n */\n\n'use strict';\n\nvar Spinbox = require('./spinbox');\nvar utils = require('./utils');\n\nvar util = tui.util;\nvar timeRegExp = /\\s*(\\d{1,2})\\s*:\\s*(\\d{1,2})\\s*([ap][m])?(?:[\\s\\S]*)/i;\nvar timeSeperator = /\\s+|:/g;\nvar timePickerTag = '<table class=\"timepicker\"><tr class=\"timepicker-row\"></tr></table>';\nvar columnTag = '<td class=\"timepicker-column\"></td>';\nvar spinBoxTag = '<td class=\"timepicker-column timepicker-spinbox\">' +\n '<div><input type=\"text\" class=\"timepicker-spinbox-input\"></div></td>';\nvar upBtnTag = '<button type=\"button\" class=\"timepicker-btn timepicker-btn-up\"><b>+</b></button>';\nvar downBtnTag = '<button type=\"button\" class=\"timepicker-btn timepicker-btn-down\"><b>-</b></button>';\nvar meridiemTag = '<select><option value=\"AM\">AM</option><option value=\"PM\">PM</option></select>';\n\n/**\n * @constructor\n * @param {Object} [option] - option for initialization\n *\n * @param {number} [option.defaultHour = 0] - initial setting value of hour\n * @param {number} [option.defaultMinute = 0] - initial setting value of minute\n * @param {HTMLElement} [option.inputElement = null] - optional input element with timepicker\n * @param {number} [option.hourStep = 1] - step of hour spinbox. if step = 2, hour value 1 -> 3 -> 5 -> ...\n * @param {number} [option.minuteStep = 1] - step of minute spinbox. if step = 2, minute value 1 -> 3 -> 5 -> ...\n * @param {Array} [option.hourExclusion = null] - hour value to be excluded.\n * if hour [1,3] is excluded, hour value 0 -> 2 -> 4 -> 5 -> ...\n * @param {Array} [option.minuteExclusion = null] - minute value to be excluded.\n * if minute [1,3] is excluded, minute value 0 -> 2 -> 4 -> 5 -> ...\n * @param {boolean} [option.showMeridian = false] - is time expression-\"hh:mm AM/PM\"?\n * @param {Object} [option.position = {}] - left, top position of timepicker element\n */\nvar TimePicker = util.defineClass(/** @lends TimePicker.prototype */ {\n init: function(option) {\n /**\n * @type {jQuery}\n */\n this.$timePickerElement = null;\n\n /**\n * @type {jQuery}\n * @private\n */\n this._$inputElement = null;\n\n /**\n * @type {jQuery}\n * @private\n */\n this._$meridianElement = null;\n\n /**\n * @type {Spinbox}\n * @private\n */\n this._hourSpinbox = null;\n\n /**\n * @type {Spinbox}\n * @private\n */\n this._minuteSpinbox = null;\n\n /**\n * time picker element show up?\n * @type {boolean}\n * @private\n */\n this._isShown = false;\n\n /**\n * @type {Object}\n * @private\n */\n this._option = null;\n\n /**\n * @type {number}\n * @private\n */\n this._hour = null;\n\n /**\n * @type {number}\n * @private\n */\n this._minute = null;\n\n this._initialize(option);\n },\n\n /**\n * Initialize with option\n * @param {Object} option for time picker\n * @private\n */\n _initialize: function(option) {\n this._setOption(option);\n this._makeSpinboxes();\n this._makeTimePickerElement();\n this._assignDefaultEvents();\n this._setTime(this._option.defaultHour, this._option.defaultMinute, false);\n },\n\n /**\n * Set option\n * @param {Object} option for time picker\n * @private\n */\n _setOption: function(option) {\n this._option = {\n defaultHour: 0,\n defaultMinute: 0,\n inputElement: null,\n hourStep: 1,\n minuteStep: 1,\n hourExclusion: null,\n minuteExclusion: null,\n showMeridian: false,\n position: {}\n };\n\n util.extend(this._option, option);\n },\n\n /**\n * make spinboxes (hour & minute)\n * @private\n */\n _makeSpinboxes: function() {\n var opt = this._option;\n var defaultHour = opt.defaultHour;\n\n if (opt.showMeridian) {\n defaultHour = utils.getMeridiemHour(defaultHour);\n }\n\n this._hourSpinbox = new Spinbox(spinBoxTag, {\n defaultValue: defaultHour,\n min: (opt.showMeridian) ? 1 : 0,\n max: (opt.showMeridian) ? 12 : 23,\n step: opt.hourStep,\n upBtnTag: upBtnTag,\n downBtnTag: downBtnTag,\n exclusion: opt.hourExclusion\n });\n\n this._minuteSpinbox = new Spinbox(spinBoxTag, {\n defaultValue: opt.defaultMinute,\n min: 0,\n max: 59,\n step: opt.minuteStep,\n upBtnTag: upBtnTag,\n downBtnTag: downBtnTag,\n exclusion: opt.minuteExclusion\n });\n },\n\n /**\n * make timepicker container\n * @private\n */\n _makeTimePickerElement: function() {\n var opt = this._option;\n var $tp = $(timePickerTag);\n var $tpRow = $tp.find('.timepicker-row');\n var $colon = $(columnTag).addClass('colon').append(':');\n var $meridian;\n\n $tpRow.append(this._hourSpinbox.getContainerElement(), $colon, this._minuteSpinbox.getContainerElement());\n\n if (opt.showMeridian) {\n $meridian = $(columnTag)\n .addClass('meridian')\n .append(meridiemTag);\n this._$meridianElement = $meridian.find('select').eq(0);\n $tpRow.append($meridian);\n }\n\n $tp.hide();\n $('body').append($tp);\n this.$timePickerElement = $tp;\n\n if (opt.inputElement) {\n $tp.css('position', 'absolute');\n this._$inputElement = $(opt.inputElement);\n this._setDefaultPosition(this._$inputElement);\n }\n },\n\n /**\n * set position of timepicker container\n * @param {jQuery} $input jquery-object (element)\n * @private\n */\n _setDefaultPosition: function($input) {\n var inputEl = $input[0];\n var position = this._option.position;\n var x = position.x;\n var y = position.y;\n\n if (!util.isNumber(x) || !util.isNumber(y)) {\n x = inputEl.offsetLeft;\n y = inputEl.offsetTop + inputEl.offsetHeight + 3;\n }\n this.setXYPosition(x, y);\n },\n\n /**\n * assign default events\n * @private\n */\n _assignDefaultEvents: function() {\n var $input = this._$inputElement;\n\n if ($input) {\n this._assignEventsToInputElement();\n this.on('change', function() {\n $input.val(this.getTime());\n }, this);\n }\n\n this._hourSpinbox.on('change', util.bind(this._onChangeSpinbox, this));\n this._minuteSpinbox.on('change', util.bind(this._onChangeSpinbox, this));\n\n this.$timePickerElement.on('change', 'select', util.bind(this._onChangeMeridiem, this));\n },\n\n /**\n * attach event to Input element\n * @private\n */\n _assignEventsToInputElement: function() {\n var self = this;\n var $input = this._$inputElement;\n\n $input.on('click', function(event) {\n self.open(event);\n });\n\n $input.on('change', function() {\n if (!self.setTimeFromInputElement()) {\n $input.val(self.getTime());\n }\n });\n },\n\n /**\n * Custom event handler\n * @param {string} type - Change type on spinbox (type: up, down, defualt)\n * @private\n */\n _onChangeSpinbox: function(type) {\n var hour = this._hourSpinbox.getValue();\n var minute = this._minuteSpinbox.getValue();\n\n if (this._option.showMeridian) {\n if ((type === 'up' && hour === 12) ||\n (type === 'down' && hour === 11)) {\n this._isPM = !this._isPM;\n }\n hour = this._getOriginalHour(hour);\n }\n\n this._setTime(hour, minute, false);\n },\n\n /**\n * DOM event handler\n * @param {Event} event - Change event on meridiem element\n * @private\n */\n _onChangeMeridiem: function(event) {\n var isPM = (event.target.value === 'PM');\n var currentHour = this._hour;\n var hour = isPM ? (currentHour + 12) : (currentHour % 12);\n\n this._setTime(hour, this._minuteSpinbox.getValue(), false);\n },\n\n /**\n * is clicked inside of container?\n * @param {Event} event event-object\n * @returns {boolean} result\n * @private\n */\n _isClickedInside: function(event) {\n var isContains = $.contains(this.$timePickerElement[0], event.target);\n var isInputElement = (this._$inputElement &&\n this._$inputElement[0] === event.target);\n\n return isContains || isInputElement;\n },\n\n /**\n * transform time into formatted string\n * @returns {string} time string\n * @private\n */\n _formToTimeFormat: function() {\n var hour = this._hour;\n var minute = this._minute;\n var postfix = this._getPostfix();\n var formattedHour, formattedMinute;\n\n if (this._option.showMeridian) {\n hour = utils.getMeridiemHour(hour);\n }\n\n formattedHour = (hour < 10) ? '0' + hour : hour;\n formattedMinute = (minute < 10) ? '0' + minute : minute;\n\n return formattedHour + ':' + formattedMinute + postfix;\n },\n\n /**\n * set the boolean value 'isPM' when AM/PM option is true.\n * @private\n */\n _setIsPM: function() {\n this._isPM = (this._hour > 11);\n },\n\n /**\n * get postfix when AM/PM option is true.\n * @returns {string} postfix (AM/PM)\n * @private\n */\n _getPostfix: function() {\n var postfix = '';\n\n if (this._option.showMeridian) {\n postfix = (this._isPM) ? ' PM' : ' AM';\n }\n\n return postfix;\n },\n\n /**\n * set position of container\n * @param {number} x - it will be offsetLeft of element\n * @param {number} y - it will be offsetTop of element\n */\n setXYPosition: function(x, y) {\n var position;\n\n if (!util.isNumber(x) || !util.isNumber(y)) {\n return;\n }\n\n position = this._option.position;\n position.x = x;\n position.y = y;\n this.$timePickerElement.css({left: x, top: y});\n },\n\n /**\n * show time picker element\n */\n show: function() {\n this.$timePickerElement.show();\n this._isShown = true;\n },\n\n /**\n * hide time picker element\n */\n hide: function() {\n this.$timePickerElement.hide();\n this._isShown = false;\n },\n\n /**\n * listener to show container\n * @param {Event} event event-object\n */\n open: function(event) {\n if (this._isShown) {\n return;\n }\n\n $(document).on('click', util.bind(this.close, this));\n this.show();\n\n /**\n * Open event - TimePicker\n * @event TimePicker#open\n * @param {(jQuery.Event|undefined)} - Click the input element\n */\n this.fire('open', event);\n },\n\n /**\n * listener to hide container\n * @param {Event} event event-object\n */\n close: function(event) {\n if (!this._isShown || this._isClickedInside(event)) {\n return;\n }\n\n $(document).off(event);\n this.hide();\n\n /**\n * Hide event - Timepicker\n * @event TimePicker#close\n * @param {(jQuery.Event|undefined)} - Click the document (not TimePicker)\n */\n this.fire('close', event);\n },\n\n /**\n * set values in spinboxes from time\n */\n toSpinboxes: function() {\n var hour = this._hour;\n var minute = this._minute;\n\n if (this._option.showMeridian) {\n hour = utils.getMeridiemHour(hour);\n }\n\n this._hourSpinbox.setValue(hour);\n this._minuteSpinbox.setValue(minute);\n },\n\n /**\n * Get original hour from meridiem hour\n * @param {hour} hour - Meridiem hour\n * @returns {number} Original hour\n */\n _getOriginalHour: function(hour) {\n var isPM = this._isPM;\n\n if (isPM) {\n hour = (hour < 12) ? (hour + 12) : 12;\n } else {\n hour = (hour < 12) ? (hour % 12) : 0;\n }\n\n return hour;\n },\n\n /**\n * set time from input element.\n * @param {HTMLElement|jQuery} [inputElement] jquery object (element)\n * @returns {boolean} result of set time\n */\n setTimeFromInputElement: function(inputElement) {\n var input = $(inputElement)[0] || this._$inputElement[0];\n\n return !!(input && this.setTimeFromString(input.value));\n },\n\n /**\n * set hour\n * @param {number} hour for time picker\n * @returns {boolean} result of set time\n */\n setHour: function(hour) {\n return this._setTime(hour, this._minute, true);\n },\n\n /**\n * set minute\n * @param {number} minute for time picker\n * @returns {boolean} result of set time\n */\n setMinute: function(minute) {\n return this._setTime(this._hour, minute, true);\n },\n\n /**\n * set time for extenal call\n * @api\n * @param {number} hour for time picker\n * @param {number} minute for time picker\n * @returns {boolean} result of set time\n */\n setTime: function(hour, minute) {\n return this._setTime(hour, minute);\n },\n\n /**\n * set time\n * @param {number} hour for time picker\n * @param {number} minute for time picker\n * @param {boolean} isSetSpinbox whether spinbox set or not\n * @returns {boolean} result of set time\n * @private\n */\n _setTime: function(hour, minute, isSetSpinbox) {\n var isNumber = (util.isNumber(hour) && util.isNumber(minute));\n var isValid = (hour < 24 && minute < 60);\n var postfix;\n\n if (!isNumber || !isValid) {\n return false;\n }\n\n this._hour = hour;\n this._minute = minute;\n\n this._setIsPM();\n\n if (isSetSpinbox) {\n this.toSpinboxes();\n }\n\n if (this._$meridianElement) {\n postfix = this._getPostfix().replace(/\\s+/, '');\n this._$meridianElement.val(postfix);\n }\n\n /**\n * Change event - TimePicker\n * @event TimePicker#change\n */\n this.fire('change', isSetSpinbox);\n\n return true;\n },\n\n /**\n * set time from time-string\n * @param {string} timeString time-string\n * @returns {boolean} result of set time\n */\n /*eslint-disable complexity*/\n setTimeFromString: function(timeString) {\n var time, hour, minute, postfix, isPM;\n\n if (timeRegExp.test(timeString)) {\n time = timeString.split(timeSeperator);\n hour = Number(time[0]);\n minute = Number(time[1]);\n\n if (hour < 24 && this._option.showMeridian) {\n postfix = time[2].toUpperCase();\n\n if (postfix === 'PM') {\n isPM = true;\n } else if (postfix === 'AM') {\n isPM = (hour > 12);\n } else {\n isPM = this._isPM;\n }\n\n if (isPM && hour < 12) {\n hour += 12;\n } else if (!isPM && hour === 12) {\n hour = 0;\n }\n }\n }\n\n return this._setTime(hour, minute, true);\n },\n\n /**\n * set step of hour\n * @param {number} step for time picker\n */\n setHourStep: function(step) {\n this._hourSpinbox.setStep(step);\n this._option.hourStep = this._hourSpinbox.getStep();\n },\n\n /**\n * set step of minute\n * @param {number} step for time picker\n */\n setMinuteStep: function(step) {\n this._minuteSpinbox.setStep(step);\n this._option.minuteStep = this._minuteSpinbox.getStep();\n },\n\n /**\n * add a specific hour to exclude\n * @param {number} hour for exclusion\n */\n addHourExclusion: function(hour) {\n this._hourSpinbox.addExclusion(hour);\n },\n\n /**\n * add a specific minute to exclude\n * @param {number} minute for exclusion\n */\n addMinuteExclusion: function(minute) {\n this._minuteSpinbox.addExclusion(minute);\n },\n\n /**\n * get step of hour\n * @returns {number} hour up/down step\n */\n getHourStep: function() {\n return this._option.hourStep;\n },\n\n /**\n * get step of minute\n * @returns {number} minute up/down step\n */\n getMinuteStep: function() {\n return this._option.minuteStep;\n },\n\n /**\n * remove hour from exclusion list\n * @param {number} hour that you want to remove\n */\n removeHourExclusion: function(hour) {\n this._hourSpinbox.removeExclusion(hour);\n },\n\n /**\n * remove minute from exclusion list\n * @param {number} minute that you want to remove\n */\n removeMinuteExclusion: function(minute) {\n this._minuteSpinbox.removeExclusion(minute);\n },\n\n /**\n * get hour\n * @returns {number} hour\n */\n getHour: function() {\n return this._hour;\n },\n\n /**\n * get minute\n * @returns {number} minute\n */\n getMinute: function() {\n return this._minute;\n },\n\n /**\n * get time\n * @api\n * @returns {string} 'hh:mm (AM/PM)'\n */\n getTime: function() {\n return this._formToTimeFormat();\n }\n});\ntui.util.CustomEvents.mixin(TimePicker);\n\nmodule.exports = TimePicker;\n</code></pre>\n </article>\n </section>\n\n\n\n</div>\n\n"