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
  37                 ProtoDiv.replicate("PROTO_school", schools);
  38
  39                 cb("schools");
  40
  41         });
  42
  43 }
  44
  45
  46
  47 // go to the page that lists the courses for a specific school
  48 function showCourses(matches, cb) {
  49
  50         var schoolId = matches[1]
  51
  52         ProtoDiv.reset("PROTO_course");
  53
  54         $.get("/school/"+schoolId, {}, function(response) {
  55
  56                 var courses = []
  57                 if(typeof response == 'object') {
  58                         var school = response.school
  59                         $("#school_name").html(school.name);
  60                         courses = school.courses
  61                 }
  62
  63                 ProtoDiv.replicate("PROTO_course", courses);
  64
  65                 cb("courses")
  66
  67         });
  68 }
  69
  70
  71
  72
  73 // go to the page that lists the lectures for a specific course
  74 function showLectures(matches, cb) {
  75
  76         var courseId = matches[1]
  77
  78         ProtoDiv.reset("PROTO_lecture");
  79
  80         $.get("/course/"+courseId, {}, function(response) {
  81
  82                 ProtoDiv.reset("PROTO_lectures_head")
  83                 ProtoDiv.reset("PROTO_lectures_instructor")
  84                 ProtoDiv.reset("PROTO_lecture")
  85
  86                 if(typeof response == 'object') {
  87
  88                         var course = response.course
  89                         if(course)
  90                                 ProtoDiv.replicate("PROTO_lectures_head", [course])
  91
  92                         var instructor = response.instructor
  93                         if(instructor)
  94                                 ProtoDiv.replicate("PROTO_lectures_instructor", [instructor])
  95
  96                         var lectures = response.lectures
  97                         if(lectures)
  98                                 ProtoDiv.replicate("PROTO_lecture", lectures);
  99
 100                 }
 101
 102                 cb("lectures")
 103         });
 104 }
 105
 106
 107
 108 // go to the page that lists the note taking sessions for a specific lecture
 109 function showNotes(matches, cb) {
 110
 111         var lectureId = matches[1]
 112
 113         ProtoDiv.reset("PROTO_note");
 114
 115         $.get("/lecture/"+lectureId, {}, function(response) {
 116
 117                 if(typeof response == 'object') {
 118
 119                         var course = response.course
 120                         //if(course)
 121                         //      ProtoDiv.replicate("PROTO_lectures_head", [course])
 122
 123                         var instructor = response.instructor
 124                         //if(instructor)
 125                         //      ProtoDiv.replicate("PROTO_lectures_instructor", [instructor])
 126
 127                         var lecture = response.lecture
 128                         //if(lecture)
 129                         //      ProtoDiv.replicate("PROTO_lecture", lectures);
 130
 131                         var notes = response.notes
 132                         if(notes)
 133                                 ProtoDiv.replicate("PROTO_note", notes);
 134
 135                 }
 136
 137                 cb("notes")
 138         });
 139 }
 140
 141
 142
 143
 144 var archivedSubjects = []
 145
 146 // go to the page that lists the archived subject names
 147 function showArchive(matches, cb) {
 148
 149         // xxx fake data
 150         archivedSubjects = [
 151                 { id: 83, title: "Anthropology" },
 152                 { id: 44, title: "CORE-Foreign Cultures" },
 153                 { id: 80, title: "CORE-Historical Study" }
 154         ]
 155
 156         ProtoDiv.reset("PROTO_archived_subjects")
 157         ProtoDiv.replicate("PROTO_archived_subjects", archivedSubjects)
 158
 159         cb("archive")
 160 }
 161
 162
 163 // go to the account registration page
 164 function showRegister(matches, cb) {
 165         // xxx clear fields?
 166         // xxx change FORM to use AJAX
 167         cb("register");
 168 }
 169
 170
 171 function showLogin(matches, cb) {
 172         cb("login");
 173 }
 174
 175
 176
 177
 178 // go to the press articles page
 179 function showPress(matches, cb) {
 180         cb("press");
 181 }
 182
 183
 184 // go to the "code of conduct" page
 185 function showConduct(matches, cb) {
 186         cb("conduct");
 187 }
 188
 189
 190
 191
 192 function hideAllPages() {
 193
 194         $(".page").fadeOut(100);
 195
 196 }
 197
 198
 199 var pageVectors = [
 200         { regex: /^\/(index.html)?$/, func: showHome },
 201         { regex: /^\/schools/, func: showSchools },
 202         { regex: /^\/school\/([a-f0-9]{24})/, func: showCourses },
 203         { regex: /^\/course\/([a-f0-9]{24})/, func: showLectures },
 204         { regex: /^\/lecture\/([a-f0-9]{24})/, func: showNotes },
 205         { regex: /^\/login/, func: showLogin },
 206         { regex: /^\/register/, func: showRegister },
 207         { regex: /^\/press/, func: showPress },
 208         { regex: /^\/archive/, func: showArchive },
 209         { regex: /^\/conduct/, func: showConduct },
 210 ];
 211
 212
 213 /* Do and show the appropriate thing, based on the pages current URL */
 214 function showPage(y) {
 215
 216         var path = document.location.pathname
 217
 218         $(".page").fadeOut(100);                // hide all pseudo pages
 219
 220         for(var i = 0; i < pageVectors.length; i++) {
 221                 var vector = pageVectors[i]
 222                 var matches = path.match(vector.regex)
 223                 if(matches) {
 224                         vector.func(matches, function(pageId) {
 225
 226                                 $("#pg_"+pageId).fadeIn(100);
 227
 228                                 window.scroll(0, y)
 229
 230                         })
 231                         break
 232                 }
 233         }
 234
 235         if(i == pageVectors.length) {
 236                 $("#pg_notfound").fadeIn(100);
 237                 window.scroll(0, 0)
 238         }
 239         // scroll to top of page (as if we'd done a real page fetch)
 240         /*$('html, body').animate({
 241                 scrollTop: $("#topofcontent").offset().top
 242         }, 100);*/
 243
 244 }
 245
 246
 247
 248
 249 /* Simulates a page load.
 250         'path' is something like "/schools", etc.
 251         A page fetch doesn't really happen.
 252         Based on what path looks like, an appropriate DIV is shown, and action taken
 253 */
 254 var topQueue = [0]
 255 function goPage(path) {
 256         var y = 0 + window.pageYOffset
 257         topQueue.push(y)
 258         var o = {py:(path+"|"+y)}
 259         history.pushState(o, path, path);
 260         showPage(0);
 261 }
 262
 263
 264 /* Simulates a "back" browser navigation.  */
 265 function goBack(event) {
 266         var y = topQueue.pop()
 267         showPage( y );
 268 }
 269
 270
 271 $(document).ready(function() {
 272
 273         // This code executes after the page has been fully loaded
 274
 275         window.onpopstate = goBack
 276
 277 })
 278
 279
 280
 281
 282