ボタンを長押ししたら、ショートカットキーのヒントを表示する

javascript mac

⌘キーを長押しした時、ショートカットのヒントアイコンを表示する

SlackのMacアプリが
⌘キーを長押しすると「⌘キー＋数字キー」のショートカットの
ヒントを表示するなんてことをやってまして、

→ (ふわっと出てくる)


これは良いUIだと思ったのです。


要件

  • ⌘キーを長押ししたらアイコンを表示する
  • キーを離したらアイコンを消す


実装

こんな感じかな？

  • CSS変数で表示を切替。
  • ボタンを押してから、1秒後にアイコンを表示する。
  • ボタンを放したら、アイコンを消す。もしくはアイコン表示のアニメーション(?)を止める。
  • フォーカスが外れた時もアイコンを消す処理を入れておいた方が良さそう
    • これで長押しを表現。
    • 今はタイマーで表示制御とか、要らないんですね。


<html>
<head>
    <style>
        button {
            width: 200px;
            height: 50px;
        }

        :root {
            --shortcut-hint-delay: 1s;
            --shortcut-hint-opacity: 0;
        }
        .shortcut-hint-container {
            position: relative;
        }
        .shortcut-hint {
            position: absolute;
            width: 10px;
            left: 3px;
            top: calc(100% - 12px);
            z-index: 1;
            vertical-align: middle;
            text-align: center;
            line-height: 10px;
            font-size: 9px;
            color: white;
            background-color: black;
            border-radius: 2px;
            transition-delay: var(--shortcut-hint-delay);
            opacity: var(--shortcut-hint-opacity);
        }
    </style>

    <script>
        var hintDisplayed = false;

        window.addEventListener('keydown', function(e) {
          if (e.metaKey) {
            hintDisplayed = true;
            document.documentElement.style.setProperty('--shortcut-hint-delay', '1s');
            document.documentElement.style.setProperty('--shortcut-hint-opacity', '1');
          }
        });
        window.addEventListener('keyup', function(e) {
          if (hintDisplayed) {
            hintDisplayed = false;
            document.documentElement.style.setProperty('--shortcut-hint-delay', '0s');
            document.documentElement.style.setProperty('--shortcut-hint-opacity', '0');
          }
        });
        window.addEventListener('blur', (e) => {
          if (hintDisplayed) {
            hintDisplayed = false;
            document.documentElement.style.setProperty('--shortcut-hint-delay', '0s');
            document.documentElement.style.setProperty('--shortcut-hint-opacity', '0');
          }
        });
    </script>
</head>
<body>
    <div class="shortcut-hint-container">
        <button>保存ボタン</button>
        <label class="shortcut-hint">S</label>
    </div>
</body>
</html>



おわり

おわりだん。