126 lines
4.8 KiB
JavaScript
126 lines
4.8 KiB
JavaScript
import ngModule from '../../module';
|
|
import './style.css';
|
|
|
|
tooltip.$inject = ['$document', '$compile', '$interpolate', '$sce', '$templateCache', '$http', '$q'];
|
|
function tooltip($document, $compile, $interpolate, $sce, $templateCache, $http, $q) {
|
|
var promise;
|
|
|
|
function _getTemplate(tooltipTemplateUrl) {
|
|
var template = $templateCache.get(tooltipTemplateUrl);
|
|
if (typeof template === 'undefined') {
|
|
template = $http.get(tooltipTemplateUrl).then(function onGetTemplateSuccess(response) {
|
|
if (promise) {
|
|
promise.resolve(response.data);
|
|
}
|
|
promise = undefined;
|
|
return response.data;
|
|
});
|
|
$templateCache.put(tooltipTemplateUrl, template);
|
|
}
|
|
return template;
|
|
}
|
|
|
|
function getTemplate(tooltipTemplateUrl) {
|
|
var _promise = $q.defer();
|
|
var template = _getTemplate(tooltipTemplateUrl);
|
|
if (template) {
|
|
_promise.resolve(template);
|
|
} else {
|
|
promise = _promise;
|
|
}
|
|
return _promise.promise;
|
|
}
|
|
|
|
return {
|
|
restrict: 'A',
|
|
priority: -1,
|
|
link: function(scope, element, attrs) {
|
|
var tipHtml = '<div class="mdl-shadow--2dp" ng-class="tipClass"><div class="tooltip-text" translate>{{text}}</div><div ng-if="isHtmlContent" ng-bind-html="htmlContent"></div><div class="tooltip-arrow"></div></div>';
|
|
var tip;
|
|
var tipClassName = 'tooltip';
|
|
var tipActiveClassName = 'tooltip-show';
|
|
|
|
scope.tipClass = [tipClassName];
|
|
scope.text = attrs.vnTooltip || '';
|
|
|
|
if (attrs.tooltipHtml) {
|
|
scope.isHtmlContent = true;
|
|
scope.htmlContent = $sce.trustAsHtml(attrs.tooltipHtml);
|
|
_compileTip();
|
|
} else if (attrs.tooltipTemplate) {
|
|
getTemplate(attrs.tooltipTemplate).then(template => {
|
|
scope.isHtmlContent = true;
|
|
scope.htmlContent = $sce.trustAsHtml($interpolate(template)(scope));
|
|
_compileTip();
|
|
});
|
|
} else {
|
|
scope.isHtmlContent = false;
|
|
scope.htmlContent = null;
|
|
_compileTip();
|
|
}
|
|
|
|
if (attrs.tooltipPosition) {
|
|
scope.tipClass.push('tooltip-' + attrs.tooltipPosition);
|
|
} else {
|
|
scope.tipClass.push('tooltip-down');
|
|
}
|
|
|
|
function _compileTip() {
|
|
tip = $compile(tipHtml)(scope);
|
|
$document.find('body').append(tip);
|
|
_bindEvents();
|
|
}
|
|
|
|
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');
|
|
});
|
|
|
|
element.on('mouseout', function() {
|
|
tip.removeClass(tipActiveClassName);
|
|
});
|
|
|
|
tip.on('mouseover', function() {
|
|
tip.addClass(tipActiveClassName);
|
|
});
|
|
|
|
tip.on('mouseout', function() {
|
|
tip.removeClass(tipActiveClassName);
|
|
});
|
|
|
|
element.on('$destroy', function() {
|
|
tip.remove();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
ngModule.directive('vnTooltip', tooltip);
|