verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 67 Releases Wiki Activity

Bug #108 tooltip outsides

This commit is contained in:
Daniel Herrero 2018-02-28 09:12:48 +01:00
parent b473fdf289
commit 50fb035dd9
1 changed files with 63 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
client/core/src/components/tooltip/tooltip.js
View File

@ -74,45 +74,19 @@ function tooltip($document, $compile, $interpolate, $sce, $templateCache, $http,
function _bindEvents() {
element.bind('mouseover', function(e) {
tip.addClass(tipActiveClassName);
let pos = e.target.getBoundingClientRect();
let tipPos = tip[0].getBoundingClientRect();
let offset = {top: 0, left: 0};
let tipWidth = tipPos.width || tipPos.right - tipPos.left;
let tipHeight = tipPos.height || tipPos.bottom - tipPos.top;
let elWidth = pos.width || pos.right - pos.left;
let elHeight = pos.height || pos.bottom - pos.top;
let tipOffset = 10;
if (tip.hasClass('tooltip-right')) {
offset.top = pos.top - (tipHeight / 2) + (elHeight / 2);
offset.left = pos.right + tipOffset;
} else if (tip.hasClass('tooltip-left')) {
offset.top = pos.top - (tipHeight / 2) + (elHeight / 2);
offset.left = pos.left - tipWidth - tipOffset;
} else if (tip.hasClass('tooltip-down')) {
offset.top = pos.top + elHeight + tipOffset;
offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
} else {
offset.top = pos.top - tipHeight - tipOffset;
offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
}
tip.css('top', offset.top + 'px');
tip.css('left', offset.left + 'px');
_showTooltip(e);
});
element.on('mouseout', function() {
tip.removeClass(tipActiveClassName);
_hideTooltip();
});
tip.on('mouseover', function() {
tip.addClass(tipActiveClassName);
tip.on('mouseover', function(e) {
_showTooltip(e);
});
tip.on('mouseout', function() {
tip.removeClass(tipActiveClassName);
_hideTooltip();
});
element.on('$destroy', function() {
@ -120,6 +94,64 @@ function tooltip($document, $compile, $interpolate, $sce, $templateCache, $http,
scope.$destroy();
});
}
function _calculatePosition(e) {
let pos = element[0].getBoundingClientRect();
let tipPos = tip[0].getBoundingClientRect();
let offset = {top: 0, left: 0};
let tipWidth = tipPos.width || tipPos.right - tipPos.left;
let tipHeight = tipPos.height || tipPos.bottom - tipPos.top;
let elWidth = pos.width || pos.right - pos.left;
let elHeight = pos.height || pos.bottom - pos.top;
let tipOffset = 10;
if (tip.hasClass('tooltip-right')) {
offset.top = pos.top - (tipHeight / 2) + (elHeight / 2);
offset.left = pos.right + tipOffset;
} else if (tip.hasClass('tooltip-left')) {
offset.top = pos.top - (tipHeight / 2) + (elHeight / 2);
offset.left = pos.left - tipWidth - tipOffset;
} else if (tip.hasClass('tooltip-down')) {
offset.top = pos.top + elHeight + tipOffset;
offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
} else {
offset.top = pos.top - tipHeight - tipOffset;
offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
}
// outsides
if (offset.left + tipPos.width > window.innerWidth) { // right outside
let diffLeft = (offset.left + tipPos.width) - window.innerWidth;
offset.left -= diffLeft + 10;
let arrow = tip[0].querySelector('.tooltip-arrow');
if (arrow) {
angular.element(arrow).css('margin-left', diffLeft + 'px');
}
} else if (offset.left < 10) { // left outside
offset.left = 10;
let arrow = tip[0].querySelector('.tooltip-arrow');
if (arrow) {
angular.element(arrow).css('margin-left', '10px');
}
}
if (offset.top > window.innerHeight) { // down outside
offset.top = pos.top - tipHeight - tipOffset;
} else if (offset.top < 10) { // top outside
offset.top = pos.top + elHeight + tipOffset;
}
tip.css('top', offset.top + 'px');
tip.css('left', offset.left + 'px');
}
function _showTooltip(e) {
tip.addClass(tipActiveClassName);
_calculatePosition(e);
}
function _hideTooltip() {
tip.removeClass(tipActiveClassName);
}
}
};
}