ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add "Help" dialog which shows available keyboard shortcuts

Browse source 
Dialog can be toggled via button in "About" or via keyboard shortcut "?"
This commit is contained in:
Marcus Jaschen 2023-06-11 09:21:13 +02:00
parent bdb7d1f650
commit 4c276428a6
3 changed files with 235 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

40
css/style.css
View file

@ -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 {

193
index.html
View file

@ -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"

2
js/index.js
View file

@ -160,6 +160,8 @@
} else if (e.keyCode === 72) {
// char code for 'h'
$('#about').modal('show');
} else if (e.key === '?') {
$('#help').modal('show');
}
}
},