ecomp-portal-FE/client/bower_components/angular-material/modules/closure/switch/switch.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.switch');
   8 goog.require('ng.material.components.checkbox');
   9 goog.require('ng.material.core');
  10 /**
  11  * @private
  12  * @ngdoc module
  13  * @name material.components.switch
  14  */
  15
  16 angular.module('material.components.switch', [
  17   'material.core',
  18   'material.components.checkbox'
  19 ])
  20   .directive('mdSwitch', MdSwitch);
  21
  22 /**
  23  * @private
  24  * @ngdoc directive
  25  * @module material.components.switch
  26  * @name mdSwitch
  27  * @restrict E
  28  *
  29  * The switch directive is used very much like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
  30  *
  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.
  34  *
  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.
  42  *
  43  * @usage
  44  * <hljs lang="html">
  45  * <md-switch ng-model="isActive" aria-label="Finished?">
  46  *   Finished ?
  47  * </md-switch>
  48  *
  49  * <md-switch md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
  50  *   No Ink Effects
  51  * </md-switch>
  52  *
  53  * <md-switch ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
  54  *   Disabled
  55  * </md-switch>
  56  *
  57  * </hljs>
  58  */
  59 function MdSwitch(mdCheckboxDirective, $mdTheming, $mdUtil, $document, $mdConstant, $parse, $$rAF, $mdGesture) {
  60   var checkboxDirective = mdCheckboxDirective[0];
  61
  62   return {
  63     restrict: 'E',
  64     priority:210, // Run before ngAria
  65     transclude: true,
  66     template:
  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>' +
  71         '</div>'+
  72       '</div>' +
  73       '<div ng-transclude class="md-label">' +
  74       '</div>',
  75     require: '?ngModel',
  76     compile: compile
  77   };
  78
  79   function compile(element, attr) {
  80     var checkboxLink = checkboxDirective.compile(element, attr);
  81     // no transition on initial load
  82     element.addClass('md-dragging');
  83
  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'));
  89
  90       // no transition on initial load
  91       $$rAF(function() {
  92         element.removeClass('md-dragging');
  93       });
  94
  95       checkboxLink(scope, element, attr, ngModel);
  96
  97       if (angular.isDefined(attr.ngDisabled)) {
  98         scope.$watch(disabledGetter, function(isDisabled) {
  99           element.attr('tabindex', isDisabled ? -1 : 0);
 100         });
 101       }
 102
 103       // These events are triggered by setup drag
 104       $mdGesture.register(switchContainer, 'drag');
 105       switchContainer
 106         .on('$md.dragstart', onDragStart)
 107         .on('$md.drag', onDrag)
 108         .on('$md.dragend', onDragEnd);
 109
 110       var drag;
 111       function onDragStart(ev) {
 112         // Don't go if ng-disabled===true
 113         if (disabledGetter(scope)) return;
 114         ev.stopPropagation();
 115
 116         element.addClass('md-dragging');
 117         drag = {
 118           width: thumbContainer.prop('offsetWidth')
 119         };
 120         element.removeClass('transition');
 121       }
 122
 123       function onDrag(ev) {
 124         if (!drag) return;
 125         ev.stopPropagation();
 126         ev.srcEvent && ev.srcEvent.preventDefault();
 127
 128         var percent = ev.pointer.distanceX / drag.width;
 129
 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));
 134
 135         thumbContainer.css($mdConstant.CSS.TRANSFORM, 'translate3d(' + (100*translate) + '%,0,0)');
 136         drag.translate = translate;
 137       }
 138
 139       function onDragEnd(ev) {
 140         if (!drag) return;
 141         ev.stopPropagation();
 142
 143         element.removeClass('md-dragging');
 144         thumbContainer.css($mdConstant.CSS.TRANSFORM, '');
 145
 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;
 149         if (isChanged) {
 150           applyModelValue(!ngModel.$viewValue);
 151         }
 152         drag = null;
 153       }
 154
 155       function applyModelValue(newValue) {
 156         scope.$apply(function() {
 157           ngModel.$setViewValue(newValue);
 158           ngModel.$render();
 159         });
 160       }
 161
 162     };
 163   }
 164
 165
 166 }
 167 MdSwitch.$inject = ["mdCheckboxDirective", "$mdTheming", "$mdUtil", "$document", "$mdConstant", "$parse", "$$rAF", "$mdGesture"];
 168
 169 ng.material.components.switch = angular.module("material.components.switch");