vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js

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