From: ec2-user <ec2-user@fcdev4.finalsclub.org>
Date: Sun, 13 Nov 2011 05:29:09 +0000 (+0000)
Subject: more work on page nav w/pushstate
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=664c0be5431fe93c30aff209bcb8dcf73b459338;p=oweals%2Ffinalsclub.git

more work on page nav w/pushstate
---

diff --git a/public/index.html b/public/index.html
index b315443..c8ef418 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,7 +33,7 @@
 							<a href="/"><img src="/images/finals-club-wht.png" class="logo"/></a>
 						</td>
 						<td class="menu">
-							<a href="javascript:goSchools()">Start Here!</a>
+							<a href="javascript:goPage('/schools')">Start Here!</a>
 							<a href="http://blog.finalsclub.org">Blog</a>
 							<a href="javascript:goArchivedSubjects()">Archive</a>
 							<a href="javascript:goPress()">Press</a>
diff --git a/public/javascripts/main.js b/public/javascripts/main.js
index bf9ce3d..06ab947 100644
--- a/public/javascripts/main.js
+++ b/public/javascripts/main.js
@@ -15,47 +15,30 @@ function j2o(json) { try { return JSON.parse(json); } catch(e) { return null; }
 function o2j(obj) { return JSON.stringify(obj); }
 
 
-// hide all page divs, then show just the one with the given id
-function hideAllPages() {
-	$(".page").fadeOut(100);
-}
-function showPage(id) {
-	//alert("showPage "+id);
-	$("#pg_"+id).fadeIn(100);
-
-	$('html, body').animate({ scrollTop: 0 }, 10);
-	/*$('html, body').animate({
-		scrollTop: $("#topofcontent").offset().top
-	}, 100);*/
 
+function showHome(matches, cb) {
+	cb("home");
 }
 
-function goPage(id) {
-
-	showPage(id)
-
-	//if(id == 'home')
-	//	id = 'index.html'
-	//history.pushState({prev:document.location.pathname.substr(1)}, "Page "+id, "/"+id);
-	history.pushState({prev:id}, "Page "+id, "/"+id);
-
-}
-
-
 
 
 // go to the page that lists the schools
-var schools = []
-function goSchools() {
+function showSchools(matches, cb) {
+
 	ProtoDiv.reset("PROTO_school");
-	hideAllPages();
+
 	$.get("/schools", {}, function(response) {
-		if(typeof response == 'object') {
+
+		var schools = []
+		if(typeof response == 'object') 
 			schools = response.schools
-		}
+
 		ProtoDiv.replicate("PROTO_school", schools);
-		goPage("schools")
+
+		cb("schools");
+
 	});
+
 }
 
 
@@ -185,32 +168,97 @@ function goConduct() {
 
 
 
-$(document).ready(function() {
-	// This executes after the page has been fully loaded
 
-	window.onpopstate = function(event) {  
+function hideAllPages() {
 
-		var state = event.state
-		//alert("pop: "+o2j(state));
+	$(".page").fadeOut(100);
 
-		hideAllPages();
+}
 
-		if(!state) {
 
-			history.replaceState(null, "", "/index.html");
-			showPage("home");
+var pageVectors = [
+	{ regex: /^\/(index.html)?$/, func: showHome },
+	{ regex: /^\/schools/, func: showSchools },
+];
 
+
+/* Do and show the appropriate thing, based on the pages current URL */
+function showPage() {
+
+	var path = document.location.pathname
+
+	$(".page").fadeOut(100);		// hide all pseudo pages
+
+	for(var i = 0; i < pageVectors.length; i++) {
+		var vector = pageVectors[i]
+		var matches = path.match(vector.regex)
+		if(matches) {
+			vector.func(matches, function(pageId) {
+
+				$("#pg_"+pageId).fadeIn(100);
+				$('html, body').animate({ scrollTop: 0 }, 100);
+
+			})
+			break
 		}
-		else {
-			//alert("location: " + document.location + ", state: " + JSON.stringify(event.state));  
-			//history.replaceState(null, "", state.prev);
-			showPage(state.prev);
-			// showPage(state.prev);
-			//alert("location: " + document.location + ", state: " + JSON.stringify(event.state));  
-		}
-	}; 
+	}
+
+	// scroll to top of page (as if we'd done a real page fetch)
+	//$('html, body').animate({ scrollTop: 0 }, 100);
+	/*$('html, body').animate({
+		scrollTop: $("#topofcontent").offset().top
+	}, 100);*/
+
+}
+
+
+
+
+/* Simulates a page load.
+	'path' is something like "/schools", etc.
+	A page fetch doesn't really happen.
+	Based on what path looks like, an appropriate DIV is shown, and action taken
+*/
+function goPage(path) {
+	history.pushState({prev:path}, path, path);
+	showPage();
+}
+
+
+/* Simulates a "back" browser navigation.
+*/
+function goBack(event) {
+	var state = event.state; alert("pop: "+o2j(state));
+
+	showPage()
+
+	/*hideAllPages();
+
+	if(!state) {
+
+		history.replaceState(null, "", "/index.html");
+		showPage("home");
+
+	}
+	else {
+		//alert("location: " + document.location + ", state: " + JSON.stringify(event.state));  
+		//history.replaceState(null, "", state.prev);
+		showPage(state.prev);
+		// showPage(state.prev);
+		//alert("location: " + document.location + ", state: " + JSON.stringify(event.state));  
+	}
+	*/
+}
+
+
+$(document).ready(function() {
+
+	// This executes after the page has been fully loaded
+
+	window.onpopstate = goBack
 
 	//showPage("home");
+
 })