From 4f55780750fc44e574993332aa564c3557e078c6 Mon Sep 17 00:00:00 2001
From: Ryan Florence <rpflorence@gmail.com>
Date: Mon, 22 Nov 2010 19:55:25 -0700
Subject: [PATCH] - [Added] MooTools Transition - [Added] jQuery Transition -
 Moved stuff around a bit

---
 Source/CSSAnimation.MooTools.js               | 30 ++++++++-
 Source/CSSAnimation.jQuery.js                 | 40 +++++++++---
 Tests/{All => Transform}/Transform.html       |  0
 .../Transform_(MooTools).html                 |  0
 .../Transform_(jQuery).html                   |  0
 Tests/{All => Transition}/Transition.html     |  0
 Tests/Transition/Transition_(MooTools).html   | 63 +++++++++++++++++++
 Tests/Transition/Transition_(jQuery).html     | 63 +++++++++++++++++++
 8 files changed, 185 insertions(+), 11 deletions(-)
 rename Tests/{All => Transform}/Transform.html (100%)
 rename Tests/{All => Transform}/Transform_(MooTools).html (100%)
 rename Tests/{All => Transform}/Transform_(jQuery).html (100%)
 rename Tests/{All => Transition}/Transition.html (100%)
 create mode 100644 Tests/Transition/Transition_(MooTools).html
 create mode 100644 Tests/Transition/Transition_(jQuery).html

diff --git a/Source/CSSAnimation.MooTools.js b/Source/CSSAnimation.MooTools.js
index 0005468..0c97456 100644
--- a/Source/CSSAnimation.MooTools.js
+++ b/Source/CSSAnimation.MooTools.js
@@ -29,17 +29,41 @@ Element.Properties.transform = {
 
 };
 
+Element.Properties.transition = {
+
+	set: function(supported){
+		return this.store('transition', new Transition(this, supported));
+	},
+
+	get: function(){
+		var instance = this.retrieve('transition');
+		return instance || this.set('transition').get('transition');
+	}
+
+};
+
 (function(){
+
 	var obj = {};
+
 	['translate', 'rotate', 'scale', 'skew'].each(function(method){
-		obj[method] = function(axis, value){
-			this.get('transform')[method](axis, value);
+		obj[method] = function(){
+			var instance = this.get('transform');
+			instance[method].apply(instance, Array.slice(arguments, 0));
 			return this;
 		};
 	});
+
 	obj.clearTransform = function(){
 		this.get('transform').clear();
 		return this;
-	}
+	};
+	
+	obj.setTransition = function(){
+		var instance = this.get('transition');
+		instance.set.apply(instance, Array.slice(arguments, 0));
+	};
+	
 	Element.implement(obj);
+
 }());
