improved tabs

CREDITS.md

@@ -7,6 +7,11 @@
 * Patrick Marie aka mycroft for his documentation about the NetSoul protocol
 
 
+## [Gnome 2.18 icon theme](http://art.gnome.org/themes/icon)
+
+* AMAZIGH Aneglus
+
+
 ## [JSHash (JavaScript MD5)](http://pajhome.org.uk/crypt/md5)
 
 * Paul Johnston

chromesoul.css

@@ -7,13 +7,17 @@
 #tab-lst > li {
     display: inline;
     margin: 0;
-    padding: 2px 20px 2px 20px;
+    padding: 2px 10px 2px 10px;
     border-top: 1px solid #aaa;
     border-right: 1px solid #aaa;
     border-radius: 8px 8px 0 0;
     color: #aaa;
 }
 
+#tab-lst > li > span::selection {
+    background: transparent;
+}
+
 #tab-lst > li:first-child {
     border-left: 1px solid #aaa;
 }
@@ -44,7 +48,7 @@
     overflow-y: scroll;
 }
 
-.chat-msg {
+.chat-input {
     margin: 5px 0 0 0;
     padding: 0;
     height: 20px;
@@ -53,10 +57,25 @@
     outline: 1px solid #aaa;
 }
 
-.chat-msg:focus {
+.chat-input-wrapper {
+    background-image: url('img/user-offline.png');
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    padding-left: 24px;
+}
+
+.chat-input:focus {
     outline-offset: 0;
 }
 
-.capitalize {
+#tab-lst > #tab-config {
-    text-transform: capitalize;
+    background-image: url('img/preferences.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+#tab-config > span {
+    display: none;
 }

chromesoul.html

@@ -9,7 +9,7 @@
     <h1>Welcome to chromesoul</h1>
 
     <ul id="tab-lst">
-      <li class="tab-current capitalize">configuration</li>
+      <li id="tab-config"><span>configuration</span></li>
     </ul>
     <div id="tab-body-wrapper">
       <div id="configuration" class="tab-body">

lib/nsui.js

@@ -15,49 +15,74 @@
 //
 
 var Nsui = function() {
-};
+    this.tab_lst = [];
-
-Nsui.prototype.scroll_down = function(elem) {
-    var logs = document.getElementsByClassName('chat-log');
-    for (var i = logs.length - 1; i >= 0; --i) {
-	logs[i].scrollTop = 42000;
-    }
-};
-
-Nsui.prototype.set_current = function(tab_name) {
-    var tabs = document.getElementById('tab-lst').children;
-    for (var i = tabs.length - 1; i >= 0; --i) {
-	if (tabs[i].innerHTML === tab_name) {
-	    tabs[i].classList.remove('tab-active');
-	    tabs[i].classList.add('tab-current');
-	} else {
-	    tabs[i].classList.remove('tab-current');
-	}
-    }
-};
-
-Nsui.prototype.show_tab = function(tab_name) {
-    var tabs = document.getElementById('tab-body-wrapper').children;
-    for (var i = tabs.length - 1; i >= 0; --i) {
-	tabs[i].style.display = 'none';
-    }
-    document.getElementById(tab_name).style.display = 'block';
-    this.set_current(tab_name);
-    this.scroll_down();
-};
-
-Nsui.prototype.init = function() {
-    var tab_body, tab_lst = document.getElementById('tab-lst').children;
-
-    this.show_tab('configuration');
-    for (var i = tab_lst.length - 1; i >= 0; --i) {
-	tab_body = document.getElementById(tab_lst[i].innerHTML);
-	tab_lst[i].addEventListener('click', function() {
-	    show_tab(this.innerHTML);
-	}, false);
-    }
 };
 
 Nsui.prototype.setReconnect = function(func) {
     document.getElementById('reconnect').addEventListener('click', func, false);
 };
+
+Nsui.prototype.getWidgetByName = function(name) {
+    var i, ret = null;
+
+    for (i = this.tab_lst.length - 1; i >= 0; --i) {
+	if (this.tab_lst[i].name === name) {
+	    ret = this.tab_lst[i];
+	    break ;
+	}
+    }
+
+    return ret;
+}
+
+Nsui.prototype.registerTab = function(tab) {
+    this.tab_lst.push(tab);
+};
+
+Nsui.prototype.unRegisterTab = function(tab) {
+    this.tab_lst = this.tab_lst.filter(function(element, index, array) {
+	return tab.name !== element.name;
+    });
+};
+
+Nsui.prototype.init = function() {
+    var sh = 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';
+	};
+    };
+
+    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';
+	    }
+	};
+    };
+
+    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 ?');
+    }
+    */
+};

lib/options.js

@@ -134,6 +134,3 @@ OptionsManager.prototype.encrypt = function(value) {
 OptionsManager.prototype.decrypt = function(value) {
     return value;
 };
-
-var opt_mgr = new OptionsManager();
-opt_mgr.init();

lib/tab.nsui.js

@@ -0,0 +1,128 @@
+//
+// 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>';
+};

start.js

@@ -1,8 +1,15 @@
-var ui = new Nsui(),
+var om, ui, cs;
-    cs = new NsClient();
 
+
+om = new OptionsManager();
+om.init();
+
+ui = new Nsui();
 ui.init();
+
+cs = new NsClient();
 cs.init();
+
 ui.setReconnect(function() {
     cs.disconnect();
     cs.connect();