MODULE-TYPO

- Sass set-up - md-list - md-theming (install)
2026-05-19 18:35:25 +00:00 · 2015-01-16 07:52:29 -05:00
parent ec1b4b9b0c
commit f1d2b8cb75
312 changed files with 26839 additions and 1309 deletions
@@ -0,0 +1,73 @@
+md-checkbox.md-THEME_NAME-theme {
+
+  .md-ripple {
+    color: '{{accent-600}}';
+  }
+  &.md-checked .md-ripple {
+    color: '{{background-600}}';
+  }
+
+  .md-icon {
+    border-color: '{{foreground-2}}';
+  }
+  &.md-checked .md-icon {
+    background-color: '{{accent-color-0.87}}';
+  }
+
+  &.md-checked .md-icon:after {
+    border-color: '{{background-200}}';
+  }
+
+  &:not([disabled]) {
+    &.md-primary {
+      .md-ripple {
+        color: '{{primary-600}}';
+      }
+      &.md-checked .md-ripple {
+        color: '{{background-600}}';
+      }
+
+      .md-icon {
+        border-color: '{{foreground-2}}';
+      }
+      &.md-checked .md-icon {
+        background-color: '{{primary-color-0.87}}';
+      }
+
+      &.md-checked .md-icon:after {
+        border-color: '{{background-200}}';
+      }
+    }
+
+    &.md-warn {
+      .md-ripple {
+        color: '{{warn-600}}';
+      }
+      &.md-checked .md-ripple {
+        color: '{{background-600}}';
+      }
+
+      .md-icon {
+        border-color: '{{foreground-2}}';
+      }
+      &.md-checked .md-icon {
+        background-color: '{{warn-color-0.87}}';
+      }
+
+      &.md-checked .md-icon:after {
+        border-color: '{{background-200}}';
+      }
+    }
+  }
+
+  &[disabled] {
+    .md-icon {
+      border-color: '{{foreground-3}}';
+    }
+
+    &.md-checked .md-icon {
+      background-color: '{{foreground-3}}';
+    }
+  }
+
+}
@@ -0,0 +1,126 @@
+(function() {
+'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).
+ *
+ * @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) {
+  inputDirective = inputDirective[0];
+  var CHECKED_CSS = 'md-checked';
+
+  return {
+    restrict: 'E',
+    transclude: true,
+    require: '?ngModel',
+    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 = 0;
+    tElement.attr('role', tAttrs.type);
+
+    return function postLink(scope, element, attr, ngModelCtrl) {
+      ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
+      var checked = false;
+      $mdTheming(element);
+
+      $mdAria.expectWithText(tElement, '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]);
+
+      // Used by switch. in Switch, we don't want click listeners; we have more granular
+      // touchup/touchdown listening.
+      if (!attr.mdNoClick) {
+        element.on('click', listener);
+      }
+      element.on('keypress', keypressHandler);
+      ngModelCtrl.$render = render;
+
+      function keypressHandler(ev) {
+        if(ev.which === $mdConstant.KEY_CODE.SPACE) {
+          ev.preventDefault();
+          listener(ev);
+        }
+      }
+      function listener(ev) {
+        if (element[0].hasAttribute('disabled')) return;
+
+        scope.$apply(function() {
+          checked = !checked;
+          ngModelCtrl.$setViewValue(checked, ev && ev.type);
+          ngModelCtrl.$render();
+        });
+      }
+
+      function render() {
+        checked = ngModelCtrl.$viewValue;
+        if(checked) {
+          element.addClass(CHECKED_CSS);
+        } else {
+          element.removeClass(CHECKED_CSS);
+        }
+      }
+    };
+  }
+}
+
+})();
@@ -0,0 +1,91 @@
+$checkbox-width: 18px !default;
+$checkbox-height: $checkbox-width !default;
+
+md-checkbox {
+  display: block;
+  margin: 15px;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+
+  .md-container {
+    position: relative;
+    top: 4px;
+    display: inline-block;
+    width: $checkbox-width;
+    height: $checkbox-height;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      bottom: -10px;
+      left: -10px;
+    }
+
+    .md-ripple-container {
+      position: absolute;
+      display: block;
+      width: auto;
+      height: auto;
+      left: -15px;
+      top: -15px;
+      right: -15px;
+      bottom: -15px;
+    }
+  }
+
+  // unchecked
+  .md-icon {
+    transition: 240ms;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $checkbox-width;
+    height: $checkbox-height;
+    border: 2px solid;
+    border-radius: 2px;
+  }
+
+  &.md-checked .md-icon {
+    border: none;
+  }
+
+  // disabled
+  &[disabled] {
+    cursor: no-drop;
+  }
+
+  // focus
+  &:focus .md-label:not(:empty) {
+    border-color: black;
+  }
+
+
+  &.md-checked .md-icon:after {
+    transform: rotate(45deg);
+    position: absolute;
+    left: 6px;
+    top: 2px;
+    display: table;
+    width: 6px;
+    height: 12px;
+    border: 2px solid;
+    border-top: 0;
+    border-left: 0;
+    content: ' ';
+  }
+
+  .md-label {
+    border: 1px dotted transparent;
+    position: relative;
+    display: inline-block;
+    margin-left: 10px;
+    vertical-align: middle;
+    white-space: normal;
+    pointer-events: none;
+    user-select: text;
+  }
+}
@@ -0,0 +1,172 @@
+
+describe('mdCheckbox', function() {
+  var CHECKED_CSS = 'md-checked';
+
+  beforeEach(module('material.components.checkbox'));
+  beforeEach(module('ngAria'));
+  beforeEach(TestUtil.mockRaf);
+
+  it('should warn developers they need a label', inject(function($compile, $rootScope, $log){
+    spyOn($log, "warn");
+
+    var element = $compile('<div>' +
+                             '<md-checkbox ng-model="blue">' +
+                             '</md-checkbox>' +
+                           '</div>')($rootScope);
+
+    expect($log.warn).toHaveBeenCalled();
+  }));
+
+  it('should copy text content to aria-label', inject(function($compile, $rootScope){
+    var element = $compile('<div>' +
+                             '<md-checkbox ng-model="blue">' +
+                             'Some text' +
+                             '</md-checkbox>' +
+                           '</div>')($rootScope);
+
+    var cbElements = element.find('md-checkbox');
+    expect(cbElements.eq(0).attr('aria-label')).toBe('Some text');
+  }));
+
+  it('should set checked css class and aria-checked attributes', inject(function($compile, $rootScope) {
+    var element = $compile('<div>' +
+                             '<md-checkbox ng-model="blue">' +
+                             '</md-checkbox>' +
+                             '<md-checkbox ng-model="green">' +
+                             '</md-checkbox>' +
+                           '</div>')($rootScope);
+
+    $rootScope.$apply(function(){
+      $rootScope.blue = false;
+      $rootScope.green = true;
+    });
+
+    var cbElements = element.find('md-checkbox');
+
+    expect(cbElements.eq(0).hasClass(CHECKED_CSS)).toEqual(false);
+    expect(cbElements.eq(1).hasClass(CHECKED_CSS)).toEqual(true);
+    expect(cbElements.eq(0).attr('aria-checked')).toEqual('false');
+    expect(cbElements.eq(1).attr('aria-checked')).toEqual('true');
+    expect(cbElements.eq(0).attr('role')).toEqual('checkbox');
+  }));
+
+  it('should be disabled with disabled attr', inject(function($compile, $rootScope) {
+    var element = $compile('<div>' +
+                             '<md-checkbox ng-disabled="isDisabled" ng-model="blue">' +
+                             '</md-checkbox>' +
+                           '</div>')($rootScope);
+
+    var checkbox = element.find('md-checkbox');
+    $rootScope.$apply('isDisabled = true');
+
+    $rootScope.$apply('blue = false');
+
+    checkbox.triggerHandler('click');
+    expect($rootScope.blue).toBe(false);
+
+    $rootScope.$apply('isDisabled = false');
+
+    checkbox.triggerHandler('click');
+    expect($rootScope.blue).toBe(true);
+
+
+  }));
+
+  describe('ng core checkbox tests', function() {
+
+    var inputElm;
+    var scope;
+    var $compile;
+
+    beforeEach(inject(function(_$compile_, _$rootScope_) {
+      scope = _$rootScope_;
+      $compile = _$compile_;
+    }));
+
+    function compileInput(html) {
+      inputElm = $compile(html)(scope);
+    }
+
+    function isChecked(cbEl) {
+      return cbEl.hasClass(CHECKED_CSS);
+    }
+
+    it('should format booleans', function() {
+      compileInput('<md-checkbox ng-model="name" />');
+
+      scope.$apply("name = false");
+      expect(isChecked(inputElm)).toBe(false);
+
+      scope.$apply("name = true");
+      expect(isChecked(inputElm)).toBe(true);
+    });
+
+
+    it('should support type="checkbox" with non-standard capitalization', function() {
+      compileInput('<md-checkbox ng-model="checkbox" />');
+
+      inputElm.triggerHandler('click');
+      expect(scope.checkbox).toBe(true);
+
+      inputElm.triggerHandler('click');
+      expect(scope.checkbox).toBe(false);
+    });
+
+
+    it('should allow custom enumeration', function() {
+      compileInput('<md-checkbox ng-model="name" ng-true-value="\'y\'" ' +
+          'ng-false-value="\'n\'">');
+
+      scope.$apply("name = 'y'");
+      expect(isChecked(inputElm)).toBe(true);
+
+      scope.$apply("name = 'n'");
+      expect(isChecked(inputElm)).toBe(false);
+
+      scope.$apply("name = 'something else'");
+      expect(isChecked(inputElm)).toBe(false);
+
+      inputElm.triggerHandler('click');
+      expect(scope.name).toEqual('y');
+
+      inputElm.triggerHandler('click');
+      expect(scope.name).toEqual('n');
+    });
+
+
+    it('should throw if ngTrueValue is present and not a constant expression', function() {
+      expect(function() {
+        compileInput('<md-checkbox ng-model="value" ng-true-value="yes" />');
+      }).toThrow();
+    });
+
+
+    it('should throw if ngFalseValue is present and not a constant expression', function() {
+      expect(function() {
+        compileInput('<md-checkbox ng-model="value" ng-false-value="no" />');
+      }).toThrow();
+    });
+
+
+    it('should not throw if ngTrueValue or ngFalseValue are not present', function() {
+      expect(function() {
+        compileInput('<md-checkbox ng-model="value" />');
+      }).not.toThrow();
+    });
+
+
+    it('should be required if false', function() {
+      compileInput('<md-checkbox ng:model="value" required />');
+
+      inputElm.triggerHandler('click');
+      expect(isChecked(inputElm)).toBe(true);
+      expect(inputElm.hasClass('ng-valid')).toBe(true);
+
+      inputElm.triggerHandler('click');
+      expect(isChecked(inputElm)).toBe(false);
+      expect(inputElm.hasClass('ng-invalid')).toBe(true);
+    });
+
+  });
+
+});
@@ -0,0 +1,23 @@
+
+<div ng-controller="AppCtrl">
+
+  <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
+    Checkbox 1: {{ data.cb1 }}
+  </md-checkbox>
+
+  <md-checkbox ng-model="data.cb2" aria-label="Checkbox 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn">
+    Checkbox 2 (md-warn): {{ data.cb2 }}
+  </md-checkbox>
+
+  <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
+    Checkbox: Disabled
+  </md-checkbox>
+
+  <md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
+    Checkbox: Disabled, Checked
+  </md-checkbox>
+
+  <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
+    Checkbox (md-primary): No Ink
+  </md-checkbox>
+</div>
@@ -0,0 +1,13 @@
+
+angular.module('checkboxDemo1', ['ngMaterial'])
+
+.controller('AppCtrl', function($scope) {
+
+  $scope.data = {};
+  $scope.data.cb1 = true;
+  $scope.data.cb2 = false;
+  $scope.data.cb3 = false;
+  $scope.data.cb4 = false;
+  $scope.data.cb5 = false;
+
+});
@@ -0,0 +1,4 @@
+
+body {
+  padding: 20px;
+}