Anfänglicher Commit: Producion Version Stand: Oktober 2014
This commit is contained in:
Christian Berg
186
htdocs/grappelli/js/jquery.grp_timepicker.js
Normal file
186
htdocs/grappelli/js/jquery.grp_timepicker.js
Normal file
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* GRAPPELLI TIMEPICKER
|
||||
* works pretty similar to ui.datepicker:
|
||||
* adds a button to the element
|
||||
* creates a node (div) at the bottom called ui-timepicker
|
||||
* element.onClick fills the ui-timepicker node with the time_list (all times you can select)
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
$.widget("ui.grp_timepicker", {
|
||||
// default options
|
||||
options: {
|
||||
// template for the container of the timepicker
|
||||
template: '<div id="ui-timepicker" class="module" style="position: absolute; display: none;"></div>',
|
||||
// selector to get the ui-timepicker once it's added to the dom
|
||||
timepicker_selector: "#ui-timepicker",
|
||||
// needed offset of the container from the element
|
||||
offset: {
|
||||
top: 0
|
||||
},
|
||||
// if time_list wasn't sent when calling the timepicker we use this
|
||||
default_time_list: [
|
||||
'now',
|
||||
'00:00',
|
||||
'01:00',
|
||||
'02:00',
|
||||
'03:00',
|
||||
'04:00',
|
||||
'05:00',
|
||||
'06:00',
|
||||
'07:00',
|
||||
'08:00',
|
||||
'09:00',
|
||||
'10:00',
|
||||
'11:00',
|
||||
'12:00',
|
||||
'13:00',
|
||||
'14:00',
|
||||
'15:00',
|
||||
'16:00',
|
||||
'17:00',
|
||||
'18:00',
|
||||
'19:00',
|
||||
'20:00',
|
||||
'21:00',
|
||||
'22:00',
|
||||
'23:00'
|
||||
],
|
||||
// leave this empty!!!
|
||||
// NOTE: you can't set a default for time_list because if you call:
|
||||
// $("node").timepicker({time_list: ["01:00", "02:00"]})
|
||||
// ui.widget will extend/merge the options.time_list with the one you sent.
|
||||
time_list: []
|
||||
},
|
||||
|
||||
// init timepicker for a specific element
|
||||
_create: function() {
|
||||
// for the events
|
||||
var self = this;
|
||||
|
||||
// to close timpicker if you click somewhere in the document
|
||||
$(document).mousedown(function(evt) {
|
||||
if (self.timepicker.is(":visible")) {
|
||||
var $target = $(evt.target);
|
||||
if ($target[0].id != self.timepicker[0].id && $target.parents(self.options.timepicker_selector).length === 0 && !$target.hasClass('hasTimepicker') && !$target.hasClass('ui-timepicker-trigger')) {
|
||||
self.timepicker.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
// close on esc
|
||||
$(document).keyup(function(e) {
|
||||
if (e.keyCode == 27) {
|
||||
self.timepicker.hide();
|
||||
}
|
||||
});
|
||||
|
||||
// get/create timepicker's container
|
||||
if ($(this.options.timepicker_selector).size() === 0) {
|
||||
$(this.options.template).appendTo('body');
|
||||
}
|
||||
this.timepicker = $(this.options.timepicker_selector);
|
||||
this.timepicker.hide();
|
||||
|
||||
// modify the element and create the button
|
||||
this.element.addClass("hasTimepicker");
|
||||
this.button = $('<button type="button" class="ui-timepicker-trigger"></button>');
|
||||
this.element.after(this.button);
|
||||
|
||||
// disable button if element is disabled
|
||||
if (this.element.prop("disabled")) {
|
||||
this.button.prop("disabled", true);
|
||||
} else {
|
||||
// register event
|
||||
this.button.click(function() {
|
||||
self._toggleTimepicker();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// called when button is clicked
|
||||
_toggleTimepicker: function() {
|
||||
if (this.timepicker.is(":visible")) {
|
||||
this.timepicker.hide();
|
||||
} else {
|
||||
this.element.focus();
|
||||
this._generateTimepickerContents();
|
||||
this._showTimepicker();
|
||||
}
|
||||
},
|
||||
|
||||
// fills timepicker with time_list of element and shows it.
|
||||
// called by _toggleTimepicker
|
||||
_generateTimepickerContents: function() {
|
||||
var self = this,
|
||||
template_str = "<ul>";
|
||||
|
||||
// there is no time_list for this instance so use the default one
|
||||
if (this.options.time_list.length === 0) {
|
||||
this.options.time_list = this.options.default_time_list;
|
||||
}
|
||||
|
||||
for (var i = 0; i < this.options.time_list.length; i++) {
|
||||
if (this.options.time_list[i] == "now") {
|
||||
var now = new Date(),
|
||||
hours = now.getHours(),
|
||||
minutes = now.getMinutes();
|
||||
|
||||
hours = ((hours < 10) ? "0" + hours : hours);
|
||||
minutes = ((minutes < 10) ? "0" + minutes : minutes);
|
||||
|
||||
template_str += '<li class="ui-state-active row">' + hours + ":" + minutes + '</li>';
|
||||
} else {
|
||||
template_str += '<li class="ui-state-default row">' + this.options.time_list[i] + '</li>';
|
||||
}
|
||||
}
|
||||
template_str += "</ul>";
|
||||
|
||||
// fill timepicker container
|
||||
this.timepicker.html(template_str);
|
||||
|
||||
// click handler for items (times) in timepicker
|
||||
this.timepicker.find('li').click(function() {
|
||||
// remove active class from all items
|
||||
$(this).parent().children('li').removeClass("ui-state-active");
|
||||
// mark clicked item as active
|
||||
$(this).addClass("ui-state-active");
|
||||
// set the new value and hide the timepicker
|
||||
self.element.val($(this).html());
|
||||
self.timepicker.hide();
|
||||
});
|
||||
},
|
||||
|
||||
// sets offset and shows timepicker container
|
||||
_showTimepicker: function() {
|
||||
var browserHeight = document.documentElement.clientHeight;
|
||||
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
var tpInputHeight = this.element.outerHeight();
|
||||
var tpDialogHeight = this.timepicker.outerHeight() + tpInputHeight;
|
||||
var offsetTop = this.element.offset().top;
|
||||
var offsetLeft = this.element.offset().left;
|
||||
|
||||
// check the remaining space within the viewport
|
||||
// 60 counts for fixed header/footer
|
||||
var checkSpace = offsetTop - scrollY + tpDialogHeight + 60;
|
||||
|
||||
// position timepicker below or above the input
|
||||
if (checkSpace < browserHeight) {
|
||||
// place the timepicker below input
|
||||
var below = offsetTop + tpInputHeight;
|
||||
this.timepicker.css('left', offsetLeft + 'px').css('top', below + 'px');
|
||||
} else {
|
||||
// place timepicker above input
|
||||
var above = offsetTop - tpDialogHeight + tpInputHeight;
|
||||
this.timepicker.css('left', offsetLeft + 'px').css('top', above + 'px');
|
||||
}
|
||||
// show timepicker
|
||||
this.timepicker.show();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
$.Widget.prototype.destroy.apply(this, arguments); // default destroy
|
||||
// now do other stuff particular to this widget
|
||||
}
|
||||
|
||||
});
|
||||
})(grp.jQuery);
|
||||
Reference in New Issue
Block a user