ajout mode My special Blocks list

index.php

@@ -23,6 +23,9 @@
 
   <script>
     $(document).ready(function(){
+      // Mask navigator scrollbar
+      // Doesn't work : can't scroll anymore
+      //$("body").css('overflow', 'hidden');
 
       $('#myNavbar').on('show.bs.collapse', function () {
         $('#logo_topisto').css({'height' : '30px','width' : '30px'});
@@ -66,9 +69,12 @@
 
     function showInfos(element)
     {
+      var flag = 2*parseInt($('#mode_selector').val());
+      
       $('#blockchain').html('');
-      flag = 1;
+
-      if (!element.checked) flag = 0;
+      if ($('#mode_checkbox').is(":checked")) flag += 1;
+
       blockchainExplorer.init(flag);
     }
   </script>
@@ -102,8 +108,13 @@
 <div id="explorer" class="container-fluid bg-grey" style="padding-bottom:10px">
   <div class="row">
     <div class="col-sm-12 text-right">
-      <br>A BTC blockchain explorer<br>Scroll down to see the previous blocks<br>
+      <br>
-      <label>show infos&nbsp;</label><input type="checkbox" onchange="showInfos(this)" checked>
+      <select id="mode_selector" onchange="showInfos(this)">
+        <option value=0>A BTC blockchain explorer</option>
+        <option value=1>My special Blocks list</option>
+      </select>
+      <br>Scroll down to see the previous blocks<br>
+      <label>show infos&nbsp;</label><input id="mode_checkbox" type="checkbox" onchange="showInfos(this)" checked>
     </div>
   </div>
 </div>

js/blockexplorer.js

@@ -17,8 +17,8 @@ blockchainExplorer = function(){
   function _getblockNameFromHash(hash)
   {
     var retour = '';
-    if (_liste_blocks != null)
+    if (_known_blocks != null)
-      _liste_blocks.forEach(function(item){
+      _known_blocks.forEach(function(item){
         if (hash == item.hash) retour = item.name;
       });
     return retour;
@@ -27,9 +27,10 @@ blockchainExplorer = function(){
   function _getblocHashFromName(name)
   {
     var retour = '';
-    _liste_blocks.forEach(function(item){
+    if (_known_blocks != null)
-      if (name == item.name) retour = item.hash;
+     _known_blocks.forEach(function(item){
-    });
+       if (name == item.name) retour = item.hash;
+     });
     return retour;
   }
 
@@ -37,14 +38,21 @@ blockchainExplorer = function(){
   {
     var contenu = '';
     var downloadingImage = new Image();
+    var div_label = block.height;
 
     _cur_class  = 1 - _cur_class;
 
     blockName = _getblockNameFromHash(block.hash);
-    if (blockName != '') blockName = ' ( '+blockName+' )';
+    // if (blockName != '') blockName = ' ( '+blockName+' )';
 
+    if (_mode > 1)
+        if (block.hash == _liste_blocks['TOP'])
+        {
+            div_label = 'LAST';
+            if (blockName == '') blockName = 'LAST';
+        }
     contenu += '      <div style="height:220px;width:100%;display:block;position:absolute">';
-    if (_mode != 0)
+    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>';
@@ -52,20 +60,21 @@ blockchainExplorer = function(){
       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>'+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>';
-      contenu += '        <tr><td>fees</td><td align="right"><b>'+_precisionRound(block.topisto_fees).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_'+block.height).html(contenu);
+    $('#info_'+div_label).html(contenu);
 
     contenu = '';
     contenu += '<div id="img_'+block.height+'" style="';
@@ -79,7 +88,7 @@ blockchainExplorer = function(){
     contenu += 'z-index: -1;   ';
     contenu += '"></div>'
 
-    $('#info_'+block.height).append(contenu);
+    $('#info_'+div_label).append(contenu);
 
     downloadingImage.onload = function(){
 
@@ -95,7 +104,7 @@ blockchainExplorer = function(){
       div0.style.backgroundRepeat = "no-repeat";
       div0.style.backgroundPosition = "center";
       div0.style.backgroundSize = "auto 100%";
-      if (_mode==1) div0.style.opacity=0.3;
+      if ((_mode %2) == 1) div0.style.opacity=0.3;
 
       flag_nav = true;
 
@@ -211,7 +220,7 @@ blockchainExplorer = function(){
     _liste_blocks['BLOCK_'+data.height] = data.hash;
 
     // Ajouter un div
-    _addDivForBlock(data.height,true);
+    if (_mode < 2) _addDivForBlock(data.height,true);
     
     // Mettre les infos dans le div
     _addInfoForBlock(data);
@@ -226,18 +235,32 @@ blockchainExplorer = function(){
     block_hash = '?block_hash='+_liste_blocks['BOTTOM'];
     $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) {
 
-      _liste_blocks['BOTTOM'] = data.prev;
+        // Ajouter un div
-      _liste_blocks['BLOCK_'+data.height] = data.hash;
+        _addDivForBlock(data.height, false);
-      _liste_blocks['LENGTH'] += 1;
     
-      // Ajouter un div
+        // Mettre les infos dans le div
-      _addDivForBlock(data.height, false);
+        _addInfoForBlock(data);
 
-      // Mettre les infos dans le div
+        _liste_blocks['BLOCK_'+data.height] = data.hash;
-      _addInfoForBlock(data);
+        _liste_blocks['LENGTH'] += 1;
+
+        switch(_mode)
+        {
+            case 0:
+            case 1:
+                // Récursivité pour précharger par paquets
+                if (data.height > 0) 
+                    _liste_blocks['BOTTOM'] = data.prev;
+                break;
+            case 2:
+            case 3:
+                if (data.height > 0)
+                    _liste_blocks['BOTTOM'] = _known_blocks[_liste_blocks['LENGTH']-1].hash;
+                break;
+        }
+
+        if (_liste_blocks['LENGTH'] % 10) _addBottomBlock();
         
-      // Récursivité pour précharger par paquets
-      if (_liste_blocks['LENGTH'] % 10) _addBottomBlock();
     });
   }
 
@@ -245,18 +268,35 @@ blockchainExplorer = function(){
   {
     var block_hash = '';
 
+    _liste_blocks = [];
+    _liste_blocks['LENGTH'] = 0;
+
     $(document).scrollTop( $("#explorer").offset().top );
     $('#blockchain').html('');
 
     if (block_name != 'LAST') block_hash = '?block_hash='+_getblocHashFromName(block_name);
     $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) {
 
-      _liste_blocks['BOTTOM'] = data.prev;
       _liste_blocks['TOP'] = data.hash;
       _liste_blocks['BLOCK_'+data.height] = data.hash;
       _liste_blocks['LENGTH'] += 1;
 
-      _addDivForBlock(data.height);        
+      div_label = data.height;
+      switch(_mode)
+      {
+          case 0:
+          case 1:
+              // Récursivité pour précharger par paquets
+              _liste_blocks['BOTTOM'] = data.prev;
+              break;
+          case 2:
+          case 3:
+              div_label = 'LAST';
+              _liste_blocks['BOTTOM'] = _known_blocks[0].hash;
+              break;
+      }
+
+      _addDivForBlock(div_label);        
       _addInfoForBlock(data);
 
       blockchainListener.addBlockHook(_addTopBlock);
@@ -288,8 +328,6 @@ blockchainExplorer = function(){
     if (_known_blocks == null)
     {
       $.getJSON('data/getKnownBlocksList.php', function( data ) {
-        _liste_blocks = [];
-        _liste_blocks['LENGTH'] = 0;
 
         _known_blocks = data;
         _known_blocks.sort(function(a,b){