Edit words in their dictionary position instead of jumping to word form. It's janky, but it works.

This commit is contained in:
Robbie Antenesse 2016-06-07 11:44:36 -06:00
parent d3abf62c3b
commit dec8be6dff
2 changed files with 76 additions and 46 deletions

View File

@ -34,7 +34,7 @@ function AddWord() {
var partOfSpeech = htmlEntities(document.getElementById("partOfSpeech").value).trim(); var partOfSpeech = htmlEntities(document.getElementById("partOfSpeech").value).trim();
var simpleDefinition = htmlEntities(document.getElementById("simpleDefinition").value).trim(); var simpleDefinition = htmlEntities(document.getElementById("simpleDefinition").value).trim();
var longDefinition = htmlEntities(document.getElementById("longDefinition").value); var longDefinition = htmlEntities(document.getElementById("longDefinition").value);
var editIndex = htmlEntities(document.getElementById("editIndex").value); // var editIndex = htmlEntities(document.getElementById("editIndex").value);
var errorMessageArea = document.getElementById("errorMessage"); var errorMessageArea = document.getElementById("errorMessage");
var errorMessage = ""; var errorMessage = "";
var updateConflictArea = document.getElementById("updateConflict"); var updateConflictArea = document.getElementById("updateConflict");
@ -42,23 +42,7 @@ function AddWord() {
if (word != "" && (simpleDefinition != "" || longDefinition != "")) { if (word != "" && (simpleDefinition != "" || longDefinition != "")) {
var wordIndex = (!currentDictionary.settings.allowDuplicates) ? WordIndex(word) : -1; var wordIndex = (!currentDictionary.settings.allowDuplicates) ? WordIndex(word) : -1;
if (editIndex != "") { if (wordIndex >= 0) {
if (WordAtIndexWasChanged(editIndex, word, pronunciation, partOfSpeech, simpleDefinition, longDefinition)) {
document.getElementById("editWordButtonArea").style.display = "none";
DisableForm();
updateConflictArea.style.display = "block";
updateConflictArea.innerHTML = "<span id='updateConflictMessage'>Do you really want to change the word \"" + currentDictionary.words[parseInt(editIndex)].name + "\" to what you have set above?</span>";
updateConflictArea.innerHTML += '<button type="button" id="updateConfirmButton" \
onclick="UpdateWord(' + editIndex + ', \'' + htmlEntities(word) + '\', \'' + htmlEntities(pronunciation) + '\', \'' + htmlEntities(partOfSpeech) + '\', \'' + htmlEntities(simpleDefinition) + '\', \'' + htmlEntities(longDefinition) + '\'); \
return false;">Yes, Update it</button>';
updateConflictArea.innerHTML += '<button type="button" id="updateCancelButton" onclick="CloseUpdateConflictArea(\'editWordButtonArea\'); return false;">No, Leave it</button>';
} else {
errorMessage = "No change has been made to \"" + word + "\"";
if (currentDictionary.words[parseInt(editIndex)].name != word) {
errorMessage += ". (Your dictionary is currently set to ignore case.)"
}
}
} else if (wordIndex >= 0) {
if (WordAtIndexWasChanged(wordIndex, word, pronunciation, partOfSpeech, simpleDefinition, longDefinition)) { if (WordAtIndexWasChanged(wordIndex, word, pronunciation, partOfSpeech, simpleDefinition, longDefinition)) {
document.getElementById("newWordButtonArea").style.display = "none"; document.getElementById("newWordButtonArea").style.display = "none";
DisableForm(); DisableForm();
@ -74,7 +58,7 @@ function AddWord() {
updateConflictText += '<button type="button" id="updateConfirmButton" \ updateConflictText += '<button type="button" id="updateConfirmButton" \
onclick="UpdateWord(' + wordIndex + ', \'' + htmlEntities(word) + '\', \'' + htmlEntities(pronunciation) + '\', \'' + htmlEntities(partOfSpeech) + '\', \'' + htmlEntities(simpleDefinition) + '\', \'' + htmlEntities(longDefinition) + '\'); \ onclick="UpdateWord(' + wordIndex + ', \'' + htmlEntities(word) + '\', \'' + htmlEntities(pronunciation) + '\', \'' + htmlEntities(partOfSpeech) + '\', \'' + htmlEntities(simpleDefinition) + '\', \'' + htmlEntities(longDefinition) + '\'); \
return false;">Yes, Update it</button>'; return false;">Yes, Update it</button>';
updateConflictText += ' <button type="button" id="updateCancelButton" onclick="CloseUpdateConflictArea(\'newWordButtonArea\'); return false;">No, Leave it</button>'; updateConflictText += ' <button type="button" id="updateCancelButton" onclick="CloseUpdateConflictArea(\'newWordButtonArea\', \'updateConflict\'); return false;">No, Leave it</button>';
updateConflictArea.innerHTML = updateConflictText; updateConflictArea.innerHTML = updateConflictText;
} else { } else {
@ -107,23 +91,70 @@ function AddWord() {
errorMessageArea.innerHTML = errorMessage; errorMessageArea.innerHTML = errorMessage;
} }
function EditWord(index) { function ShowWordEditForm(index) {
SaveScroll(); var indexString = index.toString(); // Variable for reduced processing
if (wordFormIsLocked()) { var word = currentDictionary.words[index]; // Reference for easier reading
window.scroll(0, 0); var editForm = '<form id="editForm' + indexString + '">\
<h2>Editing ' + htmlEntitiesParse(word.name) + '</h2>\
<label><span>Word</span>\
<input type="text" id="word' + indexString + '" value="' + htmlEntitiesParse(word.name) + '" onkeydown="SubmitWordOnCtrlEnter(this)" />\
</label>\
<label><span>Pronunciation <a class="helperlink" href="/ipa_character_picker/" target="_blank" title="IPA Character Picker backed up from http://r12a.github.io/pickers/ipa/">IPA Characters</a></span>\
<input type="text" id="pronunciation' + indexString + '" value="' + htmlEntitiesParse(word.pronunciation) + '" onkeydown="SubmitWordOnCtrlEnter(this)" />\
</label>\
<label><span>Part of Speech</span>\
<select id="partOfSpeech' + indexString + '" value="' + htmlEntitiesParse(word.partOfSpeech) + '" onkeydown="SubmitWordOnCtrlEnter(this)"></select>\
</label>\
<label><span>Equivalent Word(s)</span>\
<input type="text" id="simpleDefinition' + indexString + '" value="' + htmlEntitiesParse(word.simpleDefinition) + '" onkeydown="SubmitWordOnCtrlEnter(this)" />\
</label>\
<label><span>Explanation/Long Definition <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox(\'longDefinition' + indexString + '\', \'Explanation/Long Definition\')">Maximize</span></span>\
<textarea id="longDefinition' + indexString + '" onkeydown="SubmitWordOnCtrlEnter(this)">' + htmlEntitiesParse(word.longDefinition) + '</textarea>\
</label>\
<span id="errorMessage' + indexString + '"></span>\
<div id="editWordButtonArea' + indexString + '" style="display: block;">\
<button type="button" onclick="EditWord(\'' + indexString + '\'); return false;">Edit Word</button> <button type="button" onclick="CancelEditForm(' + indexString + '); return false;">Cancel</button>\
</div>\
<div id="updateConflict' + indexString + '" style="display: none;"></div>\
</form>';
document.getElementById("entry" + indexString).innerHTML = editForm;
SetPartsOfSpeech("partOfSpeech" + indexString);
} }
ClearForm(); function CancelEditForm(index) {
document.getElementById("entry" + index.toString()).innerHTML = DictionaryEntry(index).replace("<entry id='entry" + index.toString() + "'>", "").replace("</entry>", "");
}
document.getElementById("editIndex").value = index.toString(); function EditWord(indexString) {
document.getElementById("word").value = htmlEntitiesParse(currentDictionary.words[index].name); var word = htmlEntities(document.getElementById("word" + indexString).value).trim();
document.getElementById("pronunciation").value = htmlEntitiesParse(currentDictionary.words[index].pronunciation); var pronunciation = htmlEntities(document.getElementById("pronunciation" + indexString).value).trim();
document.getElementById("partOfSpeech").value = htmlEntitiesParse(currentDictionary.words[index].partOfSpeech); var partOfSpeech = htmlEntities(document.getElementById("partOfSpeech" + indexString).value).trim();
document.getElementById("simpleDefinition").value = htmlEntitiesParse(currentDictionary.words[index].simpleDefinition); var simpleDefinition = htmlEntities(document.getElementById("simpleDefinition" + indexString).value).trim();
document.getElementById("longDefinition").value = htmlEntitiesParse(currentDictionary.words[index].longDefinition); var longDefinition = htmlEntities(document.getElementById("longDefinition" + indexString).value);
// var editIndex = htmlEntities(document.getElementById("editIndex").value);
var errorMessageArea = document.getElementById("errorMessage" + indexString);
var errorMessage = "";
var updateConflictArea = document.getElementById("updateConflict" + indexString);
document.getElementById("newWordButtonArea").style.display = "none"; if (WordAtIndexWasChanged(indexString, word, pronunciation, partOfSpeech, simpleDefinition, longDefinition)) {
document.getElementById("editWordButtonArea").style.display = "block"; document.getElementById("editWordButtonArea" + indexString).style.display = "none";
DisableForm();
updateConflictArea.style.display = "block";
updateConflictArea.innerHTML = "<span id='updateConflictMessage" + indexString + "'>Do you really want to change the word \"" + currentDictionary.words[parseInt(indexString)].name + "\" to what you have set above?</span>";
updateConflictArea.innerHTML += '<button type="button" id="updateConfirmButton' + indexString + '" \
onclick="UpdateWord(' + indexString + ', \'' + htmlEntities(word) + '\', \'' + htmlEntities(pronunciation) + '\', \'' + htmlEntities(partOfSpeech) + '\', \'' + htmlEntities(simpleDefinition) + '\', \'' + htmlEntities(longDefinition) + '\'); \
return false;">Yes, Update it</button>';
updateConflictArea.innerHTML += '<button type="button" id="updateCancelButton' + indexString + '" onclick="CloseUpdateConflictArea(\'editWordButtonArea' + indexString + '\',\'updateConflict' + indexString + '\'); return false;">No, Leave it</button>';
} else {
errorMessage = "No change has been made to \"" + word + "\"";
if (currentDictionary.words[parseInt(indexString)].name != word) {
errorMessage += ". (Your dictionary is currently set to ignore case.)";
}
}
errorMessageArea.innerHTML = errorMessage;
} }
function UpdateWord(wordIndex, word, pronunciation, partOfSpeech, simpleDefinition, longDefinition) { function UpdateWord(wordIndex, word, pronunciation, partOfSpeech, simpleDefinition, longDefinition) {
@ -219,7 +250,7 @@ function ShowDictionary() {
function DictionaryEntry(itemIndex) { function DictionaryEntry(itemIndex) {
displayPublic = (typeof displayPublic !== 'undefined' && displayPublic != null) ? displayPublic : false; displayPublic = (typeof displayPublic !== 'undefined' && displayPublic != null) ? displayPublic : false;
var entryText = "<entry><a name='" + currentDictionary.words[itemIndex].wordId + "'></a><a href='#" + currentDictionary.words[itemIndex].wordId + "' class='wordLink clickable'>&#x1f517;</a>"; var entryText = "<entry id='entry" + itemIndex.toString() + "'><a name='" + currentDictionary.words[itemIndex].wordId + "'></a><a href='#" + currentDictionary.words[itemIndex].wordId + "' class='wordLink clickable'>&#x1f517;</a>";
var searchTerm = regexParseForSearch(document.getElementById("searchBox").value); var searchTerm = regexParseForSearch(document.getElementById("searchBox").value);
var searchByWord = document.getElementById("searchOptionWord").checked; var searchByWord = document.getElementById("searchOptionWord").checked;
@ -290,7 +321,7 @@ function DictionaryEntry(itemIndex) {
function ManagementArea(itemIndex) { function ManagementArea(itemIndex) {
var managementHTML = "<div class='management'>"; var managementHTML = "<div class='management'>";
managementHTML += "<span class='clickable editButton' onclick='EditWord(" + itemIndex + ")'>Edit</span>"; managementHTML += "<span class='clickable editButton' onclick='ShowWordEditForm(" + itemIndex + ")'>Edit</span>";
managementHTML += "<span class='clickable deleteButton' onclick='document.getElementById(\"delete" + itemIndex + "Confirm\").style.display = \"block\";'>Delete</span>"; managementHTML += "<span class='clickable deleteButton' onclick='document.getElementById(\"delete" + itemIndex + "Confirm\").style.display = \"block\";'>Delete</span>";
managementHTML += "<div class='deleteConfirm' id='delete" + itemIndex + "Confirm' style='display:none;'>Are you sure you want to delete this entry?<br><br>"; managementHTML += "<div class='deleteConfirm' id='delete" + itemIndex + "Confirm' style='display:none;'>Are you sure you want to delete this entry?<br><br>";
@ -387,7 +418,7 @@ function SaveAndUpdateDictionary(keepFormContents) {
if (!keepFormContents) { if (!keepFormContents) {
ClearForm(); ClearForm();
} }
CloseUpdateConflictArea('newWordButtonArea'); CloseUpdateConflictArea('newWordButtonArea', 'updateConflict');
} }
function SaveDictionary(sendToDatabase, sendWords) { function SaveDictionary(sendToDatabase, sendWords) {

View File

@ -369,12 +369,12 @@ function LockWordForm() {
wordForm.removeAttribute('style'); wordForm.removeAttribute('style');
} }
function CloseUpdateConflictArea(displayId) { function CloseUpdateConflictArea(displayId, hideId) {
displayId = (typeof displayId !== 'undefined' && displayId != null) ? displayId : false; displayId = (typeof displayId !== 'undefined' && displayId != null) ? displayId : false;
if (displayId != false) { if (displayId != false) {
document.getElementById(displayId).style.display = "block"; document.getElementById(displayId).style.display = "block";
} }
document.getElementById("updateConflict").style.display = "none"; document.getElementById(hideId).style.display = "none";
EnableForm(); EnableForm();
} }
@ -579,19 +579,18 @@ function TogglePublicLink() {
} }
} }
function SetPartsOfSpeech () { function SetPartsOfSpeech (selectId) {
var partsOfSpeechSelect = document.getElementById("partOfSpeech"); selectId = (typeof selectId !== 'undefined') ? selectId : "partOfSpeech";
var partsOfSpeechSelect = document.getElementById(selectId);
var wordFilterOptions = document.getElementById("filterOptions"); var wordFilterOptions = document.getElementById("filterOptions");
var wordFiltersSelected = GetSelectedFilters(); var wordFiltersSelected = GetSelectedFilters();
// Clear parts of speech. // Clear parts of speech.
if (partsOfSpeechSelect.options.length > 0) {
for (var i = partsOfSpeechSelect.options.length - 1; i >= 0; i--) { for (var i = partsOfSpeechSelect.options.length - 1; i >= 0; i--) {
partsOfSpeechSelect.removeChild(partsOfSpeechSelect.options[i]); partsOfSpeechSelect.removeChild(partsOfSpeechSelect.options[i]);
} }
wordFilterOptions.innerHTML = ""; wordFilterOptions.innerHTML = "";
}
// Rebuild parts of speech // Rebuild parts of speech
var newPartsOfSpeech = htmlEntitiesParse(currentDictionary.settings.partsOfSpeech).trim().split(","); var newPartsOfSpeech = htmlEntitiesParse(currentDictionary.settings.partsOfSpeech).trim().split(",");