From 4c276428a66b0e9c0c585dc9b0c9a0443a58b4f0 Mon Sep 17 00:00:00 2001
From: Marcus Jaschen <mjaschen@gmail.com>
Date: Sun, 11 Jun 2023 09:21:13 +0200
Subject: [PATCH] Add "Help" dialog which shows available keyboard shortcuts

Dialog can be toggled via button in "About" or via keyboard shortcut "?"
---
 css/style.css |  40 +++++++++++
 index.html    | 193 ++++++++++++++++++++++++++++++++++++++++++++++++++
 js/index.js   |   2 +
 3 files changed, 235 insertions(+)

diff --git a/css/style.css b/css/style.css
index 20ccbcb..0fec68f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -527,6 +527,46 @@ button.deactivate-beeline-active.disabled {
     margin: -6px 0 6px 20px;
 }
 
+/* help dialog */
+
+ul.keyboard-shortcuts {
+    margin: 0;
+    padding: 0;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+}
+
+ul.keyboard-shortcuts li {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0.4rem 1em;
+    font-size: 0.85rem;
+    border-top: 1px solid #ccc;
+}
+
+ul.keyboard-shortcuts li:first-of-type {
+    border-top: transparent;
+}
+
+.keyboard-shortcuts-key {
+    margin-left: 8px;
+    white-space: nowrap;
+}
+
+kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    border: solid 1px rgba(175, 184, 193, 0.2);
+    border-radius: 6px;
+    line-height: 10px;
+    vertical-align: middle;
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    color: #1f1f1f;
+    background-color: rgba(0, 123, 255, 0.07);
+    box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
+}
+
 /* Share Dialog */
 
 #share-qrcode-img img {
diff --git a/index.html b/index.html
index 87a23cd..50dfe4f 100644
--- a/index.html
+++ b/index.html
@@ -392,6 +392,15 @@
                         </p>
                     </div>
                     <div class="modal-footer">
+                        <button
+                            type="button"
+                            class="btn btn-secondary"
+                            data-i18n="keyboard-shortcuts.title"
+                            data-toggle="modal"
+                            data-target="#help"
+                        >
+                            Help/Keyboard shortcuts
+                        </button>
                         <button
                             type="button"
                             class="btn btn-secondary"
@@ -409,6 +418,190 @@
             </div>
         </div>
 
+        <!-- Help modal window -->
+        <div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="Help window" aria-hidden="true">
+            <div class="modal-dialog modal-fullscreen-md-down" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title" data-i18n="help.title">Help</h4>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <h5 data-i18n="help.keyboard-shortcuts">Keyboard Shortcuts</h5>
+                        <ul class="keyboard-shortcuts">
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-draw">
+                                    Enter draw mode
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>d</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-exit-draw">
+                                    Exit draw mode or close dialog
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>Esc</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-undo">
+                                    Remove last point from route (“undo”)
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>z</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-mute-route">
+                                    Hide route temporarily (as long as key is down, “mute”)
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>m</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-add-poi">
+                                    Add “Point of Interest” (<kbd>Esc</kbd> exits this mode)
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>p</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-zoom-map">Zoom map</div>
+                                <div class="keyboard-shortcuts-key"><kbd>+</kbd> <kbd>-</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-move-map">Move map</div>
+                                <div class="keyboard-shortcuts-key">
+                                    <kbd>←</kbd> <kbd>→</kbd> <kbd>↓</kbd> <kbd>↑</kbd>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-undo">
+                                    Center current position (geolocation)
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>l</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-undo">
+                                    Search for locations
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>f</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-undo">Reverse route</div>
+                                <div class="keyboard-shortcuts-key"><kbd>r</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-nogo">
+                                    Draw no-go area (<kbd>Esc</kbd> exits this mode)
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>n</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-nogo-load">
+                                    Load no-go area
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>Shift</kbd> <kbd>n</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-delete-route">
+                                    Delete route
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>Backspace</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-color-coding">
+                                    Cycle through color-coding modes
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>c</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-strava-layer">
+                                    Toggle Strava layer
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>s</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-elevation-profile">
+                                    Toggle elevation profile
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>e</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-profile-select">
+                                    Select routing profile
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>g</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-export">Export route</div>
+                                <div class="keyboard-shortcuts-key"><kbd>x</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-share" data-i18n="help.shortcut-share">Share route</div>
+                                <div class="keyboard-shortcuts-key"><kbd>a</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-load-track">
+                                    Load track
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>o</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-load-track-as-route">
+                                    Load track as route
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>Shift</kbd> <kbd>o</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-about">
+                                    Show “About” dialog
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>h</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-sidebar-toggle">
+                                    Toggle sidebar
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>t</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-sidebar-switch-tabs">
+                                    Cycle through tabs in sidebar
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>Shift</kbd> <kbd>t</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-allowed-zone">
+                                    Draw allowed zone
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>i</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-straight-line-toggle">
+                                    Toggle straight line (in draw mode)
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>b</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-desc" data-i18n="help.shortcut-straight-line-append">
+                                    Append straight line (in draw mode)
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>Shift</kbd> <kbd>click</kbd></div>
+                            </li>
+                            <li>
+                                <div class="keyboard-shortcuts-help" data-i18n="help.shortcut-help-dialog">
+                                    Open this help dialog
+                                </div>
+                                <div class="keyboard-shortcuts-key"><kbd>?</kbd></div>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" data-i18n="modal.close" data-dismiss="modal">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <!-- What's new modal window -->
         <div
             class="modal fade"
diff --git a/js/index.js b/js/index.js
index d22c72a..d426ecb 100644
--- a/js/index.js
+++ b/js/index.js
@@ -160,6 +160,8 @@
                     } else if (e.keyCode === 72) {
                         // char code for 'h'
                         $('#about').modal('show');
+                    } else if (e.key === '?') {
+                        $('#help').modal('show');
                     }
                 }
             },