diff --git a/Source/CSSAnimation.jQuery.js b/Source/CSSAnimation.jQuery.js
index 1807e77..484a057 100644
--- a/Source/CSSAnimation.jQuery.js
+++ b/Source/CSSAnimation.jQuery.js
@@ -18,16 +18,33 @@ provides: [jQuery]
 
 ;(function($){
 
-var get = function(){
-	return $(this).data('transform') || new Transform(this);
+var getTransform = function(){
+	var $this = $(this),
+		instance = $this.data('transform');
+	if (!instance) {
+		instance = new Transform(this);
+		$this.data('transform', instance);
+	}
+	return instance;
+},
+
+getTransition = function(){
+	var $this = $(this),
+		instance = $this.data('transition');
+	if (!instance) {
+		instance = new Transition(this);
+		$this.data('transition', instance);
+	}
+	return instance;
 };
 
 $.each(['translate', 'rotate', 'scale', 'skew'], function(i, method){
 
-	$.fn[method] = function(axis, value){
+	$.fn[method] = function(){
+		var args = arguments;
 		return $(this).each(function(){
-			var instance = get.apply(this);
-			instance[method](axis, value);
+			var instance = getTransform.apply(this);
+			instance[method].apply(instance, Array.prototype.slice.call(args, 0));
 		});
 	}
 
@@ -35,9 +52,16 @@ $.each(['translate', 'rotate', 'scale', 'skew'], function(i, method){
 
 $.fn.clearTransform = function(){
 	return $(this).each(function(){
-		var instance = get.apply(this);
-		instance.clear();
+		var instance = getTransform.apply(this).clear();
+	});
+};
+
+$.fn.transition = function(){
+	var args = arguments;
+	return $(this).each(function(){
+		var instance = getTransition.apply(this);
+		instance.set.apply(instance, Array.prototype.slice.call(args, 0));
 	});
 };
-	
+
 })(jQuery);
diff --git a/Tests/All/Transform.html b/Tests/Transform/Transform.html
similarity index 100%
rename from Tests/All/Transform.html
rename to Tests/Transform/Transform.html
diff --git a/Tests/All/Transform_(MooTools).html b/Tests/Transform/Transform_(MooTools).html
similarity index 100%
rename from Tests/All/Transform_(MooTools).html
rename to Tests/Transform/Transform_(MooTools).html
diff --git a/Tests/All/Transform_(jQuery).html b/Tests/Transform/Transform_(jQuery).html
similarity index 100%
rename from Tests/All/Transform_(jQuery).html
rename to Tests/Transform/Transform_(jQuery).html
diff --git a/Tests/All/Transition.html b/Tests/Transition/Transition.html
similarity index 100%
rename from Tests/All/Transition.html
rename to Tests/Transition/Transition.html
diff --git a/Tests/Transition/Transition_(MooTools).html b/Tests/Transition/Transition_(MooTools).html
new file mode 100644
index 0000000..49f9b25
--- /dev/null
+++ b/Tests/Transition/Transition_(MooTools).html
@@ -0,0 +1,63 @@
+<style>
+#container {
+	width: 400px;
+	height: 280px;
+	position: absolute;
+	left: 440px;
+	top: 40px;
+	text-align: center;
+	-webkit-perspective: 800;
+}
+#transformer {
+	width: 50%;
+	height: 50%;
+	background: #ccc;
+	line-height: 100px;
+	font-size: 25px;
+}
+</style>
+
+<div id=container>
+	<div id=transformer>Transform me!</div>
+</div>
+
+<script src="/depender/build?require=CSSAnimation/MooTools,Core/Element.Event"></script>
+
+<script>
+var fixture = $('transformer'),
+	transform = new Transform(fixture);
+
+fixture.setTransition({
+	property: 'transform',
+	'timing-function': 'ease-out',
+	duration: '500ms'
+});
+
+makeActions([
+	{
+		fn: function(){
+			transform.set('translateX(50%)');
+		},
+		title: "translateX",
+		description: 'Constructed with the property as transform, should move across the X axis.'
+	},
+	{
+		fn: function(){
+			fixture.setTransition('property', 'margin-top');
+			fixture.style.marginTop = '50px';
+		},
+		title: "setTransition('property', 'margin-top')",
+		description: 'Should change the transition property to margin-top and move down 50px'
+	},
+	{
+		fn: function(){
+			fixture.setTransition('property', 'background-color, color');
+			fixture.style.color = '#fff';
+			fixture.style.backgroundColor = '#000'
+		},
+		title: "set('property', 'background-color, color')",
+		description: 'Should support multiple properties'
+	}
+]);
+
+</script>
\ No newline at end of file
diff --git a/Tests/Transition/Transition_(jQuery).html b/Tests/Transition/Transition_(jQuery).html
new file mode 100644
index 0000000..7815a8e
--- /dev/null
+++ b/Tests/Transition/Transition_(jQuery).html
@@ -0,0 +1,63 @@
+<style>
+#container {
+	width: 400px;
+	height: 280px;
+	position: absolute;
+	left: 440px;
+	top: 40px;
+	text-align: center;
+	-webkit-perspective: 800;
+}
+#transformer {
+	width: 50%;
+	height: 50%;
+	background: #ccc;
+	line-height: 100px;
+	font-size: 25px;
+}
+</style>
+
+<div id=container>
+	<div id=transformer>Transform me!</div>
+</div>
+
+<script src="/depender/build?require=CSSAnimation/jQuery,Core/Element.Event"></script>
+
+<script>
+var fixture = $('#transformer'),
+	transform = new Transform(fixture[0]);
+
+fixture.transition({
+	property: 'transform',
+	'timing-function': 'ease-out',
+	duration: '500ms'
+});
+
+makeActions([
+	{
+		fn: function(){
+			transform.set('translateX(50%)');
+		},
+		title: "translateX",
+		description: 'Constructed with the property as transform, should move across the X axis.'
+	},
+	{
+		fn: function(){
+			fixture.transition('property', 'margin-top');
+			fixture[0].style.marginTop = '50px';
+		},
+		title: "setTransition('property', 'margin-top')",
+		description: 'Should change the transition property to margin-top and move down 50px'
+	},
+	{
+		fn: function(){
+			fixture.transition('property', 'background-color, color');
+			fixture[0].style.color = '#fff';
+			fixture[0].style.backgroundColor = '#000'
+		},
+		title: "set('property', 'background-color, color')",
+		description: 'Should support multiple properties'
+	}
+]);
+
+</script>
\ No newline at end of file