From 3ab1cc3ebbd923277dae52f6bd81c5338a491dc6 Mon Sep 17 00:00:00 2001 From: Georg Hopp Date: Mon, 11 Nov 2013 00:08:17 +0000 Subject: [PATCH] some work on the javascript...still I think it's not very good, but better than before. --- assets/html/layout.html | 3 + assets/js/application.js | 53 ++++++++++++++++ assets/js/init.js | 105 +++++++------------------------ assets/js/menu.js | 56 +++++++++++++++++ assets/js/session.js | 126 +++++++++++++++----------------------- assets/js/session.orig.js | 110 +++++++++++++++++++++++++++++++++ assets/js/user.js | 54 ++++++++++++++++ 7 files changed, 348 insertions(+), 159 deletions(-) create mode 100644 assets/js/application.js create mode 100644 assets/js/menu.js create mode 100644 assets/js/session.orig.js create mode 100644 assets/js/user.js diff --git a/assets/html/layout.html b/assets/html/layout.html index 824b7cc..1ba2196 100644 --- a/assets/html/layout.html +++ b/assets/html/layout.html @@ -14,6 +14,9 @@ + + + diff --git a/assets/js/application.js b/assets/js/application.js new file mode 100644 index 0000000..a7a16d8 --- /dev/null +++ b/assets/js/application.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: diff --git a/assets/js/init.js b/assets/js/init.js index 47ddd9a..f63fe56 100644 --- a/assets/js/init.js +++ b/assets/js/init.js @@ -1,9 +1,11 @@ var sess = null; $(document).ready(function() { - var sval = new ServerVal("#randval"); - var asset_exp = /^.*\/(.*)/; - var asset = '/_main.html'; + var sval = new ServerVal("#randval"); + var asset_exp = /^.*\/(.*)/; + var asset = '/_main.html'; + var application = new Application(); + var menu = new Menu("#menu", application); var title_adds = { '/_author.html' : ' - Author', @@ -23,95 +25,34 @@ $(document).ready(function() { $("#title").load("/_title.html"); $("#main").load(asset); + menu.init(application); - $("#menu").load("/_menu.html", function() { - $("div#menu ul li.signup").click(function(e) { - if ($("#signup-container").hasClass("hide")) { - $("#login-container").addClass("hide"); - $("#signup-container").css("top", e.pageY + 20); - $("#signup-container").css("left", e.pageX - 100); - $("#signup-container").removeClass("hide"); - } else { - $("#signup-container").addClass("hide"); - } - }); - - $("div#menu ul li.login").click(function(e) { - if ($("#login-container").hasClass("hide")) { - $("#signup-container").addClass("hide"); - $("#login-container").css("top", e.pageY + 20); - $("#login-container").css("left", e.pageX - 100); - $("#login-container").removeClass("hide"); - } else { - $("#login-container").addClass("hide"); - } - }); + $("#statusline").load("/_statusline.html", function() { + application.init(menu); }); - $("#statusline").load("/_statusline.html", function (){ - sess = new Session("#sessinfo", "#sessid", "#user"); - - $.getJSON( - "/version/", - function(data) { - $("#version").empty().append("version: " + data.version); - } - ); - - $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); - $.getJSON("/currentuser/", $.proxy(sess.loadUserJSON, sess)); - - $(window).focus(function() { - $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); + $("#login").load("/_login.html", function() { + $(function() { + $("#login-container").draggable(); }); - $("div#menu ul li.logout").click(function() { - $.ajax({ - dataType: "json", - url: "/authenticate/", - type: 'DELETE', - success: $.proxy(sess.loadUserJSON, sess) - }); - $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); + $("#login-close").click(function() { + $("#login-container").addClass("hide"); }); - $("#login").load("/_login.html", function (){ - $(function() { - $("#login-container").draggable(); - }); - - $("#login-close").click(function (e) { - $("#login-container").addClass("hide"); - }); - - $("#login form").submit(function(event) { - event.preventDefault(); - $.post("/authenticate/", - $("#login form").serialize(), - $.proxy(sess.loadUserJSON, sess)); - $("#login-container").addClass("hide"); - $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); - }); + $("#login form").submit($.proxy(application.login, application)); + }); + + $("#signup").load("/_signup.html", function (){ + $(function() { + $("#signup-container").draggable(); }); - $("#signup").load("/_signup.html", function (){ - $(function() { - $("#signup-container").draggable(); - }); - - $("#signup-close").click(function (e) { - $("#signup-container").addClass("hide"); - }); - - $("#signup form").submit(function(event) { - event.preventDefault(); - $.post("/signup/", - $("#signup form").serialize(), - $.proxy(sess.loadUserJSON, sess)); - $("#signup-container").addClass("hide"); - $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); - }); + $("#signup-close").click(function (e) { + $("#signup-container").addClass("hide"); }); + + $("#signup form").submit($.proxy(application.signup, application)); }); $("#footer").load("/_footer.html", function (){ diff --git a/assets/js/menu.js b/assets/js/menu.js new file mode 100644 index 0000000..7336785 --- /dev/null +++ b/assets/js/menu.js @@ -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: diff --git a/assets/js/session.js b/assets/js/session.js index dfd1606..eb5528a 100644 --- a/assets/js/session.js +++ b/assets/js/session.js @@ -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: diff --git a/assets/js/session.orig.js b/assets/js/session.orig.js new file mode 100644 index 0000000..06ed5c2 --- /dev/null +++ b/assets/js/session.orig.js @@ -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: diff --git a/assets/js/user.js b/assets/js/user.js new file mode 100644 index 0000000..839002d --- /dev/null +++ b/assets/js/user.js @@ -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: