public/javascripts/main.js

   1
   2 /*
   3
   4 This is the core logic for the main page.
   5 It implements most page transitions by showing and hiding DIV elements
   6 in the page with javascript+jquery
   7
   8 */
   9
  10
  11 /* Convert a JSON string to an object, or null if unparseable */
  12 function j2o(json) { try { return JSON.parse(json); } catch(e) { return null; } }
  13
  14 /* Convert an object to a JSON string (just easier to type than "JSON.stringify" */
  15 function o2j(obj) { return JSON.stringify(obj); }
  16
  17
  18
  19 function showHome(matches, cb) {
  20         cb("home");
  21 }
  22
  23
  24
  25 // go to the page that lists the schools
  26 function showSchools(matches, cb) {
  27
  28         ProtoDiv.reset("PROTO_school");
  29
  30         $.get("/schools", {}, function(response) {
  31
  32                 var schools = []
  33                 if(typeof response == 'object')
  34                         schools = response.schools
  35
  36                 ProtoDiv.replicate("PROTO_school", schools);
  37
  38                 cb("schools");
  39
  40         });
  41
  42 }
  43
  44
  45
  46 // go to the page that lists the courses for a specific school
  47 var courses = []
  48 function goCourses(schoolName, schoolId, a) {
  49         ProtoDiv.reset("PROTO_course");
  50         hideAllPages();
  51         $.get("/school/"+schoolId, {}, function(response) {
  52                 courses = []
  53                 if(typeof response == 'object') {
  54                         var school = response.school
  55                         $("#school_name").html(school.name);
  56                         courses = school.courses
  57                 }
  58                 ProtoDiv.replicate("PROTO_course", courses);
  59                 goPage("courses", "/courses/"+schoolId)
  60         });
  61 }
  62
  63
  64
  65
  66 // go to the page that lists the lectures for a specific course
  67 var lectures = []
  68 function goLectures(courseId) {
  69         ProtoDiv.reset("PROTO_lecture");
  70         hideAllPages();
  71         $.get("/course/"+courseId, {}, function(response) {
  72
  73 response = {
  74         course: {
  75                 name: "FooCourse",
  76                 lectures: [
  77                         { _id: 1, name: "lecture 1" },
  78                         { _id: 2, name: "lecture 2" },
  79                 ]
  80         }
  81 }
  82                 lectures = []
  83                 if(typeof response == 'object') {
  84                         var course = response.course
  85                         $("#course_name").html(course.name);
  86                         lectures = course.lectures
  87                 }
  88                 ProtoDiv.replicate("PROTO_lecture", lectures);
  89                 goPage("lectures")
  90         });
  91 }
  92
  93
  94
  95
  96 // go to the page that lists the lectures for a specific course
  97 var pads = []
  98 function goPads(lectureId) {
  99         ProtoDiv.reset("PROTO_pad");
 100         hideAllPages();
 101         $.get("/lecture/"+lectureId, {}, function(response) {
 102
 103 response = {
 104         lecture: {
 105                 name: "Foo Lecture",
 106                 pads: [
 107                         { _id: 1, name: "pad 1" },
 108                         { _id: 2, name: "pad 2" },
 109                 ]
 110         }
 111 }
 112                 pads = []
 113                 if(typeof response == 'object') {
 114                         var lecture = response.lecture
 115                         $("#lecture_name").html(lecture.name);
 116                         pads = course.pads
 117                 }
 118                 ProtoDiv.replicate("PROTO_pad", lectures);
 119                 goPage("pads")
 120         });
 121 }
 122
 123
 124
 125
 126 var archivedSubjects = []
 127
 128 // go to the page that lists the archived subject names
 129 function goArchivedSubjects() {
 130         hideAllPages();
 131
 132         // fake data
 133         archivedSubjects = [
 134                 { id: 83, title: "Anthropology" },
 135                 { id: 44, title: "CORE-Foreign Cultures" },
 136                 { id: 80, title: "CORE-Historical Study" }
 137         ]
 138
 139         ProtoDiv.reset("PROTO_archived_subjects");
 140         ProtoDiv.replicate("PROTO_archived_subjects", archivedSubjects);
 141
 142         goPage("archive");
 143 }
 144
 145
 146
 147 // go to the account registration page
 148 function goRegister() {
 149         hideAllPages();
 150         // xxx clear fields?
 151         // xxx change FORM to use AJAX
 152         goPage("register");
 153 }
 154
 155
 156 // go to the press articles page
 157 function goPress() {
 158         hideAllPages();
 159         goPage("press");
 160 }
 161
 162
 163 // go to the "code of conduct" page
 164 function goConduct() {
 165         hideAllPages();
 166         goPage("conduct");
 167 }
 168
 169
 170
 171
 172 function hideAllPages() {
 173
 174         $(".page").fadeOut(100);
 175
 176 }
 177
 178
 179 var pageVectors = [
 180         { regex: /^\/(index.html)?$/, func: showHome },
 181         { regex: /^\/schools/, func: showSchools },
 182 ];
 183
 184
 185 /* Do and show the appropriate thing, based on the pages current URL */
 186 function showPage() {
 187
 188         var path = document.location.pathname
 189
 190         $(".page").fadeOut(100);                // hide all pseudo pages
 191
 192         for(var i = 0; i < pageVectors.length; i++) {
 193                 var vector = pageVectors[i]
 194                 var matches = path.match(vector.regex)
 195                 if(matches) {
 196                         vector.func(matches, function(pageId) {
 197
 198                                 $("#pg_"+pageId).fadeIn(100);
 199                                 $('html, body').animate({ scrollTop: 0 }, 100);
 200
 201                         })
 202                         break
 203                 }
 204         }
 205
 206         // scroll to top of page (as if we'd done a real page fetch)
 207         //$('html, body').animate({ scrollTop: 0 }, 100);
 208         /*$('html, body').animate({
 209                 scrollTop: $("#topofcontent").offset().top
 210         }, 100);*/
 211
 212 }
 213
 214
 215
 216
 217 /* Simulates a page load.
 218         'path' is something like "/schools", etc.
 219         A page fetch doesn't really happen.
 220         Based on what path looks like, an appropriate DIV is shown, and action taken
 221 */
 222 function goPage(path) {
 223         history.pushState({prev:path}, path, path);
 224         showPage();
 225 }
 226
 227
 228 /* Simulates a "back" browser navigation.
 229 */
 230 function goBack(event) {
 231         var state = event.state; alert("pop: "+o2j(state));
 232
 233         showPage()
 234
 235         /*hideAllPages();
 236
 237         if(!state) {
 238
 239                 history.replaceState(null, "", "/index.html");
 240                 showPage("home");
 241
 242         }
 243         else {
 244                 //alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
 245                 //history.replaceState(null, "", state.prev);
 246                 showPage(state.prev);
 247                 // showPage(state.prev);
 248                 //alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
 249         }
 250         */
 251 }
 252
 253
 254 $(document).ready(function() {
 255
 256         // This executes after the page has been fully loaded
 257
 258         window.onpopstate = goBack
 259
 260         //showPage("home");
 261
 262 })
 263
 264
 265
 266
 267