| /*! |
| * Angular Material Design |
| * https://github.com/angular/material |
| * @license MIT |
| * v1.0.1 |
| */ |
| (function( window, angular, undefined ){ |
| "use strict"; |
| |
| /** |
| * @ngdoc module |
| * @name material.components.checkbox |
| * @description Checkbox module! |
| */ |
| angular |
| .module('material.components.checkbox', ['material.core']) |
| .directive('mdCheckbox', MdCheckboxDirective); |
| |
| /** |
| * @ngdoc directive |
| * @name mdCheckbox |
| * @module material.components.checkbox |
| * @restrict E |
| * |
| * @description |
| * The checkbox directive is used like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D). |
| * |
| * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application) |
| * the checkbox is in the accent color by default. The primary color palette may be used with |
| * the `md-primary` class. |
| * |
| * @param {string} ng-model Assignable angular expression to data-bind to. |
| * @param {string=} name Property name of the form under which the control is published. |
| * @param {expression=} ng-true-value The value to which the expression should be set when selected. |
| * @param {expression=} ng-false-value The value to which the expression should be set when not selected. |
| * @param {string=} ng-change Angular expression to be executed when input changes due to user interaction with the input element. |
| * @param {boolean=} md-no-ink Use of attribute indicates use of ripple ink effects |
| * @param {string=} aria-label Adds label to checkbox for accessibility. |
| * Defaults to checkbox's text. If no default text is found, a warning will be logged. |
| * |
| * @usage |
| * <hljs lang="html"> |
| * <md-checkbox ng-model="isChecked" aria-label="Finished?"> |
| * Finished ? |
| * </md-checkbox> |
| * |
| * <md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects"> |
| * No Ink Effects |
| * </md-checkbox> |
| * |
| * <md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled"> |
| * Disabled |
| * </md-checkbox> |
| * |
| * </hljs> |
| * |
| */ |
| function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $mdUtil, $timeout) { |
| inputDirective = inputDirective[0]; |
| var CHECKED_CSS = 'md-checked'; |
| |
| return { |
| restrict: 'E', |
| transclude: true, |
| require: '?ngModel', |
| priority: 210, // Run before ngAria |
| template: |
| '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' + |
| '<div class="md-icon"></div>' + |
| '</div>' + |
| '<div ng-transclude class="md-label"></div>', |
| compile: compile |
| }; |
| |
| // ********************************************************** |
| // Private Methods |
| // ********************************************************** |
| |
| function compile (tElement, tAttrs) { |
| |
| tAttrs.type = 'checkbox'; |
| tAttrs.tabindex = tAttrs.tabindex || '0'; |
| tElement.attr('role', tAttrs.type); |
| |
| // Attach a click handler in compile in order to immediately stop propagation |
| // (especially for ng-click) when the checkbox is disabled. |
| tElement.on('click', function(event) { |
| if (this.hasAttribute('disabled')) { |
| event.stopImmediatePropagation(); |
| } |
| }); |
| |
| return function postLink(scope, element, attr, ngModelCtrl) { |
| ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel(); |
| $mdTheming(element); |
| |
| if (attr.ngChecked) { |
| scope.$watch( |
| scope.$eval.bind(scope, attr.ngChecked), |
| ngModelCtrl.$setViewValue.bind(ngModelCtrl) |
| ); |
| } |
| |
| $$watchExpr('ngDisabled', 'tabindex', { |
| true: '-1', |
| false: attr.tabindex |
| }); |
| |
| $mdAria.expectWithText(element, 'aria-label'); |
| |
| // Reuse the original input[type=checkbox] directive from Angular core. |
| // This is a bit hacky as we need our own event listener and own render |
| // function. |
| inputDirective.link.pre(scope, { |
| on: angular.noop, |
| 0: {} |
| }, attr, [ngModelCtrl]); |
| |
| scope.mouseActive = false; |
| element.on('click', listener) |
| .on('keypress', keypressHandler) |
| .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() { |
| element.removeClass('md-focused'); |
| }); |
| |
| ngModelCtrl.$render = render; |
| |
| function $$watchExpr(expr, htmlAttr, valueOpts) { |
| if (attr[expr]) { |
| scope.$watch(attr[expr], function(val) { |
| if (valueOpts[val]) { |
| element.attr(htmlAttr, valueOpts[val]); |
| } |
| }); |
| } |
| } |
| |
| function keypressHandler(ev) { |
| var keyCode = ev.which || ev.keyCode; |
| if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) { |
| ev.preventDefault(); |
| |
| if (!element.hasClass('md-focused')) { |
| element.addClass('md-focused'); |
| } |
| |
| listener(ev); |
| } |
| } |
| function listener(ev) { |
| if (element[0].hasAttribute('disabled')) { |
| return; |
| } |
| |
| scope.$apply(function() { |
| // Toggle the checkbox value... |
| var viewValue = attr.ngChecked ? attr.checked : !ngModelCtrl.$viewValue; |
| |
| ngModelCtrl.$setViewValue( viewValue, ev && ev.type); |
| ngModelCtrl.$render(); |
| }); |
| } |
| |
| function render() { |
| if(ngModelCtrl.$viewValue) { |
| element.addClass(CHECKED_CSS); |
| } else { |
| element.removeClass(CHECKED_CSS); |
| } |
| } |
| }; |
| } |
| } |
| MdCheckboxDirective.$inject = ["inputDirective", "$mdAria", "$mdConstant", "$mdTheming", "$mdUtil", "$timeout"]; |
| |
| })(window, window.angular); |