diff --git a/chromesoul.css b/chromesoul.css new file mode 100644 index 0000000..1faadf6 --- /dev/null +++ b/chromesoul.css @@ -0,0 +1,58 @@ +#tab-lst { + margin: 0; + padding: 0; + list-style: none; +} + +#tab-lst > li { + display: inline; + margin: 0; + padding: 2px 20px 2px 20px; + border-top: 1px solid #aaa; + border-right: 1px solid #aaa; + border-radius: 8px 8px 0 0; + color: #aaa; +} + +#tab-lst > li:first-child { + border-left: 1px solid #aaa; +} + +#tab-lst > li.tab-current { + color: black; +} + +#tab-lst > li.tab-active { + color: red; +} + +#tab-body-wrapper { + margin: 1px 0 5px 0; + padding: 0; + border: 1px solid #aaa; +} + +.tab-body { + margin: 5px; +} + +.chat-log { + margin: 0; + padding: 5px; + height: 268px; + outline: 1px solid #aaa; + overflow-y: scroll; +} + +.chat-msg { + margin: 5px 0 0 0; + padding: 0; + height: 20px; + width: 100%; + border-style: none; + outline: 1px solid #aaa; +} + +.capitalize { + text-transform: capitalize; +} diff --git a/chromesoul.html b/chromesoul.html index d298792..7428374 100644 --- a/chromesoul.html +++ b/chromesoul.html @@ -3,23 +3,33 @@ Chromesoul +

Welcome to chromesoul

-
- Configuration - Login:
- Password (socks):
- Enable messages:
- -
-

Status:

-
+ + +
+
+ Login:
+ Password (socks):
+ Enable messages:
+ +
+
+ +

+ Status:
+ +

+ diff --git a/lib/nsui.js b/lib/nsui.js new file mode 100644 index 0000000..61103a3 --- /dev/null +++ b/lib/nsui.js @@ -0,0 +1,63 @@ +// +// Copyright (c) 2012 Rodolphe Breard +// +// Permission to use, copy, modify, and/or distribute this software for any +// purpose with or without fee is hereby granted, provided that the above +// copyright notice and this permission notice appear in all copies. +// +// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES +// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF +// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR +// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES +// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN +// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF +// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. +// + +var Nsui = function() { +}; + +Nsui.prototype.scroll_down = function(elem) { + var logs = document.getElementsByClassName('chat-log'); + for (var i = logs.length - 1; i >= 0; --i) { + logs[i].scrollTop = 42000; + } +}; + +Nsui.prototype.set_current = function(tab_name) { + var tabs = document.getElementById('tab-lst').children; + for (var i = tabs.length - 1; i >= 0; --i) { + if (tabs[i].innerHTML === tab_name) { + tabs[i].classList.remove('tab-active'); + tabs[i].classList.add('tab-current'); + } else { + tabs[i].classList.remove('tab-current'); + } + } +}; + +Nsui.prototype.show_tab = function(tab_name) { + var tabs = document.getElementById('tab-body-wrapper').children; + for (var i = tabs.length - 1; i >= 0; --i) { + tabs[i].style.display = 'none'; + } + document.getElementById(tab_name).style.display = 'block'; + this.set_current(tab_name); + this.scroll_down(); +}; + +Nsui.prototype.init = function() { + var tab_body, tab_lst = document.getElementById('tab-lst').children; + + this.show_tab('configuration'); + for (var i = tab_lst.length - 1; i >= 0; --i) { + tab_body = document.getElementById(tab_lst[i].innerHTML); + tab_lst[i].addEventListener('click', function() { + show_tab(this.innerHTML); + }, false); + } +}; + +Nsui.prototype.setReconnect = function(func) { + document.getElementById('reconnect').addEventListener('click', func, false); +}; diff --git a/start.js b/start.js index 2a532e6..974dbdb 100644 --- a/start.js +++ b/start.js @@ -1,6 +1,9 @@ -var cs = new NsClient(); +var ui = new Nsui(), + cs = new NsClient(); + +ui.init(); cs.init(); -document.getElementById('reconnect').addEventListener('click', function() { +ui.setReconnect(function() { cs.disconnect(); cs.connect(); -}, false); +});