Skip to content

Add showOnInput option #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KAYLukas wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add showOnInput option #99

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aeaf82d
Add showOnInput option
KAYLukas Jun 22, 2017
b22fbd4
Also blur when typing in a different field
KAYLukas Jun 30, 2017
57f0805
Fixed switch indentation
KAYLukas Jun 30, 2017
a99ae17
Fix the positioning if the timepicker is viewport is changed.
KAYLukas Jul 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 71 additions & 3 deletions jquery.timepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) ;},
Expand Down Expand Up @@ -259,11 +260,25 @@
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.close(true);
i.open();
}
break;
}
}).bind('focus.timepicker', function() {
i.open();
}).bind('blur.timepicker', function() {
Expand Down Expand Up @@ -374,13 +389,20 @@
// 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 {
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
Expand Down Expand Up @@ -501,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;

Expand All @@ -510,7 +572,12 @@
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'));

$(window).unbind('resize.timepicker-' + i.element.data('timepicker-event-namespace'));
window.removeEventListener('scroll', i.reposition, true);

return i.element;
},
Expand Down Expand Up @@ -651,6 +718,7 @@
'next',
'previous',
'open',
'reposition',
'close',
'destroy',
'setTime'
Expand Down