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