catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 'use strict';
  22
  23 export interface ISmartTooltipScope extends ng.IScope {
  24     sdcSmartToolip;
  25 }
  26
  27 export class SmartTooltipDirective implements ng.IDirective {
  28
  29     constructor(private $compile:ng.ICompileService) {
  30     }
  31
  32     public replace = false;
  33     public restrict = 'A';
  34     public transclude = false;
  35
  36     public link = (scope:ISmartTooltipScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => {
  37
  38         if ($elem[0].hasAttribute('style') === false) {
  39             $elem[0].setAttribute("style", "overflow: hidden; white-space: nowrap; text-overflow: ellipsis;");
  40         } else {
  41             let styles = $elem.attr('style');
  42             $elem[0].setAttribute("style", styles + ";overflow: hidden; white-space: nowrap; text-overflow: ellipsis;");
  43         }
  44
  45         $elem.bind('mouseenter', () => {
  46             if ((<HTMLElement>$elem[0]).offsetWidth < $elem[0].scrollWidth && !$elem.attr('tooltips')) {
  47                 $attrs.$set('tooltips', 'tooltips');
  48                 if ($attrs['sdcSmartTooltip'] && $attrs['sdcSmartTooltip'].length > 0) {
  49                     $elem.attr('tooltip-content', $attrs['sdcSmartTooltip']);
  50                 } else {
  51                     $attrs.$set('tooltip-content', $elem.text());
  52                 }
  53
  54                 //One possible problem arises when the ngIf is placed on the root element of the template.
  55                 //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.
  56                 //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
  57                 //whole template (even if only temporarily), which gets ignored (I am not sure if this is browser-specific behaviour), resulting in an empty template.
  58
  59                 // Remove ng-if attribute and its value (if we reach here, we pass ng-if (ng-if===true), so we can remove it).
  60                 $elem.removeAttr('ng-if');
  61                 $elem.removeAttr('data-ng-if');
  62
  63                 // Remove me (the directive from the element)
  64                 let template = $elem[0].outerHTML;
  65                 template = template.replace('sdc-smart-tooltip=""', '');
  66                 template = template.replace('sdc-smart-tooltip="' + $elem.text() + '"', '');
  67                 //console.log(template);
  68
  69                 let el = this.$compile(template)(scope);
  70                 console.log(el);
  71                 $elem.replaceWith(el);
  72             }
  73         });
  74     };
  75
  76     public static factory = ($compile:ng.ICompileService)=> {
  77         return new SmartTooltipDirective($compile);
  78     };
  79 }
  80
  81 SmartTooltipDirective.factory.$inject = ['$compile'];