heatmaps: part 8

website/scripts/explorer/mempool.js

@@ -1,5 +1,6 @@
 import { createCube } from "./cube.js";
 import { formatFeeRate } from "./render.js";
+import { createSpan } from "../utils/dom.js";
 
 const NUM_BLOCKS = 8;
 
@@ -73,14 +74,12 @@ function updateMempoolCube(cube, block, position) {
 
   cube.leftFace.textContent = "";
   const median = document.createElement("p");
-  const tilde = document.createElement("span");
+  const tilde = createSpan("~");
   tilde.classList.add("dim");
-  tilde.textContent = "~";
   median.append(tilde, formatFeeRate(block.medianFee));
   const range = document.createElement("p");
-  const dash = document.createElement("span");
+  const dash = createSpan("-");
   dash.classList.add("dim");
-  dash.textContent = "-";
   range.append(formatFeeRate(block.feeRange[0]), dash, formatFeeRate(block.feeRange[6]));
   const unit = document.createElement("p");
   unit.classList.add("dim");

website/scripts/options/full.js

@@ -1,5 +1,9 @@
 import { createPartialOptions } from "./partial.js";
-import { createButtonElement, createAnchorElement } from "../utils/dom.js";
+import {
+  createAnchorElement,
+  createButtonElement,
+  createSmall,
+} from "../utils/dom.js";
 import { pushHistory, resetParams } from "../utils/url.js";
 import { readStored, writeToStorage } from "../utils/storage.js";
 import { stringToId } from "../utils/format.js";
@@ -395,9 +399,7 @@ export function initOptions() {
         details.append(summary);
         summary.append(node.name);
 
-        const count = window.document.createElement("small");
-        count.textContent = `[${node.count.toLocaleString("en-us")}]`;
-        summary.append(count);
+        summary.append(createSmall(`[${node.count.toLocaleString("en-us")}]`));
 
         let built = false;
         if (autoOpen && isOnSelectedPath(node.path)) {

website/scripts/utils/chart/legend.js

@@ -1,4 +1,4 @@
-import { createLabeledInput, createSpanName } from "../dom.js";
+import { createLabeledInput, createSpan, createSpanName } from "../dom.js";
 import { stringToId } from "../format.js";
 
 /** @param {HTMLElement} el */
@@ -27,8 +27,7 @@ export function createLegend() {
   element.append(scroller);
   captureScroll(scroller);
 
-  const separator = window.document.createElement("span");
-  separator.textContent = "|";
+  const separator = createSpan("|");
   captureScroll(separator);
 
   return {

website/scripts/utils/dom.js

@@ -41,6 +41,15 @@ export function createSpan(text) {
   return span;
 }
 
+/**
+ * @param {string} text
+ */
+export function createSmall(text) {
+  const small = window.document.createElement("small");
+  small.textContent = text;
+  return small;
+}
+
 /**
  * @param {string} name
  */
@@ -335,9 +344,7 @@ export function createSelect({
 
   const remaining = choices.length - 1;
   if (remaining > 0) {
-    const small = window.document.createElement("small");
-    small.textContent = `+${remaining}`;
-    element.append(small);
+    element.append(createSmall(`+${remaining}`));
     element.append(createSpan("↓"));
   }