salix/client/core/src/tooltip/tooltip.js

import {module} from '../module';
import './style.css';

tooltip.$inject = ['$document', '$compile', '$sce', '$templateCache', '$http'];
function tooltip($document, $compile, $sce, $templateCache, $http) {
    function getTemplate(tooltipTemplateUrl) {
        var template = $templateCache.get(tooltipTemplateUrl);
        if (typeof template === 'undefined') {
            template = $http.get(tooltipTemplateUrl).then(function onGetTemplateSuccess(response) {
                return response.data;
            });
            $templateCache.put(tooltipTemplateUrl, template);
        }
        return template;
    }

    return {
        restrict: 'A',
        priority: -1,
        link: function(scope, element, attrs) {
            var tip = $compile('<div class="mdl-shadow--2dp" ng-class="tipClass"><div class="tooltip-text">{{ text }}</div><div ng-if="isHtmlContent" ng-bind-html="htmlContent"></div><div class="tooltip-arrow"></div></div>')(scope);
            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);
            } else if (attrs.tooltipTemplate) {
                var template = getTemplate(attrs.tooltipTemplate);
                scope.isHtmlContent = true;
                scope.htmlContent = $sce.trustAsHtml(template);
            } else {
                scope.isHtmlContent = false;
                scope.htmlContent = null;
            }

            if (attrs.tooltipPosition) {
                scope.tipClass.push('tooltip-' + attrs.tooltipPosition);
            } else {
                scope.tipClass.push('tooltip-down');
            }

            $document.find('body').append(tip);

            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();
            });
        }
    };
}

module.directive('vnTooltip', tooltip);