improved tabs

This commit is contained in:
Rodolphe Breard 2012-11-15 01:45:45 +01:00
parent e72b4ab867
commit 17a1689560
14 changed files with 233 additions and 52 deletions

View file

@ -7,6 +7,11 @@
* Patrick Marie aka mycroft for his documentation about the NetSoul protocol * Patrick Marie aka mycroft for his documentation about the NetSoul protocol
## [Gnome 2.18 icon theme](http://art.gnome.org/themes/icon)
* AMAZIGH Aneglus
## [JSHash (JavaScript MD5)](http://pajhome.org.uk/crypt/md5) ## [JSHash (JavaScript MD5)](http://pajhome.org.uk/crypt/md5)
* Paul Johnston * Paul Johnston

View file

@ -7,13 +7,17 @@
#tab-lst > li { #tab-lst > li {
display: inline; display: inline;
margin: 0; margin: 0;
padding: 2px 20px 2px 20px; padding: 2px 10px 2px 10px;
border-top: 1px solid #aaa; border-top: 1px solid #aaa;
border-right: 1px solid #aaa; border-right: 1px solid #aaa;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
color: #aaa; color: #aaa;
} }
#tab-lst > li > span::selection {
background: transparent;
}
#tab-lst > li:first-child { #tab-lst > li:first-child {
border-left: 1px solid #aaa; border-left: 1px solid #aaa;
} }
@ -44,7 +48,7 @@
overflow-y: scroll; overflow-y: scroll;
} }
.chat-msg { .chat-input {
margin: 5px 0 0 0; margin: 5px 0 0 0;
padding: 0; padding: 0;
height: 20px; height: 20px;
@ -53,10 +57,25 @@
outline: 1px solid #aaa; outline: 1px solid #aaa;
} }
.chat-msg:focus { .chat-input-wrapper {
background-image: url('img/user-offline.png');
background-repeat: no-repeat;
background-position: left bottom;
padding-left: 24px;
}
.chat-input:focus {
outline-offset: 0; outline-offset: 0;
} }
.capitalize { #tab-lst > #tab-config {
text-transform: capitalize; background-image: url('img/preferences.png');
background-repeat: no-repeat;
background-position: center;
padding-left: 12px;
padding-right: 12px;
}
#tab-config > span {
display: none;
} }

View file

@ -9,7 +9,7 @@
<h1>Welcome to chromesoul</h1> <h1>Welcome to chromesoul</h1>
<ul id="tab-lst"> <ul id="tab-lst">
<li class="tab-current capitalize">configuration</li> <li id="tab-config"><span>configuration</span></li>
</ul> </ul>
<div id="tab-body-wrapper"> <div id="tab-body-wrapper">
<div id="configuration" class="tab-body"> <div id="configuration" class="tab-body">

BIN
img/preferences.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1,014 B

BIN
img/user-available.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

BIN
img/user-away.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

BIN
img/user-busy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 972 B

BIN
img/user-idle.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

BIN
img/user-invisible.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 959 B

BIN
img/user-offline.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -15,49 +15,74 @@
// //
var Nsui = function() { var Nsui = function() {
}; this.tab_lst = [];
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) { Nsui.prototype.setReconnect = function(func) {
document.getElementById('reconnect').addEventListener('click', func, false); document.getElementById('reconnect').addEventListener('click', func, false);
}; };
Nsui.prototype.getWidgetByName = function(name) {
var i, ret = null;
for (i = this.tab_lst.length - 1; i >= 0; --i) {
if (this.tab_lst[i].name === name) {
ret = this.tab_lst[i];
break ;
}
}
return ret;
}
Nsui.prototype.registerTab = function(tab) {
this.tab_lst.push(tab);
};
Nsui.prototype.unRegisterTab = function(tab) {
this.tab_lst = this.tab_lst.filter(function(element, index, array) {
return tab.name !== element.name;
});
};
Nsui.prototype.init = function() {
var sh = function(elem) {
return function() {
for (var i = elem.tab_lst.length - 1; i >= 0; --i) {
elem.tab_lst[i].hide();
}
this.classList.add('tab-current');
document.getElementById('configuration').style.display = 'block';
};
};
document.getElementById('tab-config').addEventListener('click', sh(this), false);
/*
var i, t, tabs = ['guitto_f', 'cadore_s', 'baud_c', 'bastie_j'], onTabDelete = function(elem) {
return function(tab) {
var n = tab.getNextTabName(), t = elem.getWidgetByName(tab.name);
if (t !== null) {
elem.unRegisterTab(t);
}
if (n !== null) {
n = elem.getWidgetByName(n);
if (n !== null) {
n.show();
}
} else {
document.getElementById('configuration').style.display = 'block';
}
};
};
for (i = 0; i < tabs.length; i++) {
t = new Tab(tabs[i]);
this.registerTab(t);
t.registerCloseHandler(onTabDelete(this));
t.appendText(tabs[i] + ': Salut Rodolphe !');
t.appendText(tabs[i] + ': Ça va ?');
}
*/
};

