From f679b0d95285cb5a2e83cc23f07694349098857c Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Fri, 15 May 2026 19:12:36 +0200
Subject: [PATCH] feat: add constants popup to calculator sample

---
 samples/calc-02/index.js | 62 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 3 deletions(-)

diff --git a/samples/calc-02/index.js b/samples/calc-02/index.js
index 95ed99d..03933df 100644
--- a/samples/calc-02/index.js
+++ b/samples/calc-02/index.js
@@ -256,13 +256,22 @@ modeButton.addEventListener('click', (event) => {
 	openModeMenu();
 });
 
-window.addEventListener('resize', closeModeMenu);
-window.addEventListener('scroll', closeModeMenu, true);
+window.addEventListener('resize', () => {
+	closeModeMenu();
+	closeConstMenu();
+});
+window.addEventListener('scroll', () => {
+	closeModeMenu();
+	closeConstMenu();
+}, true);
 
 window.addEventListener('click', (event) => {
 	if (modeMenuEl && !event.target.closest('.mode-menu') && event.target !== modeButton) {
 		closeModeMenu();
 	}
+	if (constMenuEl && !event.target.closest('.mode-menu') && event.target !== constButton) {
+		closeConstMenu();
+	}
 });
 
 pasteButton.addEventListener('click', async () => {
@@ -287,7 +296,54 @@ pasteButton.addEventListener('click', async () => {
 
 upButton.addEventListener('click', () => {});
 
-constButton.addEventListener('click', () => {});
+const constants = [
+	{ label: 'π', value: Math.PI },
+	{ label: 'e', value: Math.E },
+	{ label: 'φ', value: (1 + Math.sqrt(5)) / 2 },
+	{ label: 'g', value: 9.80665 },
+	{ label: 'c', value: 299792458 },
+];
+
+let constMenuEl = null;
+
+function closeConstMenu() {
+	if (constMenuEl) {
+		constMenuEl.remove();
+		constMenuEl = null;
+	}
+}
+
+function openConstMenu() {
+	closeConstMenu();
+	const rect = constButton.getBoundingClientRect();
+	constMenuEl = document.createElement('div');
+	constMenuEl.className = 'mode-menu';
+	constMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
+	constMenuEl.style.left = `${rect.left + window.scrollX}px`;
+	constants.forEach((constant) => {
+		const button = document.createElement('button');
+		button.type = 'button';
+		button.className = 'mode-menu-item';
+		button.textContent = constant.label;
+		button.addEventListener('click', () => {
+			pushEditingValueIfNeeded();
+			calc.push(constant.value);
+			render();
+			closeConstMenu();
+			focusInput();
+		});
+		constMenuEl.appendChild(button);
+	});
+	document.body.appendChild(constMenuEl);
+	const menuRect = constMenuEl.getBoundingClientRect();
+	const maxLeft = Math.max(8, window.innerWidth - menuRect.width - 8);
+	constMenuEl.style.left = `${Math.max(8, Math.min(maxLeft, rect.left + window.scrollX))}px`;
+}
+
+constButton.addEventListener('click', (event) => {
+	event.stopPropagation();
+	openConstMenu();
+});
 
 leftButton.addEventListener('click', () => {});