diff --git a/src/assets/css/keyboard.css b/src/assets/css/keyboard.css index 4dceab37ee6592832d156a212073da599547b210..8c4103dbc8cfba31795da5e089ccf338dd40924f 100644 --- a/src/assets/css/keyboard.css +++ b/src/assets/css/keyboard.css @@ -63,7 +63,7 @@ div.keyboard_row > .keyboard_key:last-child > *, div.keyboard_row > .keyboard_ke font-size: 20px; } -div.keyboard_key > *:not(:first-child) { +div.keyboard_key > *:not(h1) { margin: 0px; font-size: 18px; position: absolute; @@ -121,3 +121,51 @@ div.keyboard_key#keyboard_spacebar { width: 515px; height: 38px; } + +section#keyboard[data-is-caps-lck-on="true"] div.keyboard_key[data-cmd="ESCAPED|-- CAPSLCK: ON"] { + background-color: rgb(190, 230, 193); + color: black; +} + +section#keyboard[data-is-shift-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty), section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) { + position: relative; + top: 3px; + font-size: 26px; + margin: 0px 5px; +} + +section#keyboard[data-is-shift-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 { + font-size: 20px; + opacity: 1; +} + +section#keyboard[data-is-shift-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) + h1, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) + h1 { + margin: 0px; + font-size: 18px; + position: absolute; + top: 3px; + left: 3px; +} + +section#keyboard[data-is-shift-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 + h1, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 + h1 { + opacity: 0; +} + + +section#keyboard[data-is-fn-on="true"] div.keyboard_key[data-cmd="ESCAPED|-- FN: ON"] { + background-color: rgb(190, 230, 193); + color: black; +} + +section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) { + position: relative; + top: 3px; + font-size: 23px; + margin: 0px 5px; + opacity: 1; +} + +section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) + h3, section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) + h3 + h2, section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) + h3 + h2 + h1 { + position: absolute; + opacity: 0; +} diff --git a/src/assets/kb_layouts/en-US.json b/src/assets/kb_layouts/en-US.json index 3c7c8d753eeadef1e8efb22c842b99b1ebf54c57..524c3d6dc2d93ce6a3e7652e60b9e30990d3708f 100644 --- a/src/assets/kb_layouts/en-US.json +++ b/src/assets/kb_layouts/en-US.json @@ -224,7 +224,6 @@ { "name": "CAPS", "cmd": "ESCAPED|-- CAPSLCK: ON", - "shift_name": "CAPS", "shift_cmd": "ESCAPED|-- CAPSLCK: OFF" }, { diff --git a/src/classes/keyboard.class.js b/src/classes/keyboard.class.js index 262a8530521e465ca47f5b8553fcc9f9c41ca482..1b045951169690d6adba29bdae9445c9efd19c02 100644 --- a/src/classes/keyboard.class.js +++ b/src/classes/keyboard.class.js @@ -11,6 +11,7 @@ class Keyboard { container.dataset.isCapsLckOn = false; container.dataset.isAltOn = false; container.dataset.isCtrlOn = false; + container.dataset.isFnOn = false; // Parse keymap and create DOM Object.keys(layout).forEach((row) => { @@ -26,10 +27,10 @@ class Keyboard { key.innerHTML = `

${keyObj.name}

`; } else { key.innerHTML = ` -

${keyObj.name || ""}

-

${keyObj.shift_name || ""}

+

${keyObj.fn_name || ""}

${keyObj.alt_name || ""}

-

${keyObj.fn_name || ""}

`; +

${keyObj.shift_name || ""}

+

${keyObj.name || ""}

`; } Object.keys(keyObj).forEach((property) => { @@ -47,7 +48,35 @@ class Keyboard { }); }); - // Apply click (and/or touch) handler functions + // Apply click (and/or touch) handler functions (write to socket and animations) + let pressKey = (key) => { + let cmd = key.dataset.cmd || ""; + if (container.dataset.isShiftOn == "true" && key.dataset.shift_cmd || container.dataset.isCapsLckOn == "true" && key.dataset.shift_cmd) cmd = key.dataset.shift_cmd; + if (container.dataset.isCtrlOn == "true" && key.dataset.ctrl_cmd) cmd = key.dataset.ctrl_cmd; + if (container.dataset.isAltOn == "true" && key.dataset.alt_cmd) cmd = key.dataset.alt_cmd; + if (container.dataset.isFnOn == "true" && key.dataset.fn_cmd) cmd = key.dataset.fn_cmd; + + if (cmd.startsWith("ESCAPED|-- ")) { + cmd = cmd.substr(11); + switch(cmd) { + case "CAPSLCK: ON": + container.dataset.isCapsLckOn = "true"; + break; + case "CAPSLCK: OFF": + container.dataset.isCapsLckOn = "false"; + break; + case "FN: ON": + container.dataset.isFnOn = "true"; + break; + case "FN: OFF": + container.dataset.isFnOn = "false"; + break; + } + } else { + term.socket.send(cmd); + } + }; + container.childNodes.forEach((row) => { row.childNodes.forEach((key) => { @@ -56,12 +85,26 @@ class Keyboard { if (key.attributes["class"].value.endsWith("keyboard_enter")) { // The enter key is divided in two dom elements, so we bind their animations here - key.onmousedown = () => { + key.onmousedown = (e) => { + pressKey(key); + key.holdTimeout = setTimeout(() => { + key.holdInterval = setInterval(() => { + pressKey(key); + }, 70); + }, 400); + enterElements.forEach((key) => { key.setAttribute("class", "keyboard_key active keyboard_enter"); }); + + // Keep focus on the terminal + term.term.focus(); + e.preventDefault(); }; key.onmouseup = () => { + clearTimeout(key.holdTimeout); + clearInterval(key.holdInterval); + enterElements.forEach((key) => { key.setAttribute("class", "keyboard_key blink keyboard_enter"); }); @@ -72,10 +115,48 @@ class Keyboard { }, 100); }; } else { - key.onmousedown = () => { - + key.onmousedown = (e) => { + if (key.dataset.cmd.startsWith("ESCAPED|-- ")) { + let cmd = key.dataset.cmd.substr(11); + if (cmd.startsWith("CTRL")) { + container.dataset.isCtrlOn = "true"; + } + if (cmd.startsWith("SHIFT")) { + container.dataset.isShiftOn = "true"; + } + if (cmd.startsWith("ALT")) { + container.dataset.isAltOn = "true"; + } + } else { + key.holdTimeout = setTimeout(() => { + key.holdInterval = setInterval(() => { + pressKey(key); + }, 70); + }, 400); + } + pressKey(key); + + // Keep focus on the terminal + term.term.focus(); + e.preventDefault(); }; - key.onmouseup = () => { + key.onmouseup = (e) => { + if (key.dataset.cmd.startsWith("ESCAPED|-- ")) { + let cmd = key.dataset.cmd.substr(11); + if (cmd.startsWith("CTRL")) { + container.dataset.isCtrlOn = "false"; + } + if (cmd.startsWith("SHIFT")) { + container.dataset.isShiftOn = "false"; + } + if (cmd.startsWith("ALT")) { + container.dataset.isAltOn = "false"; + } + } else { + clearTimeout(key.holdTimeout); + clearInterval(key.holdInterval); + } + key.setAttribute("class", "keyboard_key blink"); setTimeout(() => { key.setAttribute("class", "keyboard_key");