added layer #URLs and #hideLayers...

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

TODO.otl

@@ -1,17 +1,20 @@
 [_] 25% Priority work
 	[_] 50% general todo
-		[_] BUG: href to existing anchors will mess up layout...
+		[_] #URL "layers"
-		| need to find out how can we disable anchor links from actually
+		| navigation to a hidden layer will show the layer, any other 
-		| going to the anchor...
+		| navigation will hide it...
-		[_] something made phonegap version unhappy...
-		| likely the URL logic...
-		|
-		| try and make it optional...
 		[_] time transitions
 		| the goal is for slow devices to seem not to have animations at
 		| all and faster ones to seem to have fast animations...
 		[_] vanquish opacity effects
 		| they slow everything down considerably!
+		[_] BUG: href to existing anchors will mess up layout...
+		| need to find out how can we disable anchor links from actually
+		| going to the anchor...
+		[X] something made phonegap version unhappy...
+		| likely the URL logic...
+		|
+		| try and make it optional...
 		[X] add page urls
 		[X] add state saving to local storage
 		[X] use modes (CSS) for thumbnail/page views...

index.html

@@ -33,11 +33,13 @@ $(document).ready(function(){
 			swipeStatus: swipeUpdate,
 			// XXX change this to pinch...
 			swipeUp: function(){
-				togglePageView('off')
+				//togglePageView('off')
+				togglePageView()
 			},
 			// XXX change this to pinch...
 			swipeDown: function(){
-				togglePageView('on')
+				//togglePageView('on')
+				togglePageView()
 			},
 			// XXX for some reason this deos not bubble up the nested elements...
 			click: function(evt, elem){
@@ -85,13 +87,18 @@ $(document).ready(function(){
 	<!-- XXX Magazine title... -->
 
 	<div class="top-toolbar">
-		mooo
-		<div class="button home">Home</div>
 		<div class="button cover">Issue Cover</div>
 		<div class="button prev-article">Prev Article</div>
 		<div class="button next-article">Next Article</div>
 	</div>
 	<div class="bottom-toolbar">
+		<!-- this is just an example-->
+		<a href="#home">Cover</a> |
+		<a href="#prevArticle">Previous article</a> |
+		<a href="#prev">Previous page</a> |
+		<a href="#next">Next page</a> | 
+		<a href="#nextArticle">Next article</a> |
+		<a href="#end">End</a>
 	</div>
 
 <div class="scaler">
@@ -100,17 +107,36 @@ $(document).ready(function(){
 		<div class="cover page current">
 			<div class="content">
 				<h1>Magazine Cover</h1>
-				<br><br><br>
+				<h2>Navigation via #URLs</h2>
-				<a href="#1">Article 1</a><br>
+				<p><i>BUG: currently navigation via existing anchors
-				<a href="#ArticleAnchorExample">Article 2</a><br>
+					will break the layout, so use the name attribute
-				<a href="#11">Article 3</a><br>
+					on any other tags (see example).
-
+				</i></p>
-				<br><br><br>
+				<h3>The basics</h3>
+				<a href="#1">Page #1</a><br>
+				<a href="#3">Page #3</a><br>
+				<a href="#ArticleAnchorExample">Named page</a><br>
 
 				<h3>Special anchors</h3>
+				<p>These show up in the page URL</p>
 				<a href="#home">Magazine cover</a><br>
-				<a href="#end">Last Page</a><br>
+				<a href="#end">Last page</a><br>
 				<a href="#thumbnails">Thumbnail view</a><br>
+				<a href="#example-layer">Toggle a hidden layer</a><br>
+				<span name="example-layer" class="hidden">
+					<a href="#hideLayers">Hide all layers</a><br>
+				</span>
+
+				<h3>Relative special anchors</h3>
+				<p>These will get replaced by corresponding page numbers in the URL</p>
+				<a href="#next">Next page</a><br>
+				<a href="#prev">Previous page</a><br>
+				<a href="#nextArticle">Next article</a><br>
+				<a href="#prevArticle">Previous article</a><br>
+
+				<div name="example-layer" class="hidden" onclick="window.location.hash='example-layer'" style="position:absolute; left:400px; top:150px; width: 250px; height:50px; text-align: center; padding: 15px; border: solid gray 5px; background: silver; color: white">
+					This is an example
+				</div>
 			</div>
 		</div>
 

magazine.css

@@ -4,6 +4,14 @@ body {
 	margin: 0;
 }
 
+.hidden {
+	display: none;
+}
+/* keep this empty... */
+.shown {
+}
+
+
 /* all elements that will behave like a page */
 .page {
 	/* XXX make this browser-sized... */
@@ -145,6 +153,13 @@ body {
 
 	height: 50px;
 	left: 0px;
+
+	font-size: 14px;
+	color: white;
+}
+.top-toolbar a, .bottom-toolbar a {
+	color: white;
+	text-decoration: none;
 }
 
 .top-toolbar {

magazine.js

@@ -354,7 +354,6 @@ function swipeUpdate(evt, phase, direction, distance){
 }
 
 
-// XXX store the current page...
 function setCurrentPage(n, W){
 	if(n == null){
 		var cur = $('.current.page')
@@ -444,7 +443,7 @@ function prevArticle(){
 
 /*********************************************************************/
 // XXX make these magazine-specific...
-// XXX BUG: if the hach url part coresponds to a real anchor the browser 
+// XXX BUG: if the hash url part coresponds to a real anchor the browser 
 // 		shifts the page, need to disable this...
 // URL state managers...
 function loadURLState(){
@@ -455,32 +454,80 @@ function loadURLState(){
 	var n = parseInt(anchor)
 	if(typeof(n) == typeof(1) && n >= 0){
 		return n
+
 	// XXX add real external aliases...
 	} else if(anchor == 'thumbnails') {
 		togglePageView('off')
 		return getPageNumber()
+
 	} else if(anchor == 'home') {
 		return 0
+
 	} else if(anchor == 'end') {
 		return $('.page').length-1
+
+	// relative URLs...
+	} else if(anchor == 'next') {
+		nextPage()
+		return getPageNumber()
+
+	} else if(anchor == 'prev') {
+		prevPage()
+		return getPageNumber()
+
+	} else if(anchor == 'nextArticle') {
+		nextArticle()
+		return getPageNumber()
+
+	} else if(anchor == 'prevArticle') {
+		prevArticle()
+		return getPageNumber()
+
+	// hide all visible layers on current page...
+	} else if(anchor == 'hideLayers') {
+		$('.current.page .shown')
+			.addClass('hidden')
+			.removeClass('shown')
+		return getPageNumber()
+
 	} else {
-		return getPageNumber($('[name='+anchor+']').parents('.page'))
+		var elem = $('[name='+anchor+']')
+		n = getPageNumber(elem.parents('.page'))
+		// toggle hidden/shown elements...
+		if(elem.hasClass('hidden')){
+			elem
+				.addClass('shown')
+				.removeClass('hidden')
+		} else if(elem.hasClass('shown')){
+			elem
+				.addClass('hidden')
+				.removeClass('shown')
+		}
+		return n
 	}
 }
 function saveURLState(){
 	var anchor = window.location.hash.split('#')[1]
-	var page = $('[name='+anchor+']')
+	var elem = $('[name='+anchor+']')
+	var page = elem
 	if(!page.hasClass('page')){
 		page = page.parents('.page')
 	}
 	var n = getPageNumber()
+
+	// decide which #URLs stay in the URL and which get replaces with a
+	// page number...
+	if(!elem.hasClass('shown') && !elem.hasClass('hidden')){
 		// XXX use real aliases...
-	if(n == getPageNumber(page)
+		// do not replace these urls with page numbers...
+		if( n == getPageNumber(page)
 				|| (anchor == 'home' && n == 0)
 				|| (anchor == 'end' && n == $('.page').length-1)){
-		return
+			return anchor
 		}
-	window.location.hash = getPageNumber()
+	}
+	window.location.hash = n
+	return n
 }
 
 // local storage state managers...