<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>
- <a href="javascript:goRegister()">Create an Account</a>
- <a href="javascript:goLogin()" class="special">Login</a>
+ <a href="javascript:goPage('/archive')">Archive</a>
+ <a href="javascript:goPage('/press')">Press</a>
+ <a href="javascript:goPage('/register')">Create an Account</a>
+ <a href="javascript:goPage('/login')" class="special">Login</a>
</td>
</tr>
</table>
<div class=page id=pg_schools>
<h1>Universities</h1>
- <div class="school" id=PROTO_school onclick="goCourses('__name__', '___id__', __i__)">
+ <div class="school" id=PROTO_school onclick="goPage('/school/___id__')">
<div class=name>__name__</div>
<div class=desc>__description__</div>
</div>
+ <div class=page id=pg_login>
+ <h1>Login</h1>
+ <form id="credentials" action="/login" method="POST">
+ <div class="zarea">
+ <div class="row">
+ <div class="label">
+ <label for="email">Email</label>
+ </div>
+ <div class="field">
+ <input type="text" name="email" size="15" value="joe@sleepless.com">
+ </div>
+ </div>
+ <div class="row">
+ <div class="label">
+ <label for="password">Password</label>
+ </div>
+ <div class="field">
+ <input type="password" name="password" size="15">
+ </div>
+ </div>
+ <div class="row">
+ <div class="label">
+ </div>
+ <div class="field">
+ <button class="major">Login</button>
+ <span class="reglink">
+ <a href="/resetpw">Forgot password?</a>
+ </span>
+ </div>
+ </div>
+ <div class="row">
+ <div class="label">
+ </div>
+ <div class="field">
+ <span class="reglink">
+ <a href="/register">Create an Account</a>
+ </span>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+
+
<div class=page id=pg_conduct>
<div class="conduct">
<h1>Code of Conduct</h1>
+ <div class=page id=pg_notfound>
+ <h1>Page Not Found</h1>
+ Sorry, there is no content for this page.
+ </div>
+
+
</div>
<div>All Rights Reserved</div>
</td>
<td class="col2">
- <a href="javascript:goConduct()">Code of Conduct</a>
+ <a href="javascript:goPage('/conduct')">Code of Conduct</a>
<a href="http://blog.finalsclub.org/about.html">About</a>
<a href="http://blog.finalsclub.org/contact.html">Contact</a>
<a href="http://blog.finalsclub.org/legal.html">Legal</a>
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) {
+
+ var schools = []
if(typeof response == 'object') {
schools = response.schools
}
+
ProtoDiv.replicate("PROTO_school", schools);
- goPage("schools")
+
+ cb("schools");
+
});
+
}
// go to the page that lists the courses for a specific school
-var courses = []
-function goCourses(schoolName, schoolId, a) {
+function showCourses(matches, cb) {
+
+ var schoolId = matches[1]
+
ProtoDiv.reset("PROTO_course");
- hideAllPages();
+
$.get("/school/"+schoolId, {}, function(response) {
- courses = []
+
+ var courses = []
if(typeof response == 'object') {
var school = response.school
$("#school_name").html(school.name);
courses = school.courses
}
+
ProtoDiv.replicate("PROTO_course", courses);
- goPage("courses", "/courses/"+schoolId)
+
+ cb("courses")
+
});
}
var archivedSubjects = []
// go to the page that lists the archived subject names
-function goArchivedSubjects() {
- hideAllPages();
+function showArchive(matches, cb) {
- // fake data
+ // xxx fake data
archivedSubjects = [
{ id: 83, title: "Anthropology" },
{ id: 44, title: "CORE-Foreign Cultures" },
{ id: 80, title: "CORE-Historical Study" }
]
- ProtoDiv.reset("PROTO_archived_subjects");
- ProtoDiv.replicate("PROTO_archived_subjects", archivedSubjects);
+ ProtoDiv.reset("PROTO_archived_subjects")
+ ProtoDiv.replicate("PROTO_archived_subjects", archivedSubjects)
- goPage("archive");
+ cb("archive")
}
-
// go to the account registration page
-function goRegister() {
- hideAllPages();
+function showRegister(matches, cb) {
// xxx clear fields?
// xxx change FORM to use AJAX
- goPage("register");
+ cb("register");
}
+function showLogin(matches, cb) {
+ cb("login");
+}
+
+
+
+
// go to the press articles page
-function goPress() {
- hideAllPages();
- goPage("press");
+function showPress(matches, cb) {
+ cb("press");
}
// go to the "code of conduct" page
-function goConduct() {
- hideAllPages();
- goPage("conduct");
+function showConduct(matches, cb) {
+ cb("conduct");
}
-$(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 },
+ { regex: /^\/school\/([a-f0-9]{24})/, func: showCourses },
+ { regex: /^\/login/, func: showLogin },
+ { regex: /^\/register/, func: showRegister },
+ { regex: /^\/press/, func: showPress },
+ { regex: /^\/archive/, func: showArchive },
+ { regex: /^\/conduct/, func: showConduct },
+];
+
+/* Do and show the appropriate thing, based on the pages current URL */
+function showPage(y) {
+
+ 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);
+
+ //alert(backTop)
+ //if(!backFlag)
+ //$('html, body').animate({ scrollTop: backTop }, 100);
+ //if(y !== undefined)
+ window.scroll(0, y)
+ //backFlag = false
+
+ })
+ 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));
- }
- };
+ }
+
+ if(i == pageVectors.length) {
+ $("#pg_notfound").fadeIn(100);
+ $('html, body').animate({ scrollTop: 0 }, 100);
+ }
+ // 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) {
+ var y = 0 + window.pageYOffset
+ var o = {py:(path+"|"+y)}
+ history.pushState(o, path, path);
+ showPage(0);
+}
+
+
+/* Simulates a "back" browser navigation. */
+var backTop = 0
+function goBack(event) {
+ // alert("pop: "+o2j(event.state));
+ //backTop = window.pageYOffset; //$("html, body").offset().top
+ showPage( event.state ? event.state.y : 0 )
+}
+
+
+$(document).ready(function() {
+
+ // This code executes after the page has been fully loaded
+
+ window.onpopstate = goBack
- //showPage("home");
})
projects / oweals / finalsclub.git / commitdiff