catalog-ui/src/app/directives/ellipsis/ellipsis-directive.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 export interface IEllipsisScope extends ng.IScope {
  23     ellipsis:string;
  24     maxChars:number;
  25     toggleText():void;
  26     collapsed:boolean;
  27     actualText:string;
  28
  29 }
  30
  31 export class EllipsisDirective implements ng.IDirective {
  32
  33     constructor() {
  34     }
  35
  36     scope = {
  37         ellipsis: '=',
  38         moreClass: '@',
  39         maxChars: '='
  40     };
  41
  42     replace = false;
  43     restrict = 'A';
  44     template = ():string => {
  45         return require('./ellipsis-directive.html');
  46     };
  47
  48     link = (scope:IEllipsisScope, $elem:any) => {
  49
  50
  51         scope.collapsed = true;
  52
  53         scope.onMoreLessClick = (event): void => {
  54             event.stopPropagation();
  55             scope.collapsed = !scope.collapsed;
  56             scope.toggleText();
  57         };
  58
  59         scope.toggleText = ():void => {
  60             if (scope.ellipsis && scope.collapsed) {
  61                 scope.actualText = scope.ellipsis.substr(0, scope.maxChars);
  62                 scope.actualText += scope.ellipsis.length > scope.maxChars ? '...' : '';
  63             }
  64             else {
  65                 scope.actualText = scope.ellipsis;
  66             }
  67         };
  68
  69         scope.$watch("ellipsis", function () {
  70             scope.collapsed = true;
  71             scope.toggleText();
  72         });
  73
  74
  75     };
  76
  77     public static factory = ()=> {
  78         return new EllipsisDirective();
  79     };
  80
  81 }
  82
  83 EllipsisDirective.factory.$inject = [];