diff options
| -rw-r--r-- | kvmd/web/css/keyboard.css | 59 | ||||
| -rw-r--r-- | kvmd/web/css/mobile.css | 6 | ||||
| -rw-r--r-- | kvmd/web/index.html | 314 | ||||
| -rw-r--r-- | kvmd/web/js/hid.js | 2 | ||||
| -rw-r--r-- | kvmd/web/js/keyboard.js | 58 |
5 files changed, 294 insertions, 145 deletions
diff --git a/kvmd/web/css/keyboard.css b/kvmd/web/css/keyboard.css index 7686a3f3..ebe1d95e 100644 --- a/kvmd/web/css/keyboard.css +++ b/kvmd/web/css/keyboard.css @@ -1,32 +1,32 @@ -div#keyboard { +div.keyboard { zoom: 0.8; } -div#keyboard div.keyboard-block { - padding-right: 15px; +div.keyboard div.keyboard-block { display: table-cell; -} -div#keyboard div.keyboard-block:last-child { padding-right: 0; } +div.keyboard div.keyboard-block:not(:first-child) { + padding-left: 15px; +} -div#keyboard div.keyboard-row { +div.keyboard div.keyboard-row { white-space: nowrap; height: 40px; margin-bottom: 5px; } -div#keyboard div.keyboard-row:last-child { +div.keyboard div.keyboard-row:last-child { margin-bottom: 0; } -div#keyboard div.key, div.modifier, div.empty-key { +div.keyboard div.key, div.modifier, div.empty-key { box-sizing: border-box; display: inline-block; margin-right: 5px; padding: 0; width: 40px; } -div#keyboard div.key, div.modifier { +div.keyboard div.key, div.modifier { font-size: 0.9em; text-align: center; vertical-align: top; @@ -38,57 +38,70 @@ div#keyboard div.key, div.modifier { cursor: pointer; height: 40px; } -div#keyboard div.key:hover, div.modifier:hover { +div.keyboard div.key:hover, div.modifier:hover { color: var(--fg-color-intensive); background-color: var(--bg-color-ctl); } -div#keyboard div.pressed { +div.keyboard div.pressed { box-shadow: none; color: var(--fg-color-selected) !important; background-color: var(--bg-color-dark) !important; } -div#keyboard div.holded { +div.keyboard div.holded { box-shadow: none; color: var(--fg-color-normal) !important; background-color: var(--bg-color-intensive) !important; } -div#keyboard div.key:last-child, div.empty-key:last-child, div.modifier:last-child { +div.keyboard div.key:last-child, div.empty-key:last-child, div.modifier:last-child { margin-right: 0; } -div#keyboard div.wide-1 { +div.keyboard div.margin-0 { + margin-right: 0px; +} +div.keyboard div.wide-0 { + width: 26px; +} +div.keyboard div.wide-1 { width: 61px; } -div#keyboard div.wide-2 { +div.keyboard div.wide-2 { width: 64px; } -div#keyboard div.wide-3 { +div.keyboard div.wide-3 { width: 77px; } -div#keyboard div.wide-4 { +div.keyboard div.wide-4 { width: 102px; } -div#keyboard div.wide-5 { +div.keyboard div.wide-5 { width: 288px; } -div#keyboard div.left { +div.keyboard div.left { text-align: left !important; padding-left: 6px !important; } -div#keyboard div.right { +div.keyboard div.right { text-align: right !important; padding-right: 6px !important; } -div#keyboard div.small { +div.keyboard div.small { font-size: 0.7em; } -div#keyboard p { +div.keyboard p { margin: 0; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } -div#keyboard b { +div.keyboard b { color: var(--bg-color-intensive); } + +div#keyboard-desktop { + display: block; +} +div#keyboard-mobile { + display: none; +} diff --git a/kvmd/web/css/mobile.css b/kvmd/web/css/mobile.css index 0675b6c9..1eda438c 100644 --- a/kvmd/web/css/mobile.css +++ b/kvmd/web/css/mobile.css @@ -25,6 +25,12 @@ color: var(--fg-color-normal); background-color: var(--bg-color-gray); } + div#keyboard-desktop { + display: none !important; + } + div#keyboard-mobile { + display: block !important; + } div#stream-mouse-buttons { display: block !important; diff --git a/kvmd/web/index.html b/kvmd/web/index.html index 4d284e04..fe5a97ad 100644 --- a/kvmd/web/index.html +++ b/kvmd/web/index.html @@ -217,25 +217,25 @@ <div class="ctl-dropdown-content"> <button disabled id="pak-button">• Paste-as-Keys <sup><i>ascii-only</i></sup></button> <hr> - <button class="shortcut" data-shortcut="ControlLeft AltLeft Delete">• Ctrl+Alt+Del</button> + <button data-shortcut="ControlLeft AltLeft Delete">• Ctrl+Alt+Del</button> <hr> - <button class="shortcut" data-shortcut="ControlLeft KeyW">• Ctrl+W</button> - <button class="shortcut" data-shortcut="ControlLeft Escape">• Ctrl+Esc</button> - <button class="shortcut" data-shortcut="AltLeft Tab">• Alt+Tab</button> - <button class="shortcut" data-shortcut="AltLeft Escape">• Alt+Escape</button> - <button class="shortcut" data-shortcut="AltLeft Space">• Alt+Space</button> - <button class="shortcut" data-shortcut="AltLeft Enter">• Alt+Enter</button> - <button class="shortcut" data-shortcut="AltLeft F4">• Alt+F4</button> + <button data-shortcut="ControlLeft KeyW">• Ctrl+W</button> + <button data-shortcut="ControlLeft Escape">• Ctrl+Esc</button> + <button data-shortcut="AltLeft Tab">• Alt+Tab</button> + <button data-shortcut="AltLeft Escape">• Alt+Escape</button> + <button data-shortcut="AltLeft Space">• Alt+Space</button> + <button data-shortcut="AltLeft Enter">• Alt+Enter</button> + <button data-shortcut="AltLeft F4">• Alt+F4</button> <hr> - <button class="shortcut" data-shortcut="AltLeft PrintScreen">• Alt+PrtSc</button> - <button class="shortcut" data-shortcut="PrintScreen">• PrtSc</button> + <button data-shortcut="AltLeft PrintScreen">• Alt+PrtSc</button> + <button data-shortcut="PrintScreen">• PrtSc</button> <hr> - <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyR">• Alt+SysRq+R</button> - <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyE">• Alt+SysRq+E</button> - <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyI">• Alt+SysRq+I</button> - <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyS">• Alt+SysRq+S</button> - <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyU">• Alt+SysRq+U</button> - <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyB">• Alt+SysRq+B</button> + <button data-shortcut="AltLeft PrintScreen KeyR">• Alt+SysRq+R</button> + <button data-shortcut="AltLeft PrintScreen KeyE">• Alt+SysRq+E</button> + <button data-shortcut="AltLeft PrintScreen KeyI">• Alt+SysRq+I</button> + <button data-shortcut="AltLeft PrintScreen KeyS">• Alt+SysRq+S</button> + <button data-shortcut="AltLeft PrintScreen KeyU">• Alt+SysRq+U</button> + <button data-shortcut="AltLeft PrintScreen KeyB">• Alt+SysRq+B</button> </div> </div> </li> @@ -257,123 +257,231 @@ <div class="window-grab">Virtual Keyboard</div> <button class="window-button-close">×</button> </div> - <div id="keyboard" align="center"> + <div id="keyboard-desktop" class="keyboard" align="center"> <div class="keyboard-block"> <div class="keyboard-row"> - <div id="Escape" class="key small"><p>Esc</p></div> + <div data-key="Escape" class="key small"><p>Esc</p></div> <div class="empty-key" style="width:24px"></div> - <div id="F1" class="key small"><p>F1</p></div> - <div id="F2" class="key small"><p>F2</p></div> - <div id="F3" class="key small"><p>F3</p></div> - <div id="F4" class="key small"><p>F4</p></div> + <div data-key="F1" class="key small"><p>F1</p></div> + <div data-key="F2" class="key small"><p>F2</p></div> + <div data-key="F3" class="key small"><p>F3</p></div> + <div data-key="F4" class="key small"><p>F4</p></div> <div class="empty-key" style="width:10px"></div> - <div id="F5" class="key small"><p>F5</p></div> - <div id="F6" class="key small"><p>F6</p></div> - <div id="F7" class="key small"><p>F7</p></div> - <div id="F8" class="key small"><p>F8</p></div> + <div data-key="F5" class="key small"><p>F5</p></div> + <div data-key="F6" class="key small"><p>F6</p></div> + <div data-key="F7" class="key small"><p>F7</p></div> + <div data-key="F8" class="key small"><p>F8</p></div> <div class="empty-key" style="width:10px"></div> - <div id="F9" class="key small"><p>F9</p></div> - <div id="F10" class="key small"><p>F10</p></div> - <div id="F11" class="key small"><p>F11</p></div> - <div id="F12" class="key small"><p>F12</p></div> + <div data-key="F9" class="key small"><p>F9</p></div> + <div data-key="F10" class="key small"><p>F10</p></div> + <div data-key="F11" class="key small"><p>F11</p></div> + <div data-key="F12" class="key small"><p>F12</p></div> </div> + <hr> <div class="keyboard-row"> - <div id="Backquote" class="key"><p>~<br>`</p></div> - <div id="Digit1" class="key"><p>!<br>1</p></div> - <div id="Digit2" class="key"><p>@<br>2</p></div> - <div id="Digit3" class="key"><p>#<br>3</p></div> - <div id="Digit4" class="key"><p>$<br>4</p></div> - <div id="Digit5" class="key"><p>%<br>5</p></div> - <div id="Digit6" class="key"><p>^<br>6</p></div> - <div id="Digit7" class="key"><p>&<br>7</p></div> - <div id="Digit8" class="key"><p>*<br>8</p></div> - <div id="Digit9" class="key"><p>(<br>9</p></div> - <div id="Digit0" class="key"><p>)<br>0</p></div> - <div id="Minus" class="key"><p>_<br>-</p></div> - <div id="Equal" class="key"><p>+<br>=</p></div> - <div id="Backspace" class="key wide-2 right"><p>↤</p></div> + <div data-key="Backquote" class="key"><p>~<br>`</p></div> + <div data-key="Digit1" class="key"><p>!<br>1</p></div> + <div data-key="Digit2" class="key"><p>@<br>2</p></div> + <div data-key="Digit3" class="key"><p>#<br>3</p></div> + <div data-key="Digit4" class="key"><p>$<br>4</p></div> + <div data-key="Digit5" class="key"><p>%<br>5</p></div> + <div data-key="Digit6" class="key"><p>^<br>6</p></div> + <div data-key="Digit7" class="key"><p>&<br>7</p></div> + <div data-key="Digit8" class="key"><p>*<br>8</p></div> + <div data-key="Digit9" class="key"><p>(<br>9</p></div> + <div data-key="Digit0" class="key"><p>)<br>0</p></div> + <div data-key="Minus" class="key"><p>_<br>-</p></div> + <div data-key="Equal" class="key"><p>+<br>=</p></div> + <div data-key="Backspace" class="key wide-2 right"><p>↤</p></div> </div> <div class="keyboard-row"> - <div id="Tab" class="key wide-2 left"><p>⇤<br>⇥</p></div> - <div id="KeyQ" class="key single"><p>Q</p></div> - <div id="KeyW" class="key single"><p>W</p></div> - <div id="KeyE" class="key single"><p>E</p></div> - <div id="KeyR" class="key single"><p>R</p></div> - <div id="KeyT" class="key single"><p>T</p></div> - <div id="KeyY" class="key single"><p>Y</p></div> - <div id="KeyU" class="key single"><p>U</p></div> - <div id="KeyI" class="key single"><p>I</p></div> - <div id="KeyO" class="key single"><p>O</p></div> - <div id="KeyP" class="key single"><p>P</p></div> - <div id="BracketLeft" class="key"><p>{<br>[</p></div> - <div id="BracketRight" class="key"><p>}<br>]</p></div> - <div id="Backslash" class="key"><p>|<br>\</p></div> + <div data-key="Tab" class="key wide-2 left"><p>⇤<br>⇥</p></div> + <div data-key="KeyQ" class="key single"><p>Q</p></div> + <div data-key="KeyW" class="key single"><p>W</p></div> + <div data-key="KeyE" class="key single"><p>E</p></div> + <div data-key="KeyR" class="key single"><p>R</p></div> + <div data-key="KeyT" class="key single"><p>T</p></div> + <div data-key="KeyY" class="key single"><p>Y</p></div> + <div data-key="KeyU" class="key single"><p>U</p></div> + <div data-key="KeyI" class="key single"><p>I</p></div> + <div data-key="KeyO" class="key single"><p>O</p></div> + <div data-key="KeyP" class="key single"><p>P</p></div> + <div data-key="BracketLeft" class="key"><p>{<br>[</p></div> + <div data-key="BracketRight" class="key"><p>}<br>]</p></div> + <div data-key="Backslash" class="key"><p>|<br>\</p></div> </div> <div class="keyboard-row"> - <div id="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div> - <div id="KeyA" class="key single"><p>A</p></div> - <div id="KeyS" class="key single"><p>S</p></div> - <div id="KeyD" class="key single"><p>D</p></div> - <div id="KeyF" class="key single"><p>F</p></div> - <div id="KeyG" class="key single"><p>G</p></div> - <div id="KeyH" class="key single"><p>H</p></div> - <div id="KeyJ" class="key single"><p>J</p></div> - <div id="KeyK" class="key single"><p>K</p></div> - <div id="KeyL" class="key single"><p>L</p></div> - <div id="Semicolon" class="key"><p>:<br>;</p></div> - <div id="Quote" class="key"><p>"<br>'</p></div> - <div id="Enter" class="key wide-3 right small"><p>Enter<br>↵</p></div> + <div data-key="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div> + <div data-key="KeyA" class="key single"><p>A</p></div> + <div data-key="KeyS" class="key single"><p>S</p></div> + <div data-key="KeyD" class="key single"><p>D</p></div> + <div data-key="KeyF" class="key single"><p>F</p></div> + <div data-key="KeyG" class="key single"><p>G</p></div> + <div data-key="KeyH" class="key single"><p>H</p></div> + <div data-key="KeyJ" class="key single"><p>J</p></div> + <div data-key="KeyK" class="key single"><p>K</p></div> + <div data-key="KeyL" class="key single"><p>L</p></div> + <div data-key="Semicolon" class="key"><p>:<br>;</p></div> + <div data-key="Quote" class="key"><p>"<br>'</p></div> + <div data-key="Enter" class="key wide-3 right small"><p>Enter<br>↵</p></div> </div> <div class="keyboard-row"> - <div id="ShiftLeft" class="modifier wide-4 left small"><p><b>•</b><br>Shift</p></div> - <div id="KeyZ" class="key single"><p>Z</p></div> - <div id="KeyX" class="key single"><p>X</p></div> - <div id="KeyC" class="key single"><p>C</p></div> - <div id="KeyV" class="key single"><p>V</p></div> - <div id="KeyB" class="key single"><p>B</p></div> - <div id="KeyN" class="key single"><p>N</p></div> - <div id="KeyM" class="key single"><p>M</p></div> - <div id="Comma" class="key"><p><<br>,</p></div> - <div id="Period" class="key"><p>><br>.</p></div> - <div id="Slash" class="key"><p>?<br>/</p></div> - <div id="ShiftRight" class="modifier wide-4 right small"><p><b>•</b><br>Shift</p></div> + <div data-key="ShiftLeft" class="modifier wide-4 left small"><p><b>•</b><br>Shift</p></div> + <div data-key="KeyZ" class="key single"><p>Z</p></div> + <div data-key="KeyX" class="key single"><p>X</p></div> + <div data-key="KeyC" class="key single"><p>C</p></div> + <div data-key="KeyV" class="key single"><p>V</p></div> + <div data-key="KeyB" class="key single"><p>B</p></div> + <div data-key="KeyN" class="key single"><p>N</p></div> + <div data-key="KeyM" class="key single"><p>M</p></div> + <div data-key="Comma" class="key"><p><<br>,</p></div> + <div data-key="Period" class="key"><p>><br>.</p></div> + <div data-key="Slash" class="key"><p>?<br>/</p></div> + <div data-key="ShiftRight" class="modifier wide-4 right small"><p><b>•</b><br>Shift</p></div> </div> <div class="keyboard-row"> - <div id="ControlLeft" class="modifier wide-1 left small"><p><b>•</b><br>Ctrl</p></div> - <div id="MetaLeft" class="modifier wide-1 left small"><p><b>•</b><br>Win</p></div> - <div id="AltLeft" class="modifier wide-1 left small"><p><b>•</b><br>Alt</p></div> - <div id="Space" class="key wide-5"></div> - <div id="AltRight" class="modifier wide-1 right small"><p><b>•</b><br>Alt</p></div> - <div id="MetaRight" class="modifier wide-1 right small"><p><b>•</b><br>Win</p></div> - <div id="ControlRight" class="modifier wide-1 right small"><p><b>•</b><br>Ctrl</p></div> + <div data-key="ControlLeft" class="modifier wide-1 left small"><p><b>•</b><br>Ctrl</p></div> + <div data-key="MetaLeft" class="modifier wide-1 left small"><p><b>•</b><br>Win</p></div> + <div data-key="AltLeft" class="modifier wide-1 left small"><p><b>•</b><br>Alt</p></div> + <div data-key="Space" class="key wide-5"></div> + <div data-key="AltRight" class="modifier wide-1 right small"><p><b>•</b><br>Alt</p></div> + <div data-key="MetaRight" class="modifier wide-1 right small"><p><b>•</b><br>Win</p></div> + <div data-key="ControlRight" class="modifier wide-1 right small"><p><b>•</b><br>Ctrl</p></div> </div> </div> <div class="keyboard-block"> <div class="keyboard-row"> - <div id="PrintScreen" class="modifier small"><p><b>•</b><br>Pt/Sq</p></div> - <div id="ScrollLock" class="key small"><p>ScrLk</p></div> - <div id="Pause" class="key small"><p>P/Brk</p></div> + <div data-key="PrintScreen" class="modifier small"><p><b>•</b><br>Pt/Sq</p></div> + <div data-key="ScrollLock" class="key small"><p>ScrLk</p></div> + <div data-key="Pause" class="key small"><p>P/Brk</p></div> </div> + <hr> <div class="keyboard-row"> - <div id="Insert" class="key small"><p>Ins</p></div> - <div id="Home" class="key small"><p>Home</p></div> - <div id="PageUp" class="key small"><p>PgUp</p></div> + <div data-key="Insert" class="key small"><p>Ins</p></div> + <div data-key="Home" class="key small"><p>Home</p></div> + <div data-key="PageUp" class="key small"><p>PgUp</p></div> </div> <div class="keyboard-row"> - <div id="Delete" class="key small"><p>Del</p></div> - <div id="End" class="key small"><p>End</p></div> - <div id="PageDown" class="key small"><p>PgDn</p></div> + <div data-key="Delete" class="key small"><p>Del</p></div> + <div data-key="End" class="key small"><p>End</p></div> + <div data-key="PageDown" class="key small"><p>PgDn</p></div> </div> <div class="keyboard-row"></div> <div class="keyboard-row"> <div class="empty-key"></div> - <div id="ArrowUp" class="key"><p>↑</p></div> + <div data-key="ArrowUp" class="key"><p>↑</p></div> <div class="empty-key"></div> </div> <div class="keyboard-row"> - <div id="ArrowLeft" class="key"><p>←</p></div> - <div id="ArrowDown" class="key"><p>↓</p></div> - <div id="ArrowRight" class="key"><p>→</p></div> + <div data-key="ArrowLeft" class="key"><p>←</p></div> + <div data-key="ArrowDown" class="key"><p>↓</p></div> + <div data-key="ArrowRight" class="key"><p>→</p></div> + </div> + </div> + </div> + + <div id="keyboard-mobile" class="keyboard" align="center"> + <div class="keyboard-block"> + <div class="keyboard-row"> + <div data-key="Escape" class="key margin-0 small"><p>Esc</p></div> + <div class="empty-key" style="width:0px"></div> + <div data-key="F1" class="key wide-0 margin-0 small"><p>F1</p></div> + <div data-key="F2" class="key wide-0 margin-0 small"><p>F2</p></div> + <div data-key="F3" class="key wide-0 margin-0 small"><p>F3</p></div> + <div data-key="F4" class="key wide-0 margin-0 small"><p>F4</p></div> + <div data-key="F5" class="key wide-0 margin-0 small"><p>F5</p></div> + <div data-key="F6" class="key wide-0 margin-0 small"><p>F6</p></div> + <div data-key="F7" class="key wide-0 margin-0 small"><p>F7</p></div> + <div data-key="F8" class="key wide-0 margin-0 small"><p>F8</p></div> + <div data-key="F9" class="key wide-0 margin-0 small"><p>F9</p></div> + <div data-key="F10" class="key wide-0 margin-0 small"><p>F10</p></div> + <div data-key="F11" class="key wide-0 margin-0 small"><p>F11</p></div> + <div data-key="F12" class="key wide-0 margin-0 small"><p>F12</p></div> + <div class="empty-key" style="width:4px"></div> + <div data-key="PrintScreen" class="modifier margin-0 small"><p><b>•</b><br>Pt/Sq</p></div> + <div data-key="ScrollLock" class="key margin-0 small"><p>ScrLk</p></div> + <div data-key="Pause" class="key margin-0 small"><p>P/Brk</p></div> + <div data-key="Insert" class="key margin-0 small"><p>Ins</p></div> + <div data-key="Home" class="key margin-0 small"><p>Home</p></div> + <div data-key="End" class="key margin-0 small"><p>End</p></div> + <div data-key="Delete" class="key margin-0 small"><p>Del</p></div> + </div> + <hr> + <div class="keyboard-row"> + <div data-key="Backquote" class="key"><p>~<br>`</p></div> + <div data-key="Digit1" class="key"><p>!<br>1</p></div> + <div data-key="Digit2" class="key"><p>@<br>2</p></div> + <div data-key="Digit3" class="key"><p>#<br>3</p></div> + <div data-key="Digit4" class="key"><p>$<br>4</p></div> + <div data-key="Digit5" class="key"><p>%<br>5</p></div> + <div data-key="Digit6" class="key"><p>^<br>6</p></div> + <div data-key="Digit7" class="key"><p>&<br>7</p></div> + <div data-key="Digit8" class="key"><p>*<br>8</p></div> + <div data-key="Digit9" class="key"><p>(<br>9</p></div> + <div data-key="Digit0" class="key"><p>)<br>0</p></div> + <div data-key="Minus" class="key"><p>_<br>-</p></div> + <div data-key="Equal" class="key"><p>+<br>=</p></div> + <div data-key="Backspace" class="key wide-3 right" style="width:101px"><p>↤</p></div> + </div> + <div class="keyboard-row"> + <div data-key="Tab" class="key wide-2 left"><p>⇤<br>⇥</p></div> + <div data-key="KeyQ" class="key single"><p>Q</p></div> + <div data-key="KeyW" class="key single"><p>W</p></div> + <div data-key="KeyE" class="key single"><p>E</p></div> + <div data-key="KeyR" class="key single"><p>R</p></div> + <div data-key="KeyT" class="key single"><p>T</p></div> + <div data-key="KeyY" class="key single"><p>Y</p></div> + <div data-key="KeyU" class="key single"><p>U</p></div> + <div data-key="KeyI" class="key single"><p>I</p></div> + <div data-key="KeyO" class="key single"><p>O</p></div> + <div data-key="KeyP" class="key single"><p>P</p></div> + <div data-key="BracketLeft" class="key"><p>{<br>[</p></div> + <div data-key="BracketRight" class="key"><p>}<br>]</p></div> + <div data-key="Backslash" class="key wide-2 left" style="width:78px"><p>|<br>\</p></div> + </div> + <div class="keyboard-row"> + <div data-key="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div> + <div data-key="KeyA" class="key single"><p>A</p></div> + <div data-key="KeyS" class="key single"><p>S</p></div> + <div data-key="KeyD" class="key single"><p>D</p></div> + <div data-key="KeyF" class="key single"><p>F</p></div> + <div data-key="KeyG" class="key single"><p>G</p></div> + <div data-key="KeyH" class="key single"><p>H</p></div> + <div data-key="KeyJ" class="key single"><p>J</p></div> + <div data-key="KeyK" class="key single"><p>K</p></div> + <div data-key="KeyL" class="key single"><p>L</p></div> + <div data-key="Semicolon" class="key"><p>:<br>;</p></div> + <div data-key="Quote" class="key"><p>"<br>'</p></div> + <div data-key="Enter" class="key wide-4 right small" style="width:116px"><p>Enter<br>↵</p></div> + </div> + <div class="keyboard-row"> + <div data-key="ShiftLeft" class="modifier wide-4 left small"><p><b>•</b><br>Shift</p></div> + <div data-key="KeyZ" class="key single"><p>Z</p></div> + <div data-key="KeyX" class="key single"><p>X</p></div> + <div data-key="KeyC" class="key single"><p>C</p></div> + <div data-key="KeyV" class="key single"><p>V</p></div> + <div data-key="KeyB" class="key single"><p>B</p></div> + <div data-key="KeyN" class="key single"><p>N</p></div> + <div data-key="KeyM" class="key single"><p>M</p></div> + <div data-key="Comma" class="key"><p><<br>,</p></div> + <div data-key="Period" class="key"><p>><br>.</p></div> + <div data-key="Slash" class="key"><p>?<br>/</p></div> + <div data-key="PageUp" class="key small"><p>PgUp</p></div> + <div data-key="ArrowUp" class="key"><p>↑</p></div> + <div data-key="PageDown" class="key small"><p>PgDn</p></div> + </div> + <div class="keyboard-row"> + <div data-key="ControlLeft" class="modifier wide-1 left small"><p><b>•</b><br>Ctrl</p></div> + <div data-key="MetaLeft" class="modifier wide-1 left small"><p><b>•</b><br>Win</p></div> + <div data-key="AltLeft" class="modifier wide-1 left small"><p><b>•</b><br>Alt</p></div> + <div data-key="Space" class="key" style="width:190px"></div> + <div data-key="AltRight" class="modifier right small"><p><b>•</b><br>Alt</p></div> + <div data-key="MetaRight" class="modifier right small"><p><b>•</b><br>Win</p></div> + <div data-key="ControlRight" class="modifier right small"><p><b>•</b><br>Ctrl</p></div> + <div data-key="ShiftRight" class="modifier right small"><p><b>•</b><br>Shift</p></div> + <div data-key="ArrowLeft" class="key"><p>←</p></div> + <div data-key="ArrowDown" class="key"><p>↓</p></div> + <div data-key="ArrowRight" class="key"><p>→</p></div> </div> </div> </div> diff --git a/kvmd/web/js/hid.js b/kvmd/web/js/hid.js index 09c67d98..fb8438a5 100644 --- a/kvmd/web/js/hid.js +++ b/kvmd/web/js/hid.js @@ -48,7 +48,7 @@ function Hid() { $("pak-button").title = $("pak-led").title = "Your browser does not support the Clipboard API.\nUse Google Chrome or Chromium."; } - Array.prototype.forEach.call($$("shortcut"), function(el_shortcut) { + Array.prototype.forEach.call(document.querySelectorAll("[data-shortcut]"), function(el_shortcut) { el_shortcut.onclick = () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" ")); }); }; diff --git a/kvmd/web/js/keyboard.js b/kvmd/web/js/keyboard.js index f1296bed..b29f1764 100644 --- a/kvmd/web/js/keyboard.js +++ b/kvmd/web/js/keyboard.js @@ -5,8 +5,8 @@ function Keyboard() { var __ws = null; - var __keys = []; - var __modifiers = []; + var __keys = [].slice.call(document.querySelectorAll("div#keyboard-desktop div.keyboard-block div.keyboard-row div.key")); + var __modifiers = [].slice.call(document.querySelectorAll("div#keyboard-desktop div.keyboard-block div.keyboard-row div.modifier")); var __mac_cmd_hook = (( window.navigator.oscpu @@ -38,12 +38,10 @@ function Keyboard() { }; el_key.ontouchstart = (event) => __touchHandler(event, el_key, true); el_key.ontouchend = (event) => __touchHandler(event, el_key, false); - __keys.push(el_key); }); Array.prototype.forEach.call($$("modifier"), function(el_key) { el_key.onmousedown = () => __toggleModifierHandler(el_key); - __modifiers.push(el_key); }); if (__mac_cmd_hook) { @@ -64,7 +62,7 @@ function Keyboard() { self.releaseAll = function() { __keys.concat(__modifiers).forEach(function(el_key) { if (__isActive(el_key)) { - self.fireEvent(el_key.id, false); + self.fireEvent(el_key.getAttribute("data-key"), false); } }); }; @@ -88,7 +86,7 @@ function Keyboard() { var __keyboardHandler = function(event, state) { event.preventDefault(); - var el_key = $(event.code); + var el_key = document.querySelector("[data-key='" + event.code + "']"); if (el_key && !event.repeat) { __commonHandler(el_key, state, "pressed"); if (__mac_cmd_hook) { @@ -97,8 +95,7 @@ function Keyboard() { if ((event.code === "MetaLeft" || event.code === "MetaRight") && !state) { __keys.forEach(function(el_key) { if (__isActive(el_key)) { - // __commonHandler(el_key, false, "pressed"); - self.fireEvent(el_key.id, false); + self.fireEvent(el_key.getAttribute("data-key"), false); } }); } @@ -126,7 +123,7 @@ function Keyboard() { __modifiers.forEach(function(el_key) { if (__isHolded(el_key)) { __deactivate(el_key); - __sendKey(el_key.id, false); + __sendKey(el_key, false); } }); }; @@ -134,32 +131,57 @@ function Keyboard() { var __commonHandler = function(el_key, state, cls) { if (state && !__isActive(el_key)) { __deactivate(el_key); - el_key.classList.add(cls); - __sendKey(el_key.id, true); + __activate(el_key, cls); + __sendKey(el_key, true); } else { __deactivate(el_key); - __sendKey(el_key.id, false); + __sendKey(el_key, false); } }; var __isPressed = function(el_key) { - return el_key.classList.contains("pressed"); + var is_pressed = false; + Array.prototype.forEach.call(__resolveKeys(el_key), function(el_key) { + is_pressed = (is_pressed || el_key.classList.contains("pressed")); + }); + return is_pressed; }; var __isHolded = function(el_key) { - return el_key.classList.contains("holded"); + var is_holded = false; + Array.prototype.forEach.call(__resolveKeys(el_key), function(el_key) { + is_holded = (is_holded || el_key.classList.contains("holded")); + }); + return is_holded; }; var __isActive = function(el_key) { - return (__isPressed(el_key) || __isHolded(el_key)); + var is_active = false; + Array.prototype.forEach.call(__resolveKeys(el_key), function(el_key) { + is_active = (is_active || el_key.classList.contains("pressed") || el_key.classList.contains("holded")); + }); + return is_active; + }; + + var __activate = function(el_key, cls) { + Array.prototype.forEach.call(__resolveKeys(el_key), function(el_key) { + el_key.classList.add(cls); + }); }; var __deactivate = function(el_key) { - el_key.classList.remove("pressed"); - el_key.classList.remove("holded"); + Array.prototype.forEach.call(__resolveKeys(el_key), function(el_key) { + el_key.classList.remove("pressed"); + el_key.classList.remove("holded"); + }); + }; + + var __resolveKeys = function(el_key) { + return document.querySelectorAll("[data-key='" + el_key.getAttribute("data-key") + "']"); }; - var __sendKey = function(code, state) { + var __sendKey = function(el_key, state) { + var code = el_key.getAttribute("data-key"); tools.debug("Key", (state ? "pressed:" : "released:"), code); if (__ws) { __ws.send(JSON.stringify({ |