Merge pull request #6 from dwaan/master

Targeted DOM element and youtube url detection
xinix-technology · Feb 17, 2015 · 2b847e9 · 2b847e9
2 parents 0cde6a4 + 2663702
commit 2b847e9
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 52 deletions.
diff --git a/example/external-target.html b/example/external-target.html
@@ -0,0 +1,19 @@
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+
+	<title>T-Shirt Pop Up Target Example</title>
+</head>
+
+<body>
+	<div id="target">
+		<h1>T-Shirt Pop Up Target Example</h1>
+		<p>These are examples for using tshirt popup. This one is external with targeted id page embeded directly into popup DOM.</p>
+	</div>
+	<p>This will be shown in normal page</p>
+</body>
+
+</html>
diff --git a/example/index.html b/example/index.html
@@ -61,6 +61,22 @@ <h2>Basic usages</h2>
 			</p>
 			<pre>
 $("a").popup();</pre>
+		</li>
+		<li>
+			<p><a href="external-target.html" class="basicExampleTarget">Basic popup with target element on the external url</a>. Sometimes you have very long external html and you want to load spesific DOM element.
+			</p>
+			<pre>
+$("a").popup({
+	target: "#target"
+});</pre>
+		</li>
+		<li>
+			<p><a href="external-target.html" class="basicIframe">Basic popup with iframe content external url</a>.
+			</p>
+			<pre>
+$("a").popup({
+	type: "iframe"
+});</pre>
 		</li>
 		<li>
 			<p><a href="external.html" class="widthHeightExample">Popup with width and height</a>. By default, the popup will use the content width and height, you can either specific the width or height in the CSS or set the paramater like this:
@@ -88,6 +104,10 @@ <h2>Basic usages</h2>
 		<li>
 			<p><a href="404.html" class="basicExample">Loading something that unvailable</a> or <a href="http://google.com" class="basicExample">url from different domain</a> will produce a broken link window.</p>
 		</li>
+		<li>
+			<p><a href="https://www.youtube.com/watch?v=kt0g4dWxEBo" class="basicYoutube">We love youtube</a>. So we made our popup youtube aware.
+			</p>
+		</li>
 	</ol>
 
 	<p>You can view the source code for more information about popup features.</p>
@@ -99,6 +119,14 @@ <h2>Basic usages</h2>
 		$("a.basicExample").popup({
 			iconPrefix: "fa"
 		});
+		$("a.basicExampleTarget").popup({
+			iconPrefix: "fa",
+			target: "#target"
+		});
+		$("a.basicIframe").popup({
+			iconPrefix: "fa",
+			type: "iframe"
+		});
 		$("a.widthHeightExample").popup({
 			width: 400,
 			height: 100,
@@ -112,6 +140,9 @@ <h2>Basic usages</h2>
 			iconPrefix: "fa",
 			className: "customClass"
 		});
+		$("a.basicYoutube").popup({
+			iconPrefix: "fa"
+		});
 	});
 </script>
 

diff --git a/tshirt-popup.css b/tshirt-popup.css
@@ -15,6 +15,8 @@ html, body { width:100%; height:100% }
 	-o-border-radius:4px;
 	border-radius:4px;
 }
+#popupContent .content.youtube { padding:0; background:#000 }
+
 #popupContent a.close {
 	position:absolute; top:-10px; left:initial; right:6px; background:#fff; color:#000; display:block; padding:0; margin:0; height:24px; width:24px; line-height:24px; text-align:center;
 	-webkit-border-radius:100%;

