ggorlen · May 20, 2025 02:17
diff --git a/hyperformula-playground.html b/hyperformula-playground.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="HyperFormula Playground" />
    <meta name="color-scheme" content="dark light" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HyperFormula Playground</title>
    <link rel="icon" href="https://fav.farm/⚡" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hyperformula.full.min.js"></script>

    <style>
      body {
        font-family: sans-serif;
        padding: 1rem;
        max-width: 800px;
      }

      textarea {
        width: 100%;
        height: 20em;
        font-family: monospace;
        font-size: 1em;
        padding: 0.5em;
        margin-bottom: 1em;
        box-sizing: border-box;
      }

      #output {
        font-family: monospace;
        font-size: 1.1em;
        border: 1px solid #ccc;
        padding: 0.75em;
        white-space: pre-wrap;
      }

      input[type="text"] {
        width: 100%;
        font-size: 1em;
        padding: 0.4em;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <h1>HyperFormula Playground</h1>

    <div>
      <label for="a1-input">Value for A1:</label>
      <input type="text" id="a1-input" value="test.pdf" />
    </div>

    <div style="margin-top: 1em;">
      <label>Enter a formula below.</label> Example:
      <code>=IF(RIGHT("foo.pdf", 4) = ".pdf", "Ends with .pdf", "Nope")</code>
      <textarea id="formula">
 =IF(RIGHT(A1, 4) = ".pdf", "Ends with .pdf", "Nope")</textarea
    >
    </div>

    <div>
      Result:
      <div id="output"></div>
    </div>

    <script>
      function getQueryParams() {
        const params = {};
        const search = window.location.search;
        if (search) {
          new URLSearchParams(search).forEach((value, key) => {
            params[key] = value;
          });
        }
        return params;
      }

      function updateQueryParams(params) {
        const url = new URL(window.location);
        Object.entries(params).forEach(([key, value]) => {
          if (value === null || value === undefined || value === "") {
            url.searchParams.delete(key);
          } else {
            url.searchParams.set(key, value);
          }
        });
        window.history.replaceState({}, "", url);
      }

      const hf = HyperFormula.buildFromSheets(
        {
          Sheet1: [[""]],
        },
        {
          licenseKey: "gpl-v3",
          currencySymbol: [],
          dateFormats: [],
        },
      );

      const sheetId = hf.getSheetId("Sheet1");
      const formulaInput = document.getElementById("formula");
      const outputDiv = document.getElementById("output");
      const a1Input = document.getElementById("a1-input");

      const params = getQueryParams();
      if (params.a1) {
        a1Input.value = decodeURIComponent(params.a1);
      }
      if (params.formula) {
        formulaInput.value = decodeURIComponent(params.formula);
      }

      function evaluateFormula() {
        try {
          hf.setCellContents({ sheet: sheetId, col: 1, row: 0 }, [[formulaInput.value]]);
          const result = hf.getCellValue({ sheet: sheetId, col: 1, row: 0 });
          outputDiv.textContent = result;
        } catch (err) {
          outputDiv.textContent = "Error: " + err.message;
        }
      }

      function updateA1Value() {
        hf.setCellContents({ sheet: sheetId, col: 0, row: 0 }, [[a1Input.value]]);
        evaluateFormula();
      }

      formulaInput.addEventListener("input", () => {
        updateQueryParams({ formula: encodeURIComponent(formulaInput.value) });
        evaluateFormula();
      });

      a1Input.addEventListener("input", () => {
        updateQueryParams({ a1: encodeURIComponent(a1Input.value) });
        updateA1Value();
      });

      updateA1Value();
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="description" content="HyperFormula Playground" />
	<meta name="color-scheme" content="dark light" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>HyperFormula Playground</title>
	<link rel="icon" href="https://fav.farm/⚡" />
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hyperformula.full.min.js"></script>

	<style>
	body {
	font-family: sans-serif;
	padding: 1rem;
	max-width: 800px;
	}

	textarea {
	width: 100%;
	height: 20em;
	font-family: monospace;
	font-size: 1em;
	padding: 0.5em;
	margin-bottom: 1em;
	box-sizing: border-box;
	}

	#output {
	font-family: monospace;
	font-size: 1.1em;
	border: 1px solid #ccc;
	padding: 0.75em;
	white-space: pre-wrap;
	}

	input[type="text"] {
	width: 100%;
	font-size: 1em;
	padding: 0.4em;
	box-sizing: border-box;
	}
	</style>
	</head>
	<body>
	<h1>HyperFormula Playground</h1>

	<div>
	<label for="a1-input">Value for A1:</label>
	<input type="text" id="a1-input" value="test.pdf" />
	</div>

	<div style="margin-top: 1em;">
	<label>Enter a formula below.</label> Example:
	<code>=IF(RIGHT("foo.pdf", 4) = ".pdf", "Ends with .pdf", "Nope")</code>
	<textarea id="formula">
	=IF(RIGHT(A1, 4) = ".pdf", "Ends with .pdf", "Nope")</textarea
	>
	</div>

	<div>
	Result:
	<div id="output"></div>
	</div>

	<script>
	function getQueryParams() {
	const params = {};
	const search = window.location.search;
	if (search) {
	new URLSearchParams(search).forEach((value, key) => {
	params[key] = value;
	});
	}
	return params;
	}

	function updateQueryParams(params) {
	const url = new URL(window.location);
	Object.entries(params).forEach(([key, value]) => {
	if (value === null \|\| value === undefined \|\| value === "") {
	url.searchParams.delete(key);
	} else {
	url.searchParams.set(key, value);
	}
	});
	window.history.replaceState({}, "", url);
	}

	const hf = HyperFormula.buildFromSheets(
	{
	Sheet1: [[""]],
	},
	{
	licenseKey: "gpl-v3",
	currencySymbol: [],
	dateFormats: [],
	},
	);

	const sheetId = hf.getSheetId("Sheet1");
	const formulaInput = document.getElementById("formula");
	const outputDiv = document.getElementById("output");
	const a1Input = document.getElementById("a1-input");

	const params = getQueryParams();
	if (params.a1) {
	a1Input.value = decodeURIComponent(params.a1);
	}
	if (params.formula) {
	formulaInput.value = decodeURIComponent(params.formula);
	}

	function evaluateFormula() {
	try {
	hf.setCellContents({ sheet: sheetId, col: 1, row: 0 }, [[formulaInput.value]]);
	const result = hf.getCellValue({ sheet: sheetId, col: 1, row: 0 });
	outputDiv.textContent = result;
	} catch (err) {
	outputDiv.textContent = "Error: " + err.message;
	}
	}

	function updateA1Value() {
	hf.setCellContents({ sheet: sheetId, col: 0, row: 0 }, [[a1Input.value]]);
	evaluateFormula();
	}

	formulaInput.addEventListener("input", () => {
	updateQueryParams({ formula: encodeURIComponent(formulaInput.value) });
	evaluateFormula();
	});

	a1Input.addEventListener("input", () => {
	updateQueryParams({ a1: encodeURIComponent(a1Input.value) });
	updateA1Value();
	});

	updateA1Value();
	</script>
	</body>
	</html>