gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v1.1.3
   6  */
   7 (function( window, angular, undefined ){
   8 "use strict";
   9
  10 /**
  11  * @ngdoc module
  12  * @name material.components.progressLinear
  13  * @description Linear Progress module!
  14  */
  15 MdProgressLinearDirective['$inject'] = ["$mdTheming", "$mdUtil", "$log"];
  16 angular.module('material.components.progressLinear', [
  17   'material.core'
  18 ])
  19   .directive('mdProgressLinear', MdProgressLinearDirective);
  20
  21 /**
  22  * @ngdoc directive
  23  * @name mdProgressLinear
  24  * @module material.components.progressLinear
  25  * @restrict E
  26  *
  27  * @description
  28  * The linear progress directive is used to make loading content
  29  * in your app as delightful and painless as possible by minimizing
  30  * the amount of visual change a user sees before they can view
  31  * and interact with content.
  32  *
  33  * Each operation should only be represented by one activity indicator
  34  * For example: one refresh operation should not display both a
  35  * refresh bar and an activity circle.
  36  *
  37  * For operations where the percentage of the operation completed
  38  * can be determined, use a determinate indicator. They give users
  39  * a quick sense of how long an operation will take.
  40  *
  41  * For operations where the user is asked to wait a moment while
  42  * something finishes up, and it’s not necessary to expose what's
  43  * happening behind the scenes and how long it will take, use an
  44  * indeterminate indicator.
  45  *
  46  * @param {string} md-mode Select from one of four modes: determinate, indeterminate, buffer or query.
  47  *
  48  * Note: if the `md-mode` value is set as undefined or specified as 1 of the four (4) valid modes, then `indeterminate`
  49  * will be auto-applied as the mode.
  50  *
  51  * Note: if not configured, the `md-mode="indeterminate"` will be auto injected as an attribute. If `value=""` is also specified, however,
  52  * then `md-mode="determinate"` would be auto-injected instead.
  53  * @param {number=} value In determinate and buffer modes, this number represents the percentage of the primary progress bar. Default: 0
  54  * @param {number=} md-buffer-value In the buffer mode, this number represents the percentage of the secondary progress bar. Default: 0
  55  * @param {boolean=} ng-disabled Determines whether to disable the progress element.
  56  *
  57  * @usage
  58  * <hljs lang="html">
  59  * <md-progress-linear md-mode="determinate" value="..."></md-progress-linear>
  60  *
  61  * <md-progress-linear md-mode="determinate" ng-value="..."></md-progress-linear>
  62  *
  63  * <md-progress-linear md-mode="indeterminate"></md-progress-linear>
  64  *
  65  * <md-progress-linear md-mode="buffer" value="..." md-buffer-value="..."></md-progress-linear>
  66  *
  67  * <md-progress-linear md-mode="query"></md-progress-linear>
  68  * </hljs>
  69  */
  70 function MdProgressLinearDirective($mdTheming, $mdUtil, $log) {
  71   var MODE_DETERMINATE = "determinate";
  72   var MODE_INDETERMINATE = "indeterminate";
  73   var MODE_BUFFER = "buffer";
  74   var MODE_QUERY = "query";
  75   var DISABLED_CLASS = "_md-progress-linear-disabled";
  76
  77   return {
  78     restrict: 'E',
  79     template: '<div class="md-container">' +
  80       '<div class="md-dashed"></div>' +
  81       '<div class="md-bar md-bar1"></div>' +
  82       '<div class="md-bar md-bar2"></div>' +
  83       '</div>',
  84     compile: compile
  85   };
  86
  87   function compile(tElement, tAttrs, transclude) {
  88     tElement.attr('aria-valuemin', 0);
  89     tElement.attr('aria-valuemax', 100);
  90     tElement.attr('role', 'progressbar');
  91
  92     return postLink;
  93   }
  94   function postLink(scope, element, attr) {
  95     $mdTheming(element);
  96
  97     var lastMode;
  98     var isDisabled = attr.hasOwnProperty('disabled');
  99     var toVendorCSS = $mdUtil.dom.animator.toCss;
 100     var bar1 = angular.element(element[0].querySelector('.md-bar1'));
 101     var bar2 = angular.element(element[0].querySelector('.md-bar2'));
 102     var container = angular.element(element[0].querySelector('.md-container'));
 103
 104     element
 105       .attr('md-mode', mode())
 106       .toggleClass(DISABLED_CLASS, isDisabled);
 107
 108     validateMode();
 109     watchAttributes();
 110
 111     /**
 112      * Watch the value, md-buffer-value, and md-mode attributes
 113      */
 114     function watchAttributes() {
 115       attr.$observe('value', function(value) {
 116         var percentValue = clamp(value);
 117         element.attr('aria-valuenow', percentValue);
 118
 119         if (mode() != MODE_QUERY) animateIndicator(bar2, percentValue);
 120       });
 121
 122       attr.$observe('mdBufferValue', function(value) {
 123         animateIndicator(bar1, clamp(value));
 124       });
 125
 126       attr.$observe('disabled', function(value) {
 127         if (value === true || value === false) {
 128           isDisabled = !!value;
 129         } else {
 130           isDisabled = angular.isDefined(value);
 131         }
 132
 133         element.toggleClass(DISABLED_CLASS, isDisabled);
 134         container.toggleClass(lastMode, !isDisabled);
 135       });
 136
 137       attr.$observe('mdMode', function(mode) {
 138         if (lastMode) container.removeClass( lastMode );
 139
 140         switch( mode ) {
 141           case MODE_QUERY:
 142           case MODE_BUFFER:
 143           case MODE_DETERMINATE:
 144           case MODE_INDETERMINATE:
 145             container.addClass( lastMode = "md-mode-" + mode );
 146             break;
 147           default:
 148             container.addClass( lastMode = "md-mode-" + MODE_INDETERMINATE );
 149             break;
 150         }
 151       });
 152     }
 153
 154     /**
 155      * Auto-defaults the mode to either `determinate` or `indeterminate` mode; if not specified
 156      */
 157     function validateMode() {
 158       if ( angular.isUndefined(attr.mdMode) ) {
 159         var hasValue = angular.isDefined(attr.value);
 160         var mode = hasValue ? MODE_DETERMINATE : MODE_INDETERMINATE;
 161         var info = "Auto-adding the missing md-mode='{0}' to the ProgressLinear element";
 162
 163         //$log.debug( $mdUtil.supplant(info, [mode]) );
 164
 165         element.attr("md-mode", mode);
 166         attr.mdMode = mode;
 167       }
 168     }
 169
 170     /**
 171      * Is the md-mode a valid option?
 172      */
 173     function mode() {
 174       var value = (attr.mdMode || "").trim();
 175       if ( value ) {
 176         switch(value) {
 177           case MODE_DETERMINATE:
 178           case MODE_INDETERMINATE:
 179           case MODE_BUFFER:
 180           case MODE_QUERY:
 181             break;
 182           default:
 183             value = MODE_INDETERMINATE;
 184             break;
 185         }
 186       }
 187       return value;
 188     }
 189
 190     /**
 191      * Manually set CSS to animate the Determinate indicator based on the specified
 192      * percentage value (0-100).
 193      */
 194     function animateIndicator(target, value) {
 195       if ( isDisabled || !mode() ) return;
 196
 197       var to = $mdUtil.supplant("translateX({0}%) scale({1},1)", [ (value-100)/2, value/100 ]);
 198       var styles = toVendorCSS({ transform : to });
 199       angular.element(target).css( styles );
 200     }
 201   }
 202
 203   /**
 204    * Clamps the value to be between 0 and 100.
 205    * @param {number} value The value to clamp.
 206    * @returns {number}
 207    */
 208   function clamp(value) {
 209     return Math.max(0, Math.min(value || 0, 100));
 210   }
 211 }
 212
 213
 214 })(window, window.angular);