diff --git a/tshirt-popup.js b/tshirt-popup.js
@@ -6,6 +6,7 @@
 		var defaults = {
 				url: "",
 				id: "popupOverflow",
+				target: "",
 				type: "inline",
 				className: "popupContent",
 				animation: "bounceIn",
@@ -20,63 +21,75 @@
 
 		this.close = function () {
 			$("#" + settings.id).fadeOut(128);
-			$("#" + settings.id + " > div > div > div").removeClass("animated " + settings.animation);
+			$("#" + settings.id + " > div > div > div").removeClass("animated " + settings.animation).html("");
 		};
 
 		return this.each(function () {
 			var elem = $(this),
-				url = elem.attr("href");
+				url = elem.attr("href"),
+				youtube_id = "";
 
 			// If url is predefine
 			if (settings.url !== "") {
 				url = settings.url;
 			}
 
+			// See if it's a youtube link
+			youtube_id = url.match(/(\?v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/);
+			if (youtube_id !== null) {
+				settings.type = "iframe";
+			}
+
+			// If target is defined
+			if (settings.target !== "") {
+				url = url + " " + settings.target;
+			}
+
 			elem.click(function (e) {
-				// Type of the popup is inline
-				if (settings.type === "inline") {
-					$.ajax({
-						url: url,
-						beforeSend: function () {
-							// Append all the necessary divs
-							if ($("#popupOverflow").length === 0) {
-								$("body").append("<div id='" + settings.id + "' style='display:none'><div id='popupTable'><div id='popupMargin'></div></div></div>");
-							}
-
-							// Add loading content
-							$("#" + settings.id + " > div > div").html("<div id='popupContent' class='" + settings.className + "'><div class='content'><p class='loading'><i class='" + settings.iconPrefix +" " + settings.iconPrefix +"-circle-o-notch " + settings.iconPrefix +"-spin " + settings.iconPrefix +"-5x'></i></p></div></div>");
-
-							// Set Height and Width
-							if (settings.width != "auto") {
-								$("#" + settings.id + " > div > div > div > div").width (settings.width);
-							}
-							if (settings.height != "auto") {
-								$("#" + settings.id + " > div > div > div > div").height (settings.height);
-							}
-
-							// Draw close button
-							if (settings.closeButton) {
-								$("#" + settings.id + " > div > div > div").append("<a href='#' class='close'><i class='" + settings.iconPrefix +" " + settings.iconPrefix +"-close'></i></a>");
-							} else {
-								$("#" + settings.id + " .close").remove();
-							}
+				// Append all the necessary divs
+				if ($("#popupOverflow").length === 0) {
+					$("body").append("<div id='" + settings.id + "' style='display:none'><div id='popupTable'><div id='popupMargin'></div></div></div>");
+				}
+
+				// Add loading content
+				$("#" + settings.id + " > div > div").html("<div id='popupContent' class='" + settings.className + "'><div class='content'><p class='loading'><i class='" + settings.iconPrefix +" " + settings.iconPrefix +"-circle-o-notch " + settings.iconPrefix +"-spin " + settings.iconPrefix +"-5x'></i></p></div></div>");
+
+				// Set Height and Width
+				if (settings.width != "auto") {
+					$("#" + settings.id + " > div > div > div > div").width (settings.width);
+				}
+				if (settings.height != "auto") {
+					$("#" + settings.id + " > div > div > div > div").height (settings.height);
+				}
+
+				// Draw close button
+				if (settings.closeButton) {
+					$("#" + settings.id + " > div > div > div").append("<a href='#' class='close'><i class='" + settings.iconPrefix +" " + settings.iconPrefix +"-close'></i></a>");
+				} else {
+					$("#" + settings.id + " .close").remove();
+				}
 
-							// Display popup and prevent touch scroll event
-							$("#" + settings.id).fadeIn(100).on('touchmove', function(e) {
-								if (settings.disableTouchScroll) {
-									e.preventDefault();
-								}
-							});
+				// Display popup and prevent touch scroll event
+				$("#" + settings.id).fadeIn(100).on('touchmove', function(e) {
+					if (settings.disableTouchScroll) {
+						e.preventDefault();
+					}
+				});
 
-							// Assign close action to close button
-							if (settings.closeButton) {
-								$("#" + settings.id + " .close").click(function (e) {
-									popup.close();
-									e.preventDefault();
-								});
-							}
-						},
-						error: function () {
+				// Assign close action to close button
+				if (settings.closeButton) {
+					$("#" + settings.id + " .close").click(function (e) {
+						popup.close();
+						e.preventDefault();
+					});
+				}
+
+				// Type of the popup is inline
+				if (settings.type === "inline") {
+					// Ajax call
+					$("#" + settings.id + " > div > div > div > div").load( url, function( response, status, xhr ) {
+						// Ir url is not found or connection is broken
+						if ( status === "error" ) {
 							if ($("#popupOverflow .close").length === 0) {
 								$("#" + settings.id + " > div > div > div").append("<a href='#' class='close'><i class='" + settings.iconPrefix +" " + settings.iconPrefix +"-close'></i></a>");
 								$("#" + settings.id + " .close").click(function (e) {
@@ -88,17 +101,26 @@
 							$("#" + settings.id + " > div > div > div").addClass("animated " + settings.animation)
 							$("#" + settings.id + " > div > div > div > div").html("<p class='error'><i class='" + settings.iconPrefix +" " + settings.iconPrefix +"-chain-broken " + settings.iconPrefix +"-5x'></i><br />Error while loading your content<br />Please close this popup and try again</p>");
 						}
-					}).done(function (element, status) {
-						if (!settings.closeButton) {
-							$("#" + settings.id + " .close").remove();
-						}
-
-						// Add animation
-						$("#" + settings.id + " > div > div > div").addClass("animated " + settings.animation)
-						$("#" + settings.id + " > div > div > div > div").html($(element));
 					});
+
+
+				// Type of the popup is iframe
+				} else if (settings.type === "iframe") {
+					if (youtube_id !== null) {
+						$("#" + settings.id + " > div > div > div > div").addClass("youtube").html ('<iframe width="800" height="450" src="https://www.youtube.com/embed/' + youtube_id[2] + '" frameborder="0" allowfullscreen></iframe>');
+					} else {
+						$("#" + settings.id + " > div > div > div > div").html ("<iframe src='" + url + "' width='100%' height='100%' frameborder='0' />");
+					}
+				}
+
+				// Display or not close button
+				if (!settings.closeButton) {
+					$("#" + settings.id + " .close").remove();
 				}
 
+				// Add animation
+				$("#" + settings.id + " > div > div > div").addClass("animated " + settings.animation);
+
 				e.preventDefault();
 			});
 		});