Made it easier to handle 3d transitions by moving the overflow logic …

…into flux.transition.js
joelambert · May 20, 2011 · 0e3057e · 0e3057e
1 parent 785ba3f
commit 0e3057e
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 98 deletions.
diff --git a/build/build.xml b/build/build.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <build>
-	<version>1.2.1</version>
+	<version>1.3beta</version>
 	<outputname>flux</outputname>
 	<docroot>../js/</docroot>
 	<files>

diff --git a/change.log b/change.log
@@ -1,9 +1,17 @@
+1.3
+------------------
+Made it easier to handle 3d transitions by moving the overflow logic into flux.transition.js
+
+Ensured event object is sent to callback for .transitionEnd() helper function
+
+Updated zepto.js to v0.6
+
 1.2.1 (2011/05/17)
------------------
+------------------
 Fixed a z-index issue with 'bars3d' under Chrome. This also reduced flicker during rendering on iOS.
 
 1.2 (2011/05/16)
------------------
+------------------
 Added feature detection so any browser that supports CSS3 transitions will now work, jQuery may need to be used instead of Zepto for non Webkit based browsers.
 
 Added helper function for detecting the Transition end .transition()
@@ -31,11 +39,11 @@ Added the event 'fluxTransitionEnd' which now fires whenever a transition has co
 Fixed a chaining bug with .transitionEnd() helper function
 
 1.1
------------------
+------------------
 Added support for Zepto.js as a drop in replacement for jQuery
 
 Added detection of 3d CSS effects to ensure hardware acceleration is used where possible
 
 1.0
------------------
+------------------
 Initial release
