tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix left over tooltips after reloads with layout shift

This commit is contained in:
Matthias Jentsch 2014-09-04 09:32:15 +02:00
parent 3125f5d3c4
commit 868e8b25b6
1 changed files with 20 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
public/js/icinga/events.js
View File

@ -10,6 +10,8 @@
'use strict';
var mouseX, mouseY;
Icinga.Events = function (icinga) {
this.icinga = icinga;
@ -115,56 +117,36 @@
$('[title]').each(function () {
var $el = $(this);
$el.attr('title', $el.attr('title-rich') || $el.attr('title'));
// $el.attr('title', null);
});
$('svg rect.chart-data[title]', el).tipsy({ gravity: 'e', html: true });
$('.historycolorgrid a[title]', el).tipsy({ gravity: 's', offset: 2 });
$('img.icon[title]', el).tipsy({ gravity: $.fn.tipsy.autoNS, offset: 2 });
$('[title]', el).tipsy({ gravity: $.fn.tipsy.autoNS, delayIn: 500 });
// Rescue or remove all orphaned tooltips
// migrate or remove all orphaned tooltips
$('.tipsy').each(function () {
function isElementInDOM(ele) {
while (ele = ele.parentNode) {
if (ele == document) return true;
}
return false;
};
var arrow = $('.tipsy-arrow', this)[0];
if (!icinga.utils.elementsOverlap(arrow, $('#main')[0])) {
$(this).remove();
return;
}
// all tooltips are direct children of the body
// so we need find out whether the tooltip belongs applied area,
// by checking if both areas overlap
if (!icinga.utils.elementsOverlap(arrow, el)) {
// tooltip does not belong to this area
return;
}
var pointee = $.data(this, 'tipsy-pointee');
if (!pointee || !isElementInDOM(pointee)) {
var orphan = this;
var oldTitle = $(this).find('.tipsy-inner').html();
var migrated = false;
// try to find an element with the same title
$('[original-title="' + oldTitle + '"]').each(function() {
// get stored instance of Tipsy from newly created element
// point it to the orphaned tooltip
var tipsy = $.data(this, 'tipsy');
tipsy.$tip = $(orphan);
$.data(this, 'tipsy', tipsy);
// orphaned tooltip has the new element as pointee
$.data(orphan, 'tipsy-pointee', this);
migrated = true;
});
if (!migrated) {
$(orphan).remove();
}
var title = $(this).find('.tipsy-inner').html();
var atMouse = document.elementFromPoint(mouseX, mouseY);
var nearestTip = $(atMouse)
.closest('[original-title="' + title + '"]')[0];
if (nearestTip) {
console.log ('migrating orphan...');
var tipsy = $.data(nearestTip, 'tipsy');
tipsy.$tip = $(this);
$.data(this, 'tipsy-pointee', nearestTip);
} else {
// doesn't match delete
console.log ('deleting orphan...');
$(this).remove();
}
});
},
@ -221,11 +203,9 @@
// $(document).on('change', 'form.auto input', this.formChanged);
// $(document).on('change', 'form.auto select', this.submitForm);
$(document).on('mouseenter', '[title-original]', { gravity: 'n' }, function(event) {
icinga.ui.hoverTooltip (this, event.data);
});
$(document).on('mouseleave', '[title-original]', {}, function() {
icinga.ui.unhoverTooltip (this);
$(document).on('mousemove', function (event) {
mouseX = event.pageX;
mouseY = event.pageY;
});
},