diff options
author | talasila <talasila@research.att.com> | 2017-02-07 15:03:57 -0500 |
---|---|---|
committer | talasila <talasila@research.att.com> | 2017-02-07 15:05:15 -0500 |
commit | 4ad39a5c96dd99acf819ce189b13fec946d7506b (patch) | |
tree | a1449286441947cc3d07a45227fa0d6f978e1a7d /ecomp-portal-FE/client/bower_components/angular-material/modules/js/progressCircular/progressCircular.js | |
parent | 5500448cbd1f374d0ac743ee2fd636fe2d3c0027 (diff) |
Initial OpenECOMP Portal commit
Change-Id: I804b80e0830c092e307da1599bd9fbb5c3e2da77
Signed-off-by: talasila <talasila@research.att.com>
Diffstat (limited to 'ecomp-portal-FE/client/bower_components/angular-material/modules/js/progressCircular/progressCircular.js')
-rw-r--r-- | ecomp-portal-FE/client/bower_components/angular-material/modules/js/progressCircular/progressCircular.js | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/bower_components/angular-material/modules/js/progressCircular/progressCircular.js b/ecomp-portal-FE/client/bower_components/angular-material/modules/js/progressCircular/progressCircular.js new file mode 100644 index 00000000..c59b6af5 --- /dev/null +++ b/ecomp-portal-FE/client/bower_components/angular-material/modules/js/progressCircular/progressCircular.js @@ -0,0 +1,110 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v0.9.8 + */ +(function( window, angular, undefined ){ +"use strict"; + +/** + * @ngdoc module + * @name material.components.progressCircular + * @description Circular Progress module! + */ +angular.module('material.components.progressCircular', [ + 'material.core' +]) + .directive('mdProgressCircular', MdProgressCircularDirective); + +/** + * @ngdoc directive + * @name mdProgressCircular + * @module material.components.progressCircular + * @restrict E + * +* @description + * The circular progress directive is used to make loading content in your app as delightful and + * painless as possible by minimizing the amount of visual change a user sees before they can view + * and interact with content. + * + * For operations where the percentage of the operation completed can be determined, use a + * determinate indicator. They give users a quick sense of how long an operation will take. + * + * For operations where the user is asked to wait a moment while something finishes up, and it’s + * not necessary to expose what's happening behind the scenes and how long it will take, use an + * indeterminate indicator. + * + * @param {string} md-mode Select from one of two modes: determinate and indeterminate. + * @param {number=} value In determinate mode, this number represents the percentage of the + * circular progress. Default: 0 + * @param {number=} md-diameter This specifies the diamter of the circular progress. Default: 48 + * + * @usage + * <hljs lang="html"> + * <md-progress-circular md-mode="determinate" value="..."></md-progress-circular> + * + * <md-progress-circular md-mode="determinate" ng-value="..."></md-progress-circular> + * + * <md-progress-circular md-mode="determinate" value="..." md-diameter="100"></md-progress-circular> + * + * <md-progress-circular md-mode="indeterminate"></md-progress-circular> + * </hljs> + */ +function MdProgressCircularDirective($mdConstant, $mdTheming) { + return { + restrict: 'E', + template: + // The progress 'circle' is composed of two half-circles: the left side and the right + // side. Each side has CSS applied to 'fill-in' the half-circle to the appropriate progress. + '<div class="md-spinner-wrapper">' + + '<div class="md-inner">' + + '<div class="md-gap"></div>' + + '<div class="md-left">' + + '<div class="md-half-circle"></div>' + + '</div>' + + '<div class="md-right">' + + '<div class="md-half-circle"></div>' + + '</div>' + + '</div>' + + '</div>', + compile: compile + }; + + function compile(tElement) { + // The javascript in this file is mainly responsible for setting the correct aria attributes. + // The animation of the progress spinner is done entirely with just CSS. + tElement.attr('aria-valuemin', 0); + tElement.attr('aria-valuemax', 100); + tElement.attr('role', 'progressbar'); + + return postLink; + } + + function postLink(scope, element, attr) { + $mdTheming(element); + var circle = element[0]; + + // Scale the progress circle based on the default diameter. + var diameter = attr.mdDiameter || 48; + var scale = diameter / 48; + circle.style[$mdConstant.CSS.TRANSFORM] = 'scale(' + scale + ')'; + + attr.$observe('value', function(value) { + var percentValue = clamp(value); + element.attr('aria-valuenow', percentValue); + }); + } + + /** + * Clamps the value to be between 0 and 100. + * @param {number} value The value to clamp. + * @returns {number} + */ + function clamp(value) { + return Math.max(0, Math.min(value || 0, 100)); + } +} +MdProgressCircularDirective.$inject = ["$mdConstant", "$mdTheming"]; + +})(window, window.angular);
\ No newline at end of file |