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