+
diff --git a/samples/calc-01/index.js b/samples/calc-01/index.js
index 6b71b9e..2ae15ed 100644
--- a/samples/calc-01/index.js
+++ b/samples/calc-01/index.js
@@ -9,6 +9,10 @@ const inputValueLabel = document.getElementById('inputValueLabel');
const editingLabel = document.getElementById('editingLabel');
const modeLabel = document.getElementById('modeLabel');
const angleMode = document.getElementById('angleMode');
+const modeMenuButton = document.getElementById('modeMenuButton');
+const modeMenu = document.getElementById('modeMenu');
+const constsMenuButton = document.getElementById('constsMenuButton');
+const constsMenu = document.getElementById('constsMenu');
const keyLayouts = {
functions: [
@@ -137,6 +141,28 @@ function handleBackspaceAction() {
execute('drop');
}
+function closePopupMenus() {
+ modeMenu.hidden = true;
+ constsMenu.hidden = true;
+ modeMenuButton.setAttribute('aria-expanded', 'false');
+ constsMenuButton.setAttribute('aria-expanded', 'false');
+}
+
+function togglePopupMenu(menuName) {
+ const isModeMenu = menuName === 'mode';
+ const targetMenu = isModeMenu ? modeMenu : constsMenu;
+ const targetButton = isModeMenu ? modeMenuButton : constsMenuButton;
+ const otherMenu = isModeMenu ? constsMenu : modeMenu;
+ const otherButton = isModeMenu ? constsMenuButton : modeMenuButton;
+ const willOpen = targetMenu.hidden;
+
+ otherMenu.hidden = true;
+ otherButton.setAttribute('aria-expanded', 'false');
+
+ targetMenu.hidden = !willOpen;
+ targetButton.setAttribute('aria-expanded', String(willOpen));
+}
+
function createButton(cell) {
if (!cell) {
const spacer = document.createElement('div');
@@ -151,6 +177,7 @@ function createButton(cell) {
button.className = cell.className;
button.addEventListener('click', () => {
focusScreen();
+ closePopupMenus();
if (cell.type === 'input') {
pressKey(cell.value);
return;
@@ -164,6 +191,11 @@ function createButton(cell) {
handleBackspaceAction();
return;
}
+ if (cell.value === 'setModeDeg' || cell.value === 'setModeRad' || cell.value === 'setModeGrad') {
+ angleMode.value = cell.value === 'setModeDeg' ? 'deg' : (cell.value === 'setModeRad' ? 'rad' : 'grad');
+ angleMode.dispatchEvent(new Event('change'));
+ return;
+ }
}
execute(cell.value);
});
@@ -348,6 +380,7 @@ function render() {
inputValueLabel.textContent = calc.inputValue || '∅';
editingLabel.textContent = String(calc.isEditing);
modeLabel.textContent = calc.angleMode;
+ modeMenuButton.textContent = calc.angleMode;
angleMode.value = calc.angleMode;
errorEl.textContent = '';
}
@@ -593,18 +626,43 @@ function handleKeydown(event) {
window.addEventListener('keydown', handleKeydown);
-screen.addEventListener('click', focusScreen);
+screen.addEventListener('click', () => {
+ closePopupMenus();
+ focusScreen();
+});
window.addEventListener('load', focusScreen);
+document.addEventListener('click', (event) => {
+ if (!event.target.closest('#modeMenuWrap') && !event.target.closest('#constsMenuWrap')) {
+ closePopupMenus();
+ }
+});
+
+modeMenuButton.addEventListener('click', (event) => {
+ event.stopPropagation();
+ togglePopupMenu('mode');
+});
+
+constsMenuButton.addEventListener('click', (event) => {
+ event.stopPropagation();
+ togglePopupMenu('consts');
+});
+
angleMode.addEventListener('change', (event) => {
calc.angleMode = event.target.value;
+ closePopupMenus();
render();
});
renderKeyLayout(document.getElementById('functionsButtons'), keyLayouts.functions);
renderKeyLayout(document.getElementById('numbersButtons'), keyLayouts.numbers);
renderKeyLayout(document.getElementById('operatorsButtons'), keyLayouts.operators);
-renderKeyLayout(document.getElementById('constButtons'), [topButtons.consts]);
+renderKeyLayout(modeMenu, [[
+ { type: 'action', value: 'setModeDeg', label: 'Degrees', className: 'key-function' },
+ { type: 'action', value: 'setModeRad', label: 'Radians', className: 'key-function' },
+ { type: 'action', value: 'setModeGrad', label: 'Grads', className: 'key-function' },
+]]);
+renderKeyLayout(constsMenu, [topButtons.consts]);
document.getElementById('deleteButton').appendChild(createButton(topButtons.del));
document.getElementById('backspaceButton').appendChild(createButton(topButtons.backspace));
document.getElementById('escapeButton').appendChild(createButton(topButtons.escape));