--- /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