browser move data-box from index.html to com.js/list.js

browser/css/dark.css

@@ -705,7 +705,8 @@ span .substitution {
 .popup_container a:hover {
   color: #fdf6e3;
 }
-#data-container {
+.data-container,
+.info-container {
   z-index: 3;
   border: solid;
   position: fixed;
@@ -722,8 +723,9 @@ span .substitution {
   height: -webkit-calc(100% - 200px);
   height: calc(100% - 200px);
 }
-#data-msg {
-  overflow: auto;
+.data-msg,
+.info-msg {
+  overflow-x: hidden;
   height: 100%;
   width: 100%;
 }

browser/css/light.css

@@ -705,7 +705,8 @@ span .substitution {
 .popup_container a:hover {
   color: #002b36;
 }
-#data-container {
+.data-container,
+.info-container {
   z-index: 3;
   border: solid;
   position: fixed;
@@ -722,8 +723,9 @@ span .substitution {
   height: -webkit-calc(100% - 200px);
   height: calc(100% - 200px);
 }
-#data-msg {
-  overflow: auto;
+.data-msg,
+.info-msg {
+  overflow-x: hidden;
   height: 100%;
   width: 100%;
 }

browser/css/vidjil.less

@@ -852,7 +852,7 @@ span .substitution{
   color : @select;
 }
 
-#data-container{
+.data-container, .info-container{
   z-index:3;
   border:solid; 
   position: fixed; 
@@ -870,8 +870,8 @@ span .substitution{
   height: calc(~"100%" - 200px);
 }
 
-#data-msg{
-  overflow: auto;
+.data-msg, .info-msg{
+  overflow-x: hidden;
   height : 100%;
   width : 100%;
 }

browser/index.html

@@ -249,20 +249,20 @@
         <!-- MID-CONTAINER -->
         <div id="mid-container" onmouseover="hideSelector()">
 
-        <!-- LEFT-CONTAINER -->
+            <!-- LEFT-CONTAINER -->
             <div id="left-container">
                 <div id="info-row"><div id="info"> </div></div>
                 <div id="list-row"><div id="list"> </div></div>
                 <div id="data-row"><div id="data"> </div></div>
             </div>
-        <!-- fin left-container -->
+            <!-- fin left-container -->
 
             <div id="vertical-separator"></div>
 
-        <!-- RIGHT-CONTAINER -->
+            <!-- RIGHT-CONTAINER -->
             <div id="right-container"></div>
 
-        <!-- VISU-CONTAINER  -->
+            <!-- VISU-CONTAINER  -->
             <div id="visu-container">
                 <div id="visu2"></div>
                 <div id="visu-separator" >...</div>
@@ -271,17 +271,10 @@
 
         </div>
         <!-- fin mid-container -->
-    
 
         <!-- BOT-CONTAINER / SEGMENTER-CONTAINER -->
         <div id="bot-container"> </div>
 
-
-        <div id="data-container">
-            <span class="closeButton" onclick="console.closeDataBox()">X</span>
-            <div id="data-msg"></div>
-        </div>
-
         <form id="form"></form>
 
     </body> 

browser/js/com.js

@@ -143,6 +143,23 @@ Com.prototype = {
         document.body.appendChild(this.flash_container);
         document.body.appendChild(this.log_container);
         document.body.appendChild(this.popup_container);
+        
+        
+        
+        this.div_dataBox = document.createElement("div");
+        this.div_dataBox.className = "data-container";
+        
+        var closedataBox = document.createElement("span");
+        closedataBox.className = "closeButton" ;
+        closedataBox.appendChild(document.createTextNode("X"));
+        closedataBox.onclick = function() {self.closeDataBox()};
+        this.div_dataBox.appendChild(closedataBox);
+        
+        var div_data = document.createElement("div");
+        div_data.className = "data-msg";
+        this.div_dataBox.appendChild(div_data);
+        
+        document.body.appendChild(this.div_dataBox);
     },
 
     
@@ -221,17 +238,13 @@ Com.prototype = {
     },
 
     dataBox: function(msg) {
-        document.getElementById(this.data_id)
-            .style.display = "block";
-        document.getElementById(this.data_id).lastElementChild
-            .innerHTML = msg;
+        this.div_dataBox.style.display = "block";
+        this.div_dataBox.lastElementChild.innerHTML = msg;
     },
 
     closeDataBox: function() {
-        document.getElementById(this.data_id)
-            .style.display = "none";
-        document.getElementById(this.data_id).lastElementChild
-            .innerHTML = "";
+        this.div_dataBox.style.display = "none";
+        this.div_dataBox.lastElementChild.innerHTML = "";
     }
     
 }

browser/js/list.js

@@ -114,9 +114,26 @@ List.prototype = {
             $(self.dataMenu).hide('fast')
         }
         
+        //build infoBox
+        
+        this.infoBox = document.createElement("div");
+        this.infoBox.className = "info-container";
+        
+        var closeinfoBox = document.createElement("span");
+        closeinfoBox.className = "closeButton" ;
+        closeinfoBox.appendChild(document.createTextNode("X"));
+        closeinfoBox.onclick = function() {self.closeInfoBox()};
+        this.infoBox.appendChild(closeinfoBox);
+        
+        var div_info = document.createElement("div");
+        div_info.className = "info-msg";
+        this.infoBox.appendChild(div_info);
+        
         //add to body
         document.body.appendChild(this.tagSelector);
         document.body.appendChild(this.dataMenu);
+        document.body.appendChild(this.infoBox);
+        
     },
     
     /* initialise la liste et crée un div pour chaque clones
@@ -404,7 +421,7 @@ List.prototype = {
         var span_info = document.createElement('span')
         span_info.className = "infoBox";
         span_info.onclick = function () {
-            console.dataBox(self.m.clone(cloneID).getHtmlInfo());
+            self.displayInfoBox(self.m.clone(cloneID).getHtmlInfo());
         }
         span_info.appendChild(document.createTextNode("I"));
 
@@ -486,7 +503,7 @@ List.prototype = {
                 var span_info = document.createElement('span')
                 span_info.className = "infoBox";
                 span_info.onclick = function () {
-                    console.dataBox(self.m.clone(this.parentNode.id2).getHtmlInfo());
+                    self.displayInfoBox(self.m.clone(this.parentNode.id2).getHtmlInfo());
                 }
                 span_info.appendChild(document.createTextNode("I"));
 
@@ -894,6 +911,16 @@ List.prototype = {
         $(this.dataMenu).show("fast");
         this.dataMenuInfo.innerHTML = data;
     },
+    
+    displayInfoBox: function(msg) {
+        this.infoBox.style.display = "block";
+        this.infoBox.lastElementChild.innerHTML = msg;
+    },
+
+    closeInfoBox: function() {
+        this.infoBox.style.display = "none";
+        this.infoBox.lastElementChild.innerHTML = "";
+    }
 
 } //fin prototype