diff options
Diffstat (limited to 'app/lib/grappelli/media/js/grappelli.timepicker.js')
| -rw-r--r-- | app/lib/grappelli/media/js/grappelli.timepicker.js | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/app/lib/grappelli/media/js/grappelli.timepicker.js b/app/lib/grappelli/media/js/grappelli.timepicker.js new file mode 100644 index 0000000..05bedcc --- /dev/null +++ b/app/lib/grappelli/media/js/grappelli.timepicker.js @@ -0,0 +1,171 @@ +/** + * this is grappellis 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.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 whith 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(); + } + } + }); + + // 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.attr("disabled")) { + this.button.attr("disabled", true); + } + // register event + else { + 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 containter + */ + _showTimepicker: function() { + this.timepicker_offset = this.element.offset(); + this.timepicker_offset.top += this.element.outerHeight() + this.options.offset.top; + this.timepicker.css(this.timepicker_offset); + this.timepicker.show(); + }, + + destroy: function() { + $.Widget.prototype.destroy.apply(this, arguments); // default destroy + // now do other stuff particular to this widget + } +}); +})(django.jQuery);
\ No newline at end of file |