This commit is contained in:
arnaucode
2017-02-03 08:56:51 +01:00
parent c4b7414770
commit 112745d6fa
1585 changed files with 450241 additions and 0 deletions

View File

@@ -0,0 +1,8 @@
{
"name": "angular-material-switch",
"version": "1.1.2-master-a9ba340",
"dependencies": {
"angular-material-core": "1.1.2-master-a9ba340",
"angular-material-checkbox": "1.1.2-master-a9ba340"
}
}

View File

@@ -0,0 +1,56 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.3
*/
md-switch.md-THEME_NAME-theme .md-ink-ripple {
color: '{{background-500}}'; }
md-switch.md-THEME_NAME-theme .md-thumb {
background-color: '{{background-50}}'; }
md-switch.md-THEME_NAME-theme .md-bar {
background-color: '{{background-500}}'; }
md-switch.md-THEME_NAME-theme.md-checked .md-ink-ripple {
color: '{{accent-color}}'; }
md-switch.md-THEME_NAME-theme.md-checked .md-thumb {
background-color: '{{accent-color}}'; }
md-switch.md-THEME_NAME-theme.md-checked .md-bar {
background-color: '{{accent-color-0.5}}'; }
md-switch.md-THEME_NAME-theme.md-checked.md-focused .md-thumb:before {
background-color: '{{accent-color-0.26}}'; }
md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-ink-ripple {
color: '{{primary-color}}'; }
md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-thumb {
background-color: '{{primary-color}}'; }
md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-bar {
background-color: '{{primary-color-0.5}}'; }
md-switch.md-THEME_NAME-theme.md-checked.md-primary.md-focused .md-thumb:before {
background-color: '{{primary-color-0.26}}'; }
md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-ink-ripple {
color: '{{warn-color}}'; }
md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-thumb {
background-color: '{{warn-color}}'; }
md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-bar {
background-color: '{{warn-color-0.5}}'; }
md-switch.md-THEME_NAME-theme.md-checked.md-warn.md-focused .md-thumb:before {
background-color: '{{warn-color-0.26}}'; }
md-switch.md-THEME_NAME-theme[disabled] .md-thumb {
background-color: '{{background-400}}'; }
md-switch.md-THEME_NAME-theme[disabled] .md-bar {
background-color: '{{foreground-4}}'; }

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.2-master-a9ba340
*/md-switch.md-THEME_NAME-theme .md-ink-ripple{color:"{{background-500}}"}md-switch.md-THEME_NAME-theme .md-thumb{background-color:"{{background-50}}"}md-switch.md-THEME_NAME-theme .md-bar{background-color:"{{background-500}}"}md-switch.md-THEME_NAME-theme.md-checked .md-ink-ripple{color:"{{accent-color}}"}md-switch.md-THEME_NAME-theme.md-checked .md-thumb{background-color:"{{accent-color}}"}md-switch.md-THEME_NAME-theme.md-checked .md-bar{background-color:"{{accent-color-0.5}}"}md-switch.md-THEME_NAME-theme.md-checked.md-focused .md-thumb:before{background-color:"{{accent-color-0.26}}"}md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-ink-ripple{color:"{{primary-color}}"}md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-thumb{background-color:"{{primary-color}}"}md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-bar{background-color:"{{primary-color-0.5}}"}md-switch.md-THEME_NAME-theme.md-checked.md-primary.md-focused .md-thumb:before{background-color:"{{primary-color-0.26}}"}md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-ink-ripple{color:"{{warn-color}}"}md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-thumb{background-color:"{{warn-color}}"}md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-bar{background-color:"{{warn-color-0.5}}"}md-switch.md-THEME_NAME-theme.md-checked.md-warn.md-focused .md-thumb:before{background-color:"{{warn-color-0.26}}"}md-switch.md-THEME_NAME-theme[disabled] .md-thumb{background-color:"{{background-400}}"}md-switch.md-THEME_NAME-theme[disabled] .md-bar{background-color:"{{foreground-4}}"}

View File

