diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/ellipsis')
3 files changed, 97 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.html b/catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.html new file mode 100644 index 0000000000..31fa06adda --- /dev/null +++ b/catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.html @@ -0,0 +1,7 @@ +{{actualText}} + +<span class="ellipsis-directive-more-less" + data-ng-click="collapsed = !collapsed; toggleText()" + data-ng-hide="ellipsis.length <= maxChars"> + {{collapsed ? "More" : "Less"}} +</span> diff --git a/catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.less b/catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.less new file mode 100644 index 0000000000..d8dfdbb73b --- /dev/null +++ b/catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.less @@ -0,0 +1,10 @@ +.ellipsis-directive-more-less { + .a_9; + .bold; + .hand; + float: right; + margin-right: 17px; + line-height: 23px; + text-decoration: underline; + text-align: left; +} diff --git a/catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.ts b/catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.ts new file mode 100644 index 0000000000..a5ccf248e0 --- /dev/null +++ b/catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.ts @@ -0,0 +1,80 @@ +/*- + * ============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 IEllipsisScope extends ng.IScope { + ellipsis: string; + maxChars: number; + toggleText(): void; + collapsed: boolean; + actualText: string; + + } + + export class EllipsisDirective implements ng.IDirective { + + constructor(private $templateCache: ng.ITemplateCacheService) {} + + scope = { + ellipsis: '=', + moreClass: '@', + maxChars: '=' + }; + + replace = false; + restrict = 'A'; + template = (): string => { + return this.$templateCache.get('/app/scripts/directives/ellipsis/ellipsis-directive.html'); + }; + + link = (scope:IEllipsisScope, $elem:any) => { + + + scope.collapsed = true; + + scope.toggleText = (): void => { + if(scope.ellipsis && scope.collapsed) { + scope.actualText = scope.ellipsis.substr(0, scope.maxChars); + scope.actualText += scope.ellipsis.length > scope.maxChars ? '...' : ''; + } + else + { + scope.actualText = scope.ellipsis; + } + }; + + scope.$watch("ellipsis", function(){ + scope.collapsed = true; + scope.toggleText(); + }); + + + + }; + + public static factory = ($templateCache: ng.ITemplateCacheService)=> { + return new EllipsisDirective($templateCache); + }; + + } + + EllipsisDirective.factory.$inject = ['$templateCache']; +} |