123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- /*!
- * Angular Material Design
- * https://github.com/angular/material
- * @license MIT
- * v0.11.4
- */
- (function( window, angular, undefined ){
- "use strict";
- /**
- * @ngdoc module
- * @name material.components.button
- * @description
- *
- * Button
- */
- angular
- .module('material.components.button', [ 'material.core' ])
- .directive('mdButton', MdButtonDirective);
- /**
- * @ngdoc directive
- * @name mdButton
- * @module material.components.button
- *
- * @restrict E
- *
- * @description
- * `<md-button>` is a button directive with optional ink ripples (default enabled).
- *
- * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it will
- * become a `<button>` element. As per the [Material Design specifications](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
- * the FAB button background is filled with the accent color [by default]. The primary color palette may be used with
- * the `md-primary` class.
- *
- * @param {boolean=} md-no-ink If present, disable ripple ink effects.
- * @param {expression=} ng-disabled En/Disable based on the expression
- * @param {string=} md-ripple-size Overrides the default ripple size logic. Options: `full`, `partial`, `auto`
- * @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.
- * If no default text is found, a warning will be logged.
- *
- * @usage
- *
- * Regular buttons:
- *
- * <hljs lang="html">
- * <md-button> Flat Button </md-button>
- * <md-button href="http://google.com"> Flat link </md-button>
- * <md-button class="md-raised"> Raised Button </md-button>
- * <md-button ng-disabled="true"> Disabled Button </md-button>
- * <md-button>
- * <md-icon md-svg-src="your/icon.svg"></md-icon>
- * Register Now
- * </md-button>
- * </hljs>
- *
- * FAB buttons:
- *
- * <hljs lang="html">
- * <md-button class="md-fab" aria-label="FAB">
- * <md-icon md-svg-src="your/icon.svg"></md-icon>
- * </md-button>
- * <!-- mini-FAB -->
- * <md-button class="md-fab md-mini" aria-label="Mini FAB">
- * <md-icon md-svg-src="your/icon.svg"></md-icon>
- * </md-button>
- * <!-- Button with SVG Icon -->
- * <md-button class="md-icon-button" aria-label="Custom Icon Button">
- * <md-icon md-svg-icon="path/to/your.svg"></md-icon>
- * </md-button>
- * </hljs>
- */
- function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
- return {
- restrict: 'EA',
- replace: true,
- transclude: true,
- template: getTemplate,
- link: postLink
- };
- function isAnchor(attr) {
- return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref) || angular.isDefined(attr.ngLink) || angular.isDefined(attr.uiSref);
- }
- function getTemplate(element, attr) {
- return isAnchor(attr) ?
- '<a class="md-button" ng-transclude></a>' :
- '<button class="md-button" ng-transclude></button>';
- }
- function postLink(scope, element, attr) {
- var node = element[0];
- $mdTheming(element);
- $mdButtonInkRipple.attach(scope, element);
- var elementHasText = node.textContent.trim();
- if (!elementHasText) {
- $mdAria.expect(element, 'aria-label');
- }
- // For anchor elements, we have to set tabindex manually when the
- // element is disabled
- if (isAnchor(attr) && angular.isDefined(attr.ngDisabled) ) {
- scope.$watch(attr.ngDisabled, function(isDisabled) {
- element.attr('tabindex', isDisabled ? -1 : 0);
- });
- }
- // disabling click event when disabled is true
- element.on('click', function(e){
- if (attr.disabled === true) {
- e.preventDefault();
- e.stopImmediatePropagation();
- }
- });
- // restrict focus styles to the keyboard
- scope.mouseActive = false;
- element.on('mousedown', function() {
- scope.mouseActive = true;
- $timeout(function(){
- scope.mouseActive = false;
- }, 100);
- })
- .on('focus', function() {
- if (scope.mouseActive === false) {
- element.addClass('md-focused');
- }
- })
- .on('blur', function(ev) {
- element.removeClass('md-focused');
- });
- }
- }
- MdButtonDirective.$inject = ["$mdButtonInkRipple", "$mdTheming", "$mdAria", "$timeout"];
- })(window, window.angular);
|