improved tab support
This commit is contained in:
parent
17a1689560
commit
79cea34ba6
3 changed files with 75 additions and 72 deletions
|
@ -29,6 +29,7 @@
|
|||
<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/options.js"></script>
|
||||
<script type="text/javascript" src="lib/tab.nsui.js"></script>
|
||||
<script type="text/javascript" src="lib/nsui.js"></script>
|
||||
<script type="text/javascript" src="start.js"></script>
|
||||
</body>
|
||||
|
|
100
lib/nsui.js
100
lib/nsui.js
|
@ -22,7 +22,36 @@ Nsui.prototype.setReconnect = function(func) {
|
|||
document.getElementById('reconnect').addEventListener('click', func, false);
|
||||
};
|
||||
|
||||
Nsui.prototype.getWidgetByName = function(name) {
|
||||
Nsui.prototype.createTab = function(name) {
|
||||
var tab = new Tab(name);
|
||||
|
||||
tab.hide();
|
||||
this.tab_lst.push(tab);
|
||||
return tab;
|
||||
};
|
||||
|
||||
Nsui.prototype.deleteTab = function(tab) {
|
||||
var new_tab = this.getNextTab(tab.name);
|
||||
|
||||
this.tab_lst = this.tab_lst.filter(function(element, index, array) {
|
||||
return tab.name !== element.name;
|
||||
});
|
||||
|
||||
if (new_tab !== null) {
|
||||
new_tab.show();
|
||||
} else {
|
||||
document.getElementById('configuration').style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
Nsui.prototype.hideAllTabs = function() {
|
||||
document.getElementById('configuration').style.display = 'none';
|
||||
for (i = this.tab_lst.length - 1; i >= 0; --i) {
|
||||
this.tab_lst[i].hide();
|
||||
}
|
||||
};
|
||||
|
||||
Nsui.prototype.getTabByName = function(name) {
|
||||
var i, ret = null;
|
||||
|
||||
for (i = this.tab_lst.length - 1; i >= 0; --i) {
|
||||
|
@ -35,14 +64,29 @@ Nsui.prototype.getWidgetByName = function(name) {
|
|||
return ret;
|
||||
}
|
||||
|
||||
Nsui.prototype.registerTab = function(tab) {
|
||||
this.tab_lst.push(tab);
|
||||
};
|
||||
Nsui.prototype.getNextTab = function(current_name) {
|
||||
var i, prev = null;
|
||||
|
||||
Nsui.prototype.unRegisterTab = function(tab) {
|
||||
this.tab_lst = this.tab_lst.filter(function(element, index, array) {
|
||||
return tab.name !== element.name;
|
||||
});
|
||||
for (i = this.tab_lst.length - 1; i >= 0; --i) {
|
||||
if (this.tab_lst[i].name === current_name) {
|
||||
if (prev === null && typeof this.tab_lst[i - 1] !== 'undefined') {
|
||||
prev = this.tab_lst[i - 1];
|
||||
}
|
||||
break ;
|
||||
}
|
||||
prev = this.tab_lst[i];
|
||||
}
|
||||
|
||||
return prev;
|
||||
}
|
||||
|
||||
Nsui.prototype.addContentToTab = function(tab_name, content) {
|
||||
var tab = this.getTabByName(tab_name);
|
||||
if (tab === null) {
|
||||
tab = this.createTab(tab_name);
|
||||
}
|
||||
tab.setActive();
|
||||
tab.appendText(content);
|
||||
};
|
||||
|
||||
Nsui.prototype.init = function() {
|
||||
|
@ -54,35 +98,19 @@ Nsui.prototype.init = function() {
|
|||
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';
|
||||
}
|
||||
},
|
||||
tch = function(elem) {
|
||||
return function() {
|
||||
elem.deleteTab(this);
|
||||
};
|
||||
},
|
||||
tsh = function(elem) {
|
||||
return function() {
|
||||
elem.hideAllTabs();
|
||||
};
|
||||
};
|
||||
|
||||
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 ?');
|
||||
}
|
||||
*/
|
||||
document.getElementById('tab-config').addEventListener('click', sh(this), false);
|
||||
Tab.prototype.closeHandler = tch(this);
|
||||
Tab.prototype.showHandler = tsh(this);
|
||||
};
|
||||
|
|
|
@ -15,7 +15,6 @@
|
|||
//
|
||||
|
||||
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');
|
||||
|
@ -70,29 +69,9 @@ Tab.prototype.initBodyElement = function() {
|
|||
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);
|
||||
if (typeof this.closeHandler !== 'undefined') {
|
||||
this.closeHandler();
|
||||
}
|
||||
this.wr_body.removeChild(this.el_body);
|
||||
this.wr_lst.removeChild(this.el_lst);
|
||||
|
@ -104,22 +83,17 @@ Tab.prototype.hide = function() {
|
|||
};
|
||||
|
||||
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');
|
||||
if (typeof this.showHandler !== 'undefined') {
|
||||
this.showHandler();
|
||||
}
|
||||
this.el_lst.classList.remove('tab-active');
|
||||
this.el_lst.classList.add('tab-current');
|
||||
this.el_body.style.display = 'block';
|
||||
this.chat_log.scrollTop = 42000;
|
||||
};
|
||||
|
||||
Tab.prototype.setActive = function() {
|
||||
this.el_lst.classList.add('tab-active');
|
||||
}
|
||||
|
||||
Tab.prototype.appendText = function(text) {
|
||||
|
|
Reference in a new issue