From aeaf82d90d570d820a25e567cde81a12b0a5769b Mon Sep 17 00:00:00 2001 From: KAYLukas Date: Thu, 22 Jun 2017 17:03:26 +0200 Subject: [PATCH 1/4] Add showOnInput option This allows you to keep showing the menu while typing --- jquery.timepicker.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/jquery.timepicker.js b/jquery.timepicker.js index fedcafe..854bdef 100644 --- a/jquery.timepicker.js +++ b/jquery.timepicker.js @@ -259,11 +259,24 @@ i.next(); break; default: - if (!widget.closed()) { + if (!i.options.showOnInput && !widget.closed()) { i.close(true); } break; } + }).bind('keyup.timepicker', function(event) { + switch (event.which || event.keyCode) { + case widget.keyCode.ENTER: + case widget.keyCode.NUMPAD_ENTER: + case widget.keyCode.UP: + case widget.keyCode.DOWN: + break; + default: + if (i.options.showOnInput) { + i.open(); + } + break; + } }).bind('focus.timepicker', function() { i.open(); }).bind('blur.timepicker', function() { From b22fbd4bf7700d1de115ce5fc802bfeb78262901 Mon Sep 17 00:00:00 2001 From: Kay Lukas Date: Fri, 30 Jun 2017 17:13:58 +0200 Subject: [PATCH 2/4] Also blur when typing in a different field MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Otherwise tabbing doesn’t hide the timepicker. --- jquery.timepicker.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/jquery.timepicker.js b/jquery.timepicker.js index 854bdef..71db021 100644 --- a/jquery.timepicker.js +++ b/jquery.timepicker.js @@ -387,7 +387,9 @@ // idea from https://prototype.lighthouseapp.com/projects/8887/tickets/248-results-popup-from-ajaxautocompleter-disappear-when-user-clicks-on-scrollbars-in-ie6ie7 i.element.data('timepicker-event-namespace', Math.random()); - $(document).bind('click.timepicker-' + i.element.data('timepicker-event-namespace'), function(event) { + $(document).bind('click.timepicker-' + i.element.data('timepicker-event-namespace') + ' ' + + 'keydown.timepicker-' + i.element.data('timepicker-event-namespace') + ' ' + + 'keyup.timepicker-' + i.element.data('timepicker-event-namespace'), function(event) { if (i.element.get(0) === event.target) { i.element.data('timepicker-user-clicked-outside', false); } else { @@ -523,7 +525,9 @@ widget.ui.children().removeClass('ui-state-hover'); } - $(document).unbind('click.timepicker-' + i.element.data('timepicker-event-namespace')); + $(document).unbind('click.timepicker-' + i.element.data('timepicker-event-namespace') + ' ' + + 'keydown.timepicker-' + i.element.data('timepicker-event-namespace') + ' ' + + 'keyup.timepicker-' + i.element.data('timepicker-event-namespace')); return i.element; }, From 57f0805bd6d39f127d9b2ac6b8d463a40a4cba46 Mon Sep 17 00:00:00 2001 From: Kay Lukas Date: Fri, 30 Jun 2017 17:29:52 +0200 Subject: [PATCH 3/4] Fixed switch indentation --- jquery.timepicker.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/jquery.timepicker.js b/jquery.timepicker.js index 71db021..e14b18b 100644 --- a/jquery.timepicker.js +++ b/jquery.timepicker.js @@ -266,16 +266,17 @@ } }).bind('keyup.timepicker', function(event) { switch (event.which || event.keyCode) { - case widget.keyCode.ENTER: - case widget.keyCode.NUMPAD_ENTER: - case widget.keyCode.UP: - case widget.keyCode.DOWN: - break; - default: - if (i.options.showOnInput) { - i.open(); - } - break; + case widget.keyCode.ENTER: + case widget.keyCode.NUMPAD_ENTER: + case widget.keyCode.UP: + case widget.keyCode.DOWN: + break; + default: + if (i.options.showOnInput) { + i.close(true); + i.open(); + } + break; } }).bind('focus.timepicker', function() { i.open(); From a99ae1787367e4e107c494eb48343515464b28c6 Mon Sep 17 00:00:00 2001 From: Kay Lukas Date: Tue, 25 Jul 2017 14:53:27 +0200 Subject: [PATCH 4/4] Fix the positioning if the timepicker is viewport is changed. --- jquery.timepicker.js | 50 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/jquery.timepicker.js b/jquery.timepicker.js index e14b18b..c115c79 100644 --- a/jquery.timepicker.js +++ b/jquery.timepicker.js @@ -211,6 +211,7 @@ last: function() { return widget.last(i) ;}, selected: function() { return widget.selected(i) ;}, open: function() { return widget.open(i) ;}, + reposition: function () { return widget.reposition(i); }, close: function() { return widget.close(i) ;}, closed: function() { return widget.closed(i) ;}, destroy: function() { return widget.destroy(i) ;}, @@ -397,6 +398,11 @@ i.element.data('timepicker-user-clicked-outside', true).blur(); } }); + // make sure we reposition the timepicker when the viewport changes + $(window).bind('resize.timepicker-' + i.element.data('timepicker-event-namespace'), i.reposition); + // use vanilla javascript to be able to use event capturing instead of bubbling: otherwise we have to listen + // on all parent containers. + window.addEventListener('scroll', i.reposition, true); // if a date is already selected and options.dynamic is true, // arrange the items in the list so the first item is @@ -517,6 +523,46 @@ return i.element; }, + reposition: function (i) { + var widget = this; + var containerDecorationHeight = widget.container.outerHeight() - widget.container.height(), + zindex = i.options.zindex ? i.options.zindex : i.element.offsetParent().css( 'z-index' ), + elementOffset = i.element.offset(); + + // position the container right below the element, or as close to as possible. + widget.container.css( { + top: elementOffset.top + i.element.outerHeight(), + left: elementOffset.left + } ); + + // then show the container so that the browser can consider the timepicker's + // height to calculate the page's total height and decide if adding scrollbars + // is necessary. + widget.container.show(); + + // now we need to calculate the element offset and position the container again. + // If the browser added scrollbars, the container's original position is not aligned + // with the element's final position. This step fixes that problem. + widget.container.css( { + left: i.element.offset().left, + height: widget.ui.outerHeight() + containerDecorationHeight, + width: i.element.outerWidth(), + zIndex: zindex, + cursor: 'default' + } ); + + + var calculatedWidth = widget.container.width() - ( widget.ui.outerWidth() - widget.ui.width() ); + + // hardcode ui, viewport and item's width. I couldn't get it to work using CSS only + widget.ui.css( { width: calculatedWidth } ); + widget.viewport.css( { width: calculatedWidth } ); + i.items.css( { width: calculatedWidth } ); + + + return i.element; + }, + close: function(i) { var widget = this; @@ -530,6 +576,9 @@ 'keydown.timepicker-' + i.element.data('timepicker-event-namespace') + ' ' + 'keyup.timepicker-' + i.element.data('timepicker-event-namespace')); + $(window).unbind('resize.timepicker-' + i.element.data('timepicker-event-namespace')); + window.removeEventListener('scroll', i.reposition, true); + return i.element; }, @@ -669,6 +718,7 @@ 'next', 'previous', 'open', + 'reposition', 'close', 'destroy', 'setTime'