Improved bar animation and gesture detection

webinjaz · Mar 13, 2014 · e42888c · e42888c
1 parent 86e45c3
commit e42888c
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 108 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 #############
 grunt
 demo/sass
+dist
 
 #################
 ## Eclipse

diff --git a/index.html b/index.html
@@ -239,8 +239,7 @@ <h3>Options</h3>
 		</footer>
 	</div>
 	<script src="lib/ios-orientationchange-fix.js"></script>
-	<script src="lib/jquery-2.0.3.min.js"></script>
-	<script src="lib/jquery.isotope.min.js"></script>
+	<script src="lib/jquery-2.1.0.min.js"></script>
 	<script src="src/js/jquery.swipebox.js"></script>
 	<script type="text/javascript">
 		;( function( $ ) {

diff --git a/lib/jquery-2.0.3.min.js b/lib/jquery-2.0.3.min.js
diff --git a/lib/jquery-2.1.0.min.js b/lib/jquery-2.1.0.min.js
diff --git a/lib/jquery.isotope.min.js b/lib/jquery.isotope.min.js
diff --git a/sass/swipebox.scss b/sass/swipebox.scss
@@ -1,13 +1,15 @@
+/*! Swipebox v1.2.6 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
+
 @import "compass";
 @import "compass/css3/user-interface";
 @mixin bar($color) {
 	background-color:$color;
 	@include background-image(linear-gradient(  $color, darken($color, 20%))); 
 }
 
-// html.swipebox {
-//   overflow: hidden!important;
-// }
+html.swipebox-html.swipebox-touch {
+  overflow: hidden!important;
+}
 
 #swipebox-overlay img {
 	border: none!important;
@@ -101,11 +103,7 @@
 	bottom: -50px;
 
 	&.visible-bars {
-		bottom: 0;
-	}
-
-	&.force-visible-bars {
-		bottom: 0!important;
+		@include translateY(-50px);
 	}
 
 	#swipebox-prev, 
@@ -152,11 +150,7 @@
 	text-align: center;
 
 	&.visible-bars {
-		top: 0;
-	}
-
-	&.force-visible-bars {
-		top: 0!important;
+		@include translateY(50px);
 	}
 }
 

diff --git a/src/css/swipebox.css b/src/css/swipebox.css
@@ -1,3 +1,8 @@
+/*! Swipebox v1.2.6 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
+html.swipebox-html.swipebox-touch {
+  overflow: hidden !important;
+}
+
 #swipebox-overlay img {
   border: none !important;
 }
@@ -87,10 +92,11 @@
   bottom: -50px;
 }
 #swipebox-action.visible-bars {
-  bottom: 0;
-}
-#swipebox-action.force-visible-bars {
-  bottom: 0 !important;
+  -webkit-transform: translateY(-50px);
+  -moz-transform: translateY(-50px);
+  -ms-transform: translateY(-50px);
+  -o-transform: translateY(-50px);
+  transform: translateY(-50px);
 }
 #swipebox-action #swipebox-prev,
 #swipebox-action #swipebox-next,
@@ -127,10 +133,11 @@
   text-align: center;
 }
 #swipebox-caption.visible-bars {
-  top: 0;
-}
-#swipebox-caption.force-visible-bars {
-  top: 0 !important;
+  -webkit-transform: translateY(50px);
+  -moz-transform: translateY(50px);
+  -ms-transform: translateY(50px);
+  -o-transform: translateY(50px);
+  transform: translateY(50px);
 }
 
 #swipebox-slider.rightSpring {

diff --git a/src/css/swipebox.min.css b/src/css/swipebox.min.css
diff --git a/src/js/jquery.swipebox.js b/src/js/jquery.swipebox.js
@@ -1,12 +1,4 @@
-/**
- * Swipebox - A touchable jQuery lightbox
- *
- * @author Constantin Saguin - @brutaldesign
- * @link  http://csag.co
- * @github http://github.com/brutaldesign/swipebox
- * @version 1.2.5
- * @license MIT License
-*/
+/*! Swipebox v1.2.6 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
 
 ;( function ( window, document, $, undefined ) {
 
@@ -27,8 +19,8 @@
 		elements = [], // slides array [ { href:'...', title:'...' }, ...],
 		selector = elem.selector,
 		$selector = $( selector ),
-		isTouch = document.createTouch !== undefined || ( 'ontouchstart' in window ) || ( 'onmsgesturechange' in window ) || navigator.msMaxTouchPoints,
-		supportSVG = !! ( window.SVGSVGElement ),
+		isMobile = navigator.userAgent.match( /(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i ),
+		supportSVG = !! document.createElementNS && !! document.createElementNS( 'http://www.w3.org/2000/svg', "svg").createSVGRect,
 		winWidth = window.innerWidth ? window.innerWidth : $( window ).width(),
 		winHeight = window.innerHeight ? window.innerHeight : $( window ).height(),
 		/* jshint multistr: true */
@@ -103,7 +95,7 @@
 							title: title
 						} );
 					} );
-					
+
 					index = $elem.index( $( this ) );
 					event.preventDefault();
 					event.stopPropagation();
@@ -148,7 +140,7 @@
 				var $this = this;
 
 				$( 'body' ).append( html );
