diff options
author | 2017-05-07 14:58:24 -0400 | |
---|---|---|
committer | 2017-05-07 14:58:24 -0400 | |
commit | 3982f4f67314ec37fd9b22ae54049958af777c1b (patch) | |
tree | 72111b7c13ee7529cce1ea4c8d83c89fdd164450 /vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js | |
parent | 00e0d25933699f9e39c3f0b86c983165a1e3e330 (diff) |
[VID-6] Initial rebase push
Change-Id: I9077be9663754d9b22f77c6a7b3109b361b39346
Signed-off-by: jimmydot <jf2512@att.com>
Diffstat (limited to 'vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js')
-rwxr-xr-x | vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js | 173 |
1 files changed, 173 insertions, 0 deletions
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:
+ *
+ * <div progress-bar value="percentProgress"></div>
+ *
+ * "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 : "<div ng-transclude " + properties + " style='" + style
+ + "'></div>",
+ 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("<div class='progress'></div");
+
+ var control = scope.control || {};
+
+ control.reset = function() {
+ previousValue = 0;
+ updateProgress(element, attrs, 0);
+ }
+
+ attrs.$observe("value", function(valueString) {
+ updateProgress(element, attrs, valueString);
+ });
+
+ attrs.$observe("ngxShow", function(valueString) {
+ if (valueString === "false") {
+ element.parent().hide();
+ } else {
+ element.parent().show();
+ }
+ });
+ }
+ }
+}
+
+appDS2.directive("progressBar", progressBarDirective);
|