Merge pull request brutaldesign#191 from julianxhokaxhiu/master

Improve video embedding and identify

Author: Constantin Saguin

README.md

@@ -16,6 +16,7 @@ Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet.
 - CSS transitions with jQuery fallback
 - Retina support for UI icons
 - Easy CSS customization
+- Video, Images and Inline content
 
 ###Compatibility
 
@@ -69,6 +70,8 @@ afterOpen: null, // called after opening
 afterClose: function(){}, // called after closing
 loopAtEnd: false, // true will return to the first image after the last image is reached
 autoplayVideos: false // true will autoplay Youtube and Vimeo videos
+queryStringData: {} // plain object with custom query string arguments to pass/override for video URLs,
+toggleClassOnLoad: '' // CSS class that can be toggled when the slide will be loaded (like 'hidden' of Bootstrap)
 ```
 
 ###Pull Requests

bower.json

@@ -1,5 +1,5 @@
 {
   "name": "swipebox",
-  "version": "1.3.0.2",
+  "version": "1.4.1",
   "main": "src/js/jquery.swipebox.js"
 }

grunt/README.md

@@ -0,0 +1,8 @@
+swipebox
+===
+
+A touchable jQuery lightbox
+
+---
+
+This is where the build task lives.

grunt/package.json

@@ -1,16 +1,21 @@
 {
   "name": "grunt-swipebox",
-  "version": "1.3.0.2",
+  "version": "1.4.1",
   "description": "A touchable jQuery lightbox",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/brutaldesign/swipebox.git"
+  },
+  "license": "MIT",
   "devDependencies": {
-    "grunt": "~0.4.2",
-    "load-grunt-tasks": "~0.2.1",
-    "grunt-contrib-sass": "~0.7.3",
-    "grunt-autoprefixer": "~0.7.2",
-    "grunt-contrib-cssmin": "~0.8.0",
-    "grunt-contrib-jshint": "~0.8.0",
-    "grunt-contrib-uglify": "~0.2.7",
-    "grunt-contrib-watch": "~0.5.3",
-    "grunt-notify": "~0.2.16"
+    "grunt": "~0.4.5",
+    "load-grunt-tasks": "~1.0.0",
+    "grunt-contrib-sass": "~0.8.1",
+    "grunt-autoprefixer": "~2.0.0",
+    "grunt-contrib-cssmin": "~0.10.0",
+    "grunt-contrib-jshint": "~0.10.0",
+    "grunt-contrib-uglify": "~0.6.0",
+    "grunt-contrib-watch": "~0.6.1",
+    "grunt-notify": "~0.3.1"
   }
 }

scss/swipebox.scss

@@ -67,7 +67,9 @@ html.swipebox-html.swipebox-touch {
 			margin-right: -1px;
 		}
 
-		img, .swipebox-video-container {
+		img,
+        .swipebox-video-container,
+        .swipebox-inline-container {
 			display: inline-block;
 			max-height: 100%;
 			max-width: 100%;

src/css/swipebox.css

@@ -16,9 +16,9 @@ html.swipebox-html.swipebox-touch {
   z-index: 99999 !important;
   overflow: hidden;
   -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 #swipebox-container {
@@ -29,7 +29,7 @@ html.swipebox-html.swipebox-touch {
 
 #swipebox-slider {
   -webkit-transition: -webkit-transform 0.4s ease;
-  transition: transform 0.4s ease;
+          transition: transform 0.4s ease;
   height: 100%;
   left: 0;
   top: 0;
@@ -53,7 +53,9 @@ html.swipebox-html.swipebox-touch {
   width: 1px;
   margin-right: -1px;
 }
-#swipebox-slider .slide img, #swipebox-slider .slide .swipebox-video-container {
+#swipebox-slider .slide img,
+#swipebox-slider .slide .swipebox-video-container,
+#swipebox-slider .slide .swipebox-inline-container {
   display: inline-block;
   max-height: 100%;
   max-width: 100%;
@@ -70,7 +72,7 @@ html.swipebox-html.swipebox-touch {
   width: 100%;
   padding: 5%;
   -webkit-box-sizing: border-box;
-  box-sizing: border-box;
+          box-sizing: border-box;
 }
 #swipebox-slider .slide .swipebox-video-container .swipebox-video {
   width: 100%;
@@ -93,7 +95,7 @@ html.swipebox-html.swipebox-touch {
 #swipebox-bottom-bar,
 #swipebox-top-bar {
   -webkit-transition: 0.5s;
-  transition: 0.5s;
+          transition: 0.5s;
   position: absolute;
   left: 0;
   z-index: 999;
@@ -106,15 +108,15 @@ html.swipebox-html.swipebox-touch {
 }
 #swipebox-bottom-bar.visible-bars {
   -webkit-transform: translate3d(0, -50px, 0);
-  transform: translate3d(0, -50px, 0);
+          transform: translate3d(0, -50px, 0);
 }
 
 #swipebox-top-bar {
   top: -50px;
 }
 #swipebox-top-bar.visible-bars {
   -webkit-transform: translate3d(0, 50px, 0);
-  transform: translate3d(0, 50px, 0);
+          transform: translate3d(0, 50px, 0);
 }
 
 #swipebox-title {
@@ -172,18 +174,18 @@ html.swipebox-html.swipebox-touch {
 
 .swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider {
   -webkit-animation: rightSpring 0.3s;
-  animation: rightSpring 0.3s;
+          animation: rightSpring 0.3s;
 }
 .swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider {
   -webkit-animation: leftSpring 0.3s;
-  animation: leftSpring 0.3s;
+          animation: leftSpring 0.3s;
 }
 
 .swipebox-touch #swipebox-container:before, .swipebox-touch #swipebox-container:after {
   -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
+          backface-visibility: hidden;
   -webkit-transition: all .3s ease;
-  transition: all .3s ease;
+          transition: all .3s ease;
   content: ' ';
   position: absolute;
   z-index: 999;
@@ -195,12 +197,12 @@ html.swipebox-html.swipebox-touch {
 .swipebox-touch #swipebox-container:before {
   left: 0;
   -webkit-box-shadow: inset 10px 0px 10px -8px #656565;
-  box-shadow: inset 10px 0px 10px -8px #656565;
+          box-shadow: inset 10px 0px 10px -8px #656565;
 }
 .swipebox-touch #swipebox-container:after {
   right: 0;
   -webkit-box-shadow: inset -10px 0px 10px -8px #656565;
-  box-shadow: inset -10px 0px 10px -8px #656565;
+          box-shadow: inset -10px 0px 10px -8px #656565;
 }
 .swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before {
   opacity: 1;
@@ -213,11 +215,9 @@ html.swipebox-html.swipebox-touch {
   0% {
     left: 0;
   }
-
   50% {
     left: -30px;
   }
-
   100% {
     left: 0;
   }
@@ -227,11 +227,9 @@ html.swipebox-html.swipebox-touch {
   0% {
     left: 0;
   }
-
   50% {
     left: -30px;
   }
-
   100% {
     left: 0;
   }
@@ -240,11 +238,9 @@ html.swipebox-html.swipebox-touch {
   0% {
     left: 0;
   }
-
   50% {
     left: 30px;
   }
-
   100% {
     left: 0;
   }
@@ -253,11 +249,9 @@ html.swipebox-html.swipebox-touch {
   0% {
     left: 0;
   }
-
   50% {
     left: 30px;
   }
-
   100% {
     left: 0;
   }

src/css/swipebox.min.css

@@ -10,6 +10,7 @@
 				useCSS : true,
 				useSVG : true,
 				initialIndexOnArray : 0,
+				removeBarsOnMobile : true,
 				hideCloseButtonOnMobile : false,
 				hideBarsDelay : 3000,
 				videoMaxWidth : 1140,
@@ -18,7 +19,9 @@
 				afterOpen: null,
 				afterClose: null,
 				loopAtEnd: false,
-				autoplayVideos: false
+				autoplayVideos: false,
+				queryStringData: {},
+                toggleClassOnLoad: ''
 			},
 
 			plugin = this,
@@ -172,7 +175,7 @@
 					} );
 				}
 
-				if ( isMobile ) {
+				if ( isMobile && plugin.settings.removeBarsOnMobile ) {
 					$( '#swipebox-bottom-bar, #swipebox-top-bar' ).remove();
 				}
 
@@ -715,7 +718,7 @@
 			isVideo : function ( src ) {
 
 				if ( src ) {
-					if ( src.match( /youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/) || src.match( /vimeo\.com\/([0-9]*)/ ) || src.match( /youtu\.be\/([a-zA-Z0-9\-_]+)/ ) ) {
+					if ( src.match( /(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) || src.match( /vimeo\.com\/([0-9]*)/ ) || src.match( /youtu\.be\/([a-zA-Z0-9\-_]+)/ ) ) {
 						return true;
 					}
 
@@ -727,46 +730,98 @@
 
 			},
 
+			/**
+			 * Parse URI querystring and:
+			 * - overrides value provided via dictionary
+			 * - rebuild it again returning a string
+			 */
+			parseUri : function (uri, customData) {
+				var a = document.createElement('a'),
+					qs = {};
+
+				// Decode the URI
+				a.href = decodeURIComponent( uri );
+
+				// QueryString to Object
+				qs = JSON.parse( '{"' + a.search.toLowerCase().replace('?','').replace(/&/g,'","').replace(/=/g,'":"') + '"}' );
+
+				// Extend with custom data
+				if ( $.isPlainObject( customData ) ) {
+					qs = $.extend( qs, customData, plugin.settings.queryStringData ); // The dev has always the final word
+				}
+
+				// Return querystring as a string
+				return $
+					.map( qs, function (val, key) {
+						if ( val && val > '' ) {
+							return encodeURIComponent( key ) + '=' + encodeURIComponent( val );
+						}
+					})
+					.join('&');
+			},
+
 			/**
 			 * Get video iframe code from URL
 			 */
 			getVideo : function( url ) {
 				var iframe = '',
-					youtubeUrl = url.match( /watch\?v=([a-zA-Z0-9\-_]+)/ ),
-					youtubeShortUrl = url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/),
-					vimeoUrl = url.match( /vimeo\.com\/([0-9]*)/ );
+					youtubeUrl = url.match( /((?:www\.)?youtube\.com|(?:www\.)?youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/ ),
+					youtubeShortUrl = url.match(/(?:www\.)?youtu\.be\/([a-zA-Z0-9\-_]+)/),
+					vimeoUrl = url.match( /(?:www\.)?vimeo\.com\/([0-9]*)/ ),
+					qs = '';
 				if ( youtubeUrl || youtubeShortUrl) {
 					if ( youtubeShortUrl ) {
 						youtubeUrl = youtubeShortUrl;
 					}
-					iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtubeUrl[1] + '?autoplay='+ plugin.settings.autoplayVideos + '" frameborder="0" allowfullscreen></iframe>';
+					qs = ui.parseUri( url, {
+						'autoplay' : ( plugin.settings.autoplayVideos ? '1' : '0' ),
+						'v' : ''
+					});
+					iframe = '<iframe width="560" height="315" src="//' + youtubeUrl[1] + '/embed/' + youtubeUrl[2] + '?' + qs + '" frameborder="0" allowfullscreen></iframe>';
 
 				} else if ( vimeoUrl ) {
-
-					iframe = '<iframe width="560" height="315"  src="//player.vimeo.com/video/' + vimeoUrl[1] + '?byline=0&amp;portrait=0&amp;color=' + plugin.settings.vimeoColor + '&autoplay=' + plugin.settings.autoplayVideos + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
-
-				}
-
-				if ( youtubeUrl || youtubeShortUrl || vimeoUrl ) {
+					qs = ui.parseUri( url, {
+						'autoplay' : ( plugin.settings.autoplayVideos ? '1' : '0' ),
+						'byline' : '0',
+						'portrait' : '0',
+						'color': plugin.settings.vimeoColor
+					});
+					iframe = '<iframe width="560" height="315"  src="//player.vimeo.com/video/' + vimeoUrl[1] + '?' + qs + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
 
 				} else {
 					iframe = '<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>';
 				}
 
-				return '<div class="swipebox-video-container" style="max-width:' + plugin.settings.videomaxWidth + 'px"><div class="swipebox-video">' + iframe + '</div></div>';
+				return '<div class="swipebox-video-container" style="max-width:' + plugin.settings.videoMaxWidth + 'px"><div class="swipebox-video">' + iframe + '</div></div>';
 			},
 
 			/**
 			 * Load image
 			 */
 			loadMedia : function ( src, callback ) {
-				if ( ! this.isVideo( src ) ) {
-					var img = $( '<img>' ).on( 'load', function() {
-						callback.call( img );
-					} );
-
-					img.attr( 'src', src );
-				}
+                // Inline content
+                if ( src.trim().indexOf('#') === 0 ) {
+                    callback.call(
+                    	$('<div>', {
+                    		'class' : 'swipebox-inline-container'
+                    	})
+                    	.append(
+                    		$(src)
+	                    	.clone()
+	                    	.toggleClass( plugin.settings.toggleClassOnLoad )
+	                    )
+                    );
+                }
+                // Everything else
+                else {
+    				if ( ! this.isVideo( src ) ) {
+    					var img = $( '<img>' ).on( 'load', function() {
+    						callback.call( img );
+    					} );
+
+    					img.attr( 'src', src );
+    				}
+                }
 			},
 
 			/**