segmenter.js : open segmenter on mouseover

browser/css/vidjil.less

@@ -740,7 +740,7 @@ span.logo
 }
 
 #segmenter {
-    overflow-x: scroll; 
+    overflow-x: scroll !important; 
     overflow-y: auto;
     height : 100px;
 }
@@ -766,9 +766,9 @@ span.logo
   bottom: 0px;
   left: 0px;
   width: 100%;
-  overflow-y:auto;
-  height:125px;
-  overflow-y: hidden;
+  border-top: solid;
+  border-width: 6px;
+  min-height: 125px;
 }
 
 .tn{
@@ -903,6 +903,15 @@ span.logo
     background: @border;
 }
 
+#bot-separator {
+    background: @border;
+    width: 100%;
+    height: @margin;
+    cursor: pointer;
+    position: relative;
+    top: -@margin;
+}
+
 #vertical-separator {
     position: relative;
     float: left;
@@ -913,7 +922,7 @@ span.logo
     cursor: pointer;
 }
 
-#visu-separator:hover , #vertical-separator:hover {
+#visu-separator:hover , #vertical-separator:hover, #bot-separator:hover {
     background: @highlight;
 }
 

browser/js/segmenter.js

@@ -40,6 +40,7 @@ function Segment(id, model, cgi_address) {
     
     this.memtab = [];
     this.sequence = {};
+    this.is_open = false
 
 }
 
@@ -59,7 +60,7 @@ Segment.prototype = {
 
         var parent = document.getElementById(this.id)
         parent.innerHTML = "";
-
+        
         //bot-bar
         var div = document.createElement('div');
         div.className = "bot-bar"
@@ -132,7 +133,7 @@ Segment.prototype = {
         ul = document.createElement('ul');
         ul.id = "listSeq"
         div.appendChild(ul)
-
+        
         parent.appendChild(div)
 
         $('#toClipBoard')
@@ -143,10 +144,35 @@ Segment.prototype = {
                 }
             });
             
-        $('#segmenter').scroll(function(){
-            var leftScroll = $("#segmenter").scrollLeft();  
-            $('.seq-fixed').css({'left':+leftScroll});
-        });
+        $('#segmenter')
+            .scroll(function(){
+                var leftScroll = $('#segmenter').scrollLeft();  
+                $('.seq-fixed').css({'left':+leftScroll});
+            })
+            .mouseenter(function(){
+                if (!self.is_open){
+                    var seg = $('#segmenter'),
+                    curH = seg.height(),
+                    autoH = seg.css('height', 'auto').height();
+                    if (autoH > 100){
+                        seg.stop().height(curH).animate({height: autoH+5}, 250);
+                    }else{
+                        seg.stop().height(curH)
+                    }
+                    self.is_open = true
+                }
+            });
+            
+        $('#bot-container')
+            .mouseleave(function(){
+                if (self.is_open){
+                    var seg = $('#segmenter')
+                    seg.stop().animate({height: 100}, 250);
+                    self.is_open = false
+                }
+            });
+        
+        
         
     },