vid/src/main/webapp/app/vid/scripts/directives/extensionsDirective.js

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * VID
   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 /*
  24  * Defines "extensions" to standard Angular directives. Provides attributes that
  25  * can be included in HTML tags.
  26  *
  27  * SYNTAX: ngx-enabled="true | false"
  28  *
  29  * Enables / disables an element. Currently only supports button elements that
  30  * include the "att-button" element. This extension was added since the similar
  31  * standard Angular "ng-disabled" attribute does not handle buttons that use the
  32  * ECOMP styling.
  33  *
  34  * SYNTAX: ngx-visible="true | false"
  35  *
  36  * Sets an element to visible / hidden. Different from ng-show / ng-hide as
  37  * follows:
  38  *
  39  * ng-show=false or ng-hide=true - Element is completely hidden.
  40  *
  41  * ngx-visible=false - Element is not displayed. However, a blank area is
  42  * displayed where the element would display if ngx-visible is set to true.
  43  */
  44
  45 app.directive('ngxEnabled', function() {
  46     return {
  47         restrict : "A",
  48         link : function(scope, element, attrs) {
  49             attrs.$observe("ngxEnabled", function(value) {
  50                 if (attrs.attButton === "") {
  51                     if (value === "true") {
  52                         element.attr("btn-type", "primary").removeClass(
  53                                 "button--inactive").addClass("button--primary")
  54                                 .prop('disabled', false);
  55                     } else {
  56                         element.attr("btn-type", "disabled").removeClass(
  57                                 "button--primary").addClass("button--inactive")
  58                                 .prop('disabled', true);
  59                     }
  60                 }
  61             });
  62         }
  63     }
  64 });
  65
  66 app.directive('ngxVisible', function() {
  67     return {
  68         restrict : "A",
  69         link : function(scope, element, attrs) {
  70             attrs.$observe("ngxVisible", function(value) {
  71                 if (value === "true") {
  72                     element.css("visibility", "visible");
  73                 } else {
  74                     element.css("visibility", "hidden");
  75                 }
  76             });
  77         }
  78     }
  79 });