-
+								
 				if ( $this.doCssTrans() ) {
 					$( '#swipebox-slider' ).css( {
 						'-webkit-transition' : 'left 0.4s ease',
@@ -188,8 +180,13 @@
 
 				$this.setDim();
 				$this.actions();
-				$this.keyboard();
-				$this.gesture();
+
+				if ( isMobile ) {
+					$this.gesture();
+				} else {
+					$this.keyboard();
+				}
+
 				$this.animBars();
 				$this.resize();
 
@@ -270,50 +267,49 @@
 			 * Touch navigation
 			 */
 			gesture : function () {
-				if ( isTouch ) {
-					var $this = this,
-						distance = null,
-						swipMinDistance = 10,
-						startCoords = {},
-						endCoords = {},
-						bars = $( '#swipebox-caption, #swipebox-action' );
+
+				var $this = this,
+				distance = null,
+				swipMinDistance = 10,
+				startCoords = {},
+				endCoords = {};
+				var bars = $( '#swipebox-caption, #swipebox-action' );
 
-					bars.addClass( 'visible-bars' );
-					$this.setTimeout();
+				bars.addClass( 'visible-bars' );
+				$this.setTimeout();
 
-					$( 'body' ).bind( 'touchstart', function( event ) {
+				$( 'body' ).bind( 'touchstart', function( event ) {
 
-						$( this ).addClass( 'touching' );
+					$(this).addClass( 'touching' );
 
-						endCoords = event.originalEvent.targetTouches[0];
-						startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
+					endCoords = event.originalEvent.targetTouches[0];
+					startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
 
-						$( '.touching' ).bind( 'touchmove', function( event ) {
-							event.preventDefault();
-							event.stopPropagation();
-							endCoords = e.originalEvent.targetTouches[0];
+					$( '.touching' ).bind( 'touchmove',function( event ) {
+						event.preventDefault();
+						event.stopPropagation();
+						endCoords = event.originalEvent.targetTouches[0];
 
-						} );
-			
+					} );
+
 					return false;
 
-				} ).bind( 'touchend', function( event ) {
-
+				} ).bind( 'touchend',function( event ) {
 					event.preventDefault();
 					event.stopPropagation();
 
 					distance = endCoords.pageX - startCoords.pageX;
-
+						
 					if ( distance >= swipMinDistance ) {
-
+						
 						// swipeLeft
 						$this.getPrev();
-
-					} else if ( distance <= - swipMinDistance ) {
 
+					} else if ( distance <= - swipMinDistance ) {
+
 						// swipeRight
 						$this.getNext();
-				
+
 					} else {
 						// tap
 						if ( ! bars.hasClass( 'visible-bars' ) ) {
@@ -328,9 +324,8 @@
 
 					$( '.touching' ).off( 'touchmove' ).removeClass( 'touching' );
 
-					} );
+				} );
 
-				}
 			},
 
 			/**
@@ -406,16 +401,20 @@
 					}
 				} );
 
-				$( '#swipebox-action' ).hover( function() {
+				if ( ! isMobile ) {
+
+					$( '#swipebox-action' ).hover( function() {
 						$this.showBars();
-						bars.addClass( 'force-visible-bars' );
+						bars.addClass( 'visible-bars' );
 						$this.clearTimeout();
 
-					}, function() { 
-						bars.removeClass( 'force-visible-bars' );
-						$this.setTimeout();
+						}, function() { 
+							bars.removeClass( 'visible-bars' );
+							$this.setTimeout();
 
-				} );
+					} );
+
+				}
 			},
 
 			/**
@@ -448,26 +447,30 @@
 			 */
 			actions : function () {
 				var $this = this;
+
+				var action = isMobile ? 'touchend' : 'click';
 
 				if ( elements.length < 2 ) {
+
 					$( '#swipebox-prev, #swipebox-next' ).hide();
+
 				} else {
-					$( '#swipebox-prev' ).bind( 'click touchend', function( event ) {
+					$( '#swipebox-prev' ).bind( action, function( event ) {
 						event.preventDefault();
 						event.stopPropagation();
 						$this.getPrev();
 						$this.setTimeout();
 					} );
 
-					$( '#swipebox-next' ).bind( 'click touchend', function( event ) {
+					$( '#swipebox-next' ).bind( action, function( event ) {
 						event.preventDefault();
 						event.stopPropagation();
 						$this.getNext();
 						$this.setTimeout();
 					} );
 				}
 
-				$( '#swipebox-close' ).bind( 'click touchend', function() {
+				$( '#swipebox-close' ).bind( action, function() {
 					$this.closeSlide();
 				} );
 			},
@@ -508,6 +511,9 @@
 			 */
 			openSlide : function ( index ) {
 				$( 'html' ).addClass( 'swipebox-html' );
+				if ( isMobile ) {
+					$( 'html' ).addClass( 'swipebox-touch' );
+				}
 				$( window ).trigger( 'resize' ); // fix scroll bar visibility on desktop
 				this.setSlide( index, true );
 			},
@@ -594,7 +600,7 @@
 				var youtubeShortUrl = url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/);
 				var vimeoUrl = url.match( /vimeo\.com\/([0-9]*)/ );
 				if ( youtubeUrl || youtubeShortUrl) {
-					if ( youtubeShortUrl ){
+					if ( youtubeShortUrl ) {
 						youtubeUrl = youtubeShortUrl;
 					}
 					iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtubeUrl[1] + '" frameborder="0" allowfullscreen></iframe>';
@@ -651,7 +657,7 @@
 					this.setSlide( index );
 					this.preloadMedia( index-1 );
 				}
-				else{
+				else {
 
 					$( '#swipebox-slider' ).addClass( 'leftSpring' );
 					setTimeout( function() {
@@ -664,7 +670,8 @@
 			 * Close
 			 */
 			closeSlide : function () {
-				$( 'html' ).removeClass( 'swipebox' );
+				$( 'html' ).removeClass( 'swipebox-html' );
+				$( 'html' ).removeClass( 'swipebox-touch' );
 				$( window ).trigger( 'resize' );
 				this.destroy();
 			},