Added keyboard shortcuts!

This commit is contained in:
Robbie Antenesse 2016-03-11 12:25:12 -07:00
parent 9d9bba79d5
commit d7f1f2f1be
3 changed files with 252 additions and 14 deletions

View File

@ -66,7 +66,7 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
<input type="text" id="pronunciation" onkeydown="SubmitWordOnCtrlEnter(this)" /> <input type="text" id="pronunciation" onkeydown="SubmitWordOnCtrlEnter(this)" />
</label> </label>
<label><span>Part of Speech</span> <label><span>Part of Speech</span>
<select id="partOfSpeech"></select> <select id="partOfSpeech" onkeydown="SubmitWordOnCtrlEnter(this)"></select>
</label> </label>
<label><span>Equivalent Word(s)</span> <label><span>Equivalent Word(s)</span>
<input type="text" id="simpleDefinition" onkeydown="SubmitWordOnCtrlEnter(this)" /> <input type="text" id="simpleDefinition" onkeydown="SubmitWordOnCtrlEnter(this)" />

View File

@ -6,6 +6,111 @@ function ready(fn) {
} }
} }
// Get Keycode based on key name
function keyCodeFor(keyName) {
if (keyName == "backspace") return 8;
else if (keyName == "tab") return 9;
else if (keyName == "ctrlEnter") return 10;
else if (keyName == "enter") return 13;
else if (keyName == "shift") return 16;
else if (keyName == "ctrl") return 17;
else if (keyName == "alt") return 18;
else if (keyName == "pausebreak") return 19;
else if (keyName == "capslock") return 20;
else if (keyName == "escape") return 27;
else if (keyName == "space") return 32;
else if (keyName == "pageup") return 33;
else if (keyName == "pagedown") return 34;
else if (keyName == "end") return 35;
else if (keyName == "home") return 36;
else if (keyName == "left") return 37;
else if (keyName == "up") return 38;
else if (keyName == "right") return 39;
else if (keyName == "down") return 40;
else if (keyName == "insert") return 45;
else if (keyName == "del") return 46;
else if (keyName == "zero") return 48;
else if (keyName == "one") return 49;
else if (keyName == "two") return 50;
else if (keyName == "three") return 51;
else if (keyName == "four") return 52;
else if (keyName == "five") return 53;
else if (keyName == "six") return 54;
else if (keyName == "seven") return 55;
else if (keyName == "eight") return 56;
else if (keyName == "nine") return 57;
else if (keyName == "a") return 65;
else if (keyName == "b") return 66;
else if (keyName == "c") return 67;
else if (keyName == "d") return 68;
else if (keyName == "e") return 69;
else if (keyName == "f") return 70;
else if (keyName == "g") return 71;
else if (keyName == "h") return 72;
else if (keyName == "i") return 73;
else if (keyName == "j") return 74;
else if (keyName == "k") return 75;
else if (keyName == "l") return 76;
else if (keyName == "m") return 77;
else if (keyName == "n") return 78;
else if (keyName == "o") return 79;
else if (keyName == "p") return 80;
else if (keyName == "q") return 81;
else if (keyName == "r") return 82;
else if (keyName == "s") return 83;
else if (keyName == "t") return 84;
else if (keyName == "u") return 85;
else if (keyName == "v") return 86;
else if (keyName == "w") return 87;
else if (keyName == "x") return 88;
else if (keyName == "y") return 89;
else if (keyName == "z") return 90;
else if (keyName == "leftwinkey") return 91;
else if (keyName == "rightwinkey") return 92;
else if (keyName == "selectkey") return 93;
else if (keyName == "numpad_0") return 96;
else if (keyName == "numpad_1") return 97;
else if (keyName == "numpad_2") return 98;
else if (keyName == "numpad_3") return 99;
else if (keyName == "numpad_4") return 100;
else if (keyName == "numpad_5") return 101;
else if (keyName == "numpad_6") return 102;
else if (keyName == "numpad_7") return 103;
else if (keyName == "numpad_8") return 104;
else if (keyName == "numpad_9") return 105;
else if (keyName == "numpad_asterisk") return 106;
else if (keyName == "numpad_plus") return 107;
else if (keyName == "numpad_dash") return 109;
else if (keyName == "numpad_period") return 110;
else if (keyName == "numpad_slash") return 111;
else if (keyName == "f1") return 112;
else if (keyName == "f2") return 113;
else if (keyName == "f3") return 114;
else if (keyName == "f4") return 115;
else if (keyName == "f5") return 116;
else if (keyName == "f6") return 117;
else if (keyName == "f7") return 118;
else if (keyName == "f8") return 119;
else if (keyName == "f9") return 120;
else if (keyName == "f10") return 121;
else if (keyName == "f11") return 122;
else if (keyName == "f12") return 123;
else if (keyName == "numlock") return 144;
else if (keyName == "scrolllock") return 145;
else if (keyName == "semicolon") return 186;
else if (keyName == "equal") return 187;
else if (keyName == "comma") return 188;
else if (keyName == "dash") return 189;
else if (keyName == "period") return 190;
else if (keyName == "slash") return 191;
else if (keyName == "grave") return 192;
else if (keyName == "openbracket") return 219;
else if (keyName == "backslash") return 220;
else if (keyName == "closebraket") return 221;
else if (keyName == "quote") return 222;
else return false;
}
function getInputSelection(el) { function getInputSelection(el) {
// Retrieved from http://stackoverflow.com/a/4207763 // Retrieved from http://stackoverflow.com/a/4207763
var start = 0, end = 0, normalizedValue, range, var start = 0, end = 0, normalizedValue, range,

157
js/ui.js
View File

@ -8,6 +8,124 @@ function Initialize() {
GetTextFile("PRIVACY.md", "privacyText", true); GetTextFile("PRIVACY.md", "privacyText", true);
GetTextFile("LOGIN.form", "loginForm", false); GetTextFile("LOGIN.form", "loginForm", false);
GetTextFile("FORGOT.form", "forgotForm", false); GetTextFile("FORGOT.form", "forgotForm", false);
SetKeyboardShortcuts();
}
function SetKeyboardShortcuts() {
document.addEventListener("keydown", function(e) {
var keyCode = (e.which ? e.which : e.keyCode);
if (keyCode == keyCodeFor("escape")) {
if (document.getElementById("infoScreen").style.display == "block") {
HideInfo();
}
else if (document.getElementById("fullScreenTextboxScreen").style.display == "block") {
HideFullScreenTextbox();
}
else if (document.getElementById("settingsScreen").style.display == "block") {
HideSettings();
}
else if (document.getElementById("accountSettingsScreen") && document.getElementById("accountSettingsScreen").style.display == "block") {
HideAccountSettings();
}
}
else if (e.ctrlKey) {
// Only allow shortcuts if not currently using fullscreen textbox
if (document.getElementById("fullScreenTextboxScreen").style.display == "none") {
if (keyCode == keyCodeFor("m")) {
if (document.activeElement.id == "longDefinition") {
e.preventDefault();
ShowFullScreenTextbox('longDefinition', 'Explanation/Long Definition');
}
else if (document.activeElement.id == "dictionaryDescriptionEdit") {
e.preventDefault();
ShowFullScreenTextbox('dictionaryDescriptionEdit', 'Dictionary Details');
}
else if (document.activeElement.id == "fullScreenTextbox") {
e.preventDefault();
HideFullScreenTextbox();
}
}
else if (keyCode == keyCodeFor("u")) {
e.preventDefault();
ToggleWordFormLock();
}
else if (keyCode == keyCodeFor("d")) {
e.preventDefault();
ToggleDescription();
}
else if ((e.shiftKey && keyCode == keyCodeFor("s")) || keyCode == keyCodeFor("e")) {
e.preventDefault();
ExportDictionary();
}
else if (keyCode == keyCodeFor("s")) {
e.preventDefault();
//ToggleSearchFilter();
var searchFilterToggle = document.getElementById("searchFilterToggle");
var searchFilterArea = document.getElementById("searchFilterArea");
if (searchFilterArea.style.display == "none") {
searchFilterArea.style.display = "block";
searchFilterToggle.innerHTML = "Hide Search/Filter Options";
}
document.getElementById("searchBox").focus();
}
else if (keyCode == keyCodeFor("h")) {
e.preventDefault();
ShowInfo('aboutText');
}
}
else { //If the fullscreen editor *is* open, just prevent the others for consistent behavior.
if (keyCode == keyCodeFor("m")) {
e.preventDefault();
HideFullScreenTextbox();
}
else if (keyCode == keyCodeFor("u")) {
e.preventDefault();
}
else if (keyCode == keyCodeFor("d")) {
e.preventDefault();
}
else if ((e.shiftKey && keyCode == keyCodeFor("s")) || keyCode == keyCodeFor("e")) {
e.preventDefault();
}
else if (keyCode == keyCodeFor("s")) {
e.preventDefault();
}
else if (keyCode == keyCodeFor("h")) {
e.preventDefault();
}
}
}
else if (e.altKey) {
// Only toggle screens if not currently using fullscreen textbox
if (document.getElementById("fullScreenTextboxScreen").style.display == "none") {
if (keyCode == keyCodeFor("s")) {
e.preventDefault();
ToggleSettingsScreen(true);
}
else if (keyCode == keyCodeFor("a")) {
e.preventDefault();
ToggleAccountSettings();
}
}
}
}, false);
}
function SubmitWordOnCtrlEnter(keypress) {
var keyCode = (event.which ? event.which : event.keyCode);
if (keyCode === keyCodeFor("ctrlEnter") || (keyCode == keyCodeFor("enter") && event.ctrlKey)) { //Windows and Linux Chrome accept ctrl+enter as keyCode 10.
event.preventDefault();
AddWord();
if (document.getElementById("newWordButtonArea").style.display == "none" && document.getElementById("editWordButtonArea").style.display == "none") {
document.getElementById("updateConfirmButton").focus();
}
}
} }
function LoadUserDictionaries() { function LoadUserDictionaries() {
@ -260,18 +378,6 @@ function CloseUpdateConflictArea(displayId) {
EnableForm(); EnableForm();
} }
function SubmitWordOnCtrlEnter(keypress) {
var keyCode = (event.which ? event.which : event.keyCode);
if (keyCode === 10 || (keyCode == 13 && event.ctrlKey)) { //Windows and Linux Chrome accept ctrl+enter as keyCode 10.
AddWord();
if (document.getElementById("newWordButtonArea").style.display == "none" && document.getElementById("editWordButtonArea").style.display == "none") {
document.getElementById("updateConfirmButton").focus();
}
}
}
function DisableForm() { function DisableForm() {
document.getElementById("word").disabled = true; document.getElementById("word").disabled = true;
document.getElementById("pronunciation").disabled = true; document.getElementById("pronunciation").disabled = true;
@ -350,8 +456,22 @@ function HideInfo() {
document.getElementById("infoScreen").style.display = "none"; document.getElementById("infoScreen").style.display = "none";
} }
function ToggleAccountSettings() {
if (document.getElementById("accountSettingsScreen")) {
var accountScreen = document.getElementById("accountSettingsScreen");
if (accountScreen.style.display == "block") {
HideAccountSettings();
} else {
ShowAccountSettings();
}
}
}
function ShowAccountSettings(variableName) { function ShowAccountSettings(variableName) {
if (document.getElementById("accountSettingsScreen"))
document.getElementById("accountSettingsScreen").style.display = "block"; document.getElementById("accountSettingsScreen").style.display = "block";
HideInfo(); HideInfo();
} }
@ -360,6 +480,19 @@ function HideAccountSettings() {
document.getElementById("accountSettingsScreen").style.display = "none"; document.getElementById("accountSettingsScreen").style.display = "none";
} }
function ToggleSettingsScreen(doSave) {
var settingsScreen = document.getElementById("settingsScreen");
if (settingsScreen.style.display == "block") {
if (doSave) {
SaveSettings();
}
HideSettings();
} else {
ShowSettings();
}
}
function ShowSettings() { function ShowSettings() {
document.getElementById("settingsScreen").style.display = "block"; document.getElementById("settingsScreen").style.display = "block";
document.getElementById("dictionaryNameEdit").value = htmlEntitiesParse(currentDictionary.name); document.getElementById("dictionaryNameEdit").value = htmlEntitiesParse(currentDictionary.name);