Commit 3ab1cc3ebbd923277dae52f6bd81c5338a491dc6
1 parent
717b037d
some work on the javascript...still I think it's not very good, but better than before.
Showing
7 changed files
with
348 additions
and
159 deletions
... | ... | @@ -14,6 +14,9 @@ |
14 | 14 | <script type="text/javascript" src="/js/jquery.ui.touch-punch.min.js"></script> |
15 | 15 | <script type="text/javascript" src="/js/serverval.js"></script> |
16 | 16 | <script type="text/javascript" src="/js/session.js"></script> |
17 | + <script type="text/javascript" src="/js/user.js"></script> | |
18 | + <script type="text/javascript" src="/js/menu.js"></script> | |
19 | + <script type="text/javascript" src="/js/application.js"></script> | |
17 | 20 | <script type="text/javascript" src="/js/init.js"></script> |
18 | 21 | </head> |
19 | 22 | ... | ... |
assets/js/application.js
0 → 100644
1 | +function Application() | |
2 | +{ | |
3 | +} | |
4 | + | |
5 | +Application.prototype.init = function(menu) { | |
6 | + this.session = new Session("#sessid", "#sessinfo"); | |
7 | + this.user = new User("#user", menu); | |
8 | + | |
9 | + $(window).focus($.proxy(this.session.update, this.session)); | |
10 | + | |
11 | + $.getJSON("/version/", function(data) { | |
12 | + this.version = data.version; | |
13 | + $("#version").empty().append("version: " + this.version); | |
14 | + }); | |
15 | +} | |
16 | + | |
17 | +Application.prototype.logout = function() { | |
18 | + $.ajax({ | |
19 | + dataType : "json", | |
20 | + url : "/authenticate/", | |
21 | + type : "DELETE", | |
22 | + success : $.proxy(this.user.update, this.user), | |
23 | + complete : $.proxy(this.session.update, this.session) | |
24 | + }); | |
25 | +} | |
26 | + | |
27 | +Application.prototype.login = function(ev) { | |
28 | + this._sendForm("#login", "/authenticate/", ev); | |
29 | +} | |
30 | + | |
31 | +Application.prototype.signup = function(ev) { | |
32 | + this._sendForm("#signup", "/signup/", ev); | |
33 | +} | |
34 | + | |
35 | + | |
36 | +Application.prototype._sendForm = function(id, url, ev) { | |
37 | + ev.preventDefault(); | |
38 | + $.ajax({ | |
39 | + dataType : "json", | |
40 | + url : url, | |
41 | + type : "POST", | |
42 | + data : $(id + " form").serialize(), | |
43 | + success : $.proxy(this._formSuccess, this, id), | |
44 | + complete : $.proxy(this.session.update, this.session) | |
45 | + }); | |
46 | +} | |
47 | + | |
48 | +Application.prototype._formSuccess = function(id) { | |
49 | + this.user.update(); | |
50 | + $(id + "-container").addClass("hide"); | |
51 | +} | |
52 | + | |
53 | +// vim: set ts=4 sw=4: | ... | ... |
1 | 1 | var sess = null; |
2 | 2 | |
3 | 3 | $(document).ready(function() { |
4 | - var sval = new ServerVal("#randval"); | |
5 | - var asset_exp = /^.*\/(.*)/; | |
6 | - var asset = '/_main.html'; | |
4 | + var sval = new ServerVal("#randval"); | |
5 | + var asset_exp = /^.*\/(.*)/; | |
6 | + var asset = '/_main.html'; | |
7 | + var application = new Application(); | |
8 | + var menu = new Menu("#menu", application); | |
7 | 9 | |
8 | 10 | var title_adds = { |
9 | 11 | '/_author.html' : ' - Author', |
... | ... | @@ -23,95 +25,34 @@ $(document).ready(function() { |
23 | 25 | |
24 | 26 | $("#title").load("/_title.html"); |
25 | 27 | $("#main").load(asset); |
28 | + menu.init(application); | |
26 | 29 | |
27 | - $("#menu").load("/_menu.html", function() { | |
28 | - $("div#menu ul li.signup").click(function(e) { | |
29 | - if ($("#signup-container").hasClass("hide")) { | |
30 | - $("#login-container").addClass("hide"); | |
31 | - $("#signup-container").css("top", e.pageY + 20); | |
32 | - $("#signup-container").css("left", e.pageX - 100); | |
33 | - $("#signup-container").removeClass("hide"); | |
34 | - } else { | |
35 | - $("#signup-container").addClass("hide"); | |
36 | - } | |
37 | - }); | |
38 | - | |
39 | - $("div#menu ul li.login").click(function(e) { | |
40 | - if ($("#login-container").hasClass("hide")) { | |
41 | - $("#signup-container").addClass("hide"); | |
42 | - $("#login-container").css("top", e.pageY + 20); | |
43 | - $("#login-container").css("left", e.pageX - 100); | |
44 | - $("#login-container").removeClass("hide"); | |
45 | - } else { | |
46 | - $("#login-container").addClass("hide"); | |
47 | - } | |
48 | - }); | |
30 | + $("#statusline").load("/_statusline.html", function() { | |
31 | + application.init(menu); | |
49 | 32 | }); |
50 | 33 | |
51 | - $("#statusline").load("/_statusline.html", function (){ | |
52 | - sess = new Session("#sessinfo", "#sessid", "#user"); | |
53 | - | |
54 | - $.getJSON( | |
55 | - "/version/", | |
56 | - function(data) { | |
57 | - $("#version").empty().append("version: " + data.version); | |
58 | - } | |
59 | - ); | |
60 | - | |
61 | - $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); | |
62 | - $.getJSON("/currentuser/", $.proxy(sess.loadUserJSON, sess)); | |
63 | - | |
64 | - $(window).focus(function() { | |
65 | - $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); | |
34 | + $("#login").load("/_login.html", function() { | |
35 | + $(function() { | |
36 | + $("#login-container").draggable(); | |
66 | 37 | }); |
67 | 38 | |
68 | - $("div#menu ul li.logout").click(function() { | |
69 | - $.ajax({ | |
70 | - dataType: "json", | |
71 | - url: "/authenticate/", | |
72 | - type: 'DELETE', | |
73 | - success: $.proxy(sess.loadUserJSON, sess) | |
74 | - }); | |
75 | - $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); | |
39 | + $("#login-close").click(function() { | |
40 | + $("#login-container").addClass("hide"); | |
76 | 41 | }); |
77 | 42 | |
78 | - $("#login").load("/_login.html", function (){ | |
79 | - $(function() { | |
80 | - $("#login-container").draggable(); | |
81 | - }); | |
82 | - | |
83 | - $("#login-close").click(function (e) { | |
84 | - $("#login-container").addClass("hide"); | |
85 | - }); | |
86 | - | |
87 | - $("#login form").submit(function(event) { | |
88 | - event.preventDefault(); | |
89 | - $.post("/authenticate/", | |
90 | - $("#login form").serialize(), | |
91 | - $.proxy(sess.loadUserJSON, sess)); | |
92 | - $("#login-container").addClass("hide"); | |
93 | - $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); | |
94 | - }); | |
43 | + $("#login form").submit($.proxy(application.login, application)); | |
44 | + }); | |
45 | + | |
46 | + $("#signup").load("/_signup.html", function (){ | |
47 | + $(function() { | |
48 | + $("#signup-container").draggable(); | |
95 | 49 | }); |
96 | 50 | |
97 | - $("#signup").load("/_signup.html", function (){ | |
98 | - $(function() { | |
99 | - $("#signup-container").draggable(); | |
100 | - }); | |
101 | - | |
102 | - $("#signup-close").click(function (e) { | |
103 | - $("#signup-container").addClass("hide"); | |
104 | - }); | |
105 | - | |
106 | - $("#signup form").submit(function(event) { | |
107 | - event.preventDefault(); | |
108 | - $.post("/signup/", | |
109 | - $("#signup form").serialize(), | |
110 | - $.proxy(sess.loadUserJSON, sess)); | |
111 | - $("#signup-container").addClass("hide"); | |
112 | - $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); | |
113 | - }); | |
51 | + $("#signup-close").click(function (e) { | |
52 | + $("#signup-container").addClass("hide"); | |
114 | 53 | }); |
54 | + | |
55 | + $("#signup form").submit($.proxy(application.signup, application)); | |
115 | 56 | }); |
116 | 57 | |
117 | 58 | $("#footer").load("/_footer.html", function (){ | ... | ... |
assets/js/menu.js
0 → 100644
1 | +function Menu(menuSelector, application, user) | |
2 | +{ | |
3 | + this.application = application; | |
4 | + | |
5 | + this.signupSelector = menuSelector + " ul li.signup"; | |
6 | + this.loginSelector = menuSelector + " ul li.login"; | |
7 | + this.logoutSelector = menuSelector + " ul li.logout"; | |
8 | + | |
9 | + this.menuElement = $(menuSelector); | |
10 | +} | |
11 | + | |
12 | +Menu.prototype.init = function() { | |
13 | + this.menuElement.load("/_menu.html", $.proxy(this._menuActions, this)); | |
14 | +} | |
15 | + | |
16 | +Menu.prototype.update = function() { | |
17 | + if (this.application.user.isEmpty()) { | |
18 | + $(this.signupSelector).removeClass("hide"); | |
19 | + $(this.loginSelector).removeClass("hide"); | |
20 | + $(this.logoutSelector).addClass("hide"); | |
21 | + } else { | |
22 | + $(this.signupSelector).addClass("hide"); | |
23 | + $(this.loginSelector).addClass("hide"); | |
24 | + $(this.logoutSelector).removeClass("hide"); | |
25 | + } | |
26 | +} | |
27 | + | |
28 | + | |
29 | +Menu.prototype._menuActions = function() { | |
30 | + $(this.signupSelector).click(function(ev) { | |
31 | + if ($("#signup-container").hasClass("hide")) { | |
32 | + $("#login-container").addClass("hide"); | |
33 | + $("#signup-container").css("top", ev.pageY + 20); | |
34 | + $("#signup-container").css("left", ev.pageX - 100); | |
35 | + $("#signup-container").removeClass("hide"); | |
36 | + } else { | |
37 | + $("#signup-container").addClass("hide"); | |
38 | + } | |
39 | + }); | |
40 | + | |
41 | + $(this.loginSelector).click(function(ev) { | |
42 | + if ($("#login-container").hasClass("hide")) { | |
43 | + $("#signup-container").addClass("hide"); | |
44 | + $("#login-container").css("top", ev.pageY + 20); | |
45 | + $("#login-container").css("left", ev.pageX - 100); | |
46 | + $("#login-container").removeClass("hide"); | |
47 | + } else { | |
48 | + $("#login-container").addClass("hide"); | |
49 | + } | |
50 | + }); | |
51 | + | |
52 | + $(this.logoutSelector) | |
53 | + .click($.proxy(this.application.logout, this.application)); | |
54 | +} | |
55 | + | |
56 | +// vim: set ts=4 sw=4: | ... | ... |
1 | -function Session(sInfo, sId, sUser) | |
1 | +function Session(idSelector, infoSelector) | |
2 | 2 | { |
3 | - this.eUser = $(sUser); | |
4 | - this.eId = $(sId); | |
5 | - this.canvas = $(sInfo + " canvas").get(0); | |
6 | - this.context = this.canvas.getContext("2d"); | |
3 | + this.idElement = $(idSelector); | |
4 | + this.canvas = $(infoSelector + " canvas").get(0); | |
5 | + this.context = this.canvas.getContext("2d"); | |
7 | 6 | |
8 | - this.id = "none" | |
9 | - this.timeout = 0; | |
10 | - this.timeleft = 0; | |
11 | - this.email = ""; | |
12 | - this.firstname = ""; | |
13 | - this.surname = ""; | |
14 | - this.interval = null; | |
7 | + this._interval = null; | |
15 | 8 | |
16 | - //this.draw(); | |
9 | + this.update(); | |
17 | 10 | } |
18 | 11 | |
19 | -Session.prototype.loadUserJSON = function(data) | |
20 | -{ | |
21 | - this.username = data.username; | |
22 | - this.email = data.email; | |
23 | - this.firstname = data.firstname; | |
24 | - this.surname = data.surname; | |
25 | - | |
26 | - name = ""; | |
27 | - if ('' == this.username) { | |
28 | - name = "not logged in"; | |
29 | - $("li.signup").removeClass("hide"); | |
30 | - $("li.login").removeClass("hide"); | |
31 | - $("li.logout").addClass("hide"); | |
32 | - } else { | |
33 | - if ('' == this.firstname || '' == this.surname) { | |
34 | - name += this.username; | |
35 | - } else { | |
36 | - name += this.firstname + " " + this.surname; | |
37 | - } | |
38 | - $("li.signup").addClass("hide"); | |
39 | - $("li.login").addClass("hide"); | |
40 | - $("li.logout").removeClass("hide"); | |
41 | - } | |
42 | - | |
43 | - this.eUser.empty().append(name); | |
12 | +Session.prototype.update = function() { | |
13 | + $.getJSON("/sessinfo/", $.proxy(this._update, this)); | |
44 | 14 | } |
45 | 15 | |
46 | -Session.prototype.loadJSON = function(data) | |
47 | -{ | |
48 | - // this.stop(); | |
49 | - | |
50 | - this.id = ("0" == data.id)? "none" : data.id; | |
51 | - this.timeout = data.timeout * 10; | |
52 | - this.timeleft = data.timeleft * 10; | |
16 | +Session.prototype.clear = function() { | |
17 | + this.id = "none"; | |
18 | + this.timeout = 0; | |
19 | + this.timeleft = 0; | |
53 | 20 | |
54 | - this.eId.empty().append(this.id); | |
21 | + this._fraction = 0.0; | |
22 | + this._leftWidth = 0.0; | |
55 | 23 | |
56 | - this.draw(); | |
57 | - if (0 < this.timeleft) | |
58 | - this.start(); | |
24 | + this.idElement.empty().append(this.id); | |
25 | + this._stop(); | |
59 | 26 | } |
60 | 27 | |
61 | -Session.prototype.draw = function() | |
28 | +/* | |
29 | + * not real private but as a convention I use _ prefix to indicate | |
30 | + * internal use only. | |
31 | + */ | |
32 | +Session.prototype._update = function(data) | |
62 | 33 | { |
63 | - this.context.fillStyle = "rgb(255, 0, 0)"; | |
64 | - this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); | |
34 | + this.id = ("0" == data.id)? "none" : data.id; | |
35 | + this.timeout = data.timeout; | |
36 | + this.timeleft = data.timeleft; | |
65 | 37 | |
66 | - this.context.fillStyle = "rgb(0, 255, 0)"; | |
67 | - this.context.fillRect(0, 0, | |
68 | - this.canvas.width / this.timeout * this.timeleft, | |
69 | - this.canvas.height); | |
38 | + this._fraction = this.canvas.width / this.timeout; | |
39 | + this._leftWidth = this._fraction * this.timeleft; | |
40 | + | |
41 | + this.idElement.empty().append(this.id); | |
42 | + | |
43 | + this._start(); | |
70 | 44 | } |
71 | 45 | |
72 | -Session.prototype.start = function() | |
46 | +Session.prototype._start = function() | |
73 | 47 | { |
74 | - if (null === this.interval) { | |
75 | - this.interval = setInterval($.proxy(this.process, this), 1000); | |
48 | + this._draw(); | |
49 | + if (0 < this.timeleft && null === this._interval) { | |
50 | + this._interval = setInterval($.proxy(this._process, this), 5000); | |
76 | 51 | } |
77 | 52 | } |
78 | 53 | |
79 | -Session.prototype.process = function() | |
54 | +Session.prototype._process = function() | |
80 | 55 | { |
81 | 56 | if (0 >= this.timeleft) { |
82 | - this.stop(); | |
57 | + this.clear(); | |
83 | 58 | } |
84 | 59 | |
85 | 60 | else { |
86 | - this.timeleft -= 10; | |
87 | - this.draw(); | |
61 | + this.timeleft-=5; | |
62 | + this._leftWidth -= 5*this._fraction; | |
63 | + this._draw(); | |
88 | 64 | } |
89 | 65 | } |
90 | 66 | |
91 | -Session.prototype.stop = function() | |
92 | -{ | |
93 | - clearInterval(this.interval); | |
94 | - this.interval = null; | |
95 | - this.id = "none"; | |
96 | - this.timeout = 0; | |
97 | - this.timeleft = 0; | |
98 | - this.username = ""; | |
99 | - this.email = ""; | |
100 | - this.firstname = ""; | |
101 | - this.surname = ""; | |
67 | +Session.prototype._draw = function() { | |
68 | + this.context.fillStyle = "rgb(255, 0, 0)"; | |
69 | + this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); | |
102 | 70 | |
103 | - this.eId.empty().append(""); | |
104 | - this.eUser.empty().append("not logged in"); | |
71 | + this.context.fillStyle = "rgb(0, 255, 0)"; | |
72 | + this.context.fillRect(0, 0, this._leftWidth, this.canvas.height); | |
73 | +} | |
105 | 74 | |
106 | - this.draw(); | |
75 | +Session.prototype._stop = function() | |
76 | +{ | |
77 | + clearInterval(this._interval); | |
78 | + this._interval = null; | |
107 | 79 | } |
108 | 80 | |
109 | 81 | // vim: set ts=4 sw=4: | ... | ... |
assets/js/session.orig.js
0 → 100644
1 | +function Session(sInfo, sId, sUser) | |
2 | +{ | |
3 | + this.eUser = $(sUser); | |
4 | + this.eId = $(sId); | |
5 | + this.canvas = $(sInfo + " canvas").get(0); | |
6 | + this.context = this.canvas.getContext("2d"); | |
7 | + | |
8 | + this.id = "none" | |
9 | + this.timeout = 0; | |
10 | + this.timeleft = 0; | |
11 | + this.user = null; | |
12 | + | |
13 | + //this.draw(); | |
14 | +} | |
15 | + | |
16 | +Session.prototype.isAthenticated = function(data) | |
17 | +{ | |
18 | +} | |
19 | + | |
20 | +Session.prototype.authenticate = function(data) | |
21 | +{ | |
22 | + this.username = data.username; | |
23 | + this.email = data.email; | |
24 | + this.firstname = data.firstname; | |
25 | + this.surname = data.surname; | |
26 | + | |
27 | + name = ""; | |
28 | + if ('' == this.username) { | |
29 | + name = "not logged in"; | |
30 | + $("li.signup").removeClass("hide"); | |
31 | + $("li.login").removeClass("hide"); | |
32 | + $("li.logout").addClass("hide"); | |
33 | + } else { | |
34 | + if ('' == this.firstname || '' == this.surname) { | |
35 | + name += this.username; | |
36 | + } else { | |
37 | + name += this.firstname + " " + this.surname; | |
38 | + } | |
39 | + $("li.signup").addClass("hide"); | |
40 | + $("li.login").addClass("hide"); | |
41 | + $("li.logout").removeClass("hide"); | |
42 | + } | |
43 | + | |
44 | + this.eUser.empty().append(name); | |
45 | +} | |
46 | + | |
47 | +Session.prototype.loadJSON = function(data) | |
48 | +{ | |
49 | + // this.stop(); | |
50 | + | |
51 | + this.id = ("0" == data.id)? "none" : data.id; | |
52 | + this.timeout = data.timeout * 10; | |
53 | + this.timeleft = data.timeleft * 10; | |
54 | + | |
55 | + this.eId.empty().append(this.id); | |
56 | + | |
57 | + this.draw(); | |
58 | + if (0 < this.timeleft) | |
59 | + this.start(); | |
60 | +} | |
61 | + | |
62 | +Session.prototype.draw = function() | |
63 | +{ | |
64 | + this.context.fillStyle = "rgb(255, 0, 0)"; | |
65 | + this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); | |
66 | + | |
67 | + this.context.fillStyle = "rgb(0, 255, 0)"; | |
68 | + this.context.fillRect(0, 0, | |
69 | + this.canvas.width / this.timeout * this.timeleft, | |
70 | + this.canvas.height); | |
71 | +} | |
72 | + | |
73 | +Session.prototype.start = function() | |
74 | +{ | |
75 | + if (null === this.interval) { | |
76 | + this.interval = setInterval($.proxy(this.process, this), 1000); | |
77 | + } | |
78 | +} | |
79 | + | |
80 | +Session.prototype.process = function() | |
81 | +{ | |
82 | + if (0 >= this.timeleft) { | |
83 | + this.stop(); | |
84 | + } | |
85 | + | |
86 | + else { | |
87 | + this.timeleft -= 10; | |
88 | + this.draw(); | |
89 | + } | |
90 | +} | |
91 | + | |
92 | +Session.prototype.stop = function() | |
93 | +{ | |
94 | + clearInterval(this.interval); | |
95 | + this.interval = null; | |
96 | + this.id = "none"; | |
97 | + this.timeout = 0; | |
98 | + this.timeleft = 0; | |
99 | + this.username = ""; | |
100 | + this.email = ""; | |
101 | + this.firstname = ""; | |
102 | + this.surname = ""; | |
103 | + | |
104 | + this.eId.empty().append(""); | |
105 | + this.eUser.empty().append("not logged in"); | |
106 | + | |
107 | + this.draw(); | |
108 | +} | |
109 | + | |
110 | +// vim: set ts=4 sw=4: | ... | ... |
assets/js/user.js
0 → 100644
1 | +function User(userSelector, menu) | |
2 | +{ | |
3 | + this.userElement = $(userSelector); | |
4 | + this.menu = menu; | |
5 | + | |
6 | + this.update(); | |
7 | +} | |
8 | + | |
9 | +User.prototype.update = function() { | |
10 | + $.getJSON("/currentuser/", $.proxy(this._setData, this)); | |
11 | +} | |
12 | + | |
13 | +User.prototype.clear = function() { | |
14 | + this.username = ""; | |
15 | + this.email = ""; | |
16 | + this.firstname = ""; | |
17 | + this.surname = ""; | |
18 | + | |
19 | + this._displayUser(); | |
20 | +} | |
21 | + | |
22 | +User.prototype.isEmpty = function() { | |
23 | + if ("" == this.username) { | |
24 | + return true; | |
25 | + } | |
26 | + | |
27 | + return false; | |
28 | +} | |
29 | + | |
30 | + | |
31 | +User.prototype._setData = function(data) { | |
32 | + this.username = data.username; | |
33 | + this.email = data.email; | |
34 | + this.firstname = data.firstname; | |
35 | + this.surname = data.surname; | |
36 | + | |
37 | + this._displayUser(); | |
38 | + this.menu.update(); | |
39 | +} | |
40 | + | |
41 | +User.prototype._displayUser = function() { | |
42 | + if (this.isEmpty()) { | |
43 | + this.userElement.empty().append("not logged in"); | |
44 | + } else { | |
45 | + if ("" == this.firstname || "" == this.surname) { | |
46 | + this.userElement.empty().append(this.username); | |
47 | + } else { | |
48 | + this.userElement.empty() | |
49 | + .append(this.firstname + " " + this.surname); | |
50 | + } | |
51 | + } | |
52 | +} | |
53 | + | |
54 | +// vim: set ts=4 sw=4: | ... | ... |
Please
register
or
login
to post a comment