more work on page nav w/pushstate

diff --git a/public/index.html b/public/index.html
index b3154435404dab44bec07dff0ab6da797774e0dd..c8ef418f6bcca6fbacc0c4f99adde1fa1216bf37 100644 (file)
--- 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 bf9ce3d447eacb6758f98164d5485649131d956b..06ab9473f65c7aa2ab80b07188a348a0e23ba3a5 100644 (file)
--- 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");
+
 })