improved tabs
This commit is contained in:
parent
e72b4ab867
commit
17a1689560
14 changed files with 233 additions and 52 deletions
107
lib/nsui.js
107
lib/nsui.js
|
@ -15,49 +15,74 @@
|
|||
//
|
||||
|
||||
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);
|
||||
}
|
||||
this.tab_lst = [];
|
||||
};
|
||||
|
||||
Nsui.prototype.setReconnect = function(func) {
|
||||
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 ?');
|
||||
}
|
||||
*/
|
||||
};
|
||||
|
|
|
@ -134,6 +134,3 @@ OptionsManager.prototype.encrypt = function(value) {
|
|||
OptionsManager.prototype.decrypt = function(value) {
|
||||
return value;
|
||||
};
|
||||
|
||||
var opt_mgr = new OptionsManager();
|
||||
opt_mgr.init();
|
||||
|
|
128
lib/tab.nsui.js
Normal file
128
lib/tab.nsui.js
Normal 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>';
|
||||
};
|
Reference in a new issue