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