MODULE-TYPO

- Sass set-up
- md-list
- md-theming (install)

UI/WebServerResources/scss/vendors/angular-material/components/switch/demoBasicUsage/index.html

@@ -0,0 +1,26 @@
+<div class="inset" ng-controller="SwitchDemoCtrl">
+  <md-switch ng-model="data.cb1" aria-label="Switch 1">
+    Switch 1: {{ data.cb1 }}
+  </md-switch>
+
+  <md-switch ng-model="data.cb2" aria-label="Switch 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn">
+    Switch 2 (md-warn): {{ data.cb2 }}
+  </md-switch>
+
+  <md-switch ng-disabled="true" aria-label="Disabled switch">
+    Switch (Disabled)
+  </md-switch>
+
+  <md-switch ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb4">
+    Switch (Disabled, Active)
+  </md-switch>
+
+  <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink">
+    Switch (md-primary): No Ink
+  </md-switch>
+  
+  
+  <md-switch ng-model="data.cb5" aria-label="Switch 5" ng-change="onChange(data.cb5)">
+    Switch 5 message: {{ message }}
+  </md-switch>
+</div>

UI/WebServerResources/scss/vendors/angular-material/components/switch/demoBasicUsage/script.js

@@ -0,0 +1,11 @@
+angular.module('switchDemo1', ['ngMaterial'])
+.controller('SwitchDemoCtrl', function($scope) {
+  $scope.data = {
+    cb1: true,
+    cb4: true
+  };
+  
+  $scope.onChange = function(cbState){
+	$scope.message = "The switch is now: " + cbState;
+  };
+});

UI/WebServerResources/scss/vendors/angular-material/components/switch/demoBasicUsage/style.css

@@ -0,0 +1,4 @@
+.inset {
+    padding-left: 25px;
+    padding-top:25px;
+}

UI/WebServerResources/scss/vendors/angular-material/components/switch/switch-theme.scss

@@ -0,0 +1,52 @@
+md-switch.md-THEME_NAME-theme {
+  .md-thumb {
+    background-color: '{{background-50}}';
+  }
+  .md-bar {
+    background-color: '{{background-500}}';
+  }
+
+  &.md-checked {
+    .md-thumb {
+      background-color: '{{accent-color}}';
+    }
+    .md-bar {
+      background-color: '{{accent-color-0.5}}';
+    }
+
+    &.md-primary {
+      .md-thumb {
+        background-color: '{{primary-color}}';
+      }
+      .md-bar {
+        background-color: '{{primary-color-0.5}}';
+      }
+    }
+
+    &.md-warn {
+      .md-thumb {
+        background-color: '{{warn-color}}';
+      }
+      .md-bar {
+        background-color: '{{warn-color-0.5}}';
+      }
+    }
+  }
+
+  &[disabled] {
+    .md-thumb {
+      background-color: '{{background-400}}';
+    }
+    .md-bar {
+      background-color: '{{foreground-4}}';
+    }
+  }
+
+  &:focus {
+    .md-label:not(:empty) {
+      border-color: '{{foreground-1}}';
+      border-style: dotted;
+    }
+  }
+
+}

UI/WebServerResources/scss/vendors/angular-material/components/switch/switch.js

