vid/src/main/webapp/app/vid/scripts/directives/progressBarDirective.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  * "progressBarDirective.js" provides a progress bar directive.
  25  *
  26  * SYNTAX:
  27  *
  28  * <div progress-bar value="percentProgress"></div>
  29  *
  30  * "percentProgress" is the numeric percent progress to be displayed (0 to 100)
  31  * expressed as a number only (i.e. no trailing "%"). An "scoped" Angular value
  32  * can be used (e.g. "{{percentProgress}}").
  33  *
  34  * Two additional attributes can also be included:
  35  *
  36  * increases-only="true | false"
  37  *
  38  * Normally, the progress bar always updates the display with whatever value is
  39  * set. Alternatively, if "increases-only" is set to "true", the display will
  40  * only be updated if "percentProgress" is >= the previous value.
  41  *
  42  * control="control"
  43  *
  44  * Provides a method ... $scope.control.reset()" ... that a controller can call
  45  * to reset the progress to it's initial zero state. This would only expected to
  46  * be needed if A) increases-only is set to true and B) there is a need to reset
  47  * the controller to 0. If increases-only is set to false or not present, an
  48  * alternative method of resetting the progress is to just tset percentProgress
  49  * to 0.
  50  *
  51  * CAVEATS:
  52  *
  53  * 1) The extended attribute "ngx-show" should be used instead of "ng-show" if
  54  * the control needs to be conditionally visible. Example:
  55  * ngx-show="{{isProgressVisible}}"
  56  *
  57  * 2) $scope.control.reset() should be conditionally called as follows IF it is
  58  * called immediately after HTML is rendered. This is due to a timing-related
  59  * behavior.
  60  *
  61  * 3) The progress bar displays values of "0" and "100" if precentProgress is,
  62  * respectively, less than 0 or greater than 100.
  63  *
  64  * CUSTOM STYLING:
  65  *
  66  * The ECOMP portal styling uses the class named "progress". The class
  67  * attributes can be overridden in CSS. This example was tested:
  68  *
  69  * .progress { margin: 0px 10px; height: 40px }
  70  *
  71  * Additional styling can be applied to the progress-bar element. Example:
  72  *
  73  * div[progress-bar=""] { padding-top: 10px; }
  74  *
  75  * if (angular.isFunction($scope.control.reset)) { $scope.control.reset(); }
  76  *
  77  * DEPENDENCIES:
  78  *
  79  * This code assumes dependency files provided by the ECOMP Portal framework are
  80  * included. For example, ".../app/fusion/external/ebz/sandbox/styles/base.css"
  81  * is one required dependency. There may also be others.
  82  */
  83
  84 var progressBarDirective = function() {
  85
  86     var style = "font-weight: bold;";
  87     /*
  88      * The 3 "aria-*" properties were added as per an Internet reference
  89      * example. These appear to have no impact on current behavior but are
  90      * retained for future reference.
  91      */
  92     var properties = "class='progress-bar' role='progressbar' "
  93             + "aria-valuenow='' aria-valuemin='0' aria-valuemax='100'";
  94     var previousValue = 0;
  95
  96     var updateProgress = function(element, attrs, valueAsString) {
  97         if (valueAsString === undefined || valueAsString === null
  98                 || valueAsString === "") {
  99             valueAsString = "0";
 100         }
 101         var valueAsInteger = parseInt(valueAsString);
 102         if (valueAsInteger > 100) {
 103             valueAsInteger = 100;
 104             valueAsString = "100";
 105         }
 106         if (attrs.increasesOnly === "true") {
 107             if (valueAsInteger >= previousValue) {
 108                 previousValue = valueAsInteger;
 109             } else {
 110                 return;
 111             }
 112         }
 113         element.css("width", valueAsString + "%");
 114         if (valueAsInteger >= 100) {
 115             element.removeClass("progress-bar-info").addClass(
 116                     "progress-bar-success");
 117         } else {
 118             element.removeClass("progress-bar-success").addClass(
 119                     "progress-bar-info");
 120         }
 121         if (valueAsInteger >= 5) {
 122             element.html(valueAsString + " %");
 123         } else {
 124             /*
 125              * Hide text since color combination is barely visible when progress
 126              * portion is narrow.
 127              */
 128             element.html("");
 129         }
 130     }
 131
 132     return {
 133         restrict : "EA",
 134         transclude : true,
 135         replace : true,
 136         template : "<div ng-transclude " + properties + " style='" + style
 137                 + "'></div>",
 138         scope : {
 139             control : "=",
 140             progressBar : "@"
 141         },
 142         link : function(scope, element, attrs) {
 143
 144             /*
 145              * It should be possible to alternatively add this wrapper in the
 146              * template instead of using "element.wrap". Some techniques were
 147              * attempted but were unsuccessful.
 148              */
 149             element.wrap("<div class='progress'></div");
 150
 151             var control = scope.control || {};
 152
 153             control.reset = function() {
 154                 previousValue = 0;
 155                 updateProgress(element, attrs, 0);
 156             }
 157
 158             attrs.$observe("value", function(valueString) {
 159                 updateProgress(element, attrs, valueString);
 160             });
 161
 162             attrs.$observe("ngxShow", function(valueString) {
 163                 if (valueString === "false") {
 164                     element.parent().hide();
 165                 } else {
 166                     element.parent().show();
 167                 }
 168             });
 169         }
 170     }
 171 }
 172
 173 app.directive("progressBar", progressBarDirective);