瀏覽代碼

stable

develop
MEUNIER Thibaud 4 年之前
父節點
當前提交
d5108d0408
共有 2 個檔案被更改,包括 31 行新增60 行删除
  1. +10
    -38
      index.php
  2. +21
    -22
      js/blockexplorer.js

+ 10
- 38
index.php 查看文件

@ -37,31 +37,18 @@
}); });
$(window).scroll(function() { $(window).scroll(function() {
if (isInViewport(document.querySelector('footer')))
{
//blockchainExplorer.addBottomBlock();
console.log("Scroll to footer detected !");
}
var element = document.getElementById('blockchain');
var offset = element.getBoundingClientRect().top - element.offsetParent.getBoundingClientRect().top;
const top = window.pageYOffset + window.innerHeight - offset;
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// blockchainExplorer.addBottomBlock();
console.log("Scroll to footer detected !");
}
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
blockchainExplorer.addBottomBlock();
$(this).addClass("slide");
}
});
if (top === element.scrollHeight) {
console.log("bottom");
blockchainExplorer.addBottomBlock();
}
}); });
blockchainExplorer.init(0);
showInfos();
//toggleInfos();
}); });
var isInViewport = function (elem) { var isInViewport = function (elem) {
@ -76,13 +63,7 @@
function showInfos() function showInfos()
{ {
var flag = 2*parseInt($('#mode_selector').val());
$('#blockchain').html('');
if ($('#mode_checkbox').is(":checked")) flag += 1;
blockchainExplorer.init(flag);
blockchainExplorer.init(parseInt($('#mode_selector').val()));
} }
function toggleInfos() function toggleInfos()
@ -122,7 +103,7 @@
<div class="col-sm-12 text-right"> <div class="col-sm-12 text-right">
<br><small>An image for each block of the BTC Blockchain</small> <br><small>An image for each block of the BTC Blockchain</small>
<br><a href="nft.php">Click here to buy a block as an NFT</a> <br><a href="nft.php">Click here to buy a block as an NFT</a>
<br><select id="mode_selector" onchange="showInfos(this)">
<br><select id="mode_selector" onchange="showInfos()">
<option value=0>Full Blockchain Explorer</option> <option value=0>Full Blockchain Explorer</option>
<option value=1>My special Blocks list</option> <option value=1>My special Blocks list</option>
</select> </select>
@ -134,14 +115,5 @@
<div id="blockchain" style="position:absolute;top:210px;width:100%"></div> <div id="blockchain" style="position:absolute;top:210px;width:100%"></div>
<div>
Click to see more blocks
</div>
<footer class="container-fluid bg-grey text-center slideanim">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
</footer>
</body> </body>
</html> </html>

+ 21
- 22
js/blockexplorer.js 查看文件

@ -75,14 +75,13 @@ blockchainExplorer = function(){
_flag_nav = false; _flag_nav = false;
blockName = _getblockNameFromHash(block.hash); blockName = _getblockNameFromHash(block.hash);
// if (blockName != '') blockName = ' ( '+blockName+' )';
if (_mode > 1) if (_mode > 1)
if (block.hash == _liste_blocks['TOP']) if (block.hash == _liste_blocks['TOP'])
{ {
div_label = 'LAST'; div_label = 'LAST';
if (blockName == '') blockName = 'LAST'; if (blockName == '') blockName = 'LAST';
} }
if (blockName == '') blockName = block.height;
opacity='1.0'; opacity='1.0';
visibility='hidden'; visibility='hidden';
@ -90,23 +89,20 @@ blockchainExplorer = function(){
opacity='0.3'; opacity='0.3';
visibility='visible'; 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 += '<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+'">'; 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>block</td><td align="right"><b>'+blockName+'</b></td></tr>';
contenu += ' <tr><td>timestamp</td><td align="right"><b>'+_formatDate(block.time)+'</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>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>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>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>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>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 += ' <tr><td>reward</td><td align="right"><b>'+_precisionRound(block.topisto_reward).toFixed(4)+'</b></td></tr>';
contenu += ' </table>'; contenu += ' </table>';
contenu += '</div>'; contenu += '</div>';
contenu += ' </div>';
$('#info_'+div_label).html(contenu); $('#info_'+div_label).html(contenu);
@ -245,24 +241,24 @@ blockchainExplorer = function(){
// Récursivité pour précharger par paquets // Récursivité pour précharger par paquets
// Tant qu'on n'est pas sur le GENESIS // Tant qu'on n'est pas sur le GENESIS
if (data.height > 0)
if (data.height > 0)
switch(_mode) switch(_mode)
{ {
case 0: case 0:
case 1:
// Récursivité pour précharger par paquets
_liste_blocks['BOTTOM'] = data.prev;
// En mode "Full Blockchain", on suit le chainage
_liste_blocks['BOTTOM'] = data.prev;
break; break;
case 2 :
c a s e 3:
_liste_blocks['BOTTOM'] = _known_blocks[_liste_blocks['LENGTH']-1].hash;
case 1 :
// En mode "Blo c ks Connus", on prend le proch a in de la li s t e
_liste_blocks['BOTTOM'] = _known_blocks[_liste_blocks['LENGTH']-1].hash;
break; break;
} }
} }
function _addBottomBlock() function _addBottomBlock()
{
{
console.log('add '+_liste_blocks['BOTTOM']);
// Mettre les infos du block // Mettre les infos du block
block_hash = '?block_hash='+_liste_blocks['BOTTOM']; block_hash = '?block_hash='+_liste_blocks['BOTTOM'];
$.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) {
@ -276,14 +272,15 @@ blockchainExplorer = function(){
// Maintenir la Liste // Maintenir la Liste
_maintenirListe(data); _maintenirListe(data);
if (_liste_blocks['LENGTH'] % 10) _addBottomBlock();
if (data.height > 0)
if (_liste_blocks['LENGTH'] % 5) _addBottomBlock();
}); });
} }
function _initBlockchain(block_name) function _initBlockchain(block_name)
{ {
var block_hash = ' ';
var block_hash _url = ' data/getBlockInfo.php ';
_liste_blocks = []; _liste_blocks = [];
_liste_blocks['LENGTH'] = 0; _liste_blocks['LENGTH'] = 0;
@ -291,17 +288,19 @@ blockchainExplorer = function(){
$(document).scrollTop( $("#explorer").offset().top ); $(document).scrollTop( $("#explorer").offset().top );
$('#blockchain').html(''); $('#blockchain').html('');
if (block_name != 'LAST') block_hash = '?block_hash='+_getblocHashFromName(block_name);
$.getJSON('data/getBlockInfo.php'+block_hash, function( data ) {
if (block_name != 'LAST') block_hash_url += '?block_hash='+_getblocHashFromName(block_name);
$.getJSON(block_hash_url, function( data ) {
div_label = data.height; div_label = data.height;
_liste_blocks['TOP'] = data.hash; _liste_blocks['TOP'] = data.hash;
_maintenirListe(data);
_addDivForBlock(div_label); _addDivForBlock(div_label);
_addInfoForBlock(data); _addInfoForBlock(data);
_maintenirListe(data);
// Cela fout le boxon pour l'instant // Cela fout le boxon pour l'instant
// blockchainListener.addBlockHook(_addTopBlock); // blockchainListener.addBlockHook(_addTopBlock);

Loading…
取消
儲存