more work on 1page changes + adding in pushstate support

diff --git a/public/index.html b/public/index.html
index a7a0aac2dd9d3e44deab3e0b975ed9c55613ae3c..b3154435404dab44bec07dff0ab6da797774e0dd 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()">Courses</a>
+                                                       <a href="javascript:goSchools()">Start Here!</a>
                                                        <a href="http://blog.finalsclub.org">Blog</a>
                                                        <a href="javascript:goArchivedSubjects()">Archive</a>
                                                        <a href="javascript:goPress()">Press</a>
@@ -46,6 +46,8 @@
                        <div class="logbar">&nbsp;</div>
                </div>
 
+               <div id="topofcontent"></div>
+
 
 
                <div class="content">
@@ -86,14 +88,9 @@
 
                        <div class=page id=pg_schools>
                                <h1>Universities</h1>
-                               <div class="school" id=PROTO_school>
+                               <div class="school" id=PROTO_school onclick="goCourses('__name__', '___id__', __i__)">
                                        <div class=name>__name__</div>
                                        <div class=desc>__description__</div>
-                                       <div class=tocourses>
-                                               <a href="javascript:goCourses('__name__', '___id__', __i__)">
-                                               Click for courses ...
-                                               </a>
-                                       </div>
                                </div>
                        </div>
 
@@ -113,9 +110,20 @@
 
                        <div class=page id=pg_lectures>
                                <h1>Lectures for <span id=course_name></span></h1>
-                               <div class=course id=PROTO_lecture>
+                               <div class=lecture id=PROTO_lecture>
+                                       <div class=name>
+                                               <a href="javascript:goPads('___id__')">__name__</a>
+                                       </div>
+                               </div>
+                       </div>
+
+
+
+                       <div class=page id=pg_pads>
+                               <h1>Notepads for <span id=lecture_name></span></h1>
+                               <div class=pad id=PROTO_pad>
                                        <div class=name>
-                                               <a href="goPads('___id__')">__name__</a>
+                                               <a href="">__name__</a>
                                        </div>
                                </div>
                        </div>

diff --git a/public/javascripts/main.js b/public/javascripts/main.js
index 7273f79f61c72ded404169369d739ba96280f6a7..bf9ce3d447eacb6758f98164d5485649131d956b 100644 (file)
--- a/public/javascripts/main.js
+++ b/public/javascripts/main.js
@@ -20,7 +20,25 @@ 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 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);
+
 }
 
 
@@ -36,7 +54,7 @@ function goSchools() {
                        schools = response.schools
                }
                ProtoDiv.replicate("PROTO_school", schools);
-               showPage("schools")
+               goPage("schools")
        });
 }
 
@@ -55,7 +73,7 @@ function goCourses(schoolName, schoolId, a) {
                        courses = school.courses
                }
                ProtoDiv.replicate("PROTO_course", courses);
-               showPage("courses")
+               goPage("courses", "/courses/"+schoolId)
        });
 }
 
@@ -85,7 +103,37 @@ response = {
                        lectures = course.lectures
                }
                ProtoDiv.replicate("PROTO_lecture", lectures);
-               showPage("lectures")
+               goPage("lectures")
+       });
+}
+
+
+
+
+// go to the page that lists the lectures for a specific course
+var pads = []
+function goPads(lectureId) {
+       ProtoDiv.reset("PROTO_pad");
+       hideAllPages();
+       $.get("/lecture/"+lectureId, {}, function(response) {
+
+response = {
+       lecture: {
+               name: "Foo Lecture",
+               pads: [
+                       { _id: 1, name: "pad 1" },
+                       { _id: 2, name: "pad 2" },
+               ]
+       }
+}
+               pads = []
+               if(typeof response == 'object') {
+                       var lecture = response.lecture
+                       $("#lecture_name").html(lecture.name);
+                       pads = course.pads
+               }
+               ProtoDiv.replicate("PROTO_pad", lectures);
+               goPage("pads")
        });
 }
 
@@ -108,7 +156,7 @@ function goArchivedSubjects() {
        ProtoDiv.reset("PROTO_archived_subjects");
        ProtoDiv.replicate("PROTO_archived_subjects", archivedSubjects);
 
-       showPage("archive");
+       goPage("archive");
 }
 
 
@@ -118,28 +166,51 @@ function goRegister() {
        hideAllPages();
        // xxx clear fields?
        // xxx change FORM to use AJAX
-       showPage("register");
+       goPage("register");
 }
 
 
 // go to the press articles page
 function goPress() {
        hideAllPages();
-       showPage("press");
+       goPage("press");
 }
 
 
 // go to the "code of conduct" page
 function goConduct() {
        hideAllPages();
-       showPage("conduct");
+       goPage("conduct");
 }
 
 
 
 $(document).ready(function() {
        // This executes after the page has been fully loaded
-       showPage("home");
+
+       window.onpopstate = function(event) {  
+
+               var state = event.state
+               //alert("pop: "+o2j(state));
+
+               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));  
+               }
+       }; 
+
+       //showPage("home");
 })
 
 

diff --git a/public/stylesheets/fc2.css b/public/stylesheets/fc2.css
index 9c4a2369e575192ca9bf19b0f51e1526d6effe5c..6ae1b86b1cf1da1a0549a03ce3ce16b56eca6663 100644 (file)
--- a/public/stylesheets/fc2.css
+++ b/public/stylesheets/fc2.css
@@ -603,14 +603,15 @@ span.sub_menu a:hover {
 
 div.school {
 
+       cursor: pointer; cursor: hand;
        margin: 1%; 
        padding: 2%;
-       /*
        border: solid 1px #888;
        -moz-border-radius: 0.20em;
        -webkit-border-radius: 0.20em;
        -webkit-box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, .1);
        -moz-box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, .1);
+       /*
        */