From d0c998146d5d599377775419ede326824a25bad2 Mon Sep 17 00:00:00 2001
From: MEUNIER Thibaud <thibaud.meunier@laposte.net>
Date: Thu, 11 Nov 2021 10:46:56 +0100
Subject: [PATCH] Gestion du toggleInfos

---
 index.php           | 11 ++++--
 js/blockexplorer.js | 92 ++++++++++++++++++++-------------------------
 2 files changed, 49 insertions(+), 54 deletions(-)

diff --git a/index.php b/index.php
index c767d30..3970bcc 100644
--- a/index.php
+++ b/index.php
@@ -54,9 +54,9 @@
         */
       });
 
-      // blockchainExplorer.init(2);
+      blockchainExplorer.init(2);
 
-      showInfos();
+      //toggleInfos();
     });
 
     var isInViewport = function (elem) {
@@ -79,6 +79,11 @@
 
       blockchainExplorer.init(flag);
     }
+
+    function toggleInfos()
+    {
+      blockchainExplorer.toggleInfos();
+    }
   </script>
 
 </head>
@@ -117,7 +122,7 @@
         <option value=1>My special Blocks list</option>
       </select>
       <br>
-      <label>show block infos&nbsp;</label><input id="mode_checkbox" type="checkbox" onchange="showInfos()">
+      <label>show block infos&nbsp;</label><input id="mode_checkbox" type="checkbox" onchange="toggleInfos()">
     </div>
   </div>
 </div>
