added hash urls -- support page, @name refs and special home, end and thumbnails hash parts...

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

TODO.otl

@@ -1,5 +1,8 @@
 [_] 25% Priority work
 	[_] 50% general todo
+		[_] 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...
 		[_] something made phonegap version unhappy...
 		| likely the URL logic...
 		|

index.html

@@ -8,10 +8,6 @@
 
 <script src="magazine.js"></script>
 
-<script>
-</script>
-
-
 <script>
 
 $(document).ready(function(){
@@ -29,6 +25,7 @@ $(document).ready(function(){
 		})
 		.bind('hashchange', function(){
 			setCurrentPage(loadURLState())
+			return false
 		})
 
 	$('.viewer')
@@ -46,8 +43,10 @@ $(document).ready(function(){
 			click: function(evt, elem){
 				if($(elem).hasClass('page')){
 					setCurrentPage(elem)
+					//togglePageView('on')
 				} else if($(elem).hasClass('content')){
 					setCurrentPage($(elem).parents('.page').first())
+					//togglePageView('on')
 				}
 				return true
 			}
@@ -100,7 +99,18 @@ $(document).ready(function(){
 	<div class="magazine">
 		<div class="cover page current">
 			<div class="content">
-				Magazine Cover
+				<h1>Magazine Cover</h1>
+				<br><br><br>
+				<a href="#1">Article 1</a><br>
+				<a href="#ArticleAnchorExample">Article 2</a><br>
+				<a href="#11">Article 3</a><br>
+
+				<br><br><br>
+
+				<h3>Special anchors</h3>
+				<a href="#home">Magazine cover</a><br>
+				<a href="#end">Last Page</a><br>
+				<a href="#thumbnails">Thumbnail view</a><br>
 			</div>
 		</div>
 
@@ -109,7 +119,8 @@ $(document).ready(function(){
 		<div class="article">
 			<div class="cover page">
 				<div class="content">
-					Article Cover<br>
+					<h1>Article Cover</h1>
+					<a href="#home">home</a><br>
 					some more text...
 				</div>
 			</div>
@@ -135,8 +146,10 @@ $(document).ready(function(){
 		</div>
 		<div class="article">
 			<div class="cover page">
-				<div class="content">
-					Article Cover
+				<div class="content" name="ArticleAnchorExample">
+					<!--a name="ArticleAnchorExample"></a-->
+					<h1>Article Cover</h1>
+					<a href="#home">home</a><br>
 				</div>
 			</div>
 
@@ -169,7 +182,8 @@ $(document).ready(function(){
 		<div class="article">
 			<div class="cover page">
 				<div class="content">
-					Article Cover
+					<h1>Article Cover</h1>
+					<a href="#home">home</a><br>
 				</div>
 			</div>
 
@@ -195,7 +209,8 @@ $(document).ready(function(){
 			</div>
 			<div class="page">
 				<div class="content">
-					Page
+					Page<br>
+					<a href="#home">home</a><br>
 				</div>
 			</div>
 		</div>

magazine.js

@@ -444,26 +444,48 @@ function prevArticle(){
 
 /*********************************************************************/
 // XXX make these magazine-specific...
+// XXX BUG: if the hach url part coresponds to a real anchor the browser 
+// 		shifts the page, need to disable this...
 // URL state managers...
 function loadURLState(){
 	if(window.location.hash == ''){
 		return null
 	}
-	var n = parseInt(window.location.hash.split('#')[1])
-	if(n != null){
+	var anchor = window.location.hash.split('#')[1]
+	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
 	} else {
-		alert('textual anchors not yet supported...')
-		return
+		return getPageNumber($('[name='+anchor+']').parents('.page'))
 	}
 }
 function saveURLState(){
+	var anchor = window.location.hash.split('#')[1]
+	var page = $('[name='+anchor+']')
+	if(!page.hasClass('page')){
+		page = page.parents('.page')
+	}
+	var n = getPageNumber()
+	// XXX use real aliases...
+	if(n == getPageNumber(page)
+			|| (anchor == 'home' && n == 0)
+			|| (anchor == 'end' && n == $('.page').length-1)){
+		return
+	}
 	window.location.hash = getPageNumber()
 }
 
 // local storage state managers...
 function loadStorageState(){
-	return parseInt($.jStorage.get('current_page'), 0)
+	return parseInt($.jStorage.get('current_page', 0))
 }
 function saveStorageState(){
 	$.jStorage.set('current_page', getPageNumber())