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