rodolphe/chromesoul
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

new user interface

Browse source
This commit is contained in:
Rodolphe Breard 2012-11-14 17:47:12 +01:00
parent ba76f2407b
commit 8a41267bb2
4 changed files with 146 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
chromesoul.css Normal file
View file

@ -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;
}

28
chromesoul.html
View file

@ -3,23 +3,33 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Chromesoul</title> <title>Chromesoul</title>
<link rel="stylesheet" type="text/css" media="all" href="chromesoul.css">
</head> </head>
<body> <body>
<h1>Welcome to chromesoul</h1> <h1>Welcome to chromesoul</h1>
<fieldset>
<legend>Configuration</legend> <ul id="tab-lst">
Login: <input type="text" id="login" class="opt"><br> <li class="tab-current capitalize">configuration</li>
Password (socks): <input type="password" id="pwd_socks" class="opt"><br> </ul>
Enable messages: <input type="checkbox" id="enable_msg" class="opt" checked="checked"><br> <div id="tab-body-wrapper">
<button id="save">Save</button> <span id="status"></span> <div id="configuration" class="tab-body">
</fieldset> Login: <input type="text" id="login" class="opt"><br>
<p>Status: <span id="status_txt"></span></p> Password (socks): <input type="password" id="pwd_socks" class="opt"><br>
<div><button id="reconnect">Reconnect</button></div> Enable messages: <input type="checkbox" id="enable_msg" class="opt" checked="checked"><br>
<button id="save">Save</button> <span id="status"></span>
</div>
</div>
<p>
Status: <span id="status_txt"></span><br>
<button id="reconnect">Reconnect</button>
</p>
<script type="text/javascript" src="third-party/md5-min.js"></script> <script type="text/javascript" src="third-party/md5-min.js"></script>
<script type="text/javascript" src="third-party/ab-str.js"></script> <script type="text/javascript" src="third-party/ab-str.js"></script>
<script type="text/javascript" src="lib/ns_client.js"></script> <script type="text/javascript" src="lib/ns_client.js"></script>
<script type="text/javascript" src="lib/options.js"></script> <script type="text/javascript" src="lib/options.js"></script>
<script type="text/javascript" src="lib/nsui.js"></script>
<script type="text/javascript" src="start.js"></script> <script type="text/javascript" src="start.js"></script>
</body> </body>
</html> </html>

63
lib/nsui.js Normal file
View file

@ -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);
};

9
start.js
View file

@ -1,6 +1,9 @@
var cs = new NsClient(); var ui = new Nsui(),
cs = new NsClient();
ui.init();
cs.init(); cs.init();
document.getElementById('reconnect').addEventListener('click', function() { ui.setReconnect(function() {
cs.disconnect(); cs.disconnect();
cs.connect(); cs.connect();
}, false); });