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

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) {
            let 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>';
            let tip;
            let tipClassName = 'tooltip';
            let tipActiveClassName = 'tooltip-show';
            let scope = $scope.$new();

            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();
                    scope.$destroy();
                });
            }
        }
    };
}

ngModule.directive('vnTooltip', tooltip);