Merge pull request #5 from dwaan/master

[FIX] Fix wrong width variable in parameter

README.md

@@ -7,11 +7,14 @@ T-Shirt Pop Up is a jquery popup plugins made specially with Naked CSS. It's lig
 
 1. closeButton: true/false, display or hide close button
 2. className: "popupContent", class name for outer wrapper of content div
-3. type: "inline", type of content, right now it's only inline
-4. width: "auto",
-5. url: "". Define the url to use.
-6. id: "popupOverflow", Id for the popup
-7. disableTouchScroll: true/false, Disable scrolling in touch device
+3. animation: "bounceIn", see animate.css for available animation class
+4. type: "inline", type of content, right now it's only inline
+5. width: "auto", set the width based of number, px or %
+6. height: "auto", set the height based of number, px or %
+7. url: "". Define the url to use.
+8. id: "popupOverflow", Id for the popup
+9. disableTouchScroll: true/false, Disable scrolling in touch device
+10. iconPrefix: "xn", font-awesome icon prefix
 
 **How to use it**
 
@@ -25,3 +28,10 @@ T-Shirt Pop Up is a jquery popup plugins made specially with Naked CSS. It's lig
 Close the popup
 
 	$.fn.popup().close();
+
+**Todo**
+
+1. Load url inside iframe
+2. Load youtube or vimeo video
+3. Gallery functionality
+4. Width becomes auto when the window size is smaller than defined width

bower.json

@@ -6,7 +6,7 @@
     "Dwan <[email protected]>"
   ],
   "description": "Responsive popup library that easy to configure",
-  "main": "vendor/tshirt.popup/tshirt.popup.js",
+  "main": "tshirt.popup.js",
   "moduleType": [
     "globals"
   ],

example/external.html

@@ -1,2 +1,2 @@
 <h1>T-Shirt Pop Up</h1>
-<p>These are examples for using tshirt popup</p>
+<p>These are examples for using tshirt popup. This one is external page embeded directly into popup DOM.</p>

example/index.html

@@ -60,39 +60,38 @@ <h2>Basic usages</h2>
 			<p><a href="external.html" class="basicExample">Basic popup</a>. Just add the function to the jquery selector, it will take care everything.
 			</p>
 			<pre>
-$("a").popup();
-			</pre>
+$("a").popup();</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:
 			</p>
 			<pre>
 $("a").popup({
-	width: 200,
-	height: 200
-});
-			</pre>
+	width: 400,
+	height: 100
+});</pre>
 		</li>
 		<li>
 			<p><a href="external.html" class="animationExample">Popup with different show animation</a>. For list of animation that you can use, please visit <a href="https://daneden.github.io/animate.css/" target="_BLANK">animate.css</a>.</p>
 			<pre>
 $("a").popup({
 	animation: "bounceInUp"
-});
-			</pre>
+});</pre>
 		</li>
 		<li>
 			<p><a href="external.html" class="customClassExample">Basic popup with custom class</a>. You can set the content div class name into something that you  We style the content with orange color.</p>
 			<pre>
 $("a").popup({
 	className: "customClass"
-});
-			</pre>
+});</pre>
 		</li>
 		<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>
 	</ol>
+
+	<p>You can view the source code for more information about popup features.</p>
+	<p>&nbsp;</p>
 </body>
 
 <script type="text/javascript">
@@ -101,8 +100,8 @@ <h2>Basic usages</h2>
 			iconPrefix: "fa"
 		});
 		$("a.widthHeightExample").popup({
-			width: 200,
-			height: 200,
+			width: 400,
+			height: 100,
 			iconPrefix: "fa"
 		});
 		$("a.animationExample").popup({
@@ -116,4 +115,4 @@ <h2>Basic usages</h2>
 	});
 </script>
 
-</html>
+</html>

tshirt-popup.css

@@ -9,28 +9,32 @@ html, body { width:100%; height:100% }
 #popupContent { position:relative; display:table; margin:0 auto; padding:0 16px }
 #popupContent .content {
 	background:#fff; overflow:hidden;
-    -webkit-border-radius:4px;
-    -moz-border-radius:4px;
-    -ms-border-radius:4px;
-    -o-border-radius:4px;
-    border-radius:4px;
+	-webkit-border-radius:4px;
+	-moz-border-radius:4px;
+	-ms-border-radius:4px;
+	-o-border-radius:4px;
+	border-radius:4px;
 }
 #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%;
-    -moz-border-radius:100%;
-    -ms-border-radius:100%;
-    -o-border-radius:100%;
-    border-radius:100%;
+	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%;
+	-moz-border-radius:100%;
+	-ms-border-radius:100%;
+	-o-border-radius:100%;
+	border-radius:100%;
 }
 #popupContent a.close:hover { color:#ed2b2b }
 #popupContent a.close i { margin:4px 0 0 }
 #popupContent p.loading { padding:24px 32px; margin:0; text-align:center; color:#333 }
 #popupContent p.error { padding:24px 32px; margin:0; text-align:center; color:#919191 }
 #popupContent p.error i { margin:24px 0; color:#d03030 }
 
+@media only screen and (max-width:767px) {
+	#popupContent .content { width:auto!important }
+}
+
 @media only screen and (min-width:767px) {
 	#popupContent { padding:0 }
 	#popupContent a.close { right:-10px }
 	#popupContent p.error { padding:32px 48px }
-}
+}

tshirt-popup.js

@@ -47,9 +47,8 @@
 							$("#" + 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
-							console.log (settings);
 							if (settings.width != "auto") {
-								$("#" + settings.id + " > div > div > div > div").width (settings.height);
+								$("#" + settings.id + " > div > div > div > div").width (settings.width);
 							}
 							if (settings.height != "auto") {
 								$("#" + settings.id + " > div > div > div > div").height (settings.height);