diff --git a/js/flux.js b/js/flux.js
@@ -1,5 +1,5 @@
 /**
- * @preserve Flux Slider v1.2.1
+ * @preserve Flux Slider v1.3beta
  * http://www.joelambert.co.uk/flux
  *
  * Copyright 2011, Joe Lambert. All rights reserved
@@ -9,7 +9,7 @@
 
 // Flux namespace
 var flux = {
-	version: '1.2.1'
+	version: '1.3beta'
 };
 
 flux.slider = function(elem, opts) {
@@ -204,7 +204,7 @@ flux.slider.prototype = {
 		this.image2.css({
 			'background-image': 'url("'+this.getImage(this.nextImageIndex).src+'")',
 			'z-index': 100
-		});
+		}).show();
 
 		if(this.options.pagination)
 		{
@@ -362,7 +362,7 @@ $(function() {
 
 				// Perform the callback function
 				if(callback)
-					callback.call(this);
+					callback.call(this, event);
 			});
 		}
 
@@ -405,13 +405,17 @@ flux.transition.prototype = {
 			'background-image': 'none'
 		});
 
+		this.slider.imageContainer.css('overflow', this.options.requires3d ? 'visible' : 'hidden');
+
 		if(this.options.execute)
 			this.options.execute.call(this);
 	},
 	finished: function() {
 		if(this.options.after)
 			this.options.after.call(this);
 
+		this.slider.imageContainer.css('overflow', 'hidden');	
+
 		this.slider.setupImages();
 		this.slider.element.trigger('fluxTransitionEnd');
 	}
@@ -473,19 +477,17 @@ flux.transitions.bars3d = function(fluxslider, opts) {
 		barWidth: 100,
 		perspective: 600,
 		setup: function() {
-			var barCount = Math.floor(this.slider.image1.width() / this.options.barWidth) + 1
+			var barCount = Math.floor(this.slider.image1.width() / this.options.barWidth) + 1;
 
 			// Adjust the barWidth so that we can fit inside the available space
 			this.options.barWidth = Math.floor(this.slider.image1.width() / barCount);
 
 			// Work out how much space remains with the adjusted barWidth
-			var remainder = this.slider.image1.width() - (barCount * this.options.barWidth);
-			var addPerLoop = Math.ceil(remainder / barCount);
-
-			var delayBetweenBars = 150;
-			var height = this.slider.image1.height();
-
-			var totalLeft = 0;
+			var remainder = this.slider.image1.width() - (barCount * this.options.barWidth),
+				addPerLoop = Math.ceil(remainder / barCount),
+				delayBetweenBars = 150,
+				height = this.slider.image1.height(),
+				totalLeft = 0;
 
 			for(var i=0; i<barCount; i++) {
 				var thisBarWidth = this.options.barWidth;
@@ -510,15 +512,15 @@ flux.transitions.bars3d = function(fluxslider, opts) {
 					'background-repeat': 'no-repeat'
 				}).css3({
 					'backface-visibility': 'hidden'
-				});
+				}),
 
-				var bar2 = $(bar.get(0).cloneNode(false)).css({
+				bar2 = $(bar.get(0).cloneNode(false)).css({
 					'background-image': this.slider.image2.css('background-image')
 				}).css3({
 					'transform': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -height/2, height/2)
-				});
+				}),
 
-				var left = $('<div class="side bar bar-'+i+'"></div>').css({
+				left = $('<div class="side bar bar-'+i+'"></div>').css({
 					width: height+'px',
 					height: height+'px',
 					position: 'absolute',
@@ -529,13 +531,13 @@ flux.transitions.bars3d = function(fluxslider, opts) {
 				}).css3({
 					'transform': flux.browser.rotateY(90) + ' ' + flux.browser.translate(height/2, 0, -height/2) + ' ' + flux.browser.rotateY(180),
 					'backface-visibility': 'hidden'
-				});
+				}),
 
-				var right = $(left.get(0).cloneNode(false)).css3({
+				right = $(left.get(0).cloneNode(false)).css3({
 					'transform': flux.browser.rotateY(90) + ' ' + flux.browser.translate(height/2, 0, thisBarWidth-height/2)
-				});
+				}),
 
-				var barContainer = $('<div class="barcontainer"></div>').css({
+				barContainer = $('<div class="barcontainer"></div>').css({
 					width: thisBarWidth+'px',
 					height: '100%',
 					position: 'absolute',
@@ -555,37 +557,26 @@ flux.transitions.bars3d = function(fluxslider, opts) {
 				totalLeft += thisBarWidth;
 			}
 
-			this.imageContainerOverflow = this.slider.imageContainer.css('overflow');
-
-			this.slider.imageContainer.css({
-				'overflow': 'visible'
-			}).css3({
+			this.slider.imageContainer.css3({
 				'perspective': this.options.perspective,
 				'perspective-origin': '50% 50%'
 			});
 		},
 		execute: function() {
-			//return;
-			var _this = this;
-
-			var height = this.slider.image1.height();
-
-			var bars = this.slider.image1.find('div.barcontainer');
+			var _this = this,
+				height = this.slider.image1.height(),
+				bars = this.slider.image1.find('div.barcontainer');
 
 			this.slider.image2.hide();
 
 			// Get notified when the last transition has completed
-			$(bars[bars.length-1]).transitionEnd(function(){
+			bars.last().transitionEnd(function(event){
 				_this.slider.image2.show();
-
-				_this.slider.imageContainer.css({
-					'overflow': _this.imageContainerOverflow
-				})
-
+
 				_this.finished();
 			});
 
-			this.slider.image1.find('div.barcontainer').css3({
+			bars.css3({
 				'transform': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height/2, height/2)
 			});
 		}
@@ -789,11 +780,8 @@ flux.transitions.cube = function(fluxslider, opts) {
 			var height = this.slider.image1.height();
 
 			// Setup the container to allow 3D perspective
-			this.imageContainerOverflow = this.slider.imageContainer.css('overflow');
 
-			this.slider.imageContainer.css({
-				'overflow': 'visible'
-			}).css3({
+			this.slider.imageContainer.css3({
 				'perspective': this.options.perspective,
 				'perspective-origin': '50% 50%'
 			});
@@ -826,7 +814,6 @@ flux.transitions.cube = function(fluxslider, opts) {
 			var nextFace = $('<div class="face next"></div>').css($.extend(css, {
 				background: this.slider.image2.css('background-image')
 			})).css3({
-				//'transform': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -height/2, height/2)
 				'transform' : this.options.transitionStrings.call(this, this.options.direction, 'nextFace')
 			});
 
@@ -846,10 +833,6 @@ flux.transitions.cube = function(fluxslider, opts) {
 			}).transitionEnd(function(){
 				_this.slider.image2.show();
 
-				_this.slider.imageContainer.css({
-					'overflow': _this.imageContainerOverflow
-				})
-
 				_this.finished();
 			});
 		},