ecomp-portal-FE/client/bower_components/angular-material/modules/closure/progressCircular/progressCircular.js

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v0.9.8
   6  */
   7 goog.provide('ng.material.components.progressCircular');
   8 goog.require('ng.material.core');
   9 /**
  10  * @ngdoc module
  11  * @name material.components.progressCircular
  12  * @description Circular Progress module!
  13  */
  14 angular.module('material.components.progressCircular', [
  15   'material.core'
  16 ])
  17   .directive('mdProgressCircular', MdProgressCircularDirective);
  18
  19 /**
  20  * @ngdoc directive
  21  * @name mdProgressCircular
  22  * @module material.components.progressCircular
  23  * @restrict E
  24  *
  25 * @description
  26  * The circular progress directive is used to make loading content in your app as delightful and
  27  * painless as possible by minimizing the amount of visual change a user sees before they can view
  28  * and interact with content.
  29  *
  30  * For operations where the percentage of the operation completed can be determined, use a
  31  * determinate indicator. They give users a quick sense of how long an operation will take.
  32  *
  33  * For operations where the user is asked to wait a moment while something finishes up, and it’s
  34  * not necessary to expose what's happening behind the scenes and how long it will take, use an
  35  * indeterminate indicator.
  36  *
  37  * @param {string} md-mode Select from one of two modes: determinate and indeterminate.
  38  * @param {number=} value In determinate mode, this number represents the percentage of the
  39  *     circular progress. Default: 0
  40  * @param {number=} md-diameter This specifies the diamter of the circular progress. Default: 48
  41  *
  42  * @usage
  43  * <hljs lang="html">
  44  * <md-progress-circular md-mode="determinate" value="..."></md-progress-circular>
  45  *
  46  * <md-progress-circular md-mode="determinate" ng-value="..."></md-progress-circular>
  47  *
  48  * <md-progress-circular md-mode="determinate" value="..." md-diameter="100"></md-progress-circular>
  49  *
  50  * <md-progress-circular md-mode="indeterminate"></md-progress-circular>
  51  * </hljs>
  52  */
  53 function MdProgressCircularDirective($mdConstant, $mdTheming) {
  54   return {
  55     restrict: 'E',
  56     template:
  57         // The progress 'circle' is composed of two half-circles: the left side and the right
  58         // side. Each side has CSS applied to 'fill-in' the half-circle to the appropriate progress.
  59         '<div class="md-spinner-wrapper">' +
  60           '<div class="md-inner">' +
  61             '<div class="md-gap"></div>' +
  62             '<div class="md-left">' +
  63               '<div class="md-half-circle"></div>' +
  64             '</div>' +
  65             '<div class="md-right">' +
  66               '<div class="md-half-circle"></div>' +
  67             '</div>' +
  68           '</div>' +
  69         '</div>',
  70     compile: compile
  71   };
  72
  73   function compile(tElement) {
  74     // The javascript in this file is mainly responsible for setting the correct aria attributes.
  75     // The animation of the progress spinner is done entirely with just CSS.
  76     tElement.attr('aria-valuemin', 0);
  77     tElement.attr('aria-valuemax', 100);
  78     tElement.attr('role', 'progressbar');
  79
  80     return postLink;
  81   }
  82
  83   function postLink(scope, element, attr) {
  84     $mdTheming(element);
  85     var circle = element[0];
  86
  87     // Scale the progress circle based on the default diameter.
  88     var diameter = attr.mdDiameter || 48;
  89     var scale = diameter / 48;
  90     circle.style[$mdConstant.CSS.TRANSFORM] = 'scale(' + scale + ')';
  91
  92     attr.$observe('value', function(value) {
  93       var percentValue = clamp(value);
  94       element.attr('aria-valuenow', percentValue);
  95     });
  96   }
  97
  98   /**
  99    * Clamps the value to be between 0 and 100.
 100    * @param {number} value The value to clamp.
 101    * @returns {number}
 102    */
 103   function clamp(value) {
 104     return Math.max(0, Math.min(value || 0, 100));
 105   }
 106 }
 107 MdProgressCircularDirective.$inject = ["$mdConstant", "$mdTheming"];
 108
 109 ng.material.components.progressCircular = angular.module("material.components.progressCircular");