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

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v0.9.8
   6  */
   7 (function( window, angular, undefined ){
   8 "use strict";
   9
  10 /**
  11  * @ngdoc module
  12  * @name material.components.button
  13  * @description
  14  *
  15  * Button
  16  */
  17 angular
  18     .module('material.components.button', [ 'material.core' ])
  19     .directive('mdButton', MdButtonDirective);
  20
  21 /**
  22  * @ngdoc directive
  23  * @name mdButton
  24  * @module material.components.button
  25  *
  26  * @restrict E
  27  *
  28  * @description
  29  * `<md-button>` is a button directive with optional ink ripples (default enabled).
  30  *
  31  * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it will
  32  * become a `<button>` element. As per the [Material Design specifications](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
  33  * the FAB button background is filled with the accent color [by default]. The primary color palette may be used with
  34  * the `md-primary` class.
  35  *
  36  * @param {boolean=} md-no-ink If present, disable ripple ink effects.
  37  * @param {expression=} ng-disabled En/Disable based on the expression
  38  * @param {string=} md-ripple-size Overrides the default ripple size logic. Options: `full`, `partial`, `auto`
  39  * @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.
  40  * If no default text is found, a warning will be logged.
  41  *
  42  * @usage
  43  *
  44  * Regular buttons:
  45  *
  46  * <hljs lang="html">
  47  *  <md-button> Flat Button </md-button>
  48  *  <md-button href="http://google.com"> Flat link </md-button>
  49  *  <md-button class="md-raised"> Raised Button </md-button>
  50  *  <md-button ng-disabled="true"> Disabled Button </md-button>
  51  *  <md-button>
  52  *    <md-icon md-svg-src="your/icon.svg"></md-icon>
  53  *    Register Now
  54  *  </md-button>
  55  * </hljs>
  56  *
  57  * FAB buttons:
  58  *
  59  * <hljs lang="html">
  60  *  <md-button class="md-fab" aria-label="FAB">
  61  *    <md-icon md-svg-src="your/icon.svg"></md-icon>
  62  *  </md-button>
  63  *  <!-- mini-FAB -->
  64  *  <md-button class="md-fab md-mini" aria-label="Mini FAB">
  65  *    <md-icon md-svg-src="your/icon.svg"></md-icon>
  66  *  </md-button>
  67  *  <!-- Button with SVG Icon -->
  68  *  <md-button class="md-icon-button" aria-label="Custom Icon Button">
  69  *    <md-icon md-svg-icon="path/to/your.svg"></md-icon>
  70  *  </md-button>
  71  * </hljs>
  72  */
  73 function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
  74
  75   return {
  76     restrict: 'EA',
  77     replace: true,
  78     transclude: true,
  79     template: getTemplate,
  80     link: postLink
  81   };
  82
  83   function isAnchor(attr) {
  84     return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref) || angular.isDefined(attr.ngLink) || angular.isDefined(attr.uiSref);
  85   }
  86
  87   function getTemplate(element, attr) {
  88     return isAnchor(attr) ?
  89            '<a class="md-button" ng-transclude></a>' :
  90            '<button class="md-button" ng-transclude></button>';
  91   }
  92
  93   function postLink(scope, element, attr) {
  94     var node = element[0];
  95     $mdTheming(element);
  96     $mdButtonInkRipple.attach(scope, element);
  97
  98     var elementHasText = node.textContent.trim();
  99     if (!elementHasText) {
 100       $mdAria.expect(element, 'aria-label');
 101     }
 102
 103     // For anchor elements, we have to set tabindex manually when the
 104     // element is disabled
 105     if (isAnchor(attr) && angular.isDefined(attr.ngDisabled) ) {
 106       scope.$watch(attr.ngDisabled, function(isDisabled) {
 107         element.attr('tabindex', isDisabled ? -1 : 0);
 108       });
 109     }
 110
 111     // disabling click event when disabled is true
 112     element.on('click', function(e){
 113       if (attr.disabled === true) {
 114         e.preventDefault();
 115         e.stopImmediatePropagation();
 116       }
 117     });
 118
 119     // restrict focus styles to the keyboard
 120     scope.mouseActive = false;
 121     element.on('mousedown', function() {
 122         scope.mouseActive = true;
 123         $timeout(function(){
 124           scope.mouseActive = false;
 125         }, 100);
 126       })
 127       .on('focus', function() {
 128         if(scope.mouseActive === false) { element.addClass('md-focused'); }
 129       })
 130       .on('blur', function() { element.removeClass('md-focused'); });
 131   }
 132
 133 }
 134 MdButtonDirective.$inject = ["$mdButtonInkRipple", "$mdTheming", "$mdAria", "$timeout"];
 135
 136 })(window, window.angular);