var app = angular.module('plunker', ['ngFx', 'ngAnimate', 'ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('altTheme').primaryPalette('brown');
$mdThemingProvider.setDefaultTheme('default');
});
app.controller('MainCtrl', function($scope, $timeout) {
$scope.name = 'World';
$scope.foods = ['apple', 'muffin', 'chips'];
$scope.mycolor = function() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
$scope.downloads = {
"red": {
"eCite": {
"1.2.90.6": "http://caps.ua.edu/ecrash/Arkansas/eCiteAR_1.2.90.6_Full_ASP(T)_CAPS(L).exe",
"1.2.90.5": "http://caps.ua.edu/ecrash/Arkansas/eCiteAR_1.2.90.5_Full_ASP(T)_CAPS(L).exe"
},
"MOVE": {
"1.3.49.5": "http://caps.ua.edu/ecrash/Arkansas/MOVEAR_1.3.49.5_Full_ASP(T)_CAPS(L).exe"
},
"eForms": {
"1.1.5.2": "http://caps.ua.edu/ecrash/Arkansas/eFormsARSetup_1.1.5.2.exe",
"PMR Only": "http://caps.ua.edu/ecrash/Arkansas/eFormsARSetup_FULL_1.1.5.2_PMR.exe"
}
},
"orange": {
"eCite": {
"1.2.90.6": "http://caps.ua.edu/ecrash/Arkansas/eCiteAR_1.2.90.6_Full_ASP(T)_CAPS(L).exe",
"1.2.90.5": "http://caps.ua.edu/ecrash/Arkansas/eCiteAR_1.2.90.5_Full_ASP(T)_CAPS(L).exe"
},
"MOVE": {
"1.3.49.5": "http://caps.ua.edu/ecrash/Arkansas/MOVEAR_1.3.49.5_Full_ASP(T)_CAPS(L).exe"
},
"eForms": {
"1.1.5.2": "http://caps.ua.edu/ecrash/Arkansas/eFormsARSetup_1.1.5.2.exe"
}
},
"green": {
"eCite": {
"coming soon": ""
},
"MOVE": {
"coming soon": ""
},
"eForms": {
"1.1.5.2": "http://caps.ua.edu/ecrash/Arkansas/eFormsARSetup_1.1.5.2.exe"
}
},
"blue": {
"misc": {
"CRDLUpdater": "http://caps.ua.edu/ecrash/Arkansas/SupportFiles/CRDLUpdater/CRDLUpdater.msi",
".NET 4.0": "http://caps.ua.edu/ecrash/Arkansas/SupportFiles/dotNET4/dotnetfx.exe",
".NET 3.5 SP1": "http://caps.ua.edu/ecrash/Arkansas/SupportFiles/dotNET35/dotnetfx35.exe",
"Crystal Report Dist.": "http://caps.ua.edu/ecrash/Arkansas/SupportFiles/Crystal2008/CRRedist2008_x86.msi"
}
}
}
});
app.directive('ngIonHeader', function() {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@',
headerclass: '@',
leftbuttonclick: '&',
leftbuttonicon: '@',
rightbuttonclick: '&',
rightbuttonicon: '@'
},
templateUrl: 'ngIonHeader.html'
};
});
//Wave buttons for .btn-wave class
app.directive('btnWave', function() {
return {
restrict: 'C',
link: function(scope, element) {
Waves.attach(element, ['waves-block']);
Waves.init();
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="waves.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.0/angular.js" data-semver="1.4.0-rc.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="waves.js"></script>
<script src="ngFx.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ng-ion-header headerclass="md-warn md-tall" title="Recently Updated Cases" leftbuttonclick="backToMyVault()" rightbuttonclick="GetRecentCases()" leftbuttonicon="ion-arrow-left-c" rightbuttonicon="ion-android-refresh">
<div>8 cases found</div>
</ng-ion-header>
<md-content>
<md-card class="card fx-fade-down fx-easing-bounce fx-speed-400 btnWave" ng-repeat="food in foods">
<md-card-content>
{{food}}
</md-card-content>
</md-card>
</md-content>
<!--
<div>
<md-button class="md-primary">I will be theme primary (alttheme)</md-button>
<div md-theme="default">
<md-button class="md-primary">I will be default primary (default)</md-button>
</div>
</div>
<md-card>
<md-card-content>
<h2 class="md-title">Paracosm</h2>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
</p>
</md-card-content>
</md-card>
<md-divider></md-divider>
-->
<br/>
<button class="btnWave" >Wave Button</button>
<br/>
<br/>
<md-grid-list md-cols="4" md-row-height="200px" md-row-height="fit" md-cols-sm="2" md-cols-md="4" md-cols-lg="8" md-cols-gt-lg="12" md-gutter=5>
<md-grid-tile ng-style="{'background-color':mycolor()}">
<md-grid-tile-footer style='height:100px'>
<div class='padding'>
<h3>This is a footer</h3>
<p>Another footer</p>
</div>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile ng-style="{'background-color':mycolor()}">
<md-grid-tile-header>
<h3>This is a header</h3>
</md-grid-tile-header>
Flex
<md-grid-tile-footer>
<h3>This is a footer</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile ng-style="{'background-color':mycolor()}">
<md-grid-tile-header>
<h3>This is a header</h3>
</md-grid-tile-header>
Flex
<md-grid-tile-footer>
<h3>This is a footer</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile ng-style="{'background-color':mycolor()}">
<md-grid-tile-header>
<h3>This is a header</h3>
</md-grid-tile-header>
Flex
<md-grid-tile-footer>
<h3>This is a footer</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile ng-style="{'background-color':mycolor()}">
<md-grid-tile-header>
<h3>This is a header</h3>
</md-grid-tile-header>
Flex
<md-grid-tile-footer>
<h3>This is a footer</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile ng-style="{'background-color':mycolor()}">
<md-grid-tile-header>
<h3>This is a header</h3>
</md-grid-tile-header>
Flex
<md-grid-tile-footer>
<h3>This is a footer</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile ng-style="{'background-color':mycolor()}">
<md-grid-tile-header>
<h3>This is a header</h3>
</md-grid-tile-header>
Flex
<md-grid-tile-footer>
<h3>This is a footer</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
<md-list ng-repeat="(key,value) in downloads.green">
<md-subheader class="md-sticky">{{key}}</md-subheader>
<md-list-item ng-repeat="(key,value) in value">
<p> {{ key }} </p>
<p> {{value}} </p>
</md-list-item>
</md-list>
</body>
</html>
/**
* Created by bpatel on 4/22/2015.
*/
if (typeof module !== 'undefined' && typeof exports !== 'undefined' && module.exports === exports){
module.exports = 'ngFx';
}
(function(angular, TweenMax, TimelineMax){
'use strict;'
/*!
* ngFx.js is a concatenation of:
* angular-animate.js and TweenMax.js
*/
/*!
* ngFx.js is a concatenation of:
* angular-animate.js and TweenMax.js
*/
/*!
* Copyright 2015 Scott Moss
*
*
* A simple, beautiful animation library for angular
* http://hendrixer.github.io
*
* By @Hendrixer
*
* Licensed under the MIT license.
*
*/
angular.module('fx.transitions',
[
'fx.transitions.slides',
'fx.transitions.scales',
'fx.transitions.rotations',
'fx.transitions.specials',
'fx.transitions.view'
]
);
angular.module('ngFx', ['fx.animations', 'fx.transitions']);
angular.module('fx.animations', [
'fx.animations.fades',
'fx.animations.bounces',
'fx.animations.zooms',
'fx.animations.rotations',
'fx.animations.tada',
'fx.animations.pulse'
]);
// angular.module('fx.animations.create', ['fx.animations.assist'])
// .factory('Flip3d', ['$window', function ($window){
// return function (effect){
// var axis = effect.axis;
// var flipType = 'fx-flip'+axis;
// this.addClass = function(el, className, done){
// var wrapper = angular.element(el.children()[0]);
// var myDone = function(){
// return done();
// };
// if(className === flipType){
// effect.transform.ease = $window.Bounce.easeOut;
// effect.transform.onComplete = myDone;
// TweenMax.to(wrapper, effect.duration, effect.transform);
// } else {
// done();
// }
// };
// this.removeClass = function(el, className, done){
// var wrapper = angular.element(el.children()[0]);
// var myDone = function(){
// return done();
// };
// if(className === flipType){
// effect.reset.ease = $window.Bounce.easeOut;
// effect.reset.onComplete = myDone;
// TweenMax.to(wrapper, effect.duration, effect.reset);
// } else {
// done();
// }
// };
// };
// }]);
angular.module('fx.animations.assist', [])
.factory('Assist', ['$filter', '$window', '$timeout', '$rootScope', function ($filter, $window, $timeout, $rootScope){
return {
emit: function(element, animation, motion){
$rootScope.$broadcast(animation +':'+motion);
},
parseClassList: function(element, option){
var ease,
list = element[0].classList,
results = {trigger: false, duration: 0.3, ease: $window.Back};
angular.forEach(list, function (className){
if(className.slice(0,9) === 'fx-easing'){
ease = className.slice(10);
results.ease = $window[$filter('cap')(ease)] || $window.Elastic;
}
if(className === 'fx-trigger'){
results.trigger = true;
}
if(className.slice(0,8) === 'fx-speed'){
results.duration = parseInt(className.slice(9))/1000;
}
});
return option ? {ease: results.ease, speed: results.duration} : results;
},
addTimer: function(options, element, end){
var self = this;
var time = options.stagger ? (options.duration * 3) * 1000 : options.duration * 1000;
var timer = $timeout(function(){
if(options.trigger){
self.emit(element, options.animation, options.motion);
}
end();
}, time);
element.data(options.timeoutKey, timer);
},
removeTimer: function(element, timeoutKey, timer){
$timeout.cancel(timer);
element.removeData(timeoutKey);
},
timeoutKey: '$$fxTimer'
};
}])
.filter('cap', [function(){
return function (input){
return input.charAt(0).toUpperCase() + input.slice(1);
};
}]);
var timeoutKey = '$$fxtimer';
angular.module('fx.transitions.assist', [])
.factory('TransAssist', ["$timeout", function ($timeout) {
function addTimer (el, time, done) {
var timer = $timeout(function () {
done();
}, (time*1000) + 50);
el.data(timeoutKey, timer);
}
function removeTimer (el) {
var timer = el.data(timeoutKey);
if (timer) {
el.css('z-index', '-1');
$timeout.cancel(timer);
el.removeData(timeoutKey);
}
}
return {
addTimer: addTimer,
removeTimer: removeTimer
};
}]);
angular.module('fx.transitions.create', ['fx.transitions.assist', 'fx.animations.assist'])
.factory('SlideTransition', ['TransAssist', 'Assist', function (TransAssist, Assist) {
var slide;
return function (effect) {
if (effect.from) {
this.enter = function (el, done) {
var customs;
cssMixin(el);
customs = Assist.parseClassList(el, true);
effect.from.ease = customs.ease.easeInOut;
effect.duration = customs.speed;
TransAssist.addTimer(el, effect.duration, done);
slide = new TimelineMax();
slide.from(el, effect.duration, effect.from);
return function (cancel) {
if(cancel) {
TransAssist.removeTimer(el);
}
};
};
} else if (!effect.from && effect.to) {
this.leave = function (el, done) {
var customs;
cssMixin(el);
customs = Assist.parseClassList(el, true);
effect.to.ease = customs.ease.easeInOut;
effect.duration = customs.speed;
TransAssist.addTimer(el, effect.duration, done);
slide = new TimelineMax();
slide.to(el, effect.duration, effect.to);
return function (cancel) {
if(cancel) {
TransAssist.removeTimer(el);
}
};
// el.css('position', 'absolute');
// el.css('z-index', '9999');
// slide = new TimelineMax({onComplete: finish(done)});
// slide.from(el, effect.duration, effect.from)
// .to(el, effect.duration, effect.to);
// el.css('z-index', '9999');
// var page = new TimelineMax({onComplete: finish(done)});
// page.to(el, {transform: 'rotateZ(0deg)'})
// .to(el, 0.2, {transform: 'rotateZ(10deg)'})
// .to(el, 0.2, {transform: 'rotateZ(17deg)'})
// .to(el, 0.4, {transform: 'rotateZ(15deg)'})
// .to(el, 0.2, {transform: 'translateY(100%) rotateZ(17deg)'});
};
}
};
}])
.factory('RotationTransition', ['TransAssist', 'Assist','$compile', function (TransAssist, Assist, $compile) {
var rotate;
return function (effect) {
this[effect.when] = function (el, done) {
var customs, wrapper;
wrapper = $compile('<div></div>')(el.scope());
cssMixin(el);
css3D(wrapper, el);
angular.element(wrapper).append(el[0].outerHTML);
customs = Assist.parseClassList(el, true);
effect.from.ease = customs.ease.easeOut;
effect.duration = customs.duration;
TransAssist.addTimer(el, effect.duration, done);
rotate = new TimelineMax();
rotate.from(el, 1, effect.from)
.to(el, 1, effect.to);
return function (cancel) {
if(cancel) {
TransAssist.removeTimer(el);
}
};
};
};
}]);
function cssMixin (el, z) {
el.css('position', 'absolute');
if (z && z === 'leave') {
el.css('z-index', '9999px');
} else {
el.css('z-index', '1000px');
}
}
function css3D (parent, view) {
var preservve = {
'position': 'relative',
width: '100%',
height: '100%',
'-webkit-perspective': '500px',
'-moz-perspective': '500px',
'-o-perspective': '500px',
'perspective': '500px'
};
var trans = {
overflow: 'hidden',
'-webkit-backface-visibility': 'hidden',
'-moz-backface-visibility': 'hidden',
'backface-visibility': 'hidden',
'-webkit-transform': 'translate3d(0, 0, 0)',
'-moz-transform': 'translate3d(0, 0, 0)',
'transform': 'translate3d(0, 0, 0),',
' -webkit-transform-style': 'preserve-3d',
'-moz-transform-style': 'preserve-3d',
'transform-style': 'preserve-3d'
};
parent.css(preservve);
view.css(trans);
}
// function calcTime (duration, perc) {
// return (duration * (perc/100));
// }
angular.module('fx.transitions.view', [])
.directive('fxAnimate', ["$injector", function($injector) {
return {
// priority: 1000,
link: function($scope, $ele) {
var $state, $route;
function addAnimations(animations, ele) {
angular.forEach(animations, function(animation, type) {
if (type === 'ease') {
animation = 'fx-easing-' + animation;
}
if (type === 'speed') {
animation = 'fx-speed-' + animation;
}
ele.addClass(animation);
});
}
if ($injector.has('$state')) {
$state = $injector.get('$state');
}
if ($injector.has('$route')) {
$route = $injector.get('$route');
}
var animations;
if ($state && $state.current.animation && $route && $route.current){
if ($route.current.$$route && $route.current.$$route.animation){
throw new Error('You can only add animations on either $state or $route');
}
}
if ($state) {
animations = $state.current.animation;
}
if ($route && $route.current) {
animations = $route.current.$$route.animation;
}
addAnimations(animations, $ele);
}
};
}]);
angular.module('fx.transitions.rotations', ['fx.transitions.create'])
.animation('.rotate-out-right', ['RotationTransition', function (RotationTransition) {
var effect = {
from: {transform: 'rotateY(15deg)', opacity: '.8'},
to: {transform: 'scale(0.8) translateZ(-200px)', opacity: '0'},
when: 'leave',
duration: 0.5
};
return new RotationTransition(effect);
}]);
angular.module('fx.transitions.scales', ['fx.transitions.create'])
.animation('.shrink-in', ['SlideTransition', function (SlideTransition) {
var effect = {
from: {opacity: '0', transform: 'translateZ(0) scale(1.2)'},
duration: 0.5
};
return new SlideTransition(effect);
}])
.animation('.shrink-out', ['SlideTransition', function (SlideTransition) {
var effect = {
to: {opacity: '0', transform: 'translateZ(0) scale(.8)'},
duration: 0.5
};
return new SlideTransition(effect);
}])
.animation('.grow-in', ['SlideTransition', function (SlideTransition) {
var effect = {
from: {opacity: '0', transform: 'translateZ(0) scale(.8)'},
duration: 0.5
};
return new SlideTransition(effect);
}])
.animation('.grow-out', ['SlideTransition', function (SlideTransition) {
var effect = {
to: {opacity: '0', transform: 'translateZ(0) scale(1.2)'},
duration: 0.5
};
return new SlideTransition(effect);
}]);
angular.module('fx.transitions.slides', ['fx.transitions.create'])
.animation('.slide-in-left', ['SlideTransition', function (SlideTransition) {
var effect = {
from: { transform: 'translateZ(0) translateX(100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-out-left', ['SlideTransition', function (SlideTransition) {
var effect = {
to: { transform: 'translateZ(0) translateX(-100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-in-right', ['SlideTransition', function (SlideTransition) {
var effect = {
from: { transform: 'translateZ(0) translateX(-100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-out-right', ['SlideTransition', function (SlideTransition) {
var effect = {
to: { transform: 'translateZ(0) translateX(100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-in-down', ['SlideTransition', function (SlideTransition) {
var effect = {
from: { transform: 'translateZ(0) translateY(-100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-out-down', ['SlideTransition', function (SlideTransition) {
var effect = {
to: { transform: 'translateZ(0) translateY(100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-in-up', ['SlideTransition', function (SlideTransition) {
var effect = {
from: { transform: 'translateZ(0) translateY(100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-out-up', ['SlideTransition', function (SlideTransition) {
var effect = {
to: { transform: 'translateZ(0) translateY(-100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-in-left-fade', ['SlideTransition', function (SlideTransition) {
var effect = {
from: { opacity: '0.3', transform: 'translateZ(0) translateX(100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-out-left-fade', ['SlideTransition', function (SlideTransition) {
var effect = {
to: { opacity: '0.3', transform: 'translateZ(0) translateX(-100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-in-right-fade', ['SlideTransition', function (SlideTransition) {
var effect = {
from: { opacity: '0.3', transform: 'translateZ(0) translateX(-100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-out-right-fade', ['SlideTransition', function (SlideTransition) {
var effect = {
to: { opacity: '0.3', transform: 'translateZ(0) translateX(100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-in-down-fade', ['SlideTransition', function (SlideTransition) {
var effect = {
from: { opacity: '0.3', transform: 'translateZ(0) translateY(-100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-out-down-fade', ['SlideTransition', function (SlideTransition) {
var effect = {
to: { opacity: '0.3', transform: 'translateZ(0) translateY(100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-in-up-fade', ['SlideTransition', function (SlideTransition) {
var effect = {
from: { opacity: '0.3', transform: 'translateZ(0) translateY(100%)'},
duration: 2
};
return new SlideTransition(effect);
}])
.animation('.slide-out-up-fade', ['SlideTransition', function (SlideTransition) {
var effect = {
to: { opacity: '0.3', transform: 'translateZ(0) translateY(-100%)'},
duration: 2
};
return new SlideTransition(effect);
}]);
angular.module('fx.transitions.specials', [])
.animation('.fx-fall-out', function () {
// var effect = {
// from: {}
// };
return {
leave: function (el, done) {
el.css('z-index', '9999');
var page = new TimelineMax({onComplete: done});
page.to(el, {transform: 'rotateZ(0deg)'})
.to(el, 0.1, {transform: 'rotateZ(10deg)'})
.to(el, 0.3, {transform: 'rotateZ(17deg)'})
.to(el, 0.5, {transform: 'rotateZ(15deg)'})
.to(el, 0.2, {transform: 'translateY(100%) rotateZ(17deg)'});
}
};
// return new SlideTransition(effect);
});
angular.module('fx.animations.pulse', ['fx.animations.assist'])
.animation('.fx-pulse', ['Assist', function(Assist){
return {
animate: function(element, className, to, from, done){
var effect = [
{ effect: { transform: 'scale3d(1,1,1)' }},
{ effect: { transform: 'scale3d(1.05, 1.05, 1.05)' }},
{ effect: { transform: 'scale3d(1, 1, 1)' }}
];
var options = Assist.parseClassList(element);
options.motion = 'addClass';
options.animation = 'pulse';
var eachTime = (options.duration / effect.length);
Assist.addTimer(options, element, done);
var pulse = new TimelineMax();
angular.forEach(effect, function(step, pos){
step.easing = options.ease.easeInOut;
pulse = pulse.to(element, eachTime, step.effect);
});
}
};
}]);
angular.module('fx.animations.tada', ['fx.animations.assist'])
.animation('.fx-tada', ['Assist', function(Assist){
return {
animate: function(element, classname, done){
var effect = [
// 0
{ effect: { transform: 'scale3d(1,1,1)' } },
// 10
{ effect: { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)' } },
// 20
{ effect: { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)' } },
// 30
{ effect: { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' } },
// 40
{ effect: { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' } },
// 50
{ effect: { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' } },
// 60
{ effect: { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' } },
// 70
{ effect: { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' } },
// 80
{ effect: { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' } },
// 90
{ effect: { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' } },
// 100
{ effect: { transform: ' scale3d(1, 1, 1)' } }
];
var options = Assist.parseClassList(element);
options.motion = 'addClass';
options.animation = 'tada';
var eachTime = (options.duration / effect.length);
Assist.addTimer(options, element, done);
var tada = new TimelineMax();
angular.forEach(effect, function(step, pos){
step.easing = options.ease.easeInOut;
tada = tada.to(element, eachTime, step.effect);
});
}
};
}]);
/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Using Angular's '.animate', all fade animations are created with javaScript.
@BounceAnimation
Constructor function that returns a new animation object that has all
required methods for ngAnimate ex: this.enter(), this.leave(), etc
@effect
The actual animation that will be applied to the element, staggered
first: the style to applied to the element 1/4 through the animtion
mid: style to be applied to to the element 2/4 through the animation
third: style to be applied to the element 3/4 through the animation
end: style to be applied to the element when it's complete
animation: the name of the animtion for the eventing system
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
angular.module('fx.animations.bounces', ['fx.animations.bounces.factory'])
.animation('.fx-bounce-normal', ['BounceAnimation', function (BounceAnimation){
var effect = {
first: {opacity: 0, transform: 'scale(.3)'},
mid: {opacity: 1, transform: 'scale(1.05)'},
third: {transform: 'scale(.9)'},
end: {opacity: 1, transform: 'scale(1)'},
animation: 'bounce-normal'
};
return new BounceAnimation(effect);
}])
.animation('.fx-bounce-down', ['BounceAnimation', function (BounceAnimation){
var effect = {
first: {opacity: 0, transform: 'translateY(-2000px)'},
mid: {opacity: 1, transform: 'translateY(30px)'},
third: {transform: 'translateY(-10px)'},
end: {transform: 'translateY(0)'},
animation: 'bounce-down'
};
return new BounceAnimation(effect);
}])
.animation('.fx-bounce-left', ['BounceAnimation', function (BounceAnimation){
var effect = {
first: {opacity: 0, transform: 'translateX(-2000px)'},
mid: {opacity: 1, transform: 'translateX(30px)'},
third: {transform: 'translateX(-10px)'},
end: {transform: 'translateX(0)'},
animation: 'bounce-left'
};
return new BounceAnimation(effect);
}])
.animation('.fx-bounce-up', ['BounceAnimation', function (BounceAnimation) {
var effect = {
first: {opacity: 0, transform: 'translateY(2000px)'},
mid: {opacity: 1, transform: 'translateY(-30px)'},
third: {transform: 'translateY(10px)'},
end: {transform: 'translateY(0)'},
animation: 'bounce-up'
};
return new BounceAnimation(effect);
}])
.animation('.fx-bounce-right', ['BounceAnimation', function (BounceAnimation) {
var effect = {
first: {opacity: 0, transform: 'translateX(2000px)'},
mid: {opacity: 1, transform: 'translateX(-30px)'},
third: {transform: 'translateX(10px)'},
end: {transform: 'translateX(0)'},
animation: 'bounce-right'
};
return new BounceAnimation(effect);
}]);
angular.module('fx.animations.bounces.factory', ['fx.animations.assist'])
.factory('BounceAnimation', ['$timeout', '$window', 'Assist', function ($timeout, $window, Assist){
return function (effect){
var start = effect.first,
mid = effect.mid,
third = effect.third,
end = effect.end,
fx_type = effect.animation,
startTime = 0.1;
this.enter = function(element, done){
var options = Assist.parseClassList(element);
options.motion = 'enter';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
options.stagger = true;
Assist.addTimer(options, element, done);
var enter = new TimelineMax();
enter.to(element, 0.01, start);
enter.to(element, options.duration, mid);
enter.to(element, options.duration, third);
enter.to(element, options.duration, end);
return function (canceled){
if(canceled){
var timer = element.data(Assist.timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
};
this.leave = function(element, done){
var options = Assist.parseClassList(element);
options.motion = 'leave';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
options.stagger = true;
Assist.addTimer(options, element, done);
var leave = new TimelineMax();
leave.to(element, startTime, end);
leave.to(element, options.duration, third);
leave.to(element, options.duration, mid);
leave.to(element, options.duration, start);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
};
this.move = this.enter;
this.addClass = function(element, className, done){
if(className){
var options = Assist.parseClassList(element);
options.motion = 'enter';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
Assist.addTimer(options, element, done);
var bac = new TimelineMax();
bac.to(element, startTime, end);
bac.to(element, options.duration, third);
bac.to(element, options.duration, mid);
bac.to(element, options.duration, start);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
} else {
done();
}
};
this.removeClass = function(element, className, done){
if(className){
var options = Assist.parseClassList(element);
options.motion = 'leave';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
var rc = new TimelineMax();
rc.to(element, startTime, start);
rc.to(element, options.duration, mid);
rc.to(element, options.duration, third);
rc.to(element, options.duration, end);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
} else {
done();
}
};
};
}])
/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Using Angular's '.animate', all fade animations are created with javaScript.
@FadeAnimation
Constructor function that returns a new animation object that has all
required methods for ngAnimate ex: this.enter(), this.leave(), etc
@effect
The actual animation that will be applied to the element
enter: style to be applied when angular triggers the enter event
leave: style to be applied when angular triggers the leave event
inverse: style to be appiled to offset the enter event
animation: the name of the animtion for the eventing system
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
angular.module('fx.animations.fades', ['fx.animations.fades.factory'])
.animation('.fx-fade-normal', ['FadeAnimation', function (FadeAnimation){
var effect = {
enter: {opacity: 1},
leave: {opacity: 0},
animation: 'fade-normal'
};
return new FadeAnimation(effect);
}])
.animation('.fx-fade-down', ['FadeAnimation', function (FadeAnimation){
var effect = {
enter: {opacity: 1, transform: 'translateY(0)'},
leave: {opacity: 0, transform: 'translateY(-20px)'},
inverse: {opacity: 0, transform: 'translateY(20px)'},
animation: 'fade-down'
};
return new FadeAnimation(effect);
}])
.animation('.fx-fade-down-big', ['FadeAnimation', function (FadeAnimation){
var effect = {
enter: {opacity: 1, transform: 'translateY(0)'},
leave: {opacity: 0, transform: 'translateY(-2000px)'},
inverse: {opacity: 0, transform: 'translateY(2000px)'},
animation: 'fade-down-big'
};
return new FadeAnimation(effect);
}])
.animation('.fx-fade-left', ['FadeAnimation', function (FadeAnimation){
var effect = {
enter: {opacity: 1, transform: 'translateX(0)'},
leave: {opacity: 0, transform: 'translateX(-20px)'},
inverse: {opacity: 0, transform: 'translateX(20px)'},
animation: 'fade-left'
};
return new FadeAnimation(effect);
}])
.animation('.fx-fade-left-big', ['FadeAnimation', function (FadeAnimation){
var effect = {
enter: {opacity: 1, transform: 'translateX(0)'},
leave: {opacity: 0, transform: 'translateX(-2000px)'},
inverse: {opacity: 0, transform: 'translateX(2000px)'},
animation: 'fade-left-big'
};
return new FadeAnimation(effect);
}])
.animation('.fx-fade-right', ['FadeAnimation', function (FadeAnimation){
var effect = {
enter: {opacity: 1, transform: 'translateX(0)'},
leave: {opacity: 0, transform:'translateX(20px)'},
inverse: {opacity: 0, transform: 'translateX(-20px)'},
animation: 'fade-right'
};
return new FadeAnimation(effect);
}])
.animation('.fx-fade-right-big', ['FadeAnimation', function (FadeAnimation){
var effect = {
enter: {opacity: 1, transform: 'translateX(0)'},
leave: {opacity: 0, transform:'translateX(2000px)'},
inverse: {opacity: 0, transform: 'translateX(-2000px)'},
animation: 'fade-right-big'
};
return new FadeAnimation(effect);
}])
.animation('.fx-fade-up', ['FadeAnimation', function (FadeAnimation){
var effect = {
enter: {opacity: 1, transform: 'translateY(0)'},
leave: {opacity: 0, transform:'translateY(20px)'},
inverse: {opacity: 0, transform: 'translateY(-20px)'},
animation: 'fade-up'
};
return new FadeAnimation(effect);
}])
.animation('.fx-fade-up-big', ['FadeAnimation', function (FadeAnimation){
var effect = {
enter: {opacity: 1, transform: 'translateY(0)'},
leave: {opacity: 0, transform:'translateY(2000px)'},
inverse: {opacity: 0, transform: 'translateY(-2000px)'},
animation: 'fade-up-big'
};
return new FadeAnimation(effect);
}])
.animation('.fx-fade-overlay', ['FadeAnimation', function(FadeAnimation) {
var effect = {
enter: {opacity: 0.7},
leave: {opacity: 0},
inverse: {opacity: 0},
animation: 'fade-overlay'
};
return new FadeAnimation(effect);
}]);
angular.module('fx.animations.fades.factory', ['fx.animations.assist'])
.factory('FadeAnimation', ['$timeout', '$window', 'Assist', function ($timeout, $window, Assist){
return function (effect){
var inEffect = effect.enter,
outEffect = effect.leave,
outEffectLeave = effect.inverse || effect.leave,
fx_type = effect.animation;
this.enter = function(element, done){
var options = Assist.parseClassList(element);
options.motion = 'enter';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
Assist.addTimer(options, element, done);
inEffect.ease = options.ease.easeOut;
TweenMax.set(element, outEffect);
TweenMax.to(element, options.duration, inEffect);
return function (canceled){
var timer = element.data(timeoutKey);
if(canceled){
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
};
this.leave = function(element, done){
var options = Assist.parseClassList(element);
options.motion = 'leave';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
Assist.addTimer(options, element, done);
outEffectLeave.ease = options.ease.easeIn;
TweenMax.set(element, inEffect);
TweenMax.to(element, options.duration, outEffectLeave);
return function (canceled){
var timer = element.data(Assist.timeoutKey);
if(canceled){
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
};
this.move = this.enter;
this.addClass = function(element, className, done){
if(className){
var options = Assist.parseClassList(element);
options.motion = 'enter';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
Assist.addTimer(options, element, done);
TweenMax.to(element, options.duration, outEffectLeave);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
} else {
done();
}
};
this.removeClass = function(element, className, done){
if(className){
var options = Assist.parseClassList(element);
options.motion = 'leave';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
TweenMax.set(element, outEffect);
TweenMax.to(element, options.duration, inEffect);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
} else {
done();
}
};
};
}]);
/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Using Angular's '.animate', all fade animations are created with javaScript.
@RotateAnimation
Constructor function that returns a new animation object that has all
required methods for ngAnimate ex: this.enter(), this.leave(), etc
@effect
The actual animation that will be applied to the element, staggered
first: the style to applied to the element 1/4 through the animtion
mid: style to be applied to to the element 2/4 through the animation
third: style to be applied to the element 3/4 through the animation
end: style to be applied to the element when it's complete
animation: the name of the animtion for the eventing system
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
angular.module('fx.animations.rotations', ['fx.animations.rotations.factory'])
.animation('.fx-rotate-counterclock', ['RotateAnimation', function(RotateAnimation){
var effect = {
start: {opacity: 0, transformOrigin: 'center center', transform: 'rotate(-200deg)'},
end: {opacity: 1, transformOrigin: 'center center', transform: 'rotate(0)'},
inverse: {opacity: 0, transformOrigin: 'center center', transform: 'rotate(200deg)'},
animation: 'rotate-counterclock'
};
return new RotateAnimation(effect);
}])
.animation('.fx-rotate-clock', ['RotateAnimation', function(RotateAnimation){
var effect = {
start: {opacity: 0, transformOrigin: 'center center', transform: 'rotate(200deg)'},
end: {opacity: 1, transformOrigin: 'center center', transform: 'rotate(0)'},
inverse: {opacity: 0, transformOrigin: 'center center', transform: 'rotate(-200deg)'},
animation: 'rotate-clock'
};
return new RotateAnimation(effect);
}])
.animation('.fx-rotate-clock-left', ['RotateAnimation', function(RotateAnimation){
var effect = {
start: {opacity: 0, transformOrigin: 'left bottom', transform: 'rotate(-90deg)'},
end: {opacity: 1, transformOrigin: 'left bottom', transform: 'rotate(0)'},
inverse: {opacity: 0, transformOrigin: 'left bottom', transform: 'rotate(90deg)'},
animation: 'rotate-clock-left'
};
return new RotateAnimation(effect);
}])
.animation('.fx-rotate-counterclock-right', ['RotateAnimation', function(RotateAnimation){
var effect = {
start: {opacity: 0, transformOrigin: 'right bottom', transform: 'rotate(90deg)'},
end: {opacity: 1, transformOrigin: 'right bottom', transform: 'rotate(0)'},
inverse: {opacity: 0, transformOrigin: 'right bottom', transform: 'rotate(-90deg)'},
animation: 'rotate-counterclock-right'
};
return new RotateAnimation(effect);
}])
.animation('.fx-rotate-counterclock-up', ['RotateAnimation', function(RotateAnimation){
var effect = {
start: {opacity: 0, transformOrigin: 'left bottom', transform: 'rotate(90deg)'},
end: {opacity: 1, transformOrigin: 'left bottom', transform: 'rotate(0)'},
inverse: {opacity: 0, transformOrigin: 'left bottom', transform: 'rotate(-90deg)'},
animation: 'rotate-counterclock-up'
};
return new RotateAnimation(effect);
}])
.animation('.fx-rotate-clock-up', ['RotateAnimation', function(RotateAnimation){
var effect = {
start: {opacity: 0, transformOrigin: 'right bottom', transform: 'rotate(-90deg)'},
end: {opacity: 1, transformOrigin: 'right bottom', transform: 'rotate(0)'},
inverse: {opacity: 0, transformOrigin: 'right bottom', transform: 'rotate(90deg)'},
animation: 'rotate-clock-up'
};
return new RotateAnimation(effect);
}]);
angular.module('fx.animations.rotations.factory', ['fx.animations.assist'])
.factory('RotateAnimation', ['$timeout', '$window', 'Assist', function ($timeout, $window, Assist){
return function (effect){
var start = effect.start,
end = effect.end,
leaveEnd = effect.inverse,
fx_type = effect.animation;
this.enter = function(element, done){
var options = Assist.parseClassList(element);
options.motion = 'enter';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
end.ease = options.ease.easeOut;
Assist.addTimer(options, element, done);
TweenMax.set(element, start);
TweenMax.to(element, options.duration, end);
return function (canceled){
if(canceled){
var timer = element.data(Assist.timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
};
this.leave = function(element, done){
var options = Assist.parseClassList(element);
options.motion = 'leave';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
leaveEnd.ease = options.ease.easeIn;
Assist.addTimer(options, element, done);
TweenMax.set(element, end);
TweenMax.to(element, options.duration, leaveEnd);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
};
this.move = this.enter;
this.addClass = function(element, className, done){
if(className){
var options = Assist.parseClassList(element);
options.motion = 'enter';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
Assist.addTimer(options, element, done);
TweenMax.set(element, end);
TweenMax.to(element, options.duration, start);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
} else {
done();
}
};
this.removeClass = function(element, className, done){
if(className){
var options = Assist.parseClassList(element);
options.motion = 'enter';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
Assist.addTimer(options, element, done);
TweenMax.set(element, start);
TweenMax.to(element, options.duration, end);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
} else {
done();
}
};
};
}])
/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Using Angular's '.animate', all fade animations are created with javaScript.
@RotateAnimation
Constructor function that returns a new animation object that has all
required methods for ngAnimate ex: this.enter(), this.leave(), etc
@effect
The actual animation that will be applied to the element, staggered
first: the style to applied to the element 1/4 through the animtion
mid: style to be applied to to the element 2/4 through the animation
third: style to be applied to the element 3/4 through the animation
end: style to be applied to the element when it's complete
animation: the name of the animtion for the eventing system
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
angular.module('fx.animations.zooms', ['fx.animations.zooms.factory'])
.animation('.fx-zoom-normal', ['ZoomAnimation', function (ZoomAnimation){
var effect = {
start: {opacity: 0, transform: 'scale(.3)'},
end: {opacity: 1, transform: 'scale(1)'},
animation: 'zoom-normal'
};
return new ZoomAnimation(effect);
}])
.animation('.fx-zoom-down', ['ZoomAnimation', function (ZoomAnimation){
var effect = {
start: {opacity: 0, transform: 'scale(.1) translateY(-2000px)'},
end: {opacity: 1, transform: 'scale(1) translateY(0)'},
animation: 'zoom-down'
};
return new ZoomAnimation(effect);
}])
.animation('.fx-zoom-up', ['ZoomAnimation', function (ZoomAnimation){
var effect = {
start: {opacity: 0, transform: "scale(.1) translateY(2000px)"},
end: {opacity: 1, transform: "scale(1) translateY(0)"},
animation: 'zoom-up'
};
return new ZoomAnimation(effect);
}])
.animation('.fx-zoom-right', ['ZoomAnimation', function (ZoomAnimation){
var effect = {
start: {opacity: 0, transform: 'scale(.1) translateX(2000px)'},
end: {opacity: 1, transform: 'scale(1) translateX(0)'},
animation: 'zoom-right'
};
return new ZoomAnimation(effect);
}])
.animation('.fx-zoom-left', ['ZoomAnimation', function (ZoomAnimation){
var effect = {
start: {opacity: 0, transform: 'scale(.1) translateX(-2000px)'},
end: {opacity: 1, transform: 'scale(1) translateX(0)'},
animation: 'zoom-left'
};
return new ZoomAnimation(effect);
}]);
angular.module('fx.animations.zooms.factory', ['fx.animations.assist'])
.factory('ZoomAnimation', ['$timeout', '$window', 'Assist', function ($timeout, $window, Assist){
return function (effect){
var start = effect.start,
end = effect.end,
fx_type = effect.animation;
this.enter = function(element, done){
var options = Assist.parseClassList(element);
options.motion = 'enter';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
end.ease = options.ease.easeOut;
Assist.addTimer(options, element, done);
TweenMax.set(element, start);
TweenMax.to(element, options.duration, end);
return function (canceled){
if(canceled){
var timer = element.data(Assist.timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
};
this.leave = function(element, done){
var options = Assist.parseClassList(element);
options.motion = 'leave';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
start.ease = options.ease.easeIn;
Assist.addTimer(options, element, done);
TweenMax.set(element, end);
TweenMax.to(element, options.duration, start);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
};
this.move = this.enter;
this.removeClass = function(element, className, done){
if(className === 'ng-hide'){
var options = Assist.parseClassList(element);
options.motion = 'leave';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
Assist.addTimer(options, element, done);
TweenMax.set(element, start);
TweenMax.to(element, options.duration, end);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
} else {
done();
}
};
this.addClass = function(element, className, done){
if(className === 'ng-hide'){
var options = Assist.parseClassList(element);
options.motion = 'enter';
options.animation = fx_type;
options.timeoutKey = Assist.timeoutKey;
Assist.addTimer(options, element, done);
TweenMax.set(element, end);
TweenMax.to(element, options.duration, start);
return function (canceled){
if(canceled){
var timer = element.data(timeoutKey);
if(timer){
Assist.removeTimer(element, Assist.timeoutKey, timer);
}
}
};
} else {
done();
}
};
};
}])
}(angular, TweenMax, TimelineMax));
<md-toolbar ng-class="headerclass">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings" ng-click="leftbuttonclick()">
<i class="icon" ng-class="leftbuttonicon" style="font-size: 25px;"></i>
</md-button>
<span flex="5"></span>
<h2>
<span class="stable" style="font-family: RobotoThin">{{title}}</span>
</h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="More" ng-click="rightbuttonclick()">
<i class="icon" ng-class="rightbuttonicon" style="font-size: 25px;"></i>
</md-button>
</div>
<div ng-transclude></div>
</md-toolbar>
/*!
* Waves v0.7.2
* http://fian.my.id/Waves
*
* Copyright 2014 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:100px;height:100px;margin-top:-50px;margin-left:-50px;opacity:0;background:rgba(0,0,0,.2);background:-webkit-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-o-transition-property:-o-transform,opacity;transition-property:transform,opacity;-webkit-transform:scale(0) translate(0,0);-moz-transform:scale(0) translate(0,0);-ms-transform:scale(0) translate(0,0);-o-transform:scale(0) translate(0,0);transform:scale(0) translate(0,0);pointer-events:none}.waves-effect.waves-light .waves-ripple{background:rgba(255,255,255,.4);background:-webkit-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%)}.waves-effect.waves-classic .waves-ripple{background:rgba(0,0,0,.2)}.waves-effect.waves-classic.waves-light .waves-ripple{background:rgba(255,255,255,.4)}.waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}.waves-button,.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%)}.waves-button,.waves-button:hover,.waves-button:visited,.waves-button-input{white-space:nowrap;vertical-align:middle;cursor:pointer;border:none;outline:0;color:inherit;background-color:transparent;font-size:1em;line-height:1em;text-align:center;text-decoration:none;z-index:1}.waves-button{padding:.85em 1.1em;border-radius:.2em}.waves-button-input{margin:0;padding:.85em 1.1em}.waves-input-wrapper{border-radius:.2em;vertical-align:bottom}.waves-input-wrapper.waves-button{padding:0}.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%}.waves-float{-webkit-mask-image:none;-webkit-box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;transition:all 300ms}.waves-float:active{-webkit-box-shadow:0 8px 20px 1px rgba(0,0,0,.3);box-shadow:0 8px 20px 1px rgba(0,0,0,.3)}.waves-block{display:block}a.waves-effect .waves-ripple{z-index:-1}
/*!
* Waves v0.7.2
* http://fian.my.id/Waves
*
* Copyright 2014 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/
!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],function(){return b.apply(a)}):"object"==typeof exports?module.exports=b.call(a):a.Waves=b.call(a)}("object"==typeof global?global:this,function(){"use strict";function a(a){return null!==a&&a===a.window}function b(b){return a(b)?b:9===b.nodeType&&b.defaultView}function c(a){var b=typeof a;return"function"===b||"object"===b&&!!a}function d(a){return c(a)&&a.nodeType>0}function e(a){var b=m.call(a);return"[object String]"===b?l(a):c(a)&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(b)&&a.hasOwnProperty("length")?a:d(a)?[a]:[]}function f(a){var c,d,e={top:0,left:0},f=a&&a.ownerDocument;return c=f.documentElement,"undefined"!=typeof a.getBoundingClientRect&&(e=a.getBoundingClientRect()),d=b(f),{top:e.top+d.pageYOffset-c.clientTop,left:e.left+d.pageXOffset-c.clientLeft}}function g(a){var b="";for(var c in a)a.hasOwnProperty(c)&&(b+=c+":"+a[c]+";");return b}function h(a,b,c){if(c){c.classList.remove("waves-rippling");var d=c.getAttribute("data-x"),e=c.getAttribute("data-y"),f=c.getAttribute("data-scale"),h=c.getAttribute("data-translate"),i=Date.now()-Number(c.getAttribute("data-hold")),j=350-i;0>j&&(j=0),"mousemove"===a.type&&(j=150);var k="mousemove"===a.type?2500:o.duration;setTimeout(function(){var a={top:e+"px",left:d+"px",opacity:"0","-webkit-transition-duration":k+"ms","-moz-transition-duration":k+"ms","-o-transition-duration":k+"ms","transition-duration":k+"ms","-webkit-transform":f+" "+h,"-moz-transform":f+" "+h,"-ms-transform":f+" "+h,"-o-transform":f+" "+h,transform:f+" "+h};c.setAttribute("style",g(a)),setTimeout(function(){try{b.removeChild(c)}catch(a){return!1}},k)},j)}}function i(a){if(q.allowEvent(a)===!1)return null;for(var b=null,c=a.target||a.srcElement;null!==c.parentElement;){if(c.classList.contains("waves-effect")&&!(c instanceof SVGElement)){b=c;break}c=c.parentElement}return b}function j(a){q.registerEvent(a);var b=i(a);if(null!==b)if("touchstart"===a.type&&o.delay){var c=!1,d=setTimeout(function(){d=null,o.show(a,b)},o.delay),e=function(e){d&&(clearTimeout(d),d=null,o.show(a,b)),c||(c=!0,o.hide(e,b))},f=function(a){d&&(clearTimeout(d),d=null),e(a)};b.addEventListener("touchmove",f,!1),b.addEventListener("touchend",e,!1),b.addEventListener("touchcancel",e,!1)}else o.show(a,b),n&&(b.addEventListener("touchend",o.hide,!1),b.addEventListener("touchcancel",o.hide,!1)),b.addEventListener("mouseup",o.hide,!1),b.addEventListener("mouseleave",o.hide,!1)}var k=k||{},l=document.querySelectorAll.bind(document),m=Object.prototype.toString,n="ontouchstart"in window,o={duration:750,delay:200,show:function(a,b,c){if(2===a.button)return!1;b=b||this;var d=document.createElement("div");d.className="waves-ripple waves-rippling",b.appendChild(d);var e=f(b),h=a.pageY-e.top,i=a.pageX-e.left,j="scale("+b.clientWidth/100*3+")",k="translate(0,0)";c&&(k="translate("+c.x+"px, "+c.y+"px)"),"touches"in a&&a.touches.length&&(h=a.touches[0].pageY-e.top,i=a.touches[0].pageX-e.left),d.setAttribute("data-hold",Date.now()),d.setAttribute("data-x",i),d.setAttribute("data-y",h),d.setAttribute("data-scale",j),d.setAttribute("data-translate",k);var l={top:h+"px",left:i+"px"};d.classList.add("waves-notransition"),d.setAttribute("style",g(l)),d.classList.remove("waves-notransition"),l["-webkit-transform"]=j+" "+k,l["-moz-transform"]=j+" "+k,l["-ms-transform"]=j+" "+k,l["-o-transform"]=j+" "+k,l.transform=j+" "+k,l.opacity="1";var m="mousemove"===a.type?2500:o.duration;l["-webkit-transition-duration"]=m+"ms",l["-moz-transition-duration"]=m+"ms",l["-o-transition-duration"]=m+"ms",l["transition-duration"]=m+"ms",d.setAttribute("style",g(l))},hide:function(a,b){b=b||this;for(var c=b.getElementsByClassName("waves-rippling"),d=0,e=c.length;e>d;d++)h(a,b,c[d])}},p={input:function(a){var b=a.parentNode;if("i"!==b.tagName.toLowerCase()||!b.classList.contains("waves-effect")){var c=document.createElement("i");c.className=a.className+" waves-input-wrapper",a.className="waves-button-input",b.replaceChild(c,a),c.appendChild(a);var d=window.getComputedStyle(a,null),e=d.color,f=d.backgroundColor;c.setAttribute("style","color:"+e+";background:"+f),a.setAttribute("style","background-color:rgba(0,0,0,0);")}},img:function(a){var b=a.parentNode;if("i"!==b.tagName.toLowerCase()||!b.classList.contains("waves-effect")){var c=document.createElement("i");b.replaceChild(c,a),c.appendChild(a)}}},q={touches:0,allowEvent:function(a){var b=!0;return/^(mousedown|mousemove)$/.test(a.type)&&q.touches&&(b=!1),b},registerEvent:function(a){var b=a.type;"touchstart"===b?q.touches+=1:/^(touchend|touchcancel)$/.test(b)&&setTimeout(function(){q.touches&&(q.touches-=1)},500)}};return k.init=function(a){var b=document.body;a=a||{},"duration"in a&&(o.duration=a.duration),"delay"in a&&(o.delay=a.delay),n&&(b.addEventListener("touchstart",j,!1),b.addEventListener("touchcancel",q.registerEvent,!1),b.addEventListener("touchend",q.registerEvent,!1)),b.addEventListener("mousedown",j,!1)},k.attach=function(a,b){a=e(a),"[object Array]"===m.call(b)&&(b=b.join(" ")),b=b?" "+b:"";for(var c,d,f=0,g=a.length;g>f;f++)c=a[f],d=c.tagName.toLowerCase(),-1!==["input","img"].indexOf(d)&&(p[d](c),c=c.parentElement),c.className+=" waves-effect"+b},k.ripple=function(a,b){a=e(a);var c=a.length;if(b=b||{},b.wait=b.wait||0,b.position=b.position||null,c)for(var d,g,h,i={},j=0,k={type:"mousedown",button:1},l=function(a,b){return function(){o.hide(a,b)}};c>j;j++)if(d=a[j],g=b.position||{x:d.clientWidth/2,y:d.clientHeight/2},h=f(d),i.x=h.left+g.x,i.y=h.top+g.y,k.pageX=i.x,k.pageY=i.y,o.show(k,d),b.wait>=0&&null!==b.wait){var m={type:"mouseup",button:1};setTimeout(l(m,d),b.wait)}},k.calm=function(a){a=e(a);for(var b={type:"mouseup",button:1},c=0,d=a.length;d>c;c++)o.hide(b,a[c])},k.displayEffect=function(a){console.error("Waves.displayEffect() has been deprecated and will be removed in future version. Please use Waves.init() to initialize Waves effect"),k.init(a)},k});
//# sourceMappingURL=waves.min.js.map