From 3982f4f67314ec37fd9b22ae54049958af777c1b Mon Sep 17 00:00:00 2001 From: jimmydot Date: Sun, 7 May 2017 14:58:24 -0400 Subject: [VID-6] Initial rebase push Change-Id: I9077be9663754d9b22f77c6a7b3109b361b39346 Signed-off-by: jimmydot --- .../vid/scripts/directives/progressBarDirective.js | 173 +++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100755 vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js (limited to 'vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js') diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js b/vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js new file mode 100755 index 00000000..ed71436b --- /dev/null +++ b/vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js @@ -0,0 +1,173 @@ +/*- + * ============LICENSE_START======================================================= + * VID + * ================================================================================ + * 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========================================================= + */ + +"use strict"; + +/* + * "progressBarDirective.js" provides a progress bar directive. + * + * SYNTAX: + * + *
+ * + * "percentProgress" is the numeric percent progress to be displayed (0 to 100) + * expressed as a number only (i.e. no trailing "%"). An "scoped" Angular value + * can be used (e.g. "{{percentProgress}}"). + * + * Two additional attributes can also be included: + * + * increases-only="true | false" + * + * Normally, the progress bar always updates the display with whatever value is + * set. Alternatively, if "increases-only" is set to "true", the display will + * only be updated if "percentProgress" is >= the previous value. + * + * control="control" + * + * Provides a method ... $scope.control.reset()" ... that a controller can call + * to reset the progress to it's initial zero state. This would only expected to + * be needed if A) increases-only is set to true and B) there is a need to reset + * the controller to 0. If increases-only is set to false or not present, an + * alternative method of resetting the progress is to just tset percentProgress + * to 0. + * + * CAVEATS: + * + * 1) The extended attribute "ngx-show" should be used instead of "ng-show" if + * the control needs to be conditionally visible. Example: + * ngx-show="{{isProgressVisible}}" + * + * 2) $scope.control.reset() should be conditionally called as follows IF it is + * called immediately after HTML is rendered. This is due to a timing-related + * behavior. + * + * 3) The progress bar displays values of "0" and "100" if precentProgress is, + * respectively, less than 0 or greater than 100. + * + * CUSTOM STYLING: + * + * The ECOMP portal styling uses the class named "progress". The class + * attributes can be overridden in CSS. This example was tested: + * + * .progress { margin: 0px 10px; height: 40px } + * + * Additional styling can be applied to the progress-bar element. Example: + * + * div[progress-bar=""] { padding-top: 10px; } + * + * if (angular.isFunction($scope.control.reset)) { $scope.control.reset(); } + * + * DEPENDENCIES: + * + * This code assumes dependency files provided by the ECOMP Portal framework are + * included. For example, ".../app/fusion/external/ebz/sandbox/styles/base.css" + * is one required dependency. There may also be others. + */ + +var progressBarDirective = function() { + + var style = "font-weight: bold;"; + /* + * The 3 "aria-*" properties were added as per an Internet reference + * example. These appear to have no impact on current behavior but are + * retained for future reference. + */ + var properties = "class='progress-bar' role='progressbar' " + + "aria-valuenow='' aria-valuemin='0' aria-valuemax='100'"; + var previousValue = 0; + + var updateProgress = function(element, attrs, valueAsString) { + if (valueAsString === undefined || valueAsString === null + || valueAsString === "") { + valueAsString = "0"; + } + var valueAsInteger = parseInt(valueAsString); + if (valueAsInteger > 100) { + valueAsInteger = 100; + valueAsString = "100"; + } + if (attrs.increasesOnly === "true") { + if (valueAsInteger >= previousValue) { + previousValue = valueAsInteger; + } else { + return; + } + } + element.css("width", valueAsString + "%"); + if (valueAsInteger >= 100) { + element.removeClass("progress-bar-info").addClass( + "progress-bar-success"); + } else { + element.removeClass("progress-bar-success").addClass( + "progress-bar-info"); + } + if (valueAsInteger >= 5) { + element.html(valueAsString + " %"); + } else { + /* + * Hide text since color combination is barely visible when progress + * portion is narrow. + */ + element.html(""); + } + } + + return { + restrict : "EA", + transclude : true, + replace : true, + template : "
", + scope : { + control : "=", + progressBar : "@" + }, + link : function(scope, element, attrs) { + + /* + * It should be possible to alternatively add this wrapper in the + * template instead of using "element.wrap". Some techniques were + * attempted but were unsuccessful. + */ + element.wrap("