Adds ability for user to use Meta key instead of alt for keybindings

- includes dynamically updating keybinding list
This commit is contained in:
Matt C 2017-11-04 12:55:28 +00:00
parent d924ede9cf
commit 8b30fdf7f1
4 changed files with 99 additions and 75 deletions

View File

@ -23,7 +23,9 @@ const BindingsWaiter = function (app, manager) {
* @param {event} e
*/
BindingsWaiter.prototype.parseInput = function(e) {
if (e.ctrlKey && e.altKey) {
let modKey = e.altKey;
if (this.app.options.useMetaKey) modKey = e.metaKey;
if (e.ctrlKey && modKey) {
let elem;
switch (e.code) {
case "KeyF":
@ -115,4 +117,88 @@ BindingsWaiter.prototype.parseInput = function(e) {
}
};
/**
* Updates keybinding list when metaKey option is toggled
*
*/
BindingsWaiter.prototype.updateKeybList = function() {
let modWinLin = "Alt";
let modMac = "Opt";
if (this.app.options.useMetaKey) {
modWinLin = "Win";
modMac = "Cmd";
}
document.getElementById("keybList").innerHTML = `
<tr>
<td><b>Command</b></td>
<td><b>Shortcut (Win/Linux)</b></td>
<td><b>Shortcut (Mac)</b></td>
</tr>
<tr>
<td>Place cursor in search field</td>
<td>Ctrl+${modWinLin}+f</td>
<td>Ctrl+${modMac}+f</td>
<tr>
<td>Place cursor in input box</td>
<td>Ctrl+${modWinLin}+i</td>
<td>Ctrl+${modMac}+i</td>
</tr>
<tr>
<td>Place cursor in output box</td>
<td>Ctrl+${modWinLin}+o</td>
<td>Ctrl+${modMac}+o</td>
</tr>
<tr>
<td>Place cursor in first argument field<br>of the next operation in the recipe</td>
<td>Ctrl+${modWinLin}+.</td>
<td>Ctrl+${modMac}+.</td>
</tr>
<tr>
<td>Place cursor in first argument field<br>of the nth operation in the recipe</td>
<td>Ctrl+${modWinLin}+[1-9]</td>
<td>Ctrl+${modMac}+[1-9]</td>
</tr>
<tr>
<td>Disable current operation</td>
<td>Ctrl+${modWinLin}+d</td>
<td>Ctrl+${modMac}+d</td>
</tr>
<tr>
<td>Set/clear breakpoint</td>
<td>Ctrl+${modWinLin}+b</td>
<td>Ctrl+${modMac}+b</td>
</tr>
<tr>
<td>Bake</td>
<td>Ctrl+${modWinLin}+Space</td>
<td>Ctrl+${modMac}+Space</td>
</tr>
<tr>
<td>Step</td>
<td>Ctrl+${modWinLin}+'</td>
<td>Ctrl+${modMac}+'</td>
</tr>
<tr>
<td>Clear recipe</td>
<td>Ctrl+${modWinLin}+c</td>
<td>Ctrl+${modMac}+c</td>
</tr>
<tr>
<td>Save to file</td>
<td>Ctrl+${modWinLin}+s</td>
<td>Ctrl+${modMac}+s</td>
</tr>
<tr>
<td>Load recipe</td>
<td>Ctrl+${modWinLin}+l</td>
<td>Ctrl+${modMac}+l</td>
</tr>
<tr>
<td>Move output to input</td>
<td>Ctrl+${modWinLin}+m</td>
<td>Ctrl+${modMac}+m</td>
</tr>
`;
};
export default BindingsWaiter;

View File

@ -78,6 +78,7 @@ Manager.prototype.setup = function() {
this.recipe.initialiseOperationDragNDrop();
this.controls.autoBakeChange();
this.seasonal.load();
this.bindings.updateKeybList();
};
@ -91,7 +92,6 @@ Manager.prototype.initialiseEventListeners = function() {
window.addEventListener("focus", this.window.windowFocus.bind(this.window));
window.addEventListener("statechange", this.app.stateChange.bind(this.app));
window.addEventListener("popstate", this.app.popState.bind(this.app));
window.addEventListener("keydown", this.bindings.parseInput.bind(this.bindings));
// Controls
document.getElementById("bake").addEventListener("click", this.controls.bakeClick.bind(this.controls));
document.getElementById("auto-bake").addEventListener("change", this.controls.autoBakeChange.bind(this.controls));
@ -166,6 +166,10 @@ Manager.prototype.initialiseEventListeners = function() {
this.addDynamicListener(".option-item select", "change", this.options.selectChange, this.options);
document.getElementById("theme").addEventListener("change", this.options.themeChange.bind(this.options));
//Keybindings
window.addEventListener("keydown", this.bindings.parseInput.bind(this.bindings));
$(document).on("switchChange.bootstrapSwitch", ".option-item input:checkbox#useMetaKey", this.bindings.updateKeybList.bind(this.bindings));
// Misc
document.getElementById("alert-close").addEventListener("click", this.app.alertCloseClick.bind(this.app));
};

View File

@ -325,6 +325,10 @@
<input type="checkbox" option="showErrors" id="showErrors" checked />
<label for="showErrors"> Operation error reporting (recommended) </label>
</div>
<div class="option-item">
<input type="checkbox" option="useMetaKey" id="useMetaKey" />
<label for="errorTimeout"> Use meta (Windows/Command ⌘) key for keybindings </label>
</div>
<div class="option-item">
<input type="number" option="errorTimeout" id="errorTimeout" />
<label for="errorTimeout"> Operation error timeout in ms (0 for never) </label>
@ -402,8 +406,7 @@
About
</a></li>
<li role="presentation"><a href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
<!-- Icon is a placeholder -->
<img aria-hidden="true" src="<%- require('../static/images/code-16x16.png') %>" alt="Code Icon"/>
<img aria-hidden="true" src="<%- require('../static/images/code-16x16.png') %>" alt="List Icon"/>
Keybindings
</a></li>
</ul>
@ -482,77 +485,7 @@
<p>Its the Cyber Swiss Army Knife.</p>
</div>
<div role="tabpanel" class="tab-pane" id="keybindings" style="padding: 20px;">
<table class="table table-condensed table-bordered">
<tr>
<td><b>Command</b></td>
<td><b>Shortcut (Win/Linux)</b></td>
<td><b>Shortcut (Mac)</b></td>
</tr>
<tr>
<td>Place cursor in search field</td>
<td>Ctrl+Alt+f</td>
<td>Ctrl+Opt+f</td>
<tr>
<td>Place cursor in input box</td>
<td>Ctrl+Alt+i</td>
<td>Ctrl+Opt+i</td>
</tr>
<tr>
<td>Place cursor in output box</td>
<td>Ctrl+Alt+o</td>
<td>Ctrl+Opt+o</td>
</tr>
<tr>
<td>Place cursor in first argument field<br>of the next operation in the recipe</td>
<td>Ctrl+Alt+.</td>
<td>Ctrl+Opt+.</td>
</tr>
<tr>
<td>Place cursor in first argument field<br>of the nth operation in the recipe</td>
<td>Ctrl+Alt+[1-9]</td>
<td>Ctrl+Opt+[1-9]</td>
</tr>
<tr>
<td>Disable current operation</td>
<td>Ctrl+Alt+d</td>
<td>Ctrl+Opt+d</td>
</tr>
<tr>
<td>Set/clear breakpoint</td>
<td>Ctrl+Alt+b</td>
<td>Ctrl+Opt+b</td>
</tr>
<tr>
<td>Bake</td>
<td>Ctrl+Alt+Space</td>
<td>Ctrl+Opt+Space</td>
</tr>
<tr>
<td>Step</td>
<td>Ctrl+Alt+'</td>
<td>Ctrl+Opt+'</td>
</tr>
<tr>
<td>Clear recipe</td>
<td>Ctrl+Alt+c</td>
<td>Ctrl+Opt+c</td>
</tr>
<tr>
<td>Save to file</td>
<td>Ctrl+Alt+s</td>
<td>Ctrl+Opt+s</td>
</tr>
<tr>
<td>Load recipe</td>
<td>Ctrl+Alt+l</td>
<td>Ctrl+Opt+l</td>
</tr>
<tr>
<td>Move output to input</td>
<td>Ctrl+Alt+m</td>
<td>Ctrl+Opt+m</td>
</tr>
</table>
<table class="table table-condensed table-bordered" id="keybList"></table>
</div>
</div>
</div>

View File

@ -46,6 +46,7 @@ function main() {
errorTimeout: 4000,
attemptHighlight: true,
theme: "classic",
useMetaKey: false
};
document.removeEventListener("DOMContentLoaded", main, false);