2 * Angular Material Design
3 * https://github.com/angular/material
7 goog.provide('ng.material.components.switch');
8 goog.require('ng.material.components.checkbox');
9 goog.require('ng.material.core');
13 * @name material.components.switch
16 angular.module('material.components.switch', [
18 'material.components.checkbox'
20 .directive('mdSwitch', MdSwitch);
25 * @module material.components.switch
29 * The switch directive is used very much like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
31 * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
32 * the switch is in the accent color by default. The primary color palette may be used with
33 * the `md-primary` class.
35 * @param {string} ng-model Assignable angular expression to data-bind to.
36 * @param {string=} name Property name of the form under which the control is published.
37 * @param {expression=} ng-true-value The value to which the expression should be set when selected.
38 * @param {expression=} ng-false-value The value to which the expression should be set when not selected.
39 * @param {string=} ng-change Angular expression to be executed when input changes due to user interaction with the input element.
40 * @param {boolean=} md-no-ink Use of attribute indicates use of ripple ink effects.
41 * @param {string=} aria-label Publish the button label used by screen-readers for accessibility. Defaults to the switch's text.
45 * <md-switch ng-model="isActive" aria-label="Finished?">
49 * <md-switch md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
53 * <md-switch ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
59 function MdSwitch(mdCheckboxDirective, $mdTheming, $mdUtil, $document, $mdConstant, $parse, $$rAF, $mdGesture) {
60 var checkboxDirective = mdCheckboxDirective[0];
64 priority:210, // Run before ngAria
67 '<div class="md-container">' +
68 '<div class="md-bar"></div>' +
69 '<div class="md-thumb-container">' +
70 '<div class="md-thumb" md-ink-ripple md-ink-ripple-checkbox></div>' +
73 '<div ng-transclude class="md-label">' +
79 function compile(element, attr) {
80 var checkboxLink = checkboxDirective.compile(element, attr);
81 // no transition on initial load
82 element.addClass('md-dragging');
84 return function (scope, element, attr, ngModel) {
85 ngModel = ngModel || $mdUtil.fakeNgModel();
86 var disabledGetter = $parse(attr.ngDisabled);
87 var thumbContainer = angular.element(element[0].querySelector('.md-thumb-container'));
88 var switchContainer = angular.element(element[0].querySelector('.md-container'));
90 // no transition on initial load
92 element.removeClass('md-dragging');
95 checkboxLink(scope, element, attr, ngModel);
97 if (angular.isDefined(attr.ngDisabled)) {
98 scope.$watch(disabledGetter, function(isDisabled) {
99 element.attr('tabindex', isDisabled ? -1 : 0);
103 // These events are triggered by setup drag
104 $mdGesture.register(switchContainer, 'drag');
106 .on('$md.dragstart', onDragStart)
107 .on('$md.drag', onDrag)
108 .on('$md.dragend', onDragEnd);
111 function onDragStart(ev) {
112 // Don't go if ng-disabled===true
113 if (disabledGetter(scope)) return;
114 ev.stopPropagation();
116 element.addClass('md-dragging');
118 width: thumbContainer.prop('offsetWidth')
120 element.removeClass('transition');
123 function onDrag(ev) {
125 ev.stopPropagation();
126 ev.srcEvent && ev.srcEvent.preventDefault();
128 var percent = ev.pointer.distanceX / drag.width;
130 //if checked, start from right. else, start from left
131 var translate = ngModel.$viewValue ? 1 + percent : percent;
132 // Make sure the switch stays inside its bounds, 0-1%
133 translate = Math.max(0, Math.min(1, translate));
135 thumbContainer.css($mdConstant.CSS.TRANSFORM, 'translate3d(' + (100*translate) + '%,0,0)');
136 drag.translate = translate;
139 function onDragEnd(ev) {
141 ev.stopPropagation();
143 element.removeClass('md-dragging');
144 thumbContainer.css($mdConstant.CSS.TRANSFORM, '');
146 // We changed if there is no distance (this is a click a click),
147 // or if the drag distance is >50% of the total.
148 var isChanged = ngModel.$viewValue ? drag.translate < 0.5 : drag.translate > 0.5;
150 applyModelValue(!ngModel.$viewValue);
155 function applyModelValue(newValue) {
156 scope.$apply(function() {
157 ngModel.$setViewValue(newValue);
167 MdSwitch.$inject = ["mdCheckboxDirective", "$mdTheming", "$mdUtil", "$document", "$mdConstant", "$parse", "$$rAF", "$mdGesture"];
169 ng.material.components.switch = angular.module("material.components.switch");