From 451a3400b76511393c62a444f588a4ed15f4a549 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 19 Feb 2017 10:28:42 +0200 Subject: Initial OpenECOMP SDC commit Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando --- .../directives/ellipsis/ellipsis-directive.html | 7 ++ .../directives/ellipsis/ellipsis-directive.less | 10 +++ .../directives/ellipsis/ellipsis-directive.ts | 80 ++++++++++++++++++++++ 3 files changed, 97 insertions(+) create mode 100644 catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.html create mode 100644 catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.less create mode 100644 catalog-ui/app/scripts/directives/ellipsis/ellipsis-directive.ts (limited to 'catalog-ui/app/scripts/directives/ellipsis') 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}} + + + {{collapsed ? "More" : "Less"}} + 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========================================================= + */ +/// +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']; +} -- cgit 1.2.3-korg