on-screen-keyboard.html

<template id="on-screen-keyboard-template">
  <style>
    /**
     * The on-screen keyboard slides out from the bottom (like a drawer), and
     * hovers over the lower part of the app UI. Please note the following
     * design considerations:
     * - The keyboard layout optimizes for space efficiency, especially in the
     *   vertical dimension. For example, the F1-F12 function keys are grouped
     *   as a block on the left for that reason.
     * - The areas of the remote screen left and right of the on-screen keyboard
     *   must stay receptive for mouse events. Therefore, we have to calculate
     *   the absolute width of the keyboard explicitly.
     * - If the viewport width is too small to fit the full keyboard, we make
     *   the keyboard drawer horizontally scrollable. We only want to show the
     *   scroll bar, however, if scrolling is actually applicable. The usability
     *   of this approach is not perfect, but such a narrow viewport should be
     *   a rare use-case anyway.
     */

    @import "css/style.css";

    :host {
      --key-size: 46px; /* Must be divisible by 2 */
      --block-spacing: 8px;
      --keyboard-width: calc(21 * var(--key-size) + 8 * var(--block-spacing));
      --keyboard-height: calc(5 * var(--key-size) + 2 * var(--block-spacing));

      position: fixed;
      bottom: 31px; /* Same as status bar height */
      right: 0;
      left: 0;
      margin: 0 auto;
      transition: 0.5s;
      max-width: var(--keyboard-width);
      overflow-x: auto;
      border: 1px solid rgba(175, 175, 175, 0.7);
      border-bottom: 0;
      border-top-left-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius);
      background-color: rgba(235, 235, 235, 0.7);
      backdrop-filter: blur(5px);
    }

    :host(:not([is-shown])) {
      bottom: calc(-1 * var(--keyboard-height) - 1px);
    }

    #collapse-button {
      position: absolute;
      width: 25px;
      top: 0;
      left: 0;
      background-color: #333;
      padding: 4px 8px;
      cursor: pointer;
    }

    #collapse-button:hover {
      background-color: var(--brand-blue);
    }

    .keyboard {
      display: flex;
      box-sizing: border-box;
      padding: var(--block-spacing);
    }

    .keyboard-block {
      /* In order to accommodate keys that extend in half steps, we need to
         double up the grid, and then divide everything by 2. */
      display: grid;
      grid-template-rows: repeat(5, var(--key-size));
      grid-template-columns: repeat(
        calc(2 * var(--columns)),
        calc(var(--key-size) / 2)
      );
      padding: 0 var(--block-spacing);
    }

    keyboard-key {
      --span: 1; /* Must be a multiple of 0.5 */
      grid-column: span calc(2 * var(--span));
      padding: 1px;
    }
  </style>
  <img
    src="/img/angle-down-icon.svg"
    id="collapse-button"
    title="Collapse Keyboard"
  />
  <div class="keyboard">
    <div class="keyboard-block" style="--columns: 3">
      <keyboard-key class="hidden"></keyboard-key>
      <keyboard-key class="hidden"></keyboard-key>
      <keyboard-key class="accented" code="Escape">Esc</keyboard-key>
      <!-- Row break -->
      <keyboard-key code="F1">F1</keyboard-key>
      <keyboard-key code="F2">F2</keyboard-key>
      <keyboard-key code="F3">F3</keyboard-key>
      <!-- Row break -->
      <keyboard-key code="F4">F4</keyboard-key>
      <keyboard-key code="F5">F5</keyboard-key>
      <keyboard-key code="F6">F6</keyboard-key>
      <!-- Row break -->
      <keyboard-key code="F7">F7</keyboard-key>
      <keyboard-key code="F8">F8</keyboard-key>
      <keyboard-key code="F9">F9</keyboard-key>
      <!-- Row break -->
      <keyboard-key code="F10">F10</keyboard-key>
      <keyboard-key code="F11">F11</keyboard-key>
      <keyboard-key code="F12">F12</keyboard-key>
    </div>

    <div class="keyboard-block" style="--columns: 15">
      <keyboard-key code="Backquote">
        <slot>~</slot>
        <span slot="bottom">`</span>
      </keyboard-key>
      <keyboard-key code="Digit1">
        <slot>!</slot>
        <span slot="bottom">1</span>
      </keyboard-key>
      <keyboard-key code="Digit2">
        <slot>@</slot>
        <span slot="bottom">2</span>
      </keyboard-key>
      <keyboard-key code="Digit3">
        <slot>#</slot>
        <span slot="bottom">3</span>
      </keyboard-key>
      <keyboard-key code="Digit4">
        <slot>$</slot>
        <span slot="bottom">4</span>
      </keyboard-key>
      <keyboard-key code="Digit5">
        <slot>%</slot>
        <span slot="bottom">5</span>
      </keyboard-key>
      <keyboard-key code="Digit6">
        <slot>^</slot>
        <span slot="bottom">6</span>
      </keyboard-key>
      <keyboard-key code="Digit7">
        <slot>&</slot>
        <span slot="bottom">7</span>
      </keyboard-key>
      <keyboard-key code="Digit8">
        <slot>*</slot>
        <span slot="bottom">8</span>
      </keyboard-key>
      <keyboard-key code="Digit9">
        <slot>(</slot>
        <span slot="bottom">9</span>
      </keyboard-key>
      <keyboard-key code="Digit0">
        <slot>)</slot>
        <span slot="bottom">0</span>
      </keyboard-key>
      <keyboard-key code="Minus">
        <slot>_</slot>
        <span slot="bottom">-</span>
      </keyboard-key>
      <keyboard-key code="Equal">
        <slot>+</slot>
        <span slot="bottom">=</span>
      </keyboard-key>
      <keyboard-key code="Backspace" class="accented" style="--span: 2"
        >Backspace</keyboard-key
      >
      <!-- Row break -->
      <keyboard-key code="Tab" class="accented" style="--span: 2"
        >Tab</keyboard-key
      >
      <keyboard-key code="KeyQ">Q</keyboard-key>
      <keyboard-key code="KeyW">W</keyboard-key>
      <keyboard-key code="KeyE">E</keyboard-key>
      <keyboard-key code="KeyR">R</keyboard-key>
      <keyboard-key code="KeyT">T</keyboard-key>
      <keyboard-key code="KeyY">Y</keyboard-key>
      <keyboard-key code="KeyU">U</keyboard-key>
      <keyboard-key code="KeyI">I</keyboard-key>
      <keyboard-key code="KeyO">O</keyboard-key>
      <keyboard-key code="KeyP">P</keyboard-key>
      <keyboard-key code="BracketLeft">
        <slot>{</slot>
        <span slot="bottom">[</span>
      </keyboard-key>
      <keyboard-key code="BracketRight">
        <slot>}</slot>
        <span slot="bottom">]</span>
      </keyboard-key>
      <keyboard-key code="Backslash">
        <slot>|</slot>
        <span slot="bottom">\</span>
      </keyboard-key>
      <!-- Row break -->
      <keyboard-key code="CapsLock" class="accented" style="--span: 2"
        >Caps Lock</keyboard-key
      >
      <keyboard-key code="KeyA">A</keyboard-key>
      <keyboard-key code="KeyS">S</keyboard-key>
      <keyboard-key code="KeyD">D</keyboard-key>
      <keyboard-key code="KeyF">F</keyboard-key>
      <keyboard-key code="KeyG">G</keyboard-key>
      <keyboard-key code="KeyH">H</keyboard-key>
      <keyboard-key code="KeyJ">J</keyboard-key>
      <keyboard-key code="KeyK">K</keyboard-key>
      <keyboard-key code="KeyL">L</keyboard-key>
      <keyboard-key code="Semicolon">
        <slot>:</slot>
        <span slot="bottom">;</span>
      </keyboard-key>
      <keyboard-key code="Quote">
        <slot>"</slot>
        <span slot="bottom">'</span>
      </keyboard-key>
      <keyboard-key code="Enter" class="accented" style="--span: 2"
        >Enter</keyboard-key
      >
      <!-- Row break -->
      <keyboard-key code="ShiftLeft" class="accented" style="--span: 2.5"
        >Shift</keyboard-key
      >
      <keyboard-key code="KeyZ">Z</keyboard-key>
      <keyboard-key code="KeyX">X</keyboard-key>
      <keyboard-key code="KeyC">C</keyboard-key>
      <keyboard-key code="KeyV">V</keyboard-key>
      <keyboard-key code="KeyB">B</keyboard-key>
      <keyboard-key code="KeyN">N</keyboard-key>
      <keyboard-key code="KeyM">M</keyboard-key>
      <keyboard-key code="Comma">
        <slot><</slot>
        <span slot="bottom">,</span>
      </keyboard-key>
      <keyboard-key code="Period">
        <slot>></slot>
        <span slot="bottom">.</span>
      </keyboard-key>
      <keyboard-key code="Slash">
        <slot>?</slot>
        <span slot="bottom">/</span>
      </keyboard-key>
      <keyboard-key code="ShiftRight" class="accented" style="--span: 2.5"
        >Shift</keyboard-key
      >
      <!-- Row break -->
      <keyboard-key code="ControlLeft" class="accented" style="--span: 2"
        >Control</keyboard-key
      >
      <keyboard-key code="MetaLeft" class="accented" style="--span: 1.5"
        >Meta</keyboard-key
      >
      <keyboard-key code="AltLeft" class="accented">Alt</keyboard-key>
      <keyboard-key code="Space" class="key-space" style="--span: 4.5"
        >Space</keyboard-key
      >
      <keyboard-key code="AltRight" class="accented">Alt</keyboard-key>
      <keyboard-key code="MetaRight" class="accented" style="--span: 1.5"
        >Meta</keyboard-key
      >
      <keyboard-key
        code="ContextMenu"
        key="ContextMenu"
        class="accented"
        style="--span: 1.5"
        >Menu</keyboard-key
      >
      <keyboard-key code="ControlRight" class="accented" style="--span: 2"
        >Control</keyboard-key
      >
    </div>

    <div class="keyboard-block" style="--columns: 3">
      <keyboard-key code="PrintScreen">Print</keyboard-key>
      <keyboard-key code="ScrollLock">Scroll Lock</keyboard-key>
      <keyboard-key code="Pause">Pause</keyboard-key>
      <!-- Row break -->
      <keyboard-key code="Insert">Insert</keyboard-key>
      <keyboard-key code="Home">Home</keyboard-key>
      <keyboard-key code="PageUp">Page Up</keyboard-key>
      <!-- Row break -->
      <keyboard-key code="Delete">Delete</keyboard-key>
      <keyboard-key code="End">End</keyboard-key>
      <keyboard-key code="PageDown">Page Down</keyboard-key>
      <!-- Row break -->
      <keyboard-key class="hidden"></keyboard-key>
      <keyboard-key use-code="true" code="ArrowUp">Up</keyboard-key>
      <keyboard-key class="hidden"></keyboard-key>
      <!-- Row break -->
      <keyboard-key use-code="true" code="ArrowLeft">Left</keyboard-key>
      <keyboard-key use-code="true" code="ArrowDown">Down</keyboard-key>
      <keyboard-key use-code="true" code="ArrowRight">Right</keyboard-key>
    </div>
  </div>
</template>

<script type="module">
  (function () {
    const template = document.querySelector("#on-screen-keyboard-template");

    customElements.define(
      "on-screen-keyboard",
      class extends HTMLElement {
        connectedCallback() {
          this.attachShadow({ mode: "open" }).appendChild(
            template.content.cloneNode(true)
          );

          this.addEventListener("keyclick", (evt) => {
            this.onKeyClick(
              evt.detail.key,
              evt.detail.code,
              evt.detail.isModifier
            );
          });
          this.addEventListener("keyrelease", (evt) => {
            this.emitKeyEvent("keyup", evt.detail.key, evt.detail.code);
          });
          this.shadowRoot
            .querySelector("#collapse-button")
            .addEventListener("click", () => {
              this.show(false);
            });
        }

        show(isVisible) {
          this.toggleAttribute("is-shown", isVisible);
          this.dispatchEvent(
            new CustomEvent("keyboard-visibility-changed", {
              detail: { isVisible },
              bubbles: true,
              composed: true,
            })
          );
        }

        isShown() {
          return this.hasAttribute("is-shown");
        }

        onKeyClick(keyRaw, code, isModifier) {
          const key = this.getEffectiveKeyValue(keyRaw);

          this.emitKeyEvent("keydown", key, code);

          if (!isModifier) {
            this.emitKeyEvent("keyup", key, code);

            // Remove pressed state from all modifier keys if non-modifier key
            // was pressed.
            this.clearPressedKeys();
          }
        }

        isModifierKeyPressed(keyCode) {
          // Note: Only modifier keys can be considered "pressed" (i.e.,
          // pressed and held).
          return (
            this.shadowRoot.querySelectorAll(
              `keyboard-key[code=${keyCode}][pressed=true]`
            ).length > 0
          );
        }

        emitKeyEvent(eventType, key, code) {
          this.dispatchEvent(
            new KeyboardEvent(eventType, {
              bubbles: true,
              composed: true,
              key: key,
              code: code,
              metaKey:
                this.isModifierKeyPressed("MetaLeft") ||
                this.isModifierKeyPressed("MetaRight"),
              ctrlKey:
                this.isModifierKeyPressed("ControlLeft") ||
                this.isModifierKeyPressed("ControlRight"),
              shiftKey:
                this.isModifierKeyPressed("ShiftLeft") ||
                this.isModifierKeyPressed("ShiftRight"),
              altKey:
                this.isModifierKeyPressed("AltLeft") ||
                this.isModifierKeyPressed("AltRight"),
            })
          );
        }

        clearPressedKeys() {
          this.shadowRoot
            .querySelectorAll("keyboard-key[pressed=true]")
            .forEach((key) => {
              key.isPressed = false;
              this.emitKeyEvent("keyup", key.key, key.code);
            });
        }

        /**
         * Translate a keyboard character into the appropriate character, taking
         * into account keyboard state and any modifier keys that are active.
         **/
        getEffectiveKeyValue(key) {
          // Convert the key to uppercase when shift is active but only if no
          // other modifier is pressed at the same time.
          if (
            ["ShiftLeft", "ShiftRight"].some((m) =>
              this.isModifierKeyPressed(m)
            ) &&
            [
              "MetaLeft",
              "MetaRight",
              "AltLeft",
              "AltRight",
              "ControlLeft",
              "ControlRight",
            ].every((m) => !this.isModifierKeyPressed(m))
          ) {
            return this.getShiftedKeyValue(key);
          }

          return key;
        }

        getShiftedKeyValue(key) {
          if (/^[a-z]$/.test(key)) {
            return key.toUpperCase();
          }
          const shiftMappings = {
            "`": "~",
            1: "!",
            2: "@",
            3: "#",
            4: "$",
            5: "%",
            6: "^",
            7: "&",
            8: "*",
            9: "(",
            0: ")",
            "-": "_",
            "=": "+",
            "[": "{",
            "]": "}",
            "\\": "|",
            ";": ":",
            "'": '"',
            ",": "<",
            ".": ">",
            "/": "?",
          };
          if (key in shiftMappings) {
            return shiftMappings[key];
          }
          // This key is the same regardless of whether the shift key is
          // pressed.
          return key;
        }
      }
    );
  })();
</script>