From ed64b5edff15e702493df21aa3230b81593e6133 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Fri, 9 Jun 2017 03:19:04 +0300 Subject: [SDC-29] catalog 1707 rebase commit. Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando --- .../utils/smart-tooltip/smart-tooltip.ts | 61 ++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts (limited to 'catalog-ui/src/app/directives/utils/smart-tooltip') diff --git a/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts new file mode 100644 index 0000000000..d0177b4094 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts @@ -0,0 +1,61 @@ +'use strict'; + +export interface ISmartTooltipScope extends ng.IScope { + sdcSmartToolip; +} + +export class SmartTooltipDirective implements ng.IDirective { + + constructor(private $compile:ng.ICompileService) { + } + + public replace = false; + public restrict = 'A'; + public transclude = false; + + public link = (scope:ISmartTooltipScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { + + if ($elem[0].hasAttribute('style') === false) { + $elem[0].setAttribute("style", "overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"); + } else { + let styles = $elem.attr('style'); + $elem[0].setAttribute("style", styles + ";overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"); + } + + $elem.bind('mouseenter', () => { + if ($elem[0].offsetWidth < $elem[0].scrollWidth && !$elem.attr('tooltips')) { + $attrs.$set('tooltips', 'tooltips'); + if ($attrs['sdcSmartTooltip'] && $attrs['sdcSmartTooltip'].length > 0) { + $elem.attr('tooltip-content', $attrs['sdcSmartTooltip']); + } else { + $attrs.$set('tooltip-content', $elem.text()); + } + + //One possible problem arises when the ngIf is placed on the root element of the template. + //ngIf removes the node and places a comment in it's place. Then it watches over the expression and adds/removes the actual HTML element as necessary. + //The problem seems to be that if it is placed on the root element of the template, then a single comment is what is left from the + //whole template (even if only temporarily), which gets ignored (I am not sure if this is browser-specific behaviour), resulting in an empty template. + + // Remove ng-if attribute and its value (if we reach here, we pass ng-if (ng-if===true), so we can remove it). + $elem.removeAttr('ng-if'); + $elem.removeAttr('data-ng-if'); + + // Remove me (the directive from the element) + let template = $elem[0].outerHTML; + template = template.replace('sdc-smart-tooltip=""', ''); + template = template.replace('sdc-smart-tooltip="' + $elem.text() + '"', ''); + //console.log(template); + + let el = this.$compile(template)(scope); + console.log(el); + $elem.replaceWith(el); + } + }); + }; + + public static factory = ($compile:ng.ICompileService)=> { + return new SmartTooltipDirective($compile); + }; +} + +SmartTooltipDirective.factory.$inject = ['$compile']; -- cgit 1.2.3-korg