129 lines
3.8 KiB
JavaScript
129 lines
3.8 KiB
JavaScript
|
//
|
||
|
// 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>';
|
||
|
};
|