list.js : build_list() function

- build list menu and clone list
- update css

browser/css/vidjil.less

@@ -272,13 +272,17 @@ ul{
   background :@highlight;
 }
 
-#listClones{
-  overflow-y : scroll;
-  overflow-x : hidden;
-  font-weight: bold;
+#list{
   height: -moz-calc(~"100% - 190px");
   height: -webkit-calc(~"100% - 190px");
   height: calc(~"100% - 190px");
+}
+
+#list_clones{
+  overflow-y : scroll;
+  overflow-x : hidden;
+  height : 100%;
+  font-weight: bold;
   padding:2px;
 }
 
@@ -531,7 +535,7 @@ ul{
   width : 100%;
 }
 
-#file_menu, #menu, #listClones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
+#file_menu, #menu, #list_clones, #tagSelector, #display-menu, #bot-container, .seq-fixed{
  background : @background;
 }
 
@@ -652,7 +656,7 @@ span.logo
   display:inline-table;
 }
 
-#sort-bar{
+#list_menu{
   -khtml-user-select: none;
   -webkit-user-select: none;
   -moz-user-select: -moz-none;
@@ -709,7 +713,7 @@ span.logo
   color: grey;
 }
 
-.selector, #sort-bar, #top-container, #listClones, .bot-bar, #bot-container, #popup-container, #file_menu, #tagSelector, .closeButton
+.selector, #list_menu, #top-container, .list_clones, .bot-bar, #bot-container, #popup-container, #file_menu, #tagSelector, .closeButton
 {
   border-color: @border; 
 }

browser/index.html

@@ -178,19 +178,13 @@
         
         <!-- MID-CONTAINER -->
         <div id="mid-container" onmouseover="hideSelector()">
+
         <!-- LEFT-CONTAINER -->
             <div id="left-container">
 
                 <div id="info"> </div>
 
-                <div id="sort-bar">
-                    sort list by 
-                    <a class="button" onclick="list.sortListByV();">V</a>
-                    <a class="button" onclick="list.sortListByJ();">J</a>
-                    <a class="button" onclick="list.sortListBySize();">abundance</a>
-                </div>
-
-                <div id="listClones"></div>
+                <div id="list"> </div>
 
             </div>
         <!-- fin left-container -->

browser/js/list.js

@@ -46,24 +46,60 @@ List.prototype = {
 /* initialise la liste et crée un div pour chaque clones
  * 
  * */ 
-  init : function(){
-    
-    var self=this;
+    init : function(){
+        this.build_list()
+        this.update();
+    },
+
+    build_list : function () {
+        var self = this
+        
+        var div_parent = document.getElementById(this.id);
+        div_parent.innerHTML="";
+
+        var div_list_menu = document.createElement('div')
+        div_list_menu.id = "list_menu"
+        
+        var a_sortV = document.createElement('a')
+        a_sortV.className = "button"
+        a_sortV.appendChild(document.createTextNode("V sort") )
+        a_sortV.onclick = function () { self.sortListByV() }
+        
+        var a_sortJ = document.createElement('a')
+        a_sortJ.className = "button"
+        a_sortJ.appendChild(document.createTextNode("J sort") )
+        a_sortJ.onclick = function () { self.sortListByJ() }
+        
+        var a_sort = document.createElement('a')
+        a_sort.className = "button"
+        a_sort.appendChild(document.createTextNode("sort") )
+        a_sort.onclick = function () { self.sortListBySize() }
+        
+        div_list_menu.appendChild(a_sortV)
+        div_list_menu.appendChild(a_sortJ)
+        div_list_menu.appendChild(a_sort)
+        
+        
+        
+        var div_list_clones = document.createElement('div')
+        div_list_clones.id = "list_clones"
     
-    var divParent = document.getElementById(this.id);
-    divParent.innerHTML="";
-  
-    for(var i=0 ;i<this.m.n_windows; i++){
-      var div = document.createElement('li');
-      div.className="list";
-      div.id=i;
-      div.onmouseover = function(){ self.m.focusIn(this.id); }
+        for(var i=0 ;i<this.m.n_windows; i++){
+            var div = document.createElement('li');
+            div.className="list";
+            div.id=i;
+            div.onmouseover = function(){ self.m.focusIn(this.id); }
 
-      
-      document.getElementById("listClones").appendChild(div);
-    }
-    this.update();
-  },
+            div_list_clones.appendChild(div);
+        }
+        
+        
+        
+        div_parent.appendChild(div_list_menu)
+        div_parent.appendChild(div_list_clones)
+        
+    },
+  
 
 /*mise a jour de la liste
  * 
@@ -334,7 +370,7 @@ List.prototype = {
       var idB=$(b).attr("id");
       return self.m.getSize(idB)> self.m.getSize(idA) ? 1:-1; 
     })
-    $("#listClones").html(sort);
+    $("#list_clones").html(sort);
   },
   
   sortListByTop : function(){
@@ -345,7 +381,7 @@ List.prototype = {
       var idB=$(b).attr("id");
       return self.m.windows[idA].top> self.m.windows[idB].top ? 1:-1; 
     })
-    $("#listClones").html(sort);
+    $("#list_clones").html(sort);
   },
   
     sortListByV : function(){
@@ -370,7 +406,7 @@ List.prototype = {
         
         return oA>oB ? 1:-1; 
         })
-        $("#listClones").html(sort);
+        $("#list_clones").html(sort);
     },
   
     sortListByJ : function(){
@@ -395,7 +431,7 @@ List.prototype = {
         
         return oA>oB ? 1:-1; 
         })
-        $("#listClones").html(sort);
+        $("#list_clones").html(sort);
     }
   
   

browser/js/main.js

@@ -9,7 +9,7 @@ var m = new Model();
  * 
  * */
 var graph = new Graph("visu2",m);
-var list = new List("listClones",m);
+var list = new List("list",m);
 var sp = new ScatterPlot("visu",m);
 var segment = new Segment("bot-container",m);
 var builder = new Builder(m);