Browse Source
some work on the javascript...still I think it's not very good, but better than before.
v0.1.8
some work on the javascript...still I think it's not very good, but better than before.
v0.1.8
7 changed files with 348 additions and 159 deletions
-
3assets/html/layout.html
-
53assets/js/application.js
-
105assets/js/init.js
-
56assets/js/menu.js
-
126assets/js/session.js
-
110assets/js/session.orig.js
-
54assets/js/user.js
@ -0,0 +1,53 @@ |
|||
function Application() |
|||
{ |
|||
} |
|||
|
|||
Application.prototype.init = function(menu) { |
|||
this.session = new Session("#sessid", "#sessinfo"); |
|||
this.user = new User("#user", menu); |
|||
|
|||
$(window).focus($.proxy(this.session.update, this.session)); |
|||
|
|||
$.getJSON("/version/", function(data) { |
|||
this.version = data.version; |
|||
$("#version").empty().append("version: " + this.version); |
|||
}); |
|||
} |
|||
|
|||
Application.prototype.logout = function() { |
|||
$.ajax({ |
|||
dataType : "json", |
|||
url : "/authenticate/", |
|||
type : "DELETE", |
|||
success : $.proxy(this.user.update, this.user), |
|||
complete : $.proxy(this.session.update, this.session) |
|||
}); |
|||
} |
|||
|
|||
Application.prototype.login = function(ev) { |
|||
this._sendForm("#login", "/authenticate/", ev); |
|||
} |
|||
|
|||
Application.prototype.signup = function(ev) { |
|||
this._sendForm("#signup", "/signup/", ev); |
|||
} |
|||
|
|||
|
|||
Application.prototype._sendForm = function(id, url, ev) { |
|||
ev.preventDefault(); |
|||
$.ajax({ |
|||
dataType : "json", |
|||
url : url, |
|||
type : "POST", |
|||
data : $(id + " form").serialize(), |
|||
success : $.proxy(this._formSuccess, this, id), |
|||
complete : $.proxy(this.session.update, this.session) |
|||
}); |
|||
} |
|||
|
|||
Application.prototype._formSuccess = function(id) { |
|||
this.user.update(); |
|||
$(id + "-container").addClass("hide"); |
|||
} |
|||
|
|||
// vim: set ts=4 sw=4:
|
|||
@ -0,0 +1,56 @@ |
|||
function Menu(menuSelector, application, user) |
|||
{ |
|||
this.application = application; |
|||
|
|||
this.signupSelector = menuSelector + " ul li.signup"; |
|||
this.loginSelector = menuSelector + " ul li.login"; |
|||
this.logoutSelector = menuSelector + " ul li.logout"; |
|||
|
|||
this.menuElement = $(menuSelector); |
|||
} |
|||
|
|||
Menu.prototype.init = function() { |
|||
this.menuElement.load("/_menu.html", $.proxy(this._menuActions, this)); |
|||
} |
|||
|
|||
Menu.prototype.update = function() { |
|||
if (this.application.user.isEmpty()) { |
|||
$(this.signupSelector).removeClass("hide"); |
|||
$(this.loginSelector).removeClass("hide"); |
|||
$(this.logoutSelector).addClass("hide"); |
|||
} else { |
|||
$(this.signupSelector).addClass("hide"); |
|||
$(this.loginSelector).addClass("hide"); |
|||
$(this.logoutSelector).removeClass("hide"); |
|||
} |
|||
} |
|||
|
|||
|
|||
Menu.prototype._menuActions = function() { |
|||
$(this.signupSelector).click(function(ev) { |
|||
if ($("#signup-container").hasClass("hide")) { |
|||
$("#login-container").addClass("hide"); |
|||
$("#signup-container").css("top", ev.pageY + 20); |
|||
$("#signup-container").css("left", ev.pageX - 100); |
|||
$("#signup-container").removeClass("hide"); |
|||
} else { |
|||
$("#signup-container").addClass("hide"); |
|||
} |
|||
}); |
|||
|
|||
$(this.loginSelector).click(function(ev) { |
|||
if ($("#login-container").hasClass("hide")) { |
|||
$("#signup-container").addClass("hide"); |
|||
$("#login-container").css("top", ev.pageY + 20); |
|||
$("#login-container").css("left", ev.pageX - 100); |
|||
$("#login-container").removeClass("hide"); |
|||
} else { |
|||
$("#login-container").addClass("hide"); |
|||
} |
|||
}); |
|||
|
|||
$(this.logoutSelector) |
|||
.click($.proxy(this.application.logout, this.application)); |
|||
} |
|||
|
|||
// vim: set ts=4 sw=4:
|
|||
@ -1,109 +1,81 @@ |
|||
function Session(sInfo, sId, sUser) |
|||
function Session(idSelector, infoSelector) |
|||
{ |
|||
this.eUser = $(sUser); |
|||
this.eId = $(sId); |
|||
this.canvas = $(sInfo + " canvas").get(0); |
|||
this.context = this.canvas.getContext("2d"); |
|||
this.idElement = $(idSelector); |
|||
this.canvas = $(infoSelector + " canvas").get(0); |
|||
this.context = this.canvas.getContext("2d"); |
|||
|
|||
this.id = "none" |
|||
this.timeout = 0; |
|||
this.timeleft = 0; |
|||
this.email = ""; |
|||
this.firstname = ""; |
|||
this.surname = ""; |
|||
this.interval = null; |
|||
this._interval = null; |
|||
|
|||
//this.draw();
|
|||
this.update(); |
|||
} |
|||
|
|||
Session.prototype.loadUserJSON = function(data) |
|||
{ |
|||
this.username = data.username; |
|||
this.email = data.email; |
|||
this.firstname = data.firstname; |
|||
this.surname = data.surname; |
|||
|
|||
name = ""; |
|||
if ('' == this.username) { |
|||
name = "not logged in"; |
|||
$("li.signup").removeClass("hide"); |
|||
$("li.login").removeClass("hide"); |
|||
$("li.logout").addClass("hide"); |
|||
} else { |
|||
if ('' == this.firstname || '' == this.surname) { |
|||
name += this.username; |
|||
} else { |
|||
name += this.firstname + " " + this.surname; |
|||
} |
|||
$("li.signup").addClass("hide"); |
|||
$("li.login").addClass("hide"); |
|||
$("li.logout").removeClass("hide"); |
|||
} |
|||
|
|||
this.eUser.empty().append(name); |
|||
Session.prototype.update = function() { |
|||
$.getJSON("/sessinfo/", $.proxy(this._update, this)); |
|||
} |
|||
|
|||
Session.prototype.loadJSON = function(data) |
|||
{ |
|||
// this.stop();
|
|||
|
|||
this.id = ("0" == data.id)? "none" : data.id; |
|||
this.timeout = data.timeout * 10; |
|||
this.timeleft = data.timeleft * 10; |
|||
Session.prototype.clear = function() { |
|||
this.id = "none"; |
|||
this.timeout = 0; |
|||
this.timeleft = 0; |
|||
|
|||
this.eId.empty().append(this.id); |
|||
this._fraction = 0.0; |
|||
this._leftWidth = 0.0; |
|||
|
|||
this.draw(); |
|||
if (0 < this.timeleft) |
|||
this.start(); |
|||
this.idElement.empty().append(this.id); |
|||
this._stop(); |
|||
} |
|||
|
|||
Session.prototype.draw = function() |
|||
/* |
|||
* not real private but as a convention I use _ prefix to indicate |
|||
* internal use only. |
|||
*/ |
|||
Session.prototype._update = function(data) |
|||
{ |
|||
this.context.fillStyle = "rgb(255, 0, 0)"; |
|||
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); |
|||
this.id = ("0" == data.id)? "none" : data.id; |
|||
this.timeout = data.timeout; |
|||
this.timeleft = data.timeleft; |
|||
|
|||
this.context.fillStyle = "rgb(0, 255, 0)"; |
|||
this.context.fillRect(0, 0, |
|||
this.canvas.width / this.timeout * this.timeleft, |
|||
this.canvas.height); |
|||
this._fraction = this.canvas.width / this.timeout; |
|||
this._leftWidth = this._fraction * this.timeleft; |
|||
|
|||
this.idElement.empty().append(this.id); |
|||
|
|||
this._start(); |
|||
} |
|||
|
|||
Session.prototype.start = function() |
|||
Session.prototype._start = function() |
|||
{ |
|||
if (null === this.interval) { |
|||
this.interval = setInterval($.proxy(this.process, this), 1000); |
|||
this._draw(); |
|||
if (0 < this.timeleft && null === this._interval) { |
|||
this._interval = setInterval($.proxy(this._process, this), 5000); |
|||
} |
|||
} |
|||
|
|||
Session.prototype.process = function() |
|||
Session.prototype._process = function() |
|||
{ |
|||
if (0 >= this.timeleft) { |
|||
this.stop(); |
|||
this.clear(); |
|||
} |
|||
|
|||
else { |
|||
this.timeleft -= 10; |
|||
this.draw(); |
|||
this.timeleft-=5; |
|||
this._leftWidth -= 5*this._fraction; |
|||
this._draw(); |
|||
} |
|||
} |
|||
|
|||
Session.prototype.stop = function() |
|||
{ |
|||
clearInterval(this.interval); |
|||
this.interval = null; |
|||
this.id = "none"; |
|||
this.timeout = 0; |
|||
this.timeleft = 0; |
|||
this.username = ""; |
|||
this.email = ""; |
|||
this.firstname = ""; |
|||
this.surname = ""; |
|||
Session.prototype._draw = function() { |
|||
this.context.fillStyle = "rgb(255, 0, 0)"; |
|||
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); |
|||
|
|||
this.eId.empty().append(""); |
|||
this.eUser.empty().append("not logged in"); |
|||
this.context.fillStyle = "rgb(0, 255, 0)"; |
|||
this.context.fillRect(0, 0, this._leftWidth, this.canvas.height); |
|||
} |
|||
|
|||
this.draw(); |
|||
Session.prototype._stop = function() |
|||
{ |
|||
clearInterval(this._interval); |
|||
this._interval = null; |
|||
} |
|||
|
|||
// vim: set ts=4 sw=4:
|
|||
@ -0,0 +1,110 @@ |
|||
function Session(sInfo, sId, sUser) |
|||
{ |
|||
this.eUser = $(sUser); |
|||
this.eId = $(sId); |
|||
this.canvas = $(sInfo + " canvas").get(0); |
|||
this.context = this.canvas.getContext("2d"); |
|||
|
|||
this.id = "none" |
|||
this.timeout = 0; |
|||
this.timeleft = 0; |
|||
this.user = null; |
|||
|
|||
//this.draw();
|
|||
} |
|||
|
|||
Session.prototype.isAthenticated = function(data) |
|||
{ |
|||
} |
|||
|
|||
Session.prototype.authenticate = function(data) |
|||
{ |
|||
this.username = data.username; |
|||
this.email = data.email; |
|||
this.firstname = data.firstname; |
|||
this.surname = data.surname; |
|||
|
|||
name = ""; |
|||
if ('' == this.username) { |
|||
name = "not logged in"; |
|||
$("li.signup").removeClass("hide"); |
|||
$("li.login").removeClass("hide"); |
|||
$("li.logout").addClass("hide"); |
|||
} else { |
|||
if ('' == this.firstname || '' == this.surname) { |
|||
name += this.username; |
|||
} else { |
|||
name += this.firstname + " " + this.surname; |
|||
} |
|||
$("li.signup").addClass("hide"); |
|||
$("li.login").addClass("hide"); |
|||
$("li.logout").removeClass("hide"); |
|||
} |
|||
|
|||
this.eUser.empty().append(name); |
|||
} |
|||
|
|||
Session.prototype.loadJSON = function(data) |
|||
{ |
|||
// this.stop();
|
|||
|
|||
this.id = ("0" == data.id)? "none" : data.id; |
|||
this.timeout = data.timeout * 10; |
|||
this.timeleft = data.timeleft * 10; |
|||
|
|||
this.eId.empty().append(this.id); |
|||
|
|||
this.draw(); |
|||
if (0 < this.timeleft) |
|||
this.start(); |
|||
} |
|||
|
|||
Session.prototype.draw = function() |
|||
{ |
|||
this.context.fillStyle = "rgb(255, 0, 0)"; |
|||
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); |
|||
|
|||
this.context.fillStyle = "rgb(0, 255, 0)"; |
|||
this.context.fillRect(0, 0, |
|||
this.canvas.width / this.timeout * this.timeleft, |
|||
this.canvas.height); |
|||
} |
|||
|
|||
Session.prototype.start = function() |
|||
{ |
|||
if (null === this.interval) { |
|||
this.interval = setInterval($.proxy(this.process, this), 1000); |
|||
} |
|||
} |
|||
|
|||
Session.prototype.process = function() |
|||
{ |
|||
if (0 >= this.timeleft) { |
|||
this.stop(); |
|||
} |
|||
|
|||
else { |
|||
this.timeleft -= 10; |
|||
this.draw(); |
|||
} |
|||
} |
|||
|
|||
Session.prototype.stop = function() |
|||
{ |
|||
clearInterval(this.interval); |
|||
this.interval = null; |
|||
this.id = "none"; |
|||
this.timeout = 0; |
|||
this.timeleft = 0; |
|||
this.username = ""; |
|||
this.email = ""; |
|||
this.firstname = ""; |
|||
this.surname = ""; |
|||
|
|||
this.eId.empty().append(""); |
|||
this.eUser.empty().append("not logged in"); |
|||
|
|||
this.draw(); |
|||
} |
|||
|
|||
// vim: set ts=4 sw=4:
|
|||
@ -0,0 +1,54 @@ |
|||
function User(userSelector, menu) |
|||
{ |
|||
this.userElement = $(userSelector); |
|||
this.menu = menu; |
|||
|
|||
this.update(); |
|||
} |
|||
|
|||
User.prototype.update = function() { |
|||
$.getJSON("/currentuser/", $.proxy(this._setData, this)); |
|||
} |
|||
|
|||
User.prototype.clear = function() { |
|||
this.username = ""; |
|||
this.email = ""; |
|||
this.firstname = ""; |
|||
this.surname = ""; |
|||
|
|||
this._displayUser(); |
|||
} |
|||
|
|||
User.prototype.isEmpty = function() { |
|||
if ("" == this.username) { |
|||
return true; |
|||
} |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
User.prototype._setData = function(data) { |
|||
this.username = data.username; |
|||
this.email = data.email; |
|||
this.firstname = data.firstname; |
|||
this.surname = data.surname; |
|||
|
|||
this._displayUser(); |
|||
this.menu.update(); |
|||
} |
|||
|
|||
User.prototype._displayUser = function() { |
|||
if (this.isEmpty()) { |
|||
this.userElement.empty().append("not logged in"); |
|||
} else { |
|||
if ("" == this.firstname || "" == this.surname) { |
|||
this.userElement.empty().append(this.username); |
|||
} else { |
|||
this.userElement.empty() |
|||
.append(this.firstname + " " + this.surname); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// vim: set ts=4 sw=4:
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue