diff --git a/README.md b/README.md index 149ea1fc..40914536 100644 --- a/README.md +++ b/README.md @@ -354,6 +354,7 @@ the main tabs in the ui ## hotkeys the browser has the following hotkeys (always qwerty) +* `?` show hotkeys help * `B` toggle breadcrumbs / [navpane](#navpane) * `I/K` prev/next folder * `M` parent folder (or unexpand current) @@ -361,6 +362,7 @@ the browser has the following hotkeys (always qwerty) * `G` toggle list / [grid view](#thumbnails) -- same as `田` bottom-right * `T` toggle thumbnails / icons * `ESC` close various things +* `ctrl-K` delete selected files/folders * `ctrl-X` cut selected files/folders * `ctrl-V` paste * `F2` [rename](#batch-rename) selected file/folder diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js index 0a826ca4..1f3b0c92 100644 --- a/copyparty/web/baguettebox.js +++ b/copyparty/web/baguettebox.js @@ -246,7 +246,13 @@ window.baguetteBox = (function () { } function keyDownHandler(e) { - if (anymod(e, true) || modal.busy) + if (modal.busy) + return; + + if (e.key == '?') + return halp(); + + if (anymod(e, true)) return; var k = e.code + '', v = vid(), pos = -1; diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 97571fcf..da010a7e 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -1805,6 +1805,28 @@ a.btn, -ms-user-select: none; user-select: none; } +#hkhelp { + background: var(--bg); +} +#hkhelp table { + margin: 2em 2em 0 2em; + float: left; +} +#hkhelp th { + border-bottom: 1px solid var(--bg-u5); + background: var(--bg-u1); + font-weight: bold; + text-align: right; +} +#hkhelp tr+tr th { + border-top: 1.5em solid var(--bg); +} +#hkhelp td { + padding: .2em .3em; +} +#hkhelp td:first-child { + font-family: 'scp', monospace, monospace; +} diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 6d5e2ce8..917dc5d9 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -25,6 +25,64 @@ var Ls = { "hz": "sample rate" }, + "hks": [ + [ + "misc", + ["ESC", "close various things"], + + "file-manager", + ["G", "toggle list / grid view"], + ["T", "toggle thumbnails / icons"], + ["🡅 A/D", "thumbnail size"], + ["ctrl-K", "delete selected"], + ["ctrl-X", "cut selected"], + ["ctrl-V", "paste into folder"], + ["F2", "rename selected"], + + "file-list-sel", + ["space", "toggle file selection"], + ["🡑/🡓", "move selection cursor"], + ["ctrl 🡑/🡓", "move cursor and viewport"], + ["🡅 🡑/🡓", "select prev/next file"], + ["ctrl-A", "select all files / folders"], + ], [ + "navigation", + ["B", "toggle breadcrumbs / navpane"], + ["I/K", "prev/next folder"], + ["M", "parent folder (or unexpand current)"], + ["V", "toggle folders / textfiles in navpane"], + ["A/D", "navpane size"], + ], [ + "audio-player", + ["J/L", "prev/next song"], + ["U/O", "skip 10sec back/fwd"], + ["0..9", "jump to 0%..90%"], + ["P", "play/pause (also initiates)"], + ["Y", "download song"], + ], [ + "image-viewer", + ["J/L, ←/→", "prev/next pic"], + ["Home/End", "first/last pic"], + ["F", "fullscreen"], + ["R", "rotate clockwise"], + ["🡅 R", "rotate ccw"], + ["Y", "download pic"], + ], [ + "video-player", + ["U/O", "skip 10sec back/fwd"], + ["P/K/Space", "play/pause"], + ["C", "continue playing next"], + ["V", "loop"], + ["M", "mute"], + ["[ and ]", "set loop interval"], + ], [ + "textfile-viewer", + ["I/K", "prev/next file"], + ["M", "close textfile"], + ["S", "select file (for cut/rename)"], + ] + ], + "m_ok": "OK", "m_ng": "Cancel", @@ -399,6 +457,64 @@ var Ls = { "hz": "lyd-oppløsning" }, + "hks": [ + [ + "ymse", + ["ESC", "lukk saker og ting"], + + "filbehandler", + ["G", "listevisning eller ikoner"], + ["T", "miniatyrbilder på/av"], + ["🡅 A/D", "ikonstørrelse"], + ["ctrl-K", "slett valgte"], + ["ctrl-X", "klipp ut"], + ["ctrl-V", "lim inn"], + ["F2", "endre navn på valgte"], + + "filmarkering", + ["space", "marker fil"], + ["🡑/🡓", "flytt markør"], + ["ctrl 🡑/🡓", "flytt markør og scroll"], + ["🡅 🡑/🡓", "velg forr./neste fil"], + ["ctrl-A", "velg alle filer / mapper"], + ], [ + "navigering", + ["B", "mappehierarki eller filsti"], + ["I/K", "forr./neste mappe"], + ["M", "ett nivå opp (eller lukk)"], + ["V", "vis mapper eller tekstfiler"], + ["A/D", "panelstørrelse"], + ], [ + "musikkspiller", + ["J/L", "forr./neste sang"], + ["U/O", "hopp 10sek bak/frem"], + ["0..9", "hopp til 0%..90%"], + ["P", "pause, eller start / fortsett"], + ["Y", "last ned sang"], + ], [ + "bildeviser", + ["J/L, ←/→", "forr./neste bilde"], + ["Home/End", "første/siste bilde"], + ["F", "fullskjermvisning"], + ["R", "rotere mot høyre"], + ["🡅 R", "rotere mot venstre"], + ["Y", "last ned bilde"], + ], [ + "videospiller", + ["U/O", "hopp 10sek bak/frem"], + ["P/K/Space", "pause / fortsett"], + ["C", "fortsett til neste fil"], + ["V", "gjenta avspilling"], + ["M", "lyd av/på"], + ["[ og ]", "gjentaksintervall"], + ], [ + "dokumentviser", + ["I/K", "forr./neste fil"], + ["M", "lukk tekstdokument"], + ["S", "velg fil (for F2/ctrl-x/...)"] + ] + ], + "m_ok": "OK", "m_ng": "Avbryt", @@ -4105,6 +4221,31 @@ function tree_up() { } +function hkhelp() { + var html = []; + for (var ic = 0; ic < L.hks.length; ic++) { + var c = L.hks[ic]; + html.push(''); + for (var a = 0; a < c.length; a++) + try { + if (c[a].length != 2) + html.push(''); + else + html.push(''.format(c[a][0], c[a][1])); + } + catch (ex) { + html.push(">>> " + c[a]); + } + + html.push('
' + esc(c[a]) + '
{0}{1}
'); + } + qsr('#hkhelp'); + var o = mknod('div', 'hkhelp'); + o.innerHTML = html.join('\n'); + document.body.appendChild(o); +} + + document.onkeydown = function (e) { if (e.altKey || e.isComposing) return; @@ -4116,9 +4257,15 @@ document.onkeydown = function (e) { ae = document.activeElement, aet = ae && ae != document.body ? ae.nodeName.toLowerCase() : ''; + if (e.key == '?') + return hkhelp(); + if (k == 'Escape') { ae && ae.blur(); + if (ebi('hkhelp')) + return qsr('#hkhelp'); + if (ebi('rn_cancel')) return ebi('rn_cancel').click(); diff --git a/copyparty/web/md.css b/copyparty/web/md.css index 07dbf8f6..0b1cd49c 100644 --- a/copyparty/web/md.css +++ b/copyparty/web/md.css @@ -4,6 +4,12 @@ html, body { font-family: sans-serif; line-height: 1.5em; } +html.y #helpbox a { + color: #079; +} +html.z #helpbox a { + color: #fc5; +} #repl { position: absolute; top: 0; diff --git a/copyparty/web/ui.css b/copyparty/web/ui.css index 0c6f8256..4665655d 100644 --- a/copyparty/web/ui.css +++ b/copyparty/web/ui.css @@ -202,6 +202,7 @@ html.y #tth { border: .4em solid var(--fg); box-shadow: 0 2em 4em 1em var(--bg-max); } +#hkhelp, #modal { position: fixed; overflow: auto;