Issue #4: font-size option now available in options
added: double-clicking on a contact when on the options tab now switches to chat-panel
This commit is contained in:
parent
11d8cbd48d
commit
6a4af66362
5 changed files with 53 additions and 18 deletions
|
@ -19,10 +19,11 @@
|
||||||
|
|
||||||
<div id="main-ctn">
|
<div id="main-ctn">
|
||||||
<div id="config-pannel">
|
<div id="config-pannel">
|
||||||
<input type="text" placeholder="Login" id="login" class="opt" value=""><br>
|
<input type="text" placeholder="Login" id="login" class="opt" value="" /><br>
|
||||||
<input type="password" placeholder="Password (SOCKS)" id="pwd_socks" class="opt" value=""><br>
|
<input type="password" placeholder="Password (SOCKS)" id="pwd_socks" class="opt" value="" /><br>
|
||||||
<input type="checkbox" id="enable_notif" class="opt" checked="checked"><label for="enable_notif">Enable notifications</label><br>
|
<input type="checkbox" id="enable_notif" class="opt" checked="checked" /><label for="enable_notif">Enable notifications</label><br>
|
||||||
<input type="checkbox" id="enable_msg" class="opt" checked="checked"><label for="enable_msg">Enable messages</label><br>
|
<input type="checkbox" id="enable_msg" class="opt" checked="checked" /><label for="enable_msg">Enable messages</label><br>
|
||||||
|
<input type="number" placeholder="12" id="chat-size" class="opt" value="" /><label for="chat-size">Chat font-size</label><br>
|
||||||
<button id="save">Save</button> <span id="status"></span>
|
<button id="save">Save</button> <span id="status"></span>
|
||||||
</div>
|
</div>
|
||||||
<div id="chat-pannel">
|
<div id="chat-pannel">
|
||||||
|
|
|
@ -66,6 +66,7 @@ ContactList.prototype.addContact = function(name) {
|
||||||
var nel = $cs.ui.addNewTab(name);
|
var nel = $cs.ui.addNewTab(name);
|
||||||
|
|
||||||
$cs.ui.hideAllTabs();
|
$cs.ui.hideAllTabs();
|
||||||
|
$cs.ui.showContent("chat-pannel");
|
||||||
nel.show();
|
nel.show();
|
||||||
});
|
});
|
||||||
close.addEventListener("click", (function(elem) {
|
close.addEventListener("click", (function(elem) {
|
||||||
|
|
32
lib/nsui.js
32
lib/nsui.js
|
@ -77,7 +77,7 @@ Nsui.prototype.getTabByName = function(name) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return ret;
|
return ret;
|
||||||
}
|
};
|
||||||
|
|
||||||
Nsui.prototype.getNextTab = function(current_name) {
|
Nsui.prototype.getNextTab = function(current_name) {
|
||||||
var i, prev = null;
|
var i, prev = null;
|
||||||
|
@ -204,15 +204,33 @@ Nsui.prototype.sanitizeText = function(str) {
|
||||||
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Nsui.prototype.currentTabStyle = function() {
|
||||||
|
$cs.opts.restore();
|
||||||
|
if (this.tab_lst.length > 1) {
|
||||||
|
for (var tab in this.tab_lst) {
|
||||||
|
if (tab.el_lst.classList.contains("tab-current")) {
|
||||||
|
tab.chat_log.style.fontSize = $cs.opts.values["chat-size"] + "px";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (this.tab_lst.length > 0) {
|
||||||
|
this.tab_lst[0].chat_log.style.fontSize = $cs.opts.values["chat-size"] + "px";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
Nsui.prototype.showContent = function(part_id) {
|
Nsui.prototype.showContent = function(part_id) {
|
||||||
var i, ctn_lst = ["config-pannel", "chat-pannel"];
|
var i, ctn_lst = ["config-pannel", "chat-pannel"];
|
||||||
|
|
||||||
for (i = ctn_lst.length - 1; i>= 0; --i) {
|
if (part_id === "chat-pannel") {
|
||||||
if (ctn_lst[i] === part_id) {
|
this.currentTabStyle();
|
||||||
document.getElementById(ctn_lst[i]).style.display = "block";
|
|
||||||
} else {
|
|
||||||
document.getElementById(ctn_lst[i]).style.display = "none";
|
|
||||||
}
|
}
|
||||||
|
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";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -222,7 +240,7 @@ Nsui.prototype.switchContent = function(part_id, part_id_to) {
|
||||||
} else {
|
} else {
|
||||||
this.showContent(part_id_to);
|
this.showContent(part_id_to);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
Nsui.prototype.init = function() {
|
Nsui.prototype.init = function() {
|
||||||
window.onfocus = (function(elem) {
|
window.onfocus = (function(elem) {
|
||||||
|
|
|
@ -33,6 +33,9 @@ OptionsManager.prototype.types = {
|
||||||
},
|
},
|
||||||
"checkbox": function(elem) {
|
"checkbox": function(elem) {
|
||||||
return elem.checked;
|
return elem.checked;
|
||||||
|
},
|
||||||
|
"number": function(elem) {
|
||||||
|
return elem.value;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"set": {
|
"set": {
|
||||||
|
@ -48,6 +51,9 @@ OptionsManager.prototype.types = {
|
||||||
} else {
|
} else {
|
||||||
elem.setAttribute('checked');
|
elem.setAttribute('checked');
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"number": function(elem, val) {
|
||||||
|
elem.value = val;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -81,7 +87,7 @@ OptionsManager.prototype.init = function() {
|
||||||
OptionsManager.prototype.savePart = function(pass) {
|
OptionsManager.prototype.savePart = function(pass) {
|
||||||
var i = 0, data = {}, storage;
|
var i = 0, data = {}, storage;
|
||||||
|
|
||||||
if (pass) {
|
if (pass) {
|
||||||
storage = this.pass_storage;
|
storage = this.pass_storage;
|
||||||
} else {
|
} else {
|
||||||
storage = this.storage;
|
storage = this.storage;
|
||||||
|
@ -89,7 +95,7 @@ OptionsManager.prototype.savePart = function(pass) {
|
||||||
|
|
||||||
if (this.opts !== null) {
|
if (this.opts !== null) {
|
||||||
for (i = this.opts.length - 1; i >= 0; --i) {
|
for (i = this.opts.length - 1; i >= 0; --i) {
|
||||||
if ((pass && (this.getElemType(this.opts[i]) === "password" || this.getElemType(this.opts[i]) === "text"))
|
if ((pass && (this.getElemType(this.opts[i]) === "password" || this.getElemType(this.opts[i]) === "text"))
|
||||||
|| (!pass && this.getElemType(this.opts[i]) !== "password" && this.getElemType(this.opts[i]) !== "text")) {
|
|| (!pass && this.getElemType(this.opts[i]) !== "password" && this.getElemType(this.opts[i]) !== "text")) {
|
||||||
data[this.opts[i].id] = this.getElemValue(this.opts[i]);
|
data[this.opts[i].id] = this.getElemValue(this.opts[i]);
|
||||||
this.values[this.opts[i].id] = data[this.opts[i].id];
|
this.values[this.opts[i].id] = data[this.opts[i].id];
|
||||||
|
@ -110,7 +116,7 @@ OptionsManager.prototype.savePart = function(pass) {
|
||||||
|
|
||||||
OptionsManager.prototype.save = function() {
|
OptionsManager.prototype.save = function() {
|
||||||
this.savePart(true);
|
this.savePart(true);
|
||||||
this.savePart(false);
|
this.savePart(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
OptionsManager.prototype.restore = function() {
|
OptionsManager.prototype.restore = function() {
|
||||||
|
@ -151,3 +157,5 @@ OptionsManager.prototype.setElemValue = function(elem, val) {
|
||||||
this.types.set[type](elem, val);
|
this.types.set[type](elem, val);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
15
lib/tab.nsui.js
Normal file → Executable file
15
lib/tab.nsui.js
Normal file → Executable file
|
@ -22,6 +22,7 @@ var Tab = function(name) {
|
||||||
this.buff_len = 1000;
|
this.buff_len = 1000;
|
||||||
this.history_index = 0;
|
this.history_index = 0;
|
||||||
this.history = [];
|
this.history = [];
|
||||||
|
$cs.opts.restore();
|
||||||
this.initListElement();
|
this.initListElement();
|
||||||
this.initBodyElement();
|
this.initBodyElement();
|
||||||
};
|
};
|
||||||
|
@ -62,16 +63,21 @@ Tab.prototype.initListElement = function() {
|
||||||
|
|
||||||
Tab.prototype.initBodyElement = function() {
|
Tab.prototype.initBodyElement = function() {
|
||||||
var chat_input_w = document.createElement("div");
|
var chat_input_w = document.createElement("div");
|
||||||
|
|
||||||
this.chat_input = document.createElement("input");
|
this.chat_input = document.createElement("input");
|
||||||
this.chat_input.placeholder = "Some text here...";
|
this.chat_input.placeholder = "Some text here...";
|
||||||
|
|
||||||
this.chat_log = document.createElement("p");
|
this.chat_log = document.createElement("p");
|
||||||
this.chat_log.classList.add("chat-log");
|
this.chat_log.classList.add("chat-log");
|
||||||
|
this.chat_log.style.fontSize = $cs.opts.values["chat-size"] + "px";
|
||||||
|
|
||||||
this.el_body = document.createElement("div");
|
this.el_body = document.createElement("div");
|
||||||
this.el_body.classList.add("tab-body");
|
this.el_body.classList.add("tab-body");
|
||||||
this.el_body.id = this.name;
|
this.el_body.id = this.name;
|
||||||
this.el_body.style.display = "none";
|
this.el_body.style.display = "none";
|
||||||
|
|
||||||
chat_input_w.classList.add("chat-input-wrapper");
|
chat_input_w.classList.add("chat-input-wrapper");
|
||||||
|
|
||||||
this.chat_input.classList.add("chat-input");
|
this.chat_input.classList.add("chat-input");
|
||||||
this.chat_input.setAttribute("type", "text");
|
this.chat_input.setAttribute("type", "text");
|
||||||
this.chat_input.addEventListener("keyup", (function(elem) {
|
this.chat_input.addEventListener("keyup", (function(elem) {
|
||||||
|
@ -132,7 +138,9 @@ Tab.prototype.show = function() {
|
||||||
this.el_lst.classList.remove("tab-active");
|
this.el_lst.classList.remove("tab-active");
|
||||||
this.el_lst.classList.add("tab-current");
|
this.el_lst.classList.add("tab-current");
|
||||||
this.el_body.style.display = "block";
|
this.el_body.style.display = "block";
|
||||||
|
$cs.opts.restore()
|
||||||
this.chat_log.scrollTop = 42000;
|
this.chat_log.scrollTop = 42000;
|
||||||
|
this.chat_log.style.fontSize = $cs.opts.values["chat-size"] + "px";
|
||||||
this.chat_input.focus();
|
this.chat_input.focus();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -156,11 +164,10 @@ Tab.prototype.flushText = function() {
|
||||||
Tab.prototype.appendMessage = function(msg) {
|
Tab.prototype.appendMessage = function(msg) {
|
||||||
this.history_index = 0;
|
this.history_index = 0;
|
||||||
this.chat_log.innerHTML += '<div class="chat-message">' + $cs.ui.formatMessage(msg) + '</div>';
|
this.chat_log.innerHTML += '<div class="chat-message">' + $cs.ui.formatMessage(msg) + '</div>';
|
||||||
|
|
||||||
if (!(typeof msg.login !== "undefined" && msg.login !== null)) {
|
if (!(typeof msg.login !== "undefined" && msg.login !== null)) {
|
||||||
this.history.push(msg.message);
|
this.history.push(msg.message);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.flushText();
|
this.flushText();
|
||||||
this.chat_log.scrollTop = 42 * this.buff_len;
|
this.chat_log.scrollTop = 42 * this.buff_len;
|
||||||
};
|
};
|
||||||
|
|
Reference in a new issue