@@ -0,0 +1,137 @@
+(function() {
+'use strict';
+
+/**
+ * @private
+ * @ngdoc module
+ * @name material.components.switch
+ */
+
+angular.module('material.components.switch', [
+  'material.core',
+  'material.components.checkbox'
+])
+  .directive('mdSwitch', MdSwitch);
+
+/**
+ * @private
+ * @ngdoc directive
+ * @module material.components.switch
+ * @name mdSwitch
+ * @restrict E
+ *
+ * The switch directive is used very much 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 Publish the button label used by screen-readers for accessibility. Defaults to the switch's text.
+ *
+ * @usage
+ * <hljs lang="html">
+ * <md-switch ng-model="isActive" aria-label="Finished?">
+ *   Finished ?
+ * </md-switch>
+ *
+ * <md-switch md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
+ *   No Ink Effects
+ * </md-switch>
+ *
+ * <md-switch ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
+ *   Disabled
+ * </md-switch>
+ *
+ * </hljs>
+ */
+function MdSwitch(mdCheckboxDirective, $mdTheming, $mdUtil, $document, $mdConstant, $parse, $$rAF) {
+  var checkboxDirective = mdCheckboxDirective[0];
+
+  return {
+    restrict: 'E',
+    transclude: true,
+    template:
+      '<div class="md-container">' +
+        '<div class="md-bar"></div>' +
+        '<div class="md-thumb-container">' +
+          '<div class="md-thumb" md-ink-ripple md-ink-ripple-checkbox></div>' +
+        '</div>'+
+      '</div>' +
+      '<div ng-transclude class="md-label">' +
+      '</div>',
+    require: '?ngModel',
+    compile: compile
+  };
+
+  function compile(element, attr) {
+    var checkboxLink = checkboxDirective.compile(element, attr);
+    // no transition on initial load
+    element.addClass('md-dragging');
+
+    return function (scope, element, attr, ngModel) {
+      ngModel = ngModel || $mdUtil.fakeNgModel();
+      var disabledGetter = $parse(attr.ngDisabled);
+      var thumbContainer = angular.element(element[0].querySelector('.md-thumb-container'));
+      var switchContainer = angular.element(element[0].querySelector('.md-container'));
+
+      // no transition on initial load
+      $$rAF(function() {
+        element.removeClass('md-dragging');
+      });
+
+      // Tell the checkbox we don't want a click listener.
+      // Our drag listener tells us everything, using more granular events.
+      attr.mdNoClick = true;
+      checkboxLink(scope, element, attr, ngModel);
+
+      $mdUtil.attachDragBehavior(scope, switchContainer);
+
+      // These events are triggered by setup drag
+      switchContainer.on('$md.dragstart', onDragStart)
+        .on('$md.drag', onDrag)
+        .on('$md.dragend', onDragEnd);
+
+      function onDragStart(ev, drag) {
+        // Don't go if ng-disabled===true
+        if (disabledGetter(scope)) return ev.preventDefault();
+
+        drag.width = thumbContainer.prop('offsetWidth');
+        element.addClass('md-dragging');
+      }
+      function onDrag(ev, drag) {
+        var percent = drag.distance / drag.width;
+
+        //if checked, start from right. else, start from left
+        var translate = ngModel.$viewValue ?  1 - percent : -percent;
+        // Make sure the switch stays inside its bounds, 0-1%
+        translate = Math.max(0, Math.min(1, translate));
+
+        thumbContainer.css($mdConstant.CSS.TRANSFORM, 'translate3d(' + (100*translate) + '%,0,0)');
+        drag.translate = translate;
+      }
+      function onDragEnd(ev, drag) {
+        if (disabledGetter(scope)) return false;
+
+        element.removeClass('md-dragging');
+        thumbContainer.css($mdConstant.CSS.TRANSFORM, '');
+
+        // We changed if there is no distance (this is a click a click),
+        // or if the drag distance is >50% of the total.
+        var isChanged = Math.abs(drag.distance || 0) < 2 ||
+          (ngModel.$viewValue ? drag.translate < 0.5 : drag.translate > 0.5);
+        if (isChanged) {
+          scope.$apply(function() {
+            ngModel.$setViewValue(!ngModel.$viewValue);
+            ngModel.$render();
+          });
+        }
+      }
+    };
+  }
+
+
+}
+
+})();

UI/WebServerResources/scss/vendors/angular-material/components/switch/switch.scss

@@ -0,0 +1,90 @@
+$switch-width: 36px !default;
+$switch-height: $baseline-grid * 3 !default;
+$switch-bar-height: 14px !default;
+$switch-thumb-size: 20px !default;
+
+md-switch {
+
+  display: flex;
+  align-items: center;
+
+  .md-container {
+    cursor: grab;
+    width: $switch-width;
+    height: $switch-height;
+    position: relative;
+    user-select: none;
+    margin-right: 8px;
+  }
+
+  // If the user moves his mouse off the switch, stil display grabbing cursor
+  &:not([disabled]) {
+    .md-dragging,
+    &.md-dragging .md-container {
+      cursor: grabbing;
+    }
+  }
+
+  .md-label {
+    border-color: transparent;
+    border-width: 1px;
+  }
+
+  .md-bar {
+    left: 1px;
+    width: $switch-width - 2px;
+    top: $switch-height / 2 - $switch-bar-height / 2;
+    height: $switch-bar-height;
+    border-radius: 8px;
+    position: absolute;
+  }
+
+  .md-thumb-container {
+    top: $switch-height / 2 - $switch-thumb-size / 2;
+    left: 0;
+    width: $switch-width - $switch-thumb-size;
+    position: absolute;
+    transform: translate3d(0,0,0);
+    z-index: 1;
+  }
+  &.md-checked .md-thumb-container {
+    transform: translate3d(100%,0,0);
+  }
+
+  .md-thumb {
+    position: absolute;
+    margin: 0;
+    left: 0;
+    top: 0;
+    outline: none;
+    height: $switch-thumb-size;
+    width: $switch-thumb-size;
+    border-radius: 50%;
+    box-shadow: $whiteframe-shadow-z1;
+
+    .md-ripple-container {
+      position: absolute;
+      display: block;
+      width: auto;
+      height: auto;
+      left: -$switch-thumb-size;
+      top: -$switch-thumb-size;
+      right: -$switch-thumb-size;
+      bottom: -$switch-thumb-size;
+    }
+  }
+
+  &:not(.md-dragging) {
+    .md-bar,
+    .md-thumb-container,
+    .md-thumb {
+      transition: $swift-ease-in-out;
+      transition-property: transform, background-color;
+    }
+    .md-bar,
+    .md-thumb {
+      transition-delay: 0.05s;
+    }
+  }
+
+}