View file

@ -134,6 +134,3 @@ OptionsManager.prototype.encrypt = function(value) {
OptionsManager.prototype.decrypt = function(value) { OptionsManager.prototype.decrypt = function(value) {
return value; return value;
}; };
var opt_mgr = new OptionsManager();
opt_mgr.init();

128
lib/tab.nsui.js Normal file
View file

@ -0,0 +1,128 @@
//
// 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 Tab = function(name) {
this.closeHandler = null;
this.name = this.filterName(name);
this.wr_lst = document.getElementById('tab-lst');
this.wr_body = document.getElementById('tab-body-wrapper');
this.initListElement();
this.initBodyElement();
};
Tab.prototype.filterName = function(name) {
// TODO: enforce an id compliant name
return name;
};
Tab.prototype.initListElement = function() {
var inner = document.createElement('span'),
evt_click = function(elem) {
return function() {
elem.show();
};
},
evt_dblclick = function(elem) {
return function() {
elem.close();
};
};
inner.innerHTML = this.name;
this.el_lst = document.createElement('li');
this.el_lst.addEventListener('click', evt_click(this), false);
this.el_lst.addEventListener('dblclick', evt_dblclick(this), false);
this.el_lst.appendChild(inner);
this.wr_lst.appendChild(this.el_lst);
};
Tab.prototype.initBodyElement = function() {
var chat_input = document.createElement('input'),
chat_input_w = document.createElement('div');
this.chat_log = document.createElement('p');
this.chat_log.classList.add('chat-log');
this.el_body = document.createElement('div');
this.el_body.classList.add('tab-body');
this.el_body.id = this.name;
this.el_body.style.display = 'none';
chat_input_w.classList.add('chat-input-wrapper');
chat_input.classList.add('chat-input');
chat_input.setAttribute('type', 'text');
chat_input_w.appendChild(chat_input);
this.el_body.appendChild(this.chat_log);
this.el_body.appendChild(chat_input_w);
this.wr_body.appendChild(this.el_body);
};
Tab.prototype.registerCloseHandler = function(func) {
this.closeHandler = func;
};
Tab.prototype.getNextTabName = function() {
var i, prev = null;
for (i = this.wr_body.children.length - 1; i > 1; --i) {
if (this.wr_body.children[i].id === this.name) {
if (prev === null) {
prev = this.wr_body.children[i - 1].id;
}
break ;
}
prev = this.wr_body.children[i].id;
}
return prev;
}
Tab.prototype.close = function() {
if (this.closeHandler !== null) {
this.closeHandler(this);
}
this.wr_body.removeChild(this.el_body);
this.wr_lst.removeChild(this.el_lst);
};
Tab.prototype.hide = function() {
this.el_lst.classList.remove('tab-current');
this.el_body.style.display = 'none';
};
Tab.prototype.show = function() {
for (var i = this.wr_body.children.length - 1; i >= 0; --i) {
this.wr_body.children[i].style.display = 'none';
}
this.el_body.style.display = 'block';
this.chat_log.scrollTop = 42000;
this.setCurrent();
};
Tab.prototype.setCurrent = function() {
var i, elems = document.getElementsByClassName('tab-current');
for (i = elems.length - 1; i >= 0; --i) {
elems[i].classList.remove('tab-current');
}
this.el_lst.classList.remove('tab-active');
this.el_lst.classList.add('tab-current');
}
Tab.prototype.appendText = function(text) {
// TODO: flush text
this.chat_log.innerHTML += text + '<br>';
};

View file

@ -1,8 +1,15 @@
var ui = new Nsui(), var om, ui, cs;
cs = new NsClient();
om = new OptionsManager();
om.init();
ui = new Nsui();
ui.init(); ui.init();
cs = new NsClient();
cs.init(); cs.init();
ui.setReconnect(function() { ui.setReconnect(function() {
cs.disconnect(); cs.disconnect();
cs.connect(); cs.connect();