Skip to content

Commit 9661556

Browse files
kevzlou7979kevzlou7979
committed
Standard fixed for TimePicker disappears on Chrome version 73
1 parent 7a76338 commit 9661556

File tree

3 files changed

+130
-123
lines changed

3 files changed

+130
-123
lines changed

‎src/main/java/gwt/material/design/addins/client/timepicker/MaterialTimePicker.java‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,7 @@ public String getUniqueId() {
304304

305305
public void setUniqueId(String uniqueId) {
306306
options.uniqueId = uniqueId;
307+
timeInput.setId(uniqueId);
307308
}
308309

309310
public String getCancelText() {

‎src/main/resources/gwt/material/design/addins/client/timepicker/resources/js/timepicker.js‎

Lines changed: 128 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,15 @@
314314
this.g = g;
315315
this.canvas = canvas;
316316

317+
318+
// Chrome 73 suggested solution for Timepicker being fubared when opening.
319+
// Refer to https://github.com/GwtMaterialDesign/gwt-material/commit/0670c85ce2a1ee2c28be906fb12f4c0435321ce6
320+
document.querySelector("#" + $(input).attr("id")).addEventListener('pointerdown', function(event) {
321+
if (event.target && event.target.setPointerCapture) {
322+
event.target.setPointerCapture(event.pointerId)
323+
}
324+
});
325+
317326
raiseCallback(this.options.init);
318327
}
319328

@@ -366,145 +375,142 @@
366375

367376
// Show popover
368377
LolliClock.prototype.show = function () {
369-
var _this = this;
370-
setTimeout(function () {
371-
//_this.input.trigger('blur');
372-
if (_this.isShown) {
373-
return;
374-
}
375-
376-
raiseCallback(_this.options.beforeShow);
377-
var self = _this;
378+
//this.input.trigger('blur');
379+
if (this.isShown) {
380+
return;
381+
}
378382

379-
_this.popover.addClass(_this.options.orientation);
383+
raiseCallback(this.options.beforeShow);
384+
var self = this;
380385

381-
// Initialize
382-
if (!_this.isAppended) {
383-
// Append popover to body
384-
$(document.body).append(_this.popover);
385-
_this.isAppended = true;
386+
this.popover.addClass(this.options.orientation);
386387

387-
// Reset position when resize
388-
$(window).on('resize.lolliclock' + _this.id, function () {
389-
if (self.isShown) {
390-
self.locate();
391-
}
392-
});
388+
// Initialize
389+
if (!this.isAppended) {
390+
// Append popover to body
391+
$(document.body).append(this.popover);
392+
this.isAppended = true;
393393

394-
// Reset position on scroll
395-
$(window).on('scroll.lolliclock', function () {
396-
if (self.isShown) {
397-
self.locate();
398-
}
399-
});
394+
// Reset position when resize
395+
$(window).on('resize.lolliclock' + this.id, function () {
396+
if (self.isShown) {
397+
self.locate();
398+
}
399+
});
400400

401-
//Add listeners
402-
_this.AmPmButtons.on('click', function (e) {
403-
self.changeAmPm(e.currentTarget.children[1].innerHTML);
404-
});
405-
_this.spanMinutes.on('click', function () {
406-
self.toggleView('minutes');
407-
});
408-
_this.spanHours.on('click', function () {
409-
self.toggleView('hours');
410-
});
411-
_this.spanAmPm.on('click', function () {
412-
self.changeAmPm();
413-
});
414-
}
401+
// Reset position on scroll
402+
$(window).on('scroll.lolliclock', function () {
403+
if (self.isShown) {
404+
self.locate();
405+
}
406+
});
415407

416-
// Set position
417-
self.locate();
418-
419-
//animate show
420-
_this.plate.addClass('animate');
421-
_this.header.addClass('animate');
422-
_this.popover.addClass('animate');
423-
_this.AmPmButtons.addClass('animate');
424-
_this.spanNewTime.addClass('animate');
425-
_this.spanOldTime.addClass('animate');
426-
!_this.options.autoclose && _this.closeButtons.addClass('animate');
427-
428-
_this.plate.on('webkitAnimationEnd animationend MSAnimationEnd oanimationend', function () {
429-
self.plate.removeClass("animate");
430-
self.header.removeClass("animate");
431-
self.popover.removeClass("animate");
432-
self.AmPmButtons.removeClass("animate");
433-
self.spanNewTime.removeClass("animate");
434-
self.spanOldTime.removeClass("animate");
435-
!self.options.autoclose && self.closeButtons.removeClass("animate");
436-
self.plate.off('webkitAnimationEnd animationend MSAnimationEnd oanimationend');
408+
//Add listeners
409+
this.AmPmButtons.on('click', function (e) {
410+
self.changeAmPm(e.currentTarget.children[1].innerHTML);
411+
});
412+
this.spanMinutes.on('click', function () {
413+
self.toggleView('minutes');
437414
});
415+
this.spanHours.on('click', function () {
416+
self.toggleView('hours');
417+
});
418+
this.spanAmPm.on('click', function () {
419+
self.changeAmPm();
420+
});
421+
}
438422

439-
//Get the time
440-
function timeToDate(time) {
441-
var parts = time.split(':');
442-
if (parts.length === 2){
443-
var hours = +parts[0];
444-
var minAM = parts[1].split(' ');
445-
if (minAM.length === 2) {
446-
var mins = minAM[0];
447-
if (minAM[1] === 'PM') hours += 12;
448-
return new Date(1970, 1, 1, hours, mins);
449-
}
423+
// Set position
424+
self.locate();
425+
426+
//animate show
427+
this.plate.addClass('animate');
428+
this.header.addClass('animate');
429+
this.popover.addClass('animate');
430+
this.AmPmButtons.addClass('animate');
431+
this.spanNewTime.addClass('animate');
432+
this.spanOldTime.addClass('animate');
433+
!this.options.autoclose && this.closeButtons.addClass('animate');
434+
435+
this.plate.on('webkitAnimationEnd animationend MSAnimationEnd oanimationend', function () {
436+
self.plate.removeClass("animate");
437+
self.header.removeClass("animate");
438+
self.popover.removeClass("animate");
439+
self.AmPmButtons.removeClass("animate");
440+
self.spanNewTime.removeClass("animate");
441+
self.spanOldTime.removeClass("animate");
442+
!self.options.autoclose && self.closeButtons.removeClass("animate");
443+
self.plate.off('webkitAnimationEnd animationend MSAnimationEnd oanimationend');
444+
});
445+
446+
//Get the time
447+
function timeToDate(time) {
448+
var parts = time.split(':');
449+
if (parts.length === 2){
450+
var hours = +parts[0];
451+
var minAM = parts[1].split(' ');
452+
if (minAM.length === 2) {
453+
var mins = minAM[0];
454+
if (minAM[1] === 'PM') hours += 12;
455+
return new Date(1970, 1, 1, hours, mins);
450456
}
451-
return new Date('x');
452457
}
458+
return new Date('x');
459+
}
453460

454-
function isValidTime(time) {
455-
return !isNaN(timeToDate(time).getTime());
456-
}
461+
function isValidTime(time) {
462+
return !isNaN(timeToDate(time).getTime());
463+
}
457464

458-
var value;
459-
var inputValue = _this.input.prop('value');
460-
var defaultValue = _this.options.startTime;
461-
var placeholderValue = _this.input.prop('placeholder');
462-
463-
if (inputValue && isValidTime(inputValue)) {
464-
value = timeToDate(inputValue);
465-
} else if (defaultValue === 'now') {
466-
value = new Date();
467-
} else if (defaultValue && isValidTime(defaultValue)) {
468-
value = timeToDate(defaultValue);
469-
} else if (placeholderValue && isValidTime(placeholderValue)) {
470-
value = timeToDate(placeholderValue);
471-
} else {
472-
value = new Date();
473-
}
474-
if(_this.options.hour24) {
475-
_this.hours = value.getHours()
476-
} else {
477-
_this.hours = value.getHours()%12;
478-
_this.amOrPm = value.getHours() > 11 ? "AM" : "PM";
479-
}
480-
_this.minutes = value.getMinutes();
481-
//purposefully wrong because we change it next line
465+
var value;
466+
var inputValue = this.input.prop('value');
467+
var defaultValue = this.options.startTime;
468+
var placeholderValue = this.input.prop('placeholder');
469+
470+
if (inputValue && isValidTime(inputValue)) {
471+
value = timeToDate(inputValue);
472+
} else if (defaultValue === 'now') {
473+
value = new Date();
474+
} else if (defaultValue && isValidTime(defaultValue)) {
475+
value = timeToDate(defaultValue);
476+
} else if (placeholderValue && isValidTime(placeholderValue)) {
477+
value = timeToDate(placeholderValue);
478+
} else {
479+
value = new Date();
480+
}
481+
if(this.options.hour24) {
482+
this.hours = value.getHours()
483+
} else {
484+
this.hours = value.getHours()%12;
485+
this.amOrPm = value.getHours() > 11 ? "AM" : "PM";
486+
}
487+
this.minutes = value.getMinutes();
488+
//purposefully wrong because we change it next line
482489

483-
_this.changeAmPm();
490+
this.changeAmPm();
484491

485-
// Set time
486-
self.toggleView('minutes');
487-
self.toggleView('hours');
492+
// Set time
493+
self.toggleView('minutes');
494+
self.toggleView('hours');
488495

489-
self.isShown = true;
496+
self.isShown = true;
490497

491-
// Hide when clicking or tabbing on any element except the clock, input
492-
$(document).on('click.lolliclock.' + _this.id + ' focusin.lolliclock.' + _this.id, function (e) {
493-
var target = $(e.target);
494-
if (target.closest(self.popover).length === 0 &&
495-
target.closest(self.input).length === 0) {
496-
self.done();
497-
}
498-
});
498+
// Hide when clicking or tabbing on any element except the clock, input
499+
$(document).on('click.lolliclock.' + this.id + ' focusin.lolliclock.' + this.id, function (e) {
500+
var target = $(e.target);
501+
if (target.closest(self.popover).length === 0 &&
502+
target.closest(self.input).length === 0) {
503+
self.done();
504+
}
505+
});
499506

500-
// Hide when ESC is pressed
501-
$(document).on('keyup.lolliclock.' + _this.id, function (e) {
502-
if (e.keyCode === 27) {
503-
self.hide();
504-
}
505-
});
506-
raiseCallback(_this.options.afterShow);
507-
}, 100);
507+
// Hide when ESC is pressed
508+
$(document).on('keyup.lolliclock.' + this.id, function (e) {
509+
if (e.keyCode === 27) {
510+
self.hide();
511+
}
512+
});
513+
raiseCallback(this.options.afterShow);
508514
};
509515

510516
// Hide popover

0 commit comments

Comments
 (0)