gistfile1.js

(function($, window, document)
{
	'use strict'

	var _pad = function(num, size)
	{
		var s = num + '';
		while (s.length < size) s = '0' + s;
		return s;
	}

	var Timey = function(element, options)
	{
		var _defaults = {
			hour: 12,
			minute: 0,
			second: 0,
			ampm: 'AM'
		};

		this.element = element;
		this.ampm = options.ampm || _defaults.ampm;
		this.hour = options.hour || _defaults.hour;
		this.minute = options.minute || _defaults.minute;
		this.second = options.second || _defaults.second;

		var e_chevron_up = '<span class="timey-chevron-up"><i></i></span>';
		var e_chevron_down = '<span class="timey-chevron-down"><i></i></span>';
		var e_input = '<input type="text" class="timey-input" />';

		this.e_dialog = $('<ol class="jqTimey-dialog"></ol>');
		
		this.e_hour = $(
			'<li class="timey-hour">' + 
				e_chevron_up +
				e_input +
				e_chevron_down +
			'</li>'
		);

		this.e_minute = $(
			'<li class="timey-minute">' + 
				e_chevron_up +
				e_input +
				e_chevron_down +
			'</li>'
		);

		this.e_second = $(
			'<li class="timey-second">' + 
				e_chevron_up +
				e_input +
				e_chevron_down +
			'</li>'
		);

		this.e_ampm = $(
			'<li class="timey-ampm">' + 
				e_chevron_up +
				e_input +
				e_chevron_down +
			'</li>'
		);
		
		this.e_dialog.append(this.e_hour);
		this.e_dialog.append(this.e_minute);

		if(this.showSeconds)
			this.e_dialog.append(this.e_second)
				.val(this.getSecond());

		if(!this.use24HourTime)
			this.e_dialog.append(this.e_ampm)
				.val(this.getAMPM());

		var _dialog_position = this.getAnchorPosition(this.element);

		this.e_dialog.css({
			// display: 'none',
			position: 'absolute',
			top: _dialog_position.top,
			left: _dialog_position.left
		});

		this.setState({
			hour: this.getHour(), 
			minute: this.getMinute(), 
			second: this.getSecond(), 
			ampm: this.getAMPM()
		});			
	}

	Timey.prototype.init = function()
	{
		var self = this;

		this.e_hour.on('input', 'input[type=text]', function(event)
		{
			var value = $(this).val();

			if(!value || value == '')
				return;

			self.setState({
				hour: $(this).val()
			});
		});

		this.e_minute.on('input', 'input[type=text]', function(event)
		{
			var value = $(this).val();

			if(!value || value == '')
				return;

			self.setState({
				minute: $(this).val()
			});
		});

		this.e_second.on('input', 'input[type=text]', function(event)
		{
			var value = $(this).val();

			if(!value || value == '')
				return;

			self.setState({
				second: $(this).val()
			});
		});

		this.e_ampm.on('input', 'input[type=text]', function(event)
		{
			var value = $(this).val();

			if(!value || value == '')
				return;

			self.setAMPM({
				ampm: $(this).val()
			});
		});

		$(document.body).append(this.e_dialog);
	}

	Timey.prototype.getHour = function()
	{
		return _pad(this.hour, 2);
	}

	Timey.prototype.setHour = function(hour)
	{
		var _max = 23;
		var _min = 0;
		var _hour = hour;

		if(!this.use24HourTime)
		{
			if(hour > 12)
			{
				_hour -= 12;
			}
			_max = 12;
			_min = 1;
		}
		
		_hour = Math.min(_hour, _max);
		_hour = Math.max(_hour, _min);

		this.hour = _hour;
		this.e_hour.find('input').val(_hour);
	}

	Timey.prototype.getMinute = function()
	{
		return _pad(this.minute, 2);
	}
	
	Timey.prototype.setMinute = function(minute)
	{
		var _max = 59;
		var _min = 0;
		var _minute;

		_minute = Math.min(minute, _max);
		_minute = Math.max(minute, _min);

		this.minute = _minute;
		this.e_minute.find('input').val(this.minute);
	}

	Timey.prototype.getSecond = function()
	{
		return _pad(this.second, 2);
	}

	Timey.prototype.setSecond = function(second)
	{
		var _max = 59;
		var _min = 0;
		var _second;

		_second = Math.min(second, _max);
		_second = Math.max(second, _min);

		this.second = _second;
		this.e_second.find('input').val(this.second);		
	}
	
	Timey.prototype.getAMPM = function()
	{
		return this.ampm.toUpperCase();
	}

	Timey.prototype.setAMPM = function(ampm)
	{
		if(ampm != 'AM' && ampm != 'PM')
			return;

		this.ampm = ampm.toUpperCase();
		this.e_ampm.find('input').val(this.ampm);
	}

	Timey.prototype.incrementHour = function(mod)
	{
		var _max = this.use24HourTime ? 23 : 12;
		var _min = this.use24HourTime ? 0 : 1;

		this.hour = this.hour + (1 * mod) > _max ? _min : this.hour + (1 * mod);
		this.hour = this.hour < _min ? _max  : this.hour;
	}

	Timey.prototype.incrementMinute = function(mod)
	{
		this.minute = this.minute + (1 * mod) > 59 ? 0 : this.minute + (1 * mod);
		this.minute = this.minute < 0 ? 59 : this.minute;
	}

	Timey.prototype.incrementSecond = function(mod)
	{
		this.second = this.second + (1 * mod) > 59 ? 0 : this.second + (1 * mod);
		this.second = this.second < 0 ? 59 : this.second;
	}

	Timey.prototype.incrementAMPM = function(mod)
	{
		this.ampm = this.ampm == 'AM' ? 'PM' : 'AM';
	}

	Timey.prototype.setState = function(hour, minute, second, ampm)
	{
		if(typeof(hour) == 'object')
		{
			var opts = hour;
			hour = opts.hour || this.hour;
			minute = opts.minute || this.minute;
			second = opts.second || this.second;
			ampm = opts.ampm || this.ampm;
		}

		this.setHour(hour || this.hour);
		this.setMinute(minute || this.minute);
		this.setSecond(second || this.second);
		this.setAMPM(ampm || this.ampm);

		this.element.val(this.getTimeString());
	}

	Timey.prototype.getTimeString = function()
	{
		var ts = this.getHour() + ' : ' + this.getMinute();

		if(this.showSeconds)
			ts += ' : ' + this.getSecond();

		if(!this.use24HourTime)
			ts += ' ' + this.getAMPM();

		return ts; 
	}

	Timey.prototype.getAnchorPosition = function(element)
	{
		var top = element.position().top;
		var left = element.position().left;
		var height = element.outerHeight();

		return {
			top: top + height + 2,
			left: left
		}
	}

	$.fn.jqTimey = function(options)
	{
		
		$(this).each(function()
		{
			var timey = new Timey($(this), options);
			timey.init();

			var _onChevronChange = function(mod)
			{
				if($(this).parent().hasClass('timey-hour'))
				{
					timey.incrementHour(mod);
				}
				else if($(this).parent().hasClass('timey-minute'))
				{
					timey.incrementMinute(mod);
				}
				else if($(this).parent().hasClass('timey-second'))
				{
					timey.incrementSecond(mod);
				}
				else if($(this).parent().hasClass('timey-ampm'))
				{
					timey.incrementAMPM(mod);
				}
			}

			timey.e_dialog.on('click', '.timey-chevron-up', function(event)
			{
				_onChevronChange.call(this, 1);
				timey.setState({
					hour: timey.getHour(), 
					minute: timey.getMinute(), 
					second: timey.getSecond(), 
					ampm: timey.getAMPM()
				});
			});

			timey.e_dialog.on('click', '.timey-chevron-down', function(event)
			{
				_onChevronChange.call(this, -1);
				timey.setState({
					hour: timey.getHour(), 
					minute: timey.getMinute(), 
					second: timey.getSecond(), 
					ampm: timey.getAMPM()
				});
			});
		});
	}

})(jQuery, window, document);