2012-11-15 01:45:45 +01:00
|
|
|
//
|
|
|
|
// 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.name = this.filterName(name);
|
2012-11-21 21:13:18 +01:00
|
|
|
this.wr_lst = document.getElementById("tab-lst");
|
|
|
|
this.wr_body = document.getElementById("tab-body-wrapper");
|
2012-11-15 01:45:45 +01:00
|
|
|
this.initListElement();
|
|
|
|
this.initBodyElement();
|
|
|
|
};
|
|
|
|
|
|
|
|
Tab.prototype.filterName = function(name) {
|
|
|
|
// TODO: enforce an id compliant name
|
|
|
|
return name;
|
|
|
|
};
|
|
|
|
|
|
|
|
Tab.prototype.initListElement = function() {
|
2012-11-21 21:13:18 +01:00
|
|
|
var inner = document.createElement("span"),
|
2012-11-15 01:45:45 +01:00
|
|
|
evt_click = function(elem) {
|
|
|
|
return function() {
|
|
|
|
elem.show();
|
|
|
|
};
|
|
|
|
},
|
|
|
|
evt_dblclick = function(elem) {
|
|
|
|
return function() {
|
|
|
|
elem.close();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
inner.innerHTML = this.name;
|
2012-11-21 21:13:18 +01:00
|
|
|
this.el_lst = document.createElement("li");
|
|
|
|
this.el_lst.addEventListener("click", (function(elem) {
|
|
|
|
return function() {
|
|
|
|
elem.show();
|
|
|
|
};
|
|
|
|
})(this), false);
|
|
|
|
this.el_lst.addEventListener("dblclick", (function(elem) {
|
|
|
|
return function() {
|
|
|
|
elem.close();
|
|
|
|
};
|
|
|
|
})(this), false);
|
2012-11-15 01:45:45 +01:00
|
|
|
|
|
|
|
this.el_lst.appendChild(inner);
|
|
|
|
this.wr_lst.appendChild(this.el_lst);
|
|
|
|
};
|
|
|
|
|
|
|
|
Tab.prototype.initBodyElement = function() {
|
2012-11-21 21:13:18 +01:00
|
|
|
var chat_input = document.createElement("input"),
|
|
|
|
chat_input_w = document.createElement("div");
|
2012-11-15 01:45:45 +01:00
|
|
|
|
2012-11-21 21:13:18 +01:00
|
|
|
this.chat_log = document.createElement("pre");
|
|
|
|
this.chat_log.classList.add("chat-log");
|
|
|
|
this.el_body = document.createElement("div");
|
|
|
|
this.el_body.classList.add("tab-body");
|
2012-11-15 01:45:45 +01:00
|
|
|
this.el_body.id = this.name;
|
2012-11-21 21:13:18 +01:00
|
|
|
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");
|
2012-11-26 15:31:15 +01:00
|
|
|
chat_input.addEventListener("keyup", (function(elem) {
|
|
|
|
return function(event) {
|
|
|
|
if (event.keyCode == 13 && this.value != "") {
|
|
|
|
var msg = this.value;
|
|
|
|
this.value = "";
|
|
|
|
|
|
|
|
if (typeof $cs.client !== "undefined") {
|
|
|
|
$cs.client.sendMessage(elem.name, msg);
|
2012-11-26 17:09:31 +01:00
|
|
|
$cs.ui.addContentToTab(elem.name, {"message": msg});
|
2012-11-26 15:31:15 +01:00
|
|
|
} else {
|
|
|
|
console.error("chromesoul client not found");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
})(this), false);
|
2012-11-15 01:45:45 +01:00
|
|
|
|
|
|
|
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.close = function() {
|
2012-11-21 21:13:18 +01:00
|
|
|
if (typeof this.closeHandler !== "undefined") {
|
2012-11-21 12:02:34 +01:00
|
|
|
this.closeHandler();
|
2012-11-15 01:45:45 +01:00
|
|
|
}
|
|
|
|
this.wr_body.removeChild(this.el_body);
|
|
|
|
this.wr_lst.removeChild(this.el_lst);
|
|
|
|
};
|
|
|
|
|
|
|
|
Tab.prototype.hide = function() {
|
2012-11-21 21:13:18 +01:00
|
|
|
this.el_lst.classList.remove("tab-current");
|
|
|
|
this.el_body.style.display = "none";
|
2012-11-15 01:45:45 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
Tab.prototype.show = function() {
|
2012-11-21 21:13:18 +01:00
|
|
|
if (typeof this.showHandler !== "undefined") {
|
2012-11-21 12:02:34 +01:00
|
|
|
this.showHandler();
|
2012-11-15 01:45:45 +01:00
|
|
|
}
|
2012-11-21 21:13:18 +01:00
|
|
|
this.el_lst.classList.remove("tab-active");
|
|
|
|
this.el_lst.classList.add("tab-current");
|
|
|
|
this.el_body.style.display = "block";
|
2012-11-15 01:45:45 +01:00
|
|
|
this.chat_log.scrollTop = 42000;
|
|
|
|
};
|
|
|
|
|
2012-11-21 21:13:18 +01:00
|
|
|
Tab.prototype.isCurrent = function() {
|
|
|
|
return this.el_lst.classList.contains("tab-current");
|
|
|
|
};
|
|
|
|
|
2012-11-21 12:02:34 +01:00
|
|
|
Tab.prototype.setActive = function() {
|
2012-11-21 21:13:18 +01:00
|
|
|
this.el_lst.classList.add("tab-active");
|
2012-11-15 01:45:45 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
Tab.prototype.appendText = function(text) {
|
|
|
|
// TODO: flush text
|
2012-11-21 21:13:18 +01:00
|
|
|
this.chat_log.innerHTML += text;
|
2012-11-15 01:45:45 +01:00
|
|
|
};
|