Skip to content

Commit

Permalink
fix(calendar): adjust tooltip positions according to popup position
Browse files Browse the repository at this point in the history
The default tooltip position of cell tooltips is left center. This leads into situations where the tooltip is cut to the left.
On first instantiation of a calendar popup the position of tooltips is not correctly fetched because the popup module hasn't adjusted its pointer position classes yet. Because of this ,the direction of possible cell tooltips is wrongly calculated.
If the same calendar is opened a second time, this does not occur anymore, because the popup module has now adjusted its position.

This PR now adjusts any existing cell tooltip positions inside the calendar whenever the popup get's shown (the popup module always (re-)calculates its position then). So this not only fixes it on first instantiation but also in case the calendar position changes while scrolling , so the popup will possibly to displayed in another direction.

As this is not a module setting but a decision of the module itself, this is a backward compatible change which just fixes the behavior.
Btw. it wasn't happening before, because the calendar popup was called twice (thus correcting it's position), but that was now fixed by #1439
  • Loading branch information
lubber-de authored Jul 21, 2020
1 parent 5bf395a commit ae0b664
Showing 1 changed file with 24 additions and 1 deletion.
25 changes: 24 additions & 1 deletion src/definitions/modules/calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,12 +141,16 @@ $.fn.calendar = function(parameters) {
$container = $('<div/>').addClass(className.popup)[domPositionFunction]($activatorParent);
}
$container.addClass(className.calendar);
var onVisible = settings.onVisible;
var onVisible = function () {
module.refreshTooltips();
return settings.onVisible.apply($container, arguments);
};
var onHidden = settings.onHidden;
if (!$input.length) {
//no input, $container has to handle focus/blur
$container.attr('tabindex', '0');
onVisible = function () {
module.refreshTooltips();
module.focus();
return settings.onVisible.apply($container, arguments);
};
Expand Down Expand Up @@ -178,6 +182,7 @@ $.fn.calendar = function(parameters) {
if ($activator.length && !settings.inline) {
return;
}
settings.inline = true;
$container = $('<div/>').addClass(className.calendar).appendTo($module);
if (!$input.length) {
$container.attr('tabindex', '0');
Expand Down Expand Up @@ -397,6 +402,10 @@ $.fn.calendar = function(parameters) {
}

module.update.focus(false, table);

if(settings.inline){
module.refreshTooltips();
}
}
}
},
Expand Down Expand Up @@ -438,6 +447,20 @@ $.fn.calendar = function(parameters) {
module.create.calendar();
},

refreshTooltips: function() {
var winWidth = $(window).width();
$container.find('td[data-position]').each(function () {
var cell = $(this);
var tooltipWidth = window.getComputedStyle(cell[0], ':after').width.replace(/[^0-9\.]/g,'');
var tooltipPosition = cell.attr('data-position');
// use a fallback width of 250 (calendar width) for IE/Edge (which return "auto")
var calcPosition = (winWidth - cell.width() - (parseInt(tooltipWidth,10) || 250)) > cell.offset().left ? 'right' : 'left';
if(tooltipPosition.indexOf(calcPosition) === -1) {
cell.attr('data-position',tooltipPosition.replace(/(left|right)/,calcPosition));
}
});
},

bind: {
events: function () {
module.debug('Binding events');
Expand Down

0 comments on commit ae0b664

Please sign in to comment.