ecomp-portal-FE/client/bower_components/angular-material/modules/closure/checkbox/checkbox.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.checkbox');
   8 goog.require('ng.material.core');
   9 /**
  10  * @ngdoc module
  11  * @name material.components.checkbox
  12  * @description Checkbox module!
  13  */
  14 angular
  15   .module('material.components.checkbox', ['material.core'])
  16   .directive('mdCheckbox', MdCheckboxDirective);
  17
  18 /**
  19  * @ngdoc directive
  20  * @name mdCheckbox
  21  * @module material.components.checkbox
  22  * @restrict E
  23  *
  24  * @description
  25  * The checkbox directive is used like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
  26  *
  27  * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
  28  * the checkbox is in the accent color by default. The primary color palette may be used with
  29  * the `md-primary` class.
  30  *
  31  * @param {string} ng-model Assignable angular expression to data-bind to.
  32  * @param {string=} name Property name of the form under which the control is published.
  33  * @param {expression=} ng-true-value The value to which the expression should be set when selected.
  34  * @param {expression=} ng-false-value The value to which the expression should be set when not selected.
  35  * @param {string=} ng-change Angular expression to be executed when input changes due to user interaction with the input element.
  36  * @param {boolean=} md-no-ink Use of attribute indicates use of ripple ink effects
  37  * @param {string=} aria-label Adds label to checkbox for accessibility.
  38  * Defaults to checkbox's text. If no default text is found, a warning will be logged.
  39  *
  40  * @usage
  41  * <hljs lang="html">
  42  * <md-checkbox ng-model="isChecked" aria-label="Finished?">
  43  *   Finished ?
  44  * </md-checkbox>
  45  *
  46  * <md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
  47  *   No Ink Effects
  48  * </md-checkbox>
  49  *
  50  * <md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
  51  *   Disabled
  52  * </md-checkbox>
  53  *
  54  * </hljs>
  55  *
  56  */
  57 function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant, $mdTheming, $mdUtil, $timeout) {
  58   inputDirective = inputDirective[0];
  59   var CHECKED_CSS = 'md-checked';
  60
  61   return {
  62     restrict: 'E',
  63     transclude: true,
  64     require: '?ngModel',
  65     priority:210, // Run before ngAria
  66     template:
  67       '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
  68         '<div class="md-icon"></div>' +
  69       '</div>' +
  70       '<div ng-transclude class="md-label"></div>',
  71     compile: compile
  72   };
  73
  74   // **********************************************************
  75   // Private Methods
  76   // **********************************************************
  77
  78   function compile (tElement, tAttrs) {
  79
  80     tAttrs.type = 'checkbox';
  81     tAttrs.tabindex = tAttrs.tabindex || '0';
  82     tElement.attr('role', tAttrs.type);
  83
  84     return function postLink(scope, element, attr, ngModelCtrl) {
  85       ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
  86       $mdTheming(element);
  87
  88       if (attr.ngChecked) {
  89         scope.$watch(
  90             scope.$eval.bind(scope, attr.ngChecked),
  91             ngModelCtrl.$setViewValue.bind(ngModelCtrl)
  92         );
  93       }
  94       $$watchExpr('ngDisabled', 'tabindex', {
  95         true: '-1',
  96         false: attr.tabindex
  97       });
  98       $mdAria.expectWithText(element, 'aria-label');
  99
 100       // Reuse the original input[type=checkbox] directive from Angular core.
 101       // This is a bit hacky as we need our own event listener and own render
 102       // function.
 103       inputDirective.link.pre(scope, {
 104         on: angular.noop,
 105         0: {}
 106       }, attr, [ngModelCtrl]);
 107
 108       scope.mouseActive = false;
 109       element.on('click', listener)
 110         .on('keypress', keypressHandler)
 111         .on('mousedown', function() {
 112           scope.mouseActive = true;
 113           $timeout(function(){
 114             scope.mouseActive = false;
 115           }, 100);
 116         })
 117         .on('focus', function() {
 118           if(scope.mouseActive === false) { element.addClass('md-focused'); }
 119         })
 120         .on('blur', function() { element.removeClass('md-focused'); });
 121
 122       ngModelCtrl.$render = render;
 123
 124       function $$watchExpr(expr, htmlAttr, valueOpts) {
 125         if (attr[expr]) {
 126           scope.$watch(attr[expr], function(val) {
 127             if (valueOpts[val]) {
 128               element.attr(htmlAttr, valueOpts[val]);
 129             }
 130           });
 131         }
 132       }
 133
 134       function keypressHandler(ev) {
 135         var keyCode = ev.which || ev.keyCode;
 136         if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {
 137           ev.preventDefault();
 138           if (!element.hasClass('md-focused')) { element.addClass('md-focused'); }
 139           listener(ev);
 140         }
 141       }
 142       function listener(ev) {
 143         if (element[0].hasAttribute('disabled')) return;
 144
 145         scope.$apply(function() {
 146           // Toggle the checkbox value...
 147           var viewValue = attr.ngChecked ? attr.checked : !ngModelCtrl.$viewValue;
 148
 149           ngModelCtrl.$setViewValue( viewValue, ev && ev.type);
 150           ngModelCtrl.$render();
 151         });
 152       }
 153
 154       function render() {
 155         if(ngModelCtrl.$viewValue) {
 156           element.addClass(CHECKED_CSS);
 157         } else {
 158           element.removeClass(CHECKED_CSS);
 159         }
 160       }
 161     };
 162   }
 163 }
 164 MdCheckboxDirective.$inject = ["inputDirective", "$mdInkRipple", "$mdAria", "$mdConstant", "$mdTheming", "$mdUtil", "$timeout"];
 165
 166 ng.material.components.checkbox = angular.module("material.components.checkbox");