added splash screen...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

index.html

@@ -11,48 +11,6 @@
 /* this is needed only for live resize... */
 var PAGES_VISIBLE = 1
 var PAGES_IN_RIBBON = 6
-
-$(document).ready(function(){
-	$(window).resize(function() {
-		fitNPages(PAGES_VISIBLE)
-	})
-
-	$('.viewer')
-		.swipe({
-			swipeStatus: swipeUpdate,
-			// XXX change this to pinch...
-			swipeUp: function(){
-				togglePageView('off')
-			},
-			// XXX change this to pinch...
-			swipeDown: function(){
-				togglePageView('on')
-			},
-			// XXX for some reason this deos not bubble up the nested elements...
-			click: function(evt, elem){
-				if($(elem).hasClass('page')){
-					setCurrentPage(elem)
-				} else if($(elem).hasClass('content')){
-					setCurrentPage($(elem).parents('.page').first())
-				}
-				return true
-			}
-		})
-	$('.button.cover').swipe({click: goToMagazineCover})
-	$('.button.next-article').swipe({click: nextArticle})
-	$('.button.prev-article').swipe({click: prevArticle})
-
-	loadState()
-
-	togglePageView('on')
-
-
-	// XXX add splash screen...
-	// XXX
-
-})
-
-
 /*********************************************************************/
 // XXX move to generic lib...
 
@@ -118,6 +76,42 @@ function createCSSClassToggler(elem, css_class, callback_a, callback_b){
 }
 
 
+// show a jQuary opject in viewer overlay...
+// XXX need to set .scrollTop(0) when showing different UI... 
+// 		...and not set it when the UI is the same
+// XXX this must create it's own overlay...
+function showInOverlay(obj){
+	obj.click(function(){ return false })
+	// XXX 
+	$('.viewer').addClass('overlay-mode')
+	// clean things up...
+	$('.overlay .content').children().remove()
+	// put it in the overlay...
+	$('.overlay .content').append(obj)
+	// prepare the overlay...
+	$('.overlay')
+		.one('click', function(){
+			$('.overlay')
+				.fadeOut(function(){
+					$('.overlay .content')
+						.children()
+							.remove()
+					$('.overlay-mode').removeClass('overlay-mode')
+				})
+		})
+		.fadeIn()
+	return obj
+}
+
+
+
+function overlayMessage(text){
+	return showInOverlay($('<div class="overlay-message">' +text+ '</div>'))
+}
+
+
+
+
 // XXX might be good to use apply here...
 function doWithoutTransitions(obj, func, time){
 	if(time == null){
@@ -479,6 +473,52 @@ function createPage(article, template){
 }
 
 
+</script>
+<script>
+
+$(document).ready(function(){
+	$(window).resize(function() {
+		fitNPages(PAGES_VISIBLE)
+	})
+
+	$('.viewer')
+		.swipe({
+			swipeStatus: swipeUpdate,
+			// XXX change this to pinch...
+			swipeUp: function(){
+				togglePageView('off')
+			},
+			// XXX change this to pinch...
+			swipeDown: function(){
+				togglePageView('on')
+			},
+			// XXX for some reason this deos not bubble up the nested elements...
+			click: function(evt, elem){
+				if($(elem).hasClass('page')){
+					setCurrentPage(elem)
+				} else if($(elem).hasClass('content')){
+					setCurrentPage($(elem).parents('.page').first())
+				}
+				return true
+			}
+		})
+	$('.button.cover').swipe({click: goToMagazineCover})
+	$('.button.next-article').swipe({click: nextArticle})
+	$('.button.prev-article').swipe({click: prevArticle})
+
+	loadState()
+
+	togglePageView('on')
+
+
+	// hide the splash screen...
+	$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend',
+		function(){
+			$('.splash').fadeOut()
+		})
+})
+
+
 
 </script>
 </head>
@@ -486,6 +526,15 @@ function createPage(article, template){
 
 <div class="viewer">
 
+	<!-- Splash screen -->
+	<div class="splash noSwipe">
+		<!-- XXX replace this with a background-image logo... -->
+		<table width="100%" height="100%"><tr><td align="center" valign="middle">
+			<h2><i>loading...</i></h2>
+		</td></tr></table>
+	</div>
+
+
 	<!-- XXX Magazine title... -->
 
 	<div class="top-toolbar">

layout.css

@@ -6,6 +6,7 @@
 }
 
 .animated, 
+.splash,
 .content,
 .section,
 .button,
@@ -18,6 +19,7 @@
 	transition: all 0.2s ease;
 }
 
+
 body {
 	text-align: center;
 	margin: 0px;

magazine.css

@@ -173,6 +173,22 @@ body {
 	margin-right: 20px;
 }
 
+.splash {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	z-index: 9000;
+
+	background-color: white;
+}
+
+.splash * {
+	color: gray;
+}
+
+
 /* modes */
 .page-view-mode.viewer {
 }