UI/WebServerResources/scss/vendors/angular-material/components/switch/switch.spec.js

@@ -0,0 +1,101 @@
+describe('<md-switch>', function() {
+  var CHECKED_CSS = 'md-checked';
+
+  beforeEach(TestUtil.mockRaf);
+  beforeEach(module('ngAria', 'material.components.switch'));
+
+  it('should set checked css class and aria-checked attributes', inject(function($compile, $rootScope) {
+    var element = $compile('<div>' +
+                             '<md-switch ng-model="blue">' +
+                             '</md-switch>' +
+                             '<md-switch ng-model="green">' +
+                             '</md-switch>' +
+                           '</div>')($rootScope);
+
+    $rootScope.$apply(function(){
+      $rootScope.blue = false;
+      $rootScope.green = true;
+    });
+
+    var switches = angular.element(element[0].querySelectorAll('md-switch'));
+
+    expect(switches.eq(0).hasClass(CHECKED_CSS)).toEqual(false);
+    expect(switches.eq(1).hasClass(CHECKED_CSS)).toEqual(true);
+    expect(switches.eq(0).attr('aria-checked')).toEqual('false');
+    expect(switches.eq(1).attr('aria-checked')).toEqual('true');
+    expect(switches.eq(0).attr('role')).toEqual('checkbox');
+
+    $rootScope.$apply(function(){
+      $rootScope.blue = true;
+      $rootScope.green = false;
+    });
+
+    expect(switches.eq(1).hasClass(CHECKED_CSS)).toEqual(false);
+    expect(switches.eq(0).hasClass(CHECKED_CSS)).toEqual(true);
+    expect(switches.eq(1).attr('aria-checked')).toEqual('false');
+    expect(switches.eq(0).attr('aria-checked')).toEqual('true');
+    expect(switches.eq(1).attr('role')).toEqual('checkbox');
+  }));
+
+  it('should change on panstart/panend if no movement happened', inject(function($compile, $rootScope) {
+    var element = $compile('<md-switch ng-model="banana"></md-switch>')($rootScope);
+    var switchContainer = angular.element(element[0].querySelector('.md-container'));
+
+    $rootScope.$apply('banana = false');
+
+    expect($rootScope.banana).toBe(false);
+    expect(element.hasClass(CHECKED_CSS)).toBe(false);
+
+    switchContainer.triggerHandler('$md.dragstart', {});
+    switchContainer.triggerHandler('$md.dragend', {distance: 1});
+
+    expect($rootScope.banana).toBe(true);
+    expect(element.hasClass(CHECKED_CSS)).toBe(true);
+
+    switchContainer.triggerHandler('$md.dragstart', {});
+    switchContainer.triggerHandler('$md.dragend', {distance: 5});
+
+    expect($rootScope.banana).toBe(true);
+    expect(element.hasClass(CHECKED_CSS)).toBe(true);
+
+    switchContainer.triggerHandler('$md.dragstart', {});
+    switchContainer.triggerHandler('$md.dragend', {distance: -1});
+
+    expect($rootScope.banana).toBe(false);
+    expect(element.hasClass(CHECKED_CSS)).toBe(false);
+  }));
+
+  it('should check on panend if translate > 50%', inject(function($compile, $rootScope) {
+    var element = $compile('<md-switch ng-model="banana"></md-switch>')($rootScope);
+    var switchContainer = angular.element(element[0].querySelector('.md-container'));
+    var drag;
+
+    drag = { distance: -55 };
+    switchContainer.triggerHandler('$md.dragstart', {});
+    drag.width = 100;
+    switchContainer.triggerHandler('$md.drag', drag);
+    switchContainer.triggerHandler('$md.dragend', drag);
+
+    expect($rootScope.banana).toBe(true);
+    expect(element.hasClass(CHECKED_CSS)).toBe(true);
+
+    drag = { distance: 45 };
+    switchContainer.triggerHandler('$md.dragstart', {});
+    drag.width = 100;
+    switchContainer.triggerHandler('$md.drag', drag);
+    switchContainer.triggerHandler('$md.dragend', drag);
+
+    expect($rootScope.banana).toBe(true);
+    expect(element.hasClass(CHECKED_CSS)).toBe(true);
+
+    drag = { distance: 85 };
+    switchContainer.triggerHandler('$md.dragstart', {});
+    drag.width = 100;
+    switchContainer.triggerHandler('$md.drag', drag);
+    switchContainer.triggerHandler('$md.dragend', drag);
+
+    expect($rootScope.banana).toBe(false);
+    expect(element.hasClass(CHECKED_CSS)).toBe(false);
+  }));
+
+});