+++ /dev/null
-/*!
- * Angular Material Design
- * https://github.com/angular/material
- * @license MIT
- * v0.9.8
- */
-goog.provide('ng.material.components.checkbox');
-goog.require('ng.material.core');
-/**
- * @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, $mdInkRipple, $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);
-
- 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", "$mdInkRipple", "$mdAria", "$mdConstant", "$mdTheming", "$mdUtil", "$timeout"];
-
-ng.material.components.checkbox = angular.module("material.components.checkbox");
\ No newline at end of file
Code Review / portal.git / blobdiff