From a65360e155f445e3c2ea7e638e1bb623d704d01a Mon Sep 17 00:00:00 2001 From: dbadol <13353088+dbadol@users.noreply.github.com> Date: Thu, 11 Jul 2024 10:23:53 +0200 Subject: [PATCH] Update BeamExplorer.htm (static page for historical blocks, SVG icons, column selection) (#1989) * added Rules::IsPastFork() * Rules::IsPastFork_() (template version) * wallet: making sure voucher response is received after wallet restart * wallet: misc * wallet: added "widget" handler * build fix * wallet/cli: shutdown fix * bvm: Load/SaveVar for app shader * wallet: implemented Load/SaveVar for app shader via WalletDB * bvm: misc * wallet: supporting multiple widgets * wallet: widgets fix * explorer: amount with + sign where applicable. htm: different clr for signed/unsigned positive. * explorer: flexible column selection in "hdrs" query * explorer: added dh arg to hdrs query * Update BeamExplorer.htm * Eye symbols toggle text both ways * Correction of Cell Amounts * adjust vocabulary * Correct an overflow display of eye symbols * Cleaning * Simplify some CSS * Use SVG icons in banner * Replace all eye symbols with SVG * Replace next/prev symbols with SVG SVG icons are defined as templates and then called everytime they are needed. * Rename v0.4 into v0.5 * small corrections * Scale SVG icons with text * Better CSS for hover on eye icons * Add wrappers and CSS to keep footer at the bottom * Highlight rows on hover * Add static page of historical blocks Add a static page of interesting historical blocks and blockchain events. * small adjustments * Update for column selection of block headers --------- Co-authored-by: valdok --- explorer/htm/BeamExplorer.htm | 809 +++++++++++++++++++++++++--------- 1 file changed, 608 insertions(+), 201 deletions(-) diff --git a/explorer/htm/BeamExplorer.htm b/explorer/htm/BeamExplorer.htm index 4ed2e66a6..64512d31a 100644 --- a/explorer/htm/BeamExplorer.htm +++ b/explorer/htm/BeamExplorer.htm @@ -3,7 +3,7 @@ - - - -

Beam Smart Explorer v0.4

- @@ -1538,7 +1882,7 @@

Deployed Smart Contracts

\n\ let myClass = (myHash.querySelector("a")) ? "truncated withLink" : "truncated"; // Add a span to truncate the text, and another span to hold the clickable symbol let myHTML = myHash.innerHTML; - myHash.innerHTML = "" + myHTML + ""; + myHash.innerHTML = "" + myHTML + ""; // Add event listener on the symbol myHash.querySelector(".expand").addEventListener("click", expandHash); } @@ -1546,7 +1890,7 @@

Deployed Smart Contracts

\n\ for (let myMetadata of document.querySelectorAll(".metadata")) { // Add a span to truncate the text, and another span to hold the clickable symbol let myHTML = myMetadata.innerHTML; - myMetadata.innerHTML = "" + myHTML + ""; + myMetadata.innerHTML = "" + myHTML + ""; // Add event listener on the symbol myMetadata.querySelector(".extend").addEventListener("click", expandMetadata); } @@ -1565,6 +1909,9 @@

Deployed Smart Contracts

\n\ for (let myItem of myRow.cells[col].querySelectorAll(".truncated")) { myItem.classList.remove("truncated"); myItem.classList.add("expanded"); + // Switch action of the clickable symbols + myItem.nextElementSibling.removeEventListener("click", expandHash); + myItem.nextElementSibling.addEventListener("click", truncateHash); } } } else { @@ -1572,6 +1919,39 @@

Deployed Smart Contracts

\n\ for (let myItem of input.parentNode.querySelectorAll(".truncated")) { myItem.classList.remove("truncated"); myItem.classList.add("expanded"); + // Switch action of the clickable symbols + myItem.nextElementSibling.removeEventListener("click", expandHash); + myItem.nextElementSibling.addEventListener("click", truncateHash); + } + } + } + + function truncateHash(e) { + // Get element, table and column number of the event + let input = e.currentTarget; + // If item is in table, truncate the whole column + if (input.closest('table')) { + let col = input.closest('th,td').cellIndex; + let table = input.closest('table'); + // Loop on all cells in that column + for (let myRow of table.rows) { + // Remove all expanded classes in the cell + for (let myItem of myRow.cells[col].querySelectorAll(".expanded")) { + myItem.classList.remove("expanded"); + myItem.classList.add("truncated"); + // Switch action of the clickable symbols + myItem.nextElementSibling.removeEventListener("click", truncateHash); + myItem.nextElementSibling.addEventListener("click", expandHash); + } + } + } else { + // Expand only the item and its siblings + for (let myItem of input.parentNode.querySelectorAll(".expanded")) { + myItem.classList.remove("expanded"); + myItem.classList.add("truncated"); + // Switch action of the clickable symbols + myItem.nextElementSibling.removeEventListener("click", truncateHash); + myItem.nextElementSibling.addEventListener("click", expandHash); } } } @@ -1582,6 +1962,21 @@

Deployed Smart Contracts

\n\ for (let myItem of input.parentNode.querySelectorAll(".reduced")) { myItem.classList.remove("reduced"); myItem.classList.add("full"); + // Switch action of the clickable symbols + myItem.nextElementSibling.removeEventListener("click", expandMetadata); + myItem.nextElementSibling.addEventListener("click", truncateMetadata); + } + } + + function truncateMetadata(e) { + // Truncate selected metadata only + let input = e.currentTarget; + for (let myItem of input.parentNode.querySelectorAll(".full")) { + myItem.classList.remove("full"); + myItem.classList.add("reduced"); + // Switch action of the clickable symbols + myItem.nextElementSibling.removeEventListener("click", truncateMetadata); + myItem.nextElementSibling.addEventListener("click", expandMetadata); } } @@ -1590,11 +1985,17 @@

Deployed Smart Contracts

\n\ for (let myItem of document.querySelectorAll(".truncated")) { myItem.classList.remove("truncated"); myItem.classList.add("expanded"); + // Switch action of the clickable symbols + myItem.nextElementSibling.removeEventListener("click", expandHash); + myItem.nextElementSibling.addEventListener("click", truncateHash); } // Expand all truncated Metadata for (let myItem of document.querySelectorAll(".reduced")) { myItem.classList.remove("reduced"); myItem.classList.add("full"); + // Switch action of the clickable symbols + myItem.nextElementSibling.removeEventListener("click", expandMetadata); + myItem.nextElementSibling.addEventListener("click", truncateMetadata); } // Expand all small collapsible blocks for (let myItem of document.querySelectorAll(".collapsible-checkbox")) { @@ -1602,10 +2003,10 @@

Deployed Smart Contracts

\n\ myItem.checked = true; } } - // Switch action of the clickable symbol + // Switch action of the main clickable symbol let icon = document.querySelector("#ExpandAll"); icon.setAttribute("href", "javascript:truncateEverything();"); - icon.setAttribute("title", "Truncate everything"); + icon.setAttribute("title", "Collapse everything"); } function truncateEverything() { @@ -1613,11 +2014,17 @@

Deployed Smart Contracts

\n\ for (let myItem of document.querySelectorAll(".expanded")) { myItem.classList.remove("expanded"); myItem.classList.add("truncated"); + // Switch action of the clickable symbols + myItem.nextElementSibling.removeEventListener("click", truncateHash); + myItem.nextElementSibling.addEventListener("click", expandHash); } // Truncate all Metadata for (let myItem of document.querySelectorAll(".full")) { myItem.classList.remove("full"); myItem.classList.add("reduced"); + // Switch action of the clickable symbols + myItem.nextElementSibling.removeEventListener("click", truncateMetadata); + myItem.nextElementSibling.addEventListener("click", expandMetadata); } // Collapse all small collapsible blocks for (let myItem of document.querySelectorAll(".collapsible-checkbox")) { @@ -1625,7 +2032,7 @@

Deployed Smart Contracts

\n\ myItem.checked = false; } } - // Switch action of the clickable symbol + // Switch action of the main clickable symbol let icon = document.querySelector("#ExpandAll"); icon.setAttribute("href", "javascript:expandEverything();"); icon.setAttribute("title", "Expand everything");