rodolphe/chromesoul
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UI recasting: new look, avatars, history and so on and so forth

Browse source
This commit is contained in:
Rodolphe Breard 2013-01-12 13:34:16 +01:00
parent b3039e534a
commit ddfca60134
18 changed files with 275 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

65
lib/contacts.nsui.js
View file

@ -16,27 +16,59 @@
var ContactList = function() {
this.storage = chrome.storage.sync;
this.contacts = {};
this.contacts = {}; // {<name>: {name: <string>, li: <DOM element>, avatar: <url>}}
this.lst = document.getElementById("contact-lst");
};
ContactList.prototype.insertContact = function(elem) {
var i, nb_el = this.lst.children.length;
var i, next = null;
for (i = 0; i < nb_el; i++) {
if (this.lst.children[i].children[0].innerHTML > elem.children[0].innerHTML) {
this.lst.insertBefore(elem, this.lst.children[i]);
return ;
for (i in this.contacts) {
if (this.contacts.hasOwnProperty(i)) {
if (elem.name < this.contacts[i].name && (next === null || this.contacts[i].name < next.name)) {
next = this.contacts[i];
}
}
}
this.lst.appendChild(elem);
if (next !== null) {
this.lst.insertBefore(elem.li, next.li);
} else {
this.lst.appendChild(elem.li);
}
};
ContactList.prototype.getContactPic = function(elem, infos) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.epitech.eu/intra/photos/" + infos.name + ".jpg", true);
xhr.responseType = "blob";
xhr.onload = (function(el) {
return function(e) {
if (e.target.status === 200) {
infos.avatar = window.webkitURL.createObjectURL(this.response);
} else {
infos.avatar= "img/default-avatar.jpg";
}
elem.style.backgroundImage = "url('" + infos.avatar + "')";
};
})(this);
xhr.send();
}
ContactList.prototype.addContact = function(name) {
var li = null, login = null, close = null;
var infos = {}, li = null, login = null, close = null;
if (typeof this.contacts[name] === "undefined") {
infos = {
"name": name,
"li": null,
"avatar": null
};
li = document.createElement("li");
this.getContactPic(li, infos);
login = document.createElement("span");
close = document.createElement("span");
close.classList.add("remove");
@ -55,20 +87,19 @@ ContactList.prototype.addContact = function(name) {
elem.rmContact(name);
};
})(this));
this.contacts[name] = li;
infos.li = li;
this.contacts[name] = infos;
this.save();
this.insertContact(li);
this.insertContact(infos);
}
};
ContactList.prototype.rmContact = function(name) {
for (var i = this.lst.children.length - 1; i >= 0; --i) {
if (this.lst.children[i].children[0].innerHTML === name) {
this.lst.removeChild(this.lst.children[i]);
delete this.contacts[name];
this.save();
break ;
}
if (typeof this.contacts[name] !== "undefined") {
this.lst.removeChild(this.contacts[name].li);
delete this.contacts[name];
this.save();
}
};

33
lib/ns_client.js
View file

@ -57,22 +57,31 @@ var NsClient = function() {
})(this);
};
NsClient.prototype.replacePairs = function(str, pairs) {
for (var i in pairs) {
if (pairs.hasOwnProperty(i)) {
str = str.replace(pairs[i], i);
}
}
return str;
}
NsClient.prototype.msgDecode = function(msg) {
msg = unescape(msg)
msg = msg.replace('&commat;', '@');
msg = msg.replace('&ast;', '*');
msg = msg.replace('&sol;', '/');
msg = msg.replace('&plus;', '+');
return msg;
return this.replacePairs(unescape(msg), {
"@": /%40/g,
"*": /%2A/g,
"/": /%2F/g,
"+": /%2B/g
});
};
NsClient.prototype.msgEncode = function(msg) {
msg = escape(msg)
msg = msg.replace('@', '&commat;');
msg = msg.replace('*', '&ast;');
msg = msg.replace('/', '&sol;');
msg = msg.replace('+', '&plus;');
return msg;
return this.replacePairs(escape(msg), {
"%40": /@/g,
"%2A": /\*/g,
"%2F": /\//g,
"%2B": /\+/g,
});
};
NsClient.prototype.connect = function() {

55
lib/nsui.js
View file

@ -39,13 +39,10 @@ Nsui.prototype.deleteTab = function(tab) {
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();
}
@ -86,7 +83,9 @@ Nsui.prototype.addNewTab = function(tab_name) {
if (tab === null) {
tab = this.createTab(tab_name);
}
if (!tab.isCurrent()) {
if (this.tab_lst.length <= 1) {
tab.show();
} else if (!tab.isCurrent()) {
tab.setActive();
}
@ -98,7 +97,7 @@ Nsui.prototype.addContentToTab = function(tab_name, content) {
if ($cs.opts.get("enable_msg")) {
tab = this.addNewTab(tab_name);
tab.appendText(this.formatMessage(content));
tab.appendMessage(content);
}
};
@ -122,23 +121,40 @@ Nsui.prototype.formatMessage = function(msg) {
fmt += '<span class="spk-me">' + document.getElementById('login').value + ': </span>';
}
msg.message = msg.message.replace("<", "&lt;");
msg.message = msg.message.replace(">", "&gt;");
fmt += msg.message;
fmt += '<br>';
fmt += this.sanitizeText(msg.message);
fmt += "<br>";
return fmt;
};
Nsui.prototype.sanitizeText = function(str) {
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
};
Nsui.prototype.showContent = function(part_id) {
var i, ctn_lst = ["config-pannel", "chat-pannel", "pre-conf-pannel"];
for (i = ctn_lst.length - 1; i>= 0; --i) {
if (ctn_lst[i] === part_id) {
document.getElementById(ctn_lst[i]).style.display = "block";
} else {
document.getElementById(ctn_lst[i]).style.display = "none";
}
}
};
Nsui.prototype.switchContent = function(part_id, part_id_to) {
if (document.getElementById(part_id).style.display !== "block") {
this.showContent(part_id);
} else {
this.showContent(part_id_to);
}
}
Nsui.prototype.init = function() {
document.getElementById("tab-config").addEventListener("click", (function(elem) {
document.getElementById("settings-btn").addEventListener("click", (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";
elem.switchContent("config-pannel", "chat-pannel");
};
})(this), false);
@ -153,4 +169,11 @@ Nsui.prototype.init = function() {
elem.hideAllTabs();
};
})(this);
this.showContent("chat-pannel");
setTimeout(function() {
if ($cs.opts.get("login") === null || $cs.opts.get("pwd_socks") === null) {
$cs.ui.showContent("pre-conf-pannel");
}
}, 600);
};

53
lib/tab.nsui.js
View file

@ -19,27 +19,19 @@ var Tab = function(name) {
this.chat_input = null;
this.wr_lst = document.getElementById("tab-lst");
this.wr_body = document.getElementById("tab-body-wrapper");
this.buff_len = 1000;
this.history_index = 0;
this.history = [];
this.initListElement();
this.initBodyElement();
};
Tab.prototype.filterName = function(name) {
// TODO: enforce an id compliant name
return name;
return name.replace(/[^a-z0-9\-_]/g, "").replace(/^[0-9]/g, "_");
};
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();
};
};
var inner = document.createElement("span");
inner.innerHTML = this.name;
this.el_lst = document.createElement("li");
@ -73,7 +65,9 @@ Tab.prototype.initBodyElement = function() {
this.chat_input.setAttribute("type", "text");
this.chat_input.addEventListener("keyup", (function(elem) {
return function(event) {
if (event.keyCode == 13 && this.value != "") {
var key_submit = 13, key_up = 38, key_down = 40;
if (event.keyCode === key_submit && this.value != "") {
var msg = this.value;
this.value = "";
@ -83,6 +77,20 @@ Tab.prototype.initBodyElement = function() {
} else {
console.error("chromesoul client not found");
}
} else if (event.keyCode === key_up) {
if (elem.history_index < elem.history.length) {
elem.history_index++;
this.value = elem.history[elem.history.length - elem.history_index];
}
} else if (event.keyCode === key_down) {
if (elem.history_index > 0) {
elem.history_index--;
if (elem.history_index > 0) {
this.value = elem.history[elem.history.length - elem.history_index];
} else {
this.value = "";
}
}
}
};
})(this), false);
@ -128,13 +136,22 @@ Tab.prototype.setActive = function() {
Tab.prototype.flushText = function() {
var str = this.chat_log.innerHTML, sep = "<br>", t = str.split(sep);
if (t.length > 1000) {
if (t.length > this.buff_len + 1) {
this.chat_log.innerHTML = str.substring(str.indexOf(sep) + sep.length);
}
while (this.history.length > this.buff_len) {
this.history.shift();
}
};
Tab.prototype.appendText = function(text) {
Tab.prototype.appendMessage = function(msg) {
this.history_index = 0;
this.chat_log.innerHTML += $cs.ui.formatMessage(msg);
if (!(typeof msg.login !== "undefined" && msg.login !== null)) {
this.history.push(msg.message);
}
this.flushText();
this.chat_log.innerHTML += text;
this.chat_log.scrollTop = 42000;
this.chat_log.scrollTop = 42 * this.buff_len;
};