%PDF-
%PDF-
Mini Shell
Mini Shell
/**
* Clockface - v1.0.1
* Clockface timepicker for Twitter Bootstrap
*
* Confusion with noon and midnight:
* http://en.wikipedia.org/wiki/12-hour_clock
* Here considered '00:00 am' as midnight and '12:00 pm' as noon.
*
* Author: Vitaliy Potapov
* Project page: http://github.com/vitalets/clockface
* Copyright (c) 2012 Vitaliy Potapov. Released under MIT License.
**/
(function ($) {
var Clockface = function (element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.clockface.defaults, options, this.$element.data());
this.init();
};
Clockface.prototype = {
constructor: Clockface,
init: function () {
//apply template
this.$clockface = $($.fn.clockface.template);
this.$clockface.find('.l1 .cell, .left.cell').html('<div class="outer"></div><div class="inner"></div>');
this.$clockface.find('.l5 .cell, .right.cell').html('<div class="inner"></div><div class="outer"></div>');
this.$clockface.hide();
this.$outer = this.$clockface.find('.outer');
this.$inner = this.$clockface.find('.inner');
this.$ampm = this.$clockface.find('.ampm');
//internal vars
this.ampm = null;
this.hour = null;
this.minute = null;
//click am/pm
this.$ampm.click($.proxy(this.clickAmPm, this));
//click cell
this.$clockface.on('click', '.cell', $.proxy(this.click, this));
this.parseFormat();
this.prepareRegexp();
//set ampm text
this.ampmtext = this.is24 ? {am: '12-23', pm: '0-11'} : {am: 'AM', pm: 'PM'};
this.isInline = this.$element.is('div');
if (this.isInline) {
this.$clockface.addClass('clockface-inline').appendTo(this.$element);
} else {
this.$clockface.addClass('dropdown-menu').appendTo('body');
if (this.options.trigger === 'focus') {
this.$element.on('focus.clockface', $.proxy(function (e) {
this.show();
}, this));
}
// Click outside hide it. Register single handler for all clockface widgets
$(document).off('click.clockface').on('click.clockface', $.proxy(function (e) {
var $target = $(e.target);
//click inside some clockface --> do nothing
if ($target.closest('.clockface').length) {
return;
}
//iterate all open clockface and close all except current
$('.clockface-open').each(function () {
if (this === e.target) {
return;
}
$(this).clockface('hide');
});
}, this));
}
//fill minutes once
this.fill('minute');
},
/*
Displays widget with specified value
*/
show: function (value) {
if (this.$clockface.is(':visible')) {
return;
}
if (!this.isInline) {
if (value === undefined) {
value = this.$element.val();
}
this.$element.addClass('clockface-open');
this.$element.on('keydown.clockface', $.proxy(this.keydown, this));
this.place();
$(window).on('resize.clockface', $.proxy(this.place, this));
}
this.$clockface.show();
this.setTime(value);
//trigger shown event
this.$element.triggerHandler('shown.clockface', this.getTime(true));
},
/*
hides widget
*/
hide: function () {
this.$clockface.hide();
if (!this.isInline) {
this.$element.removeClass('clockface-open');
this.$element.off('keydown.clockface');
$(window).off('resize.clockface');
}
//trigger hidden event
this.$element.triggerHandler('hidden.clockface', this.getTime(true));
},
/*
toggles show/hide
*/
toggle: function (value) {
if (this.$clockface.is(':visible')) {
this.hide();
} else {
this.show(value);
}
},
/*
Set time of clockface. Am/pm will be set automatically.
Value can be Date object or string
*/
setTime: function (value) {
var res, hour, minute, ampm = 'am';
//no new value
if (value === undefined) {
//if ampm null, it;s first showw, need to render hours ('am' by default)
if (this.ampm === null) {
this.setAmPm('am');
}
return;
}
//take value from Date object
if (value instanceof Date) {
hour = value.getHours();
minute = value.getMinutes();
}
//parse value from string
if (typeof value === 'string' && value.length) {
res = this.parseTime(value);
//'24' always '0'
if (res.hour === 24) {
res.hour = 0;
}
hour = res.hour;
minute = res.minute;
ampm = res.ampm;
}
//try to set ampm automatically
if (hour > 11 && hour < 24) {
ampm = 'pm';
//for 12h format substract 12 from value
if (!this.is24 && hour > 12) {
hour -= 12;
}
} else if (hour >= 0 && hour < 11) {
//always set am for 24h and for '0' in 12h
if (this.is24 || hour === 0) {
ampm = 'am';
}
//otherwise ampm should be defined in value itself and retrieved when parsing
}
this.setAmPm(ampm);
this.setHour(hour);
this.setMinute(minute);
},
/*
Set ampm and re-fill hours
*/
setAmPm: function (value) {
if (value === this.ampm) {
return;
} else {
this.ampm = value === 'am' ? 'am' : 'pm';
}
//set link's text
this.$ampm.text(this.ampmtext[this.ampm]);
//re-fill and highlight hour
this.fill('hour');
this.highlight('hour');
},
/*
Sets hour value and highlight if possible
*/
setHour: function (value) {
value = parseInt(value, 10);
value = isNaN(value) ? null : value;
if (value < 0 || value > 23) {
value = null;
}
if (value === this.hour) {
return;
} else {
this.hour = value;
}
this.highlight('hour');
},
/*
Sets minute value and highlight
*/
setMinute: function (value) {
value = parseInt(value, 10);
value = isNaN(value) ? null : value;
if (value < 0 || value > 59) {
value = null;
}
if (value === this.minute) {
return;
} else {
this.minute = value;
}
this.highlight('minute');
},
/*
Highlights hour/minute
*/
highlight: function (what) {
var index,
values = this.getValues(what),
value = what === 'minute' ? this.minute : this.hour,
$cells = what === 'minute' ? this.$outer : this.$inner;
$cells.removeClass('active');
//find index of value and highlight if possible
index = $.inArray(value, values);
if (index >= 0) {
$cells.eq(index).addClass('active');
}
},
/*
Fill values around
*/
fill: function (what) {
var values = this.getValues(what),
$cells = what === 'minute' ? this.$outer : this.$inner,
leadZero = what === 'minute';
$cells.each(function (i) {
var v = values[i];
if (leadZero && v < 10) {
v = '0' + v;
}
$(this).text(v);
});
},
/*
returns values of hours or minutes, depend on ampm and 24/12 format (0-11, 12-23, 00-55, etc)
param what: 'hour'/'minute'
*/
getValues: function (what) {
var values = [11, 0, 1, 10, 2, 9, 3, 8, 4, 7, 6, 5],
result = values.slice();
//minutes
if (what === 'minute') {
$.each(values, function (i, v) {
result[i] = v * 5;
});
} else {
//hours
if (!this.is24) {
result[1] = 12; //need this to show '12' instead of '00' for 12h am/pm
}
if (this.is24 && this.ampm === 'pm') {
$.each(values, function (i, v) {
result[i] = v + 12;
});
}
}
return result;
},
/*
Click cell handler.
Stores hour/minute and highlights.
On second click deselect value
*/
click: function (e) {
var $target = $(e.target),
value = $target.hasClass('active') ? null : $target.text();
if ($target.hasClass('inner')) {
this.setHour(value);
} else {
this.setMinute(value);
}
//update value in input
if (!this.isInline) {
this.$element.val(this.getTime());
}
//trigger pick event
this.$element.triggerHandler('pick.clockface', this.getTime(true));
},
/*
Click handler on ampm link
*/
clickAmPm: function (e) {
e.preventDefault();
//toggle am/pm
this.setAmPm(this.ampm === 'am' ? 'pm' : 'am');
//update value in input
if (!this.isInline && !this.is24) {
this.$element.val(this.getTime());
}
//trigger pick event
this.$element.triggerHandler('pick.clockface', this.getTime(true));
},
/*
Place widget below input
*/
place: function () {
var zIndex = parseInt(this.$element.parents().filter(function () {
return $(this).css('z-index') != 'auto';
}).first().css('z-index'), 10) + 10,
offset = this.$element.offset();
this.$clockface.css({
top: offset.top + this.$element.outerHeight(),
left: offset.left,
zIndex: zIndex
});
},
/*
keydown handler (for not inline mode)
*/
keydown: function (e) {
//tab, escape, enter --> hide
if (/^(9|27|13)$/.test(e.which)) {
this.hide();
return;
}
clearTimeout(this.timer);
this.timer = setTimeout($.proxy(function () {
this.setTime(this.$element.val());
}, this), 500);
},
/*
Parse format from options and set this.is24
*/
parseFormat: function () {
var format = this.options.format,
hFormat = 'HH',
mFormat = 'mm';
//hour format
$.each(['HH', 'hh', 'H', 'h'], function (i, f) {
if (format.indexOf(f) !== -1) {
hFormat = f;
return false;
}
});
//minute format
$.each(['mm', 'm'], function (i, f) {
if (format.indexOf(f) !== -1) {
mFormat = f;
return false;
}
});
//is 24 hour format
this.is24 = hFormat.indexOf('H') !== -1;
this.hFormat = hFormat;
this.mFormat = mFormat;
},
/*
Parse value passed as string or Date object
*/
parseTime: function (value) {
var hour = null,
minute = null,
ampm = 'am',
parts = [], digits;
value = $.trim(value);
//try parse time from string assuming separator exist
if (this.regexpSep) {
parts = value.match(this.regexpSep);
}
if (parts && parts.length) {
hour = parts[1] ? parseInt(parts[1], 10) : null;
minute = parts[2] ? parseInt(parts[2], 10) : null;
ampm = (!parts[3] || parts[3].toLowerCase() === 'a') ? 'am' : 'pm';
} else {
//if parse with separator failed, search for 1,4-digit block and process it
//use reversed string to start from end (usefull with full dates)
//see http://stackoverflow.com/questions/141348/what-is-the-best-way-to-parse-a-time-into-a-date-object-from-user-input-in-javas
value = value.split('').reverse().join('').replace(/\s/g, '');
parts = value.match(this.regexpNoSep);
if (parts && parts.length) {
ampm = (!parts[1] || parts[1].toLowerCase() === 'a') ? 'am' : 'pm';
//reverse back
digits = parts[2].split('').reverse().join('');
//use smart analyzing to detect hours and minutes
switch (digits.length) {
case 1:
hour = parseInt(digits, 10); //e.g. '6'
break;
case 2:
hour = parseInt(digits, 10); //e.g. '16'
//if((this.is24 && hour > 24) || (!this.is24 && hour > 12)) { //e.g. 26
if (hour > 24) { //e.g. 26
hour = parseInt(digits[0], 10);
minute = parseInt(digits[1], 10);
}
break;
case 3:
hour = parseInt(digits[0], 10); //e.g. 105
minute = parseInt(digits[1] + digits[2], 10);
if (minute > 59) {
hour = parseInt(digits[0] + digits[1], 10); //e.g. 195
minute = parseInt(digits[2], 10);
if (hour > 24) {
hour = null;
minute = null;
}
}
break;
case 4:
hour = parseInt(digits[0] + digits[1], 10); //e.g. 2006
minute = parseInt(digits[2] + digits[3], 10);
if (hour > 24) {
hour = null;
}
if (minute > 59) {
minute = null;
}
}
}
}
return {hour: hour, minute: minute, ampm: ampm};
},
prepareRegexp: function () {
//take separator from format
var sep = this.options.format.match(/h\s*([^hm]?)\s*m/i); //HH-mm, HH:mm
if (sep && sep.length) {
sep = sep[1];
}
//sep can be null for HH, and '' for HHmm
this.separator = sep;
//parse from string
//use reversed string and regexp to parse 2-digit minutes first
//see http://stackoverflow.com/questions/141348/what-is-the-best-way-to-parse-a-time-into-a-date-object-from-user-input-in-javas
//this.regexp = new RegExp('(a|p)?\\s*((\\d\\d?)' + sep + ')?(\\d\\d?)', 'i');
//regexp, used with separator
this.regexpSep = (this.separator && this.separator.length) ? new RegExp('(\\d\\d?)\\s*\\' + this.separator + '\\s*(\\d?\\d?)\\s*(a|p)?', 'i') : null;
//second regexp applied if previous has no result or separator is empty (to reversed string)
this.regexpNoSep = new RegExp('(a|p)?\\s*(\\d{1,4})', 'i');
},
/*
Returns time as string in specified format
*/
getTime: function (asObject) {
if (asObject === true) {
return {
hour: this.hour,
minute: this.minute,
ampm: this.ampm
};
}
var hour = this.hour !== null ? this.hour + '' : '',
minute = this.minute !== null ? this.minute + '' : '',
result = this.options.format;
if (!hour.length && !minute.length) {
return '';
}
if (this.hFormat.length > 1 && hour.length === 1) {
hour = '0' + hour;
}
if (this.mFormat.length > 1 && minute.length === 1) {
minute = '0' + minute;
}
//delete separator if no minutes
if (!minute.length && this.separator) {
result = result.replace(this.separator, '');
}
result = result.replace(this.hFormat, hour).replace(this.mFormat, minute);
if (!this.is24) {
if (result.indexOf('A') !== -1) {
result = result.replace('A', this.ampm.toUpperCase());
} else {
result = result.replace('a', this.ampm);
}
}
return result;
},
/*
Removes widget and detach events
*/
destroy: function () {
this.hide();
this.$clockface.remove();
if (!this.isInline && this.options.trigger === 'focus') {
this.$element.off('focus.clockface');
}
}
};
$.fn.clockface = function (option) {
var d, args = Array.apply(null, arguments);
args.shift();
//getTime returns string (not jQuery onject)
if (option === 'getTime' && this.length && (d = this.eq(0).data('clockface'))) {
return d.getTime.apply(d, args);
}
return this.each(function () {
var $this = $(this),
data = $this.data('clockface'),
options = typeof option == 'object' && option;
if (!data) {
$this.data('clockface', (data = new Clockface(this, options)));
}
if (typeof option == 'string' && typeof data[option] == 'function') {
data[option].apply(data, args);
}
});
};
$.fn.clockface.defaults = {
//see http://momentjs.com/docs/#/displaying/format/
format: 'H:mm',
trigger: 'focus' //focus|manual
};
$.fn.clockface.template = '' +
'<div class="clockface">' +
'<div class="l1">' +
'<div class="cell"></div>' +
'<div class="cell"></div>' +
'<div class="cell"></div>' +
'</div>' +
'<div class="l2">' +
'<div class="cell left"></div>' +
'<div class="cell right"></div>' +
'</div>' +
'<div class="l3">' +
'<div class="cell left"></div>' +
'<div class="cell right"></div>' +
'<div class="center"><a href="#" class="ampm"></a></div>' +
'</div>' +
'<div class="l4">' +
'<div class="cell left"></div>' +
'<div class="cell right"></div>' +
'</div>' +
'<div class="l5">' +
'<div class="cell"></div>' +
'<div class="cell"></div>' +
'<div class="cell"></div>' +
'</div>' +
'</div>';
}(window.jQuery));
Zerion Mini Shell 1.0