@@ -0,0 +1,153 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.3
*/
.md-inline-form md-switch {
margin-top: 18px;
margin-bottom: 19px; }
md-switch {
margin: 16px 0;
white-space: nowrap;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 30px;
line-height: 28px;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: flex;
margin-left: inherit;
margin-right: 16px; }
[dir=rtl] md-switch {
margin-left: 16px; }
[dir=rtl] md-switch {
margin-right: inherit; }
md-switch:last-of-type {
margin-left: inherit;
margin-right: 0; }
[dir=rtl] md-switch:last-of-type {
margin-left: 0; }
[dir=rtl] md-switch:last-of-type {
margin-right: inherit; }
md-switch[disabled] {
cursor: default; }
md-switch[disabled] .md-container {
cursor: default; }
md-switch .md-container {
cursor: -webkit-grab;
cursor: grab;
width: 36px;
height: 24px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 8px;
float: left; }
[dir=rtl] md-switch .md-container {
margin-right: 0px;
margin-left: 8px; }
md-switch.md-inverted .md-container {
margin-right: initial;
margin-left: 8px; }
[dir=rtl] md-switch.md-inverted .md-container {
margin-right: 8px; }
[dir=rtl] md-switch.md-inverted .md-container {
margin-left: initial; }
md-switch:not([disabled]) .md-dragging,
md-switch:not([disabled]).md-dragging .md-container {
cursor: -webkit-grabbing;
cursor: grabbing; }
md-switch.md-focused:not([disabled]) .md-thumb:before {
left: -8px;
top: -8px;
right: -8px;
bottom: -8px; }
md-switch.md-focused:not([disabled]):not(.md-checked) .md-thumb:before {
background-color: rgba(0, 0, 0, 0.12); }
md-switch .md-label {
border-color: transparent;
border-width: 0;
float: left; }
md-switch .md-bar {
left: 1px;
width: 34px;
top: 5px;
height: 14px;
border-radius: 8px;
position: absolute; }
md-switch .md-thumb-container {
top: 2px;
left: 0;
width: 16px;
position: absolute;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 1; }
md-switch.md-checked .md-thumb-container {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
md-switch .md-thumb {
position: absolute;
margin: 0;
left: 0;
top: 0;
outline: none;
height: 20px;
width: 20px;
border-radius: 50%;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); }
md-switch .md-thumb:before {
background-color: transparent;
border-radius: 50%;
content: '';
position: absolute;
display: block;
height: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
width: auto; }
md-switch .md-thumb .md-ripple-container {
position: absolute;
display: block;
width: auto;
height: auto;
left: -20px;
top: -20px;
right: -20px;
bottom: -20px; }
md-switch:not(.md-dragging) .md-bar,
md-switch:not(.md-dragging) .md-thumb-container,
md-switch:not(.md-dragging) .md-thumb {
-webkit-transition: all 0.08s linear;
transition: all 0.08s linear;
-webkit-transition-property: background-color, -webkit-transform;
transition-property: background-color, -webkit-transform;
transition-property: transform, background-color;
transition-property: transform, background-color, -webkit-transform; }
md-switch:not(.md-dragging) .md-bar,
md-switch:not(.md-dragging) .md-thumb {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s; }
@media screen and (-ms-high-contrast: active) {
md-switch.md-default-theme .md-bar {
background-color: #666; }
md-switch.md-default-theme.md-checked .md-bar {
background-color: #9E9E9E; }
md-switch.md-default-theme .md-thumb {
background-color: #fff; } }

View File

@@ -0,0 +1,190 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.3
*/
(function( window, angular, undefined ){
"use strict";
/**
* @ngdoc module
* @name material.components.switch
*/
MdSwitch['$inject'] = ["mdCheckboxDirective", "$mdUtil", "$mdConstant", "$parse", "$$rAF", "$mdGesture", "$timeout"];
angular.module('material.components.switch', [
'material.core',
'material.components.checkbox'
])
.directive('mdSwitch', MdSwitch);
/**
* @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).
*
* As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
* the switch 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 {expression=} ng-disabled En/Disable based on the expression.
* @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.
* @param {boolean=} md-invert When set to true, the switch will be inverted.
*
* @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, $mdUtil, $mdConstant, $parse, $$rAF, $mdGesture, $timeout) {
var checkboxDirective = mdCheckboxDirective[0];
return {
restrict: 'E',
priority: $mdConstant.BEFORE_NG_ARIA,
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: ['^?mdInputContainer', '?ngModel', '?^form'],
compile: mdSwitchCompile
};
function mdSwitchCompile(element, attr) {
var checkboxLink = checkboxDirective.compile(element, attr).post;
// No transition on initial load.
element.addClass('md-dragging');
return function (scope, element, attr, ctrls) {
var containerCtrl = ctrls[0];
var ngModel = ctrls[1] || $mdUtil.fakeNgModel();
var formCtrl = ctrls[2];
var disabledGetter = null;
if (attr.disabled != null) {
disabledGetter = function() { return true; };
} else if (attr.ngDisabled) {
disabledGetter = $parse(attr.ngDisabled);
}
var thumbContainer = angular.element(element[0].querySelector('.md-thumb-container'));
var switchContainer = angular.element(element[0].querySelector('.md-container'));
var labelContainer = angular.element(element[0].querySelector('.md-label'));
// no transition on initial load
$$rAF(function() {
element.removeClass('md-dragging');
});
checkboxLink(scope, element, attr, ctrls);
if (disabledGetter) {
scope.$watch(disabledGetter, function(isDisabled) {
element.attr('tabindex', isDisabled ? -1 : 0);
});
}
attr.$observe('mdInvert', function(newValue) {
var isInverted = $mdUtil.parseAttributeBoolean(newValue);
isInverted ? element.prepend(labelContainer) : element.prepend(switchContainer);
// Toggle a CSS class to update the margin.
element.toggleClass('md-inverted', isInverted);
});
// These events are triggered by setup drag
$mdGesture.register(switchContainer, 'drag');
switchContainer
.on('$md.dragstart', onDragStart)
.on('$md.drag', onDrag)
.on('$md.dragend', onDragEnd);
var drag;
function onDragStart(ev) {
// Don't go if the switch is disabled.
if (disabledGetter && disabledGetter(scope)) return;
ev.stopPropagation();
element.addClass('md-dragging');
drag = {width: thumbContainer.prop('offsetWidth')};
}
function onDrag(ev) {
if (!drag) return;
ev.stopPropagation();
ev.srcEvent && ev.srcEvent.preventDefault();
var percent = ev.pointer.distanceX / 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) {
if (!drag) return;
ev.stopPropagation();
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 = ngModel.$viewValue ? drag.translate < 0.5 : drag.translate > 0.5;
if (isChanged) {
applyModelValue(!ngModel.$viewValue);
}
drag = null;
// Wait for incoming mouse click
scope.skipToggle = true;
$timeout(function() {
scope.skipToggle = false;
}, 1);
}
function applyModelValue(newValue) {
scope.$apply(function() {
ngModel.$setViewValue(newValue);
ngModel.$render();
});
}
};
}
}
})(window, window.angular);

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.2-master-a9ba340
*/.md-inline-form md-switch{margin-top:18px;margin-bottom:19px}md-switch{margin:16px 0;white-space:nowrap;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:30px;line-height:28px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:flex;margin-left:inherit;margin-right:16px}[dir=rtl] md-switch{margin-left:16px;margin-right:inherit}md-switch:last-of-type{margin-left:inherit;margin-right:0}[dir=rtl] md-switch:last-of-type{margin-left:0;margin-right:inherit}md-switch[disabled],md-switch[disabled] .md-container{cursor:default}md-switch .md-container{cursor:-webkit-grab;cursor:grab;width:36px;height:24px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:8px;float:left}[dir=rtl] md-switch .md-container,md-switch.md-inverted .md-container{margin-right:0;margin-left:8px}[dir=rtl] md-switch.md-inverted .md-container{margin-right:8px;margin-left:0}md-switch:not([disabled]) .md-dragging,md-switch:not([disabled]).md-dragging .md-container{cursor:-webkit-grabbing;cursor:grabbing}md-switch.md-focused:not([disabled]) .md-thumb:before{left:-8px;top:-8px;right:-8px;bottom:-8px}md-switch.md-focused:not([disabled]):not(.md-checked) .md-thumb:before{background-color:rgba(0,0,0,.12)}md-switch .md-label{border-color:transparent;border-width:0;float:left}md-switch .md-bar{left:1px;width:34px;top:5px;height:14px;border-radius:8px;position:absolute}md-switch .md-thumb-container{top:2px;left:0;width:16px;position:absolute;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:1}md-switch.md-checked .md-thumb-container{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}md-switch .md-thumb{margin:0;outline:none;height:20px;width:20px;box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12)}md-switch .md-thumb,md-switch .md-thumb:before{position:absolute;left:0;top:0;border-radius:50%}md-switch .md-thumb:before{background-color:transparent;content:"";display:block;height:auto;right:0;bottom:0;-webkit-transition:all .5s;transition:all .5s;width:auto}md-switch .md-thumb .md-ripple-container{position:absolute;display:block;width:auto;height:auto;left:-20px;top:-20px;right:-20px;bottom:-20px}md-switch:not(.md-dragging) .md-bar,md-switch:not(.md-dragging) .md-thumb,md-switch:not(.md-dragging) .md-thumb-container{-webkit-transition:all .08s linear;transition:all .08s linear;-webkit-transition-property:background-color,-webkit-transform;transition-property:background-color,-webkit-transform;transition-property:transform,background-color;transition-property:transform,background-color,-webkit-transform}md-switch:not(.md-dragging) .md-bar,md-switch:not(.md-dragging) .md-thumb{-webkit-transition-delay:.05s;transition-delay:.05s}@media screen and (-ms-high-contrast:active){md-switch.md-default-theme .md-bar{background-color:#666}md-switch.md-default-theme.md-checked .md-bar{background-color:#9e9e9e}md-switch.md-default-theme .md-thumb{background-color:#fff}}

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v1.1.2-master-a9ba340
*/
!function(e,t,n){"use strict";function a(e,n,a,r,i,d,o){function l(e,l){var c=s.compile(e,l).post;return e.addClass("md-dragging"),function(e,l,s,m){function u(t){$&&$(e)||(t.stopPropagation(),l.addClass("md-dragging"),C={width:b.prop("offsetWidth")})}function g(e){if(C){e.stopPropagation(),e.srcEvent&&e.srcEvent.preventDefault();var t=e.pointer.distanceX/C.width,n=f.$viewValue?1+t:t;n=Math.max(0,Math.min(1,n)),b.css(a.CSS.TRANSFORM,"translate3d("+100*n+"%,0,0)"),C.translate=n}}function p(t){if(C){t.stopPropagation(),l.removeClass("md-dragging"),b.css(a.CSS.TRANSFORM,"");var n=f.$viewValue?C.translate<.5:C.translate>.5;n&&v(!f.$viewValue),C=null,e.skipToggle=!0,o(function(){e.skipToggle=!1},1)}}function v(t){e.$apply(function(){f.$setViewValue(t),f.$render()})}var f=(m[0],m[1]||n.fakeNgModel()),$=(m[2],null);null!=s.disabled?$=function(){return!0}:s.ngDisabled&&($=r(s.ngDisabled));var b=t.element(l[0].querySelector(".md-thumb-container")),h=t.element(l[0].querySelector(".md-container")),w=t.element(l[0].querySelector(".md-label"));i(function(){l.removeClass("md-dragging")}),c(e,l,s,m),$&&e.$watch($,function(e){l.attr("tabindex",e?-1:0)}),s.$observe("mdInvert",function(e){var t=n.parseAttributeBoolean(e);t?l.prepend(w):l.prepend(h),l.toggleClass("md-inverted",t)}),d.register(h,"drag"),h.on("$md.dragstart",u).on("$md.drag",g).on("$md.dragend",p);var C}}var s=e[0];return{restrict:"E",priority:a.BEFORE_NG_ARIA,transclude:!0,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:["^?mdInputContainer","?ngModel","?^form"],compile:l}}a.$inject=["mdCheckboxDirective","$mdUtil","$mdConstant","$parse","$$rAF","$mdGesture","$timeout"],t.module("material.components.switch",["material.core","material.components.checkbox"]).directive("mdSwitch",a)}(window,window.angular);