diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/utils/smart-tooltip')
-rw-r--r-- | catalog-ui/app/scripts/directives/utils/smart-tooltip/smart-tooltip.ts | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/utils/smart-tooltip/smart-tooltip.ts b/catalog-ui/app/scripts/directives/utils/smart-tooltip/smart-tooltip.ts new file mode 100644 index 0000000000..49a57245e7 --- /dev/null +++ b/catalog-ui/app/scripts/directives/utils/smart-tooltip/smart-tooltip.ts @@ -0,0 +1,85 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// <reference path="../../../references"/> +module Sdc.Directives { + 'use strict'; + + export interface ISmartTooltipScope extends ng.IScope { + sdcSmartToolip; + } + + export class SmartTooltipDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService, + 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 = ($templateCache:ng.ITemplateCacheService, $compile:ng.ICompileService)=> { + return new SmartTooltipDirective($templateCache, $compile); + }; + + } + + SmartTooltipDirective.factory.$inject = ['$templateCache', '$compile']; +} |