Allowing multiple dialogs in one page

hakimel · Sep 6, 2012 · 5417d54 · 5417d54 · ack-unter · Jul 2, 2013
1 parent 2a9d1cf
commit 5417d54
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 117 deletions.
diff --git a/css/avgrund.css b/css/avgrund.css
@@ -5,105 +5,14 @@
  *
  * Created by Hakim El Hattab, http://hakim.se
  */
-
-* {
-	margin: 0;
-	padding: 0;
-}
-
-html, 
-body {
-	height: 100%;
-	overflow: hidden;
-}
-
-html {
-	background-color: #222;
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
-	background-repeat: repeat;
-}
-
-h1, 
-h2 {
-	font-size: 24px;
-}
-
-p {
-	margin: 10px 0 10px 0;
-	font-size: 16px;
-	line-height: 1.32;
-}
-
-a {
-	color: #7aa76d;
-	text-decoration: none;
-
-	-webkit-transition: 0.15s color ease;
-	   -moz-transition: 0.15s color ease;
-	    -ms-transition: 0.15s color ease;
-	     -o-transition: 0.15s color ease;
-	        transition: 0.15s color ease;
-}
-	a:hover {
-		color: #91cd85;
-	}
-
-small {
-	display: block;
-	margin-top: 15px;
-	padding-top: 15px;
-	color: #333;
-	font-size: 0.85em;
-	border-top: 1px dashed #ccc;
-
-	-webkit-text-size-adjust: none;
-}
-
-button {
-	border: 0px;
-	padding: 8px 10px;
-	margin: 5px 0px;
-	border-radius: 1px;
-
-	cursor: pointer;
-	color: #fff;
-	background: #7aa76d;
-	font-size: 15px;
-
-	-webkit-transition: 0.15s background ease;
-	   -moz-transition: 0.15s background ease;
-	    -ms-transition: 0.15s background ease;
-	     -o-transition: 0.15s background ease;
-	        transition: 0.15s background ease;
+
+.avgrund-active body {
+	-webkit-transform: scale( 0.9 );
+	   -moz-transform: scale( 0.9 );
+	    -ms-transform: scale( 0.9 );
+	     -o-transform: scale( 0.9 );
+	        transform: scale( 0.9 );
 }
-	button:hover {
-		background: #91cd85;
-	}
-	button:active {
-		background: #60895a;
-	}
-	button+button {
-		margin-left: 5px;
-	}
-
-.sharing {
-	margin-top: 50px;
-}
-
-body {
-	background: #fff;
-
-	font-family: 'Lato', Helvetica, sans-serif;
-	font-size: 16px;
-	color: #222;
-}
-	.avgrund-active body {
-		-webkit-transform: scale( 0.9 );
-		   -moz-transform: scale( 0.9 );
-		    -ms-transform: scale( 0.9 );
-		     -o-transform: scale( 0.9 );
-		        transform: scale( 0.9 );
-	}
 
 .avgrund-cover {
 	position: absolute;
@@ -165,7 +74,7 @@ body {
 	     -o-transform: scale( 0.8 );
 	        transform: scale( 0.8 );
 }
-	.avgrund-active .avgrund-popup {
+	.avgrund-active .avgrund-popup-animate {
 		visibility: visible;
 		opacity: 1;
 

diff --git a/css/css b/css/css
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,99 @@
+/*!
+ * avgrund 0.1
+ * http://lab.hakim.se/avgrund
+ * MIT licensed
+ *
+ * Created by Hakim El Hattab, http://hakim.se
+ */
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+html, 
+body {
+	height: 100%;
+	overflow: hidden;
+}
+
+html {
+	background-color: #222;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
+	background-repeat: repeat;
+}
+
+h1, 
+h2 {
+	font-size: 24px;
+}
+
+p {
+	margin: 10px 0 10px 0;
+	font-size: 16px;
+	line-height: 1.32;
+}
+
+a {
+	color: #7aa76d;
+	text-decoration: none;
+
+	-webkit-transition: 0.15s color ease;
+	   -moz-transition: 0.15s color ease;
+	    -ms-transition: 0.15s color ease;
+	     -o-transition: 0.15s color ease;
+	        transition: 0.15s color ease;
+}
+	a:hover {
+		color: #91cd85;
+	}
+
+small {
+	display: block;
+	margin-top: 15px;
+	padding-top: 15px;
+	color: #333;
+	font-size: 0.85em;
+	border-top: 1px dashed #ccc;
+
+	-webkit-text-size-adjust: none;
+}
+
+button {
+	border: 0px;
+	padding: 8px 10px;
+	margin: 5px 0px;
+	border-radius: 1px;
+
+	cursor: pointer;
+	color: #fff;
+	background: #7aa76d;
+	font-size: 15px;
+
+	-webkit-transition: 0.15s background ease;
+	   -moz-transition: 0.15s background ease;
+	    -ms-transition: 0.15s background ease;
+	     -o-transition: 0.15s background ease;
+	        transition: 0.15s background ease;
+}
+	button:hover {
+		background: #91cd85;
+	}
+	button:active {
+		background: #60895a;
+	}
+	button+button {
+		margin-left: 5px;
+	}
+
+.sharing {
+	margin-top: 50px;
+}
+
+body {
+	background: #fff;
+
+	font-family: 'Lato', Helvetica, sans-serif;
+	font-size: 16px;
+	color: #222;
+}
diff --git a/index.html b/index.html
@@ -13,18 +13,52 @@
 
 		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
 
-		<link rel="stylesheet" href="css/avgrund.css?2">
+		<link rel="stylesheet" href="css/styles.css">
+		<link rel="stylesheet" href="css/avgrund.css">
+
+		<script>
+			function showDialog() {
+				Avgrund.show("#custom-popup");
+			}
+			function stackIt() {
+				Avgrund.show("#default-popup");
+			}
+			function growIt() {
+				Avgrund.show("#default-popup");
+			}
+			function closeDialog() {
+				Avgrund.hide();
+			}
+		</script>
+
 	</head>
 
 	<body>
 
+		<aside id="default-popup" class="avgrund-popup">
+			<h2>That's all, folks</h2>
+			<p>
+				You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
+			</p>
+			<p>
+				If you like this you would probably enjoy <a href="http://lab.hakim.se/meny">Meny</a>, <a href="http://lab.hakim.se/reveal-js">reveal.js</a> and <a href="http://lab.hakim.se/scroll-effects">stroll.js</a>.
+			</p>
+			<button onclick="javascript:closeDialog();">Close</button>
+		</aside>
+
+		<div id="custom-popup" class="avgrund-popup">
+			<p>Custom popup content</p>
+			<a href="#" id="custom-popup-close">close</a>
+		</div>
+
 		<article class="avgrund-contents">
 			<h1>Avgrund</h1>
 			<p>
 				A modal concept which aims to give a sense of depth between the page and modal layers. Click a button below to give it a try.
 			</p>
-			<button onclick="avgrund.activate( 'stack' );">Stack it</button>
-			<button onclick="avgrund.activate();">Grow it</button>
+			<button onclick="javascript:stackIt();">Stack it</button>
+			<button onclick="javascript:growIt();">Grow it</button>
+			<button onclick="javascript:showDialog();">Other dialog</button>
 			<p>
 				Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of 
 				it, not intended for any practical use.
@@ -45,17 +79,6 @@ <h1>Avgrund</h1>
 
 		<div class="avgrund-cover"></div>
 
-		<aside class="avgrund-popup">
-			<h2>That's all, folks</h2>
-			<p>
-				You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
-			</p>
-			<p>
-				If you like this you would probably enjoy <a href="http://lab.hakim.se/meny">Meny</a>, <a href="http://lab.hakim.se/reveal-js">reveal.js</a> and <a href="http://lab.hakim.se/scroll-effects">stroll.js</a>.
-			</p>
-			<button onclick="avgrund.deactivate();">Close</button>
-		</aside>
-
 		<script type="text/javascript" src="js/avgrund.js"></script>
 
 		<a class="fork-reveal" href="https://github.com/hakimel/avgrund"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>

diff --git a/js/avgrund.js b/js/avgrund.js
@@ -5,10 +5,10 @@
  *
  * Copyright (C) 2012 Hakim El Hattab, http://hakim.se
  */
-(function(){
+var Avgrund = (function(){
 
 	var container = document.documentElement,
-		popup = document.querySelector( '.avgrund-popup' ),
+		popup = document.querySelector( '.avgrund-popup-animate' ),
 		cover = document.querySelector( '.avgrund-cover' ),
 		currentState = null;
 
@@ -49,6 +49,7 @@
 		document.removeEventListener( 'click', onDocumentClick, false );
 
 		removeClass( container, 'avgrund-active' );
+		removeClass( popup, 'avgrund-popup-animate')
 	}
 
 	function disableBlur() {
@@ -63,10 +64,22 @@
 		element.className = element.className.replace( name, '' );
 	}
 
-	window.avgrund = {
+	function show(selector){
+		popup = document.querySelector( selector );
+		addClass(popup, 'avgrund-popup-animate');
+		activate();
+		return this;
+	}
+	function hide() {
+		deactivate();
+	}
+
+	return {
 		activate: activate,
 		deactivate: deactivate,
-		disableBlur: disableBlur
+		disableBlur: disableBlur,
+		show: show,
+		hide: hide
 	}
 
 })();