diff --git a/js/blockexplorer.js b/js/blockexplorer.js
index c8ec463..fb81875 100644
--- a/js/blockexplorer.js
+++ b/js/blockexplorer.js
@@ -6,7 +6,8 @@ blockchainExplorer = function(){
   var _classes        = ['bg-grey-even','bg-grey-odd'];
   var _cur_class      = 0;
   var _cur_methode    = 'hasard';
-  var _mode          = 1;
+  var _mode           = 1;
+  var _infos          = false;
 
   function _precisionRound(number) {
       var precision = 4;
@@ -79,61 +80,39 @@ blockchainExplorer = function(){
             div_label = 'LAST';
             if (blockName == '') blockName = 'LAST';
         }
-    contenu += '      <div style="height:220px;width:100%;display:block;position:absolute">';
-    if ((_mode % 2) != 0)
-    {
-      contenu += '<div style="color:black;opacity:1.0;margin-right:30px">';
-      // contenu += '      <h2> <span style="font-size:12px">block</span> '+block.height+blockName+'</h2>';
-      //contenu += '<span style="font-size:4px">&nbsp;</span>';
-      contenu += '      <table width="100%" style="margin-top:3px">';
-      //contenu += '       <tr><td>hash</td><td align="right"><b>'+block.hash+'</b></td></tr>';
-      //contenu += '       <tr><td>index</td><td align="right"><b>'+block.block_index+'</b></td></tr>';
-      if (_mode == 3 ) contenu += '        <tr><td>name</td><td align="right"><b>'+blockName+'</b></td></tr>';
-      contenu += '        <tr><td>height</td><td align="right"><b>'+block.height+'</b></td></tr>';
-      contenu += '        <tr><td>timestamp</td><td align="right"><b>'+_formatDate(block.time)+'</b></td></tr>';
-      contenu += '        <tr><td>nonce</td><td align="right"><b>'+block.nonce+'</b></td></tr>';
-      contenu += '        <tr><td>nb tx</td><td align="right"><b>'+block.n_tx+'</b></td></tr>';
-      contenu += '        <tr><td>outputs</td><td align="right"><b>'+_precisionRound(block.topisto_outputs).toFixed(4)+'</b></td></tr>';
-      contenu += '        <tr><td>inputs</td><td align="right"><b>'+_precisionRound(block.topisto_inputs).toFixed(4)+'</b></td></tr>';
-      if (_mode != 3 ) contenu += '        <tr><td>fees</td><td align="right"><b>'+_precisionRound(block.topisto_fees).toFixed(4)+'</b></td></tr>';
-      contenu += '        <tr><td>reward</td><td align="right"><b>'+_precisionRound(block.topisto_reward).toFixed(4)+'</b></td></tr>';
-      contenu += '      </table>';
-      contenu += '</div>';
+
+    opacity='1.0';
+    visibility='hidden';
+    if (_infos) {
+      opacity='0.3';
+      visibility='visible';
     }
+    contenu += '      <div style="height:220px;width:100%;display:block;position:relative">';
+
+    contenu += '<div id="img_'+block.height+'" style="color:black;opacity:'+opacity+';margin-right:30pxo;height:220px">';
+    contenu += '      <table class="block_infos" align="center" width="330px" height="220px" style="margin-top:3px;visibility:'+visibility+'">';
+    if (_mode == 3 ) contenu += '        <tr><td>name</td><td align="right"><b>'+blockName+'</b></td></tr>';
+    contenu += '        <tr><td>height</td><td align="right"><b>'+block.height+'</b></td></tr>';
+    contenu += '        <tr><td>timestamp</td><td align="right"><b>'+_formatDate(block.time)+'</b></td></tr>';
+    contenu += '        <tr><td>nonce</td><td align="right"><b>'+block.nonce+'</b></td></tr>';
+    contenu += '        <tr><td>nb tx</td><td align="right"><b>'+block.n_tx+'</b></td></tr>';
+    contenu += '        <tr><td>outputs</td><td align="right"><b>'+_precisionRound(block.topisto_outputs).toFixed(4)+'</b></td></tr>';
+    contenu += '        <tr><td>inputs</td><td align="right"><b>'+_precisionRound(block.topisto_inputs).toFixed(4)+'</b></td></tr>';
+    if (_mode != 3 ) contenu += '        <tr><td>fees</td><td align="right"><b>'+_precisionRound(block.topisto_fees).toFixed(4)+'</b></td></tr>';
+    contenu += '        <tr><td>reward</td><td align="right"><b>'+_precisionRound(block.topisto_reward).toFixed(4)+'</b></td></tr>';
+    contenu += '      </table>';
+    contenu += '</div>';
+    
     contenu += '      </div>';
 
     $('#info_'+div_label).html(contenu);
 
-    contenu = '';
-    contenu += '<div id="img_'+block.height+'" style="';
-    contenu += 'height:220px;';
-    contenu += 'content: "";';
-    contenu += 'top: 0;';
-    contenu += 'left: 0;';
-    contenu += 'bottom: 0;';
-    contenu += 'right: 0;';
-    contenu += 'position: relative;';
-    contenu += 'z-index: -1;   ';
-    contenu += '"></div>'
-
-    $('#info_'+div_label).append(contenu);
-
     downloadingImage.onload = function(){
-
-      // $('#img_'+block.height).attr('src', this.src);   
-/*
-      $('#img_'+block.height).attr('height', _height);
-      $('#img_'+block.height).attr('width','auto');
-*/
-
       var div0 = document.getElementById('img_'+block.height);
-
       div0.style.backgroundImage = "url(" + this.src + ")";
       div0.style.backgroundRepeat = "no-repeat";
       div0.style.backgroundPosition = "center";
       div0.style.backgroundSize = "auto 100%";
-      if ((_mode %2) == 1) div0.style.opacity=0.3;
-
       flag_nav = true;
 
     };
@@ -364,15 +343,24 @@ blockchainExplorer = function(){
           if (a.height > b.height) return -1;
           return 0;
         });
-
-        _initBlockchain('LAST');
-
         return true;
       });
-    } else {
-      _initBlockchain('LAST');
-      return true;
     }
+
+    return _initBlockchain('LAST');
+  }
+
+  function _toggleInfos()
+  {
+    var infos = Array.from(document.getElementsByClassName('block_infos'));
+    _infos = ! _infos;
+    infos.forEach((item, index) => {
+      if (_infos) {
+        item.style.visibility = 'visible';
+        item.style.background = 'rgba(255,255,255,0.5)';
+      }
+      else item.style.visibility = 'hidden';
+    });
   }
 
   return {
@@ -381,6 +369,8 @@ blockchainExplorer = function(){
     addBottomBlock: _addBottomBlock,
     getblocHashFromName: _getblocHashFromName,
 
+    toggleInfos: _toggleInfos,
+
     init: _init
   };
 }();