Added Custom Parts of Speech

Started validation based on case sensitivity

css/styles.css

@@ -17,8 +17,11 @@ footer {
 form {
     margin: 15px;
     float: left;
-    max-width: 400px;
     padding: 15px;
+}
+
+#wordEntryForm {
+    max-width: 400px;
     border: outset 3px;
 }
 
@@ -42,7 +45,7 @@ label textarea {
     height: 200px;
 }
 
-#errorMessage, #updateConflictMessage {
+#errorMessage, #updateConflictMessage, #settingsErrorMessage {
     display: block;
     color: red;
     font-weight: bold;
@@ -104,21 +107,51 @@ longdefinition {
     font-size: 10px;
 }
 
-#settingsScreen {
+#settingsBackgroundFade {
     position: fixed;
-    top: 0px;
+    top: 0;
-    left: 0px;
+    left: 0;
-    width: 90%;
+    width: 100%;
-    height: 90%;
+    height: 100%;
+    background: #aaaaaa;
+    opacity: 0.75;
+}
+
+#settingsOptions {
+    position: fixed;
+    top: 10%;
+    left: 10%;
+    right: 10%;
+    bottom: 10%;
     padding: 5%;
     background: #ffffff;
     border-radius: 5px;
     border: 1px solid black;
 }
 
-#settingsButton, #settingsScreenCloseButton {
+#settingsButton, #settingsScreenCloseButton, #settingsSaveButtons button {
     float: right;
     cursor: pointer;
     font-size: 12px;
     font-weight: bold;
 }
+
+#settingsForm {
+    width: 100%;
+}
+
+#settingsErrorMessage {
+    float: right;
+    clear: both;
+}
+#settingsSaveButtons {
+    display: block;
+    clear: both;
+    width: 100%;
+}
+
+.settingsCol {
+    display: block;
+    float: left;
+    width: 300px;
+}

index.html

@@ -20,13 +20,15 @@
         </label>
         <label><span>Part of Speech</span>
             <select id="partOfSpeech">
-                <option value="noun">Noun</option>
+                <!--
-                <option value="adjective">Adjective</option>
+                    <option value="noun">Noun</option>
-                <option value="verb">Verb</option>
+                    <option value="adjective">Adjective</option>
-                <option value="adverb">Adverb</option>
+                    <option value="verb">Verb</option>
-                <option value="preposition">Preposition</option>
+                    <option value="adverb">Adverb</option>
-                <option value="pronoun">Pronoun</option>
+                    <option value="preposition">Preposition</option>
-                <option value="conjunction">Conjunction</option>
+                    <option value="pronoun">Pronoun</option>
+                    <option value="conjunction">Conjunction</option>
+                -->
             </select>
         </label>
         <input type="hidden" id="editIndex" />
@@ -47,29 +49,41 @@
     </div>
 
     <div id="settingsScreen" style="display:none;">
-        <span id="settingsScreenCloseButton" onclick="HideSettings()">Close</span>
+        <div id="settingsBackgroundFade"></div>
-        <h2>Dictionary Settings</h2>
+        <div id="settingsOptions">
-        <form>
+            <span id="settingsScreenCloseButton" onclick="HideSettings()">Close</span>
-            <label>
+            <h2>Dictionary Settings</h2>
-                <span>Dictionary name</span>
+            <form id="settingsForm">
-                <input type="text" id="dictionaryNameEdit" />
+                <div class="settingsCol">
-            </label>
+                    <label>
-            <label>
+                        <span>Dictionary name</span>
-                <span>Dictionary is complete</span>
+                        <input type="text" id="dictionaryNameEdit" />
-                <input type="checkbox" id="dictionaryIsComplete" />
+                    </label>
-            </label>
+                    <label>
-            <label><button type="button" onclick="ExportDictionary()" style="cursor:pointer;">Export Current Dictionary</button></label>
+                        <span>Parts of Speech</span>
-            <label>
+                        <input type="text" id="dictionaryPartsOfSpeechEdit" />
-                <span>Import Dictionary</span>
+                    </label>
-                <input type="file" id="importFile" />
+                    <label>
-                <button type="button" onclick="ImportDictionary(); return false;">Import</button>
+                        <span>Dictionary is complete</span>
-            </label>
+                        <input type="checkbox" id="dictionaryIsComplete" />
-            <label><button type="button" onclick="EmptyWholeDictionary()" style="cursor:pointer;">Empty Current Dictionary</button></label>
+                    </label>
-            <br>
+                </div>
-            <span id="settingsErrorMessage"></span>
+                <div class="settingsCol">
-            <button type="button" onclick="SaveSettings(); return false;">Save Settings</button><br>
+                    <label><button type="button" onclick="ExportDictionary()" style="cursor:pointer;">Export Current Dictionary</button></label>
-            <button type="button" onclick="SaveSettings(); HideSettings(); return false;">Save and Close</button>
+                    <label>
-        </form>
+                        <span>Import Dictionary</span>
+                        <input type="file" id="importFile" />
+                        <button type="button" onclick="ImportDictionary(); return false;">Import</button>
+                    </label>
+                    <label><button type="button" onclick="EmptyWholeDictionary()" style="cursor:pointer;">Empty Current Dictionary</button></label>
+                </div>
+                <div id="settingsSaveButtons">
+                    <span id="settingsErrorMessage"></span><br>
+                    <button type="button" onclick="SaveSettings(); HideSettings(); return false;">Save and Close</button>
+                    <button type="button" onclick="SaveSettings(); return false;">Save</button>
+                </div>
+            </form>
+        </div>
     </div>
     
     <footer>Version <script>document.write(currentVersion);</script>. Dictionary Builder only guaranteed to work with most up-to-date HTML5 browsers.</footer>

js/dictionaryBuilder.js

@@ -1,4 +1,4 @@
-var currentVersion = 0.1;
+var currentVersion = 0.2;
 
 var currentDictionary = {
     name: "New",
@@ -6,9 +6,10 @@ var currentDictionary = {
     settings: {
         caseSensitive: false,
         preferUpperCase: false,
+        partsOfSpeech: "Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction",
         isComplete: false
     },
-    dictionaryBuilderVersion: currentVersion
+    dictionaryImportVersion: currentVersion     // This needs to always be last.
 }
 
 var defaultDictionaryJSON = JSON.stringify(currentDictionary);  //Saves a stringifyed default dictionary.
@@ -20,12 +21,8 @@ var savedScroll = {
 }
 
 window.onload = function () {
-    //defaultDictionaryJSON = JSON.stringify(currentDictionary);  //Saves a stringifyed default dictionary.
     LoadDictionary();
     ClearForm();
-    if (currentDictionary.settings.isComplete) {
-        document.getElementById("wordEntryForm").style.display = "none";
-    }
 }
 
 var Word = function (word, simpleDefinition, longDefinition, partOfSpeech) {
@@ -45,22 +42,12 @@ function AddWord() {
     var errorMessageArea = document.getElementById("errorMessage");
     var errorMessage = "";
     var updateConflictArea = document.getElementById("updateConflict");
-    var updateConflictMessageArea = document.getElementById("updateConflictMessage");
-    var updateConfirmButton = document.getElementById("updateConfirmButton");
     
     if (word != "" && (simpleDefinition != "" || longDefinition != "")) {
-        if (!currentDictionary.settings.caseSensitive) {
-            if (currentDictionary.settings.preferUpperCase) {
-                word = word.toUpperCase();
-            } else {
-                word = word.toLowerCase();
-            }
-        }
-
         var wordIndex = WordIndex(word);
 
         if (editIndex != "") {
-            if (currentDictionary.words[parseInt(editIndex)].name != word || currentDictionary.words[parseInt(editIndex)].simpleDefinition != simpleDefinition || currentDictionary.words[parseInt(editIndex)].longDefinition != longDefinition || currentDictionary.words[parseInt(editIndex)].partOfSpeech != partOfSpeech) {
+            if (WordAtIndexWasChanged(editIndex, word, simpleDefinition, longDefinition, partOfSpeech)) {
                 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 + ', \'' +
@@ -71,25 +58,47 @@ function AddWord() {
                 updateConflictArea.innerHTML += '<button type="button" id="updateCancelButton" onclick="CloseUpdateConflictArea(); 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 (currentDictionary.words[parseInt(wordIndex)].simpleDefinition != simpleDefinition || currentDictionary.words[parseInt(wordIndex)].longDefinition != longDefinition || currentDictionary.words[parseInt(wordIndex)].partOfSpeech != partOfSpeech) {
+            if (currentDictionary.words[wordIndex].simpleDefinition != simpleDefinition || currentDictionary.words[wordIndex].longDefinition != longDefinition || currentDictionary.words[wordIndex].partOfSpeech != partOfSpeech) {
                 updateConflictArea.style.display = "block";
-                updateConflictArea.innerHTML = "<span id='updateConflictMessage'>\"" + word + "\" is already in the dictionary. Do you want to update it to what you have set above?</span>";
+                
-                updateConflictArea.innerHTML += '<button type="button" id="updateConfirmButton" onclick="UpdateWord(' + wordIndex + ', \'' +
+                var updateConflictText = "<span id='updateConflictMessage'>\"" + word + "\" is already in the dictionary";
-                                                                                                                    htmlEntities(word) + '\', \'' +
+                if (currentDictionary.words[wordIndex].name != word) {
-                                                                                                                    htmlEntities(simpleDefinition) + '\', \'' +
+                    updateConflictText += " as \"" + currentDictionary.words[wordIndex].name + "\", and your dictionary is set to ignore case.";
-                                                                                                                    htmlEntities(longDefinition) + '\', \'' +
+                } else {
-                                                                                                                    htmlEntities(partOfSpeech) + '\'); return false;">Yes, Update it</button>';
+                    updateConflictText += "."
-                updateConflictArea.innerHTML += ' <button type="button" id="updateCancelButton" onclick="CloseUpdateConflictArea(); return false;">No, Leave it</button>';
+                }
+                updateConflictText += "<br>Do you want to update it to what you have set above?</span>";
+                updateConflictText += '<button type="button" id="updateConfirmButton" onclick="UpdateWord(' + wordIndex + ', \'' +
+                                                                                                            htmlEntities(word) + '\', \'' +
+                                                                                                            htmlEntities(simpleDefinition) + '\', \'' +
+                                                                                                            htmlEntities(longDefinition) + '\', \'' +
+                                                                                                            htmlEntities(partOfSpeech) + '\'); return false;">Yes, Update it</button>';
+                updateConflictText += ' <button type="button" id="updateCancelButton" onclick="CloseUpdateConflictArea(); return false;">No, Leave it</button>';
+                
+                updateConflictArea.innerHTML = updateConflictText;
             } else {
-                errorMessage = "\"" + word + "\" is already in the dictionary exactly as it is written above.";
+                errorMessage = "\"" + word + "\" is already in the dictionary exactly as it is written above";
+                if (currentDictionary.words[wordIndex].name != word) {
+                    errorMessage += ". (Your dictionary is currently set to ignore case.)"
+                }
             }
         } else {
             currentDictionary.words.push(new Word(word, simpleDefinition, longDefinition, partOfSpeech));
             ClearForm();
         }
         
+        /*  This will help simplify this function if I can figure out how to do it right. Not sure if it's even necessary, though.
+        errorMessage += ValidateWord();
+        if (errorMessage != "") {
+            currentDictionary.words.push(new Word(word, simpleDefinition, longDefinition, partOfSpeech));
+            ClearForm();
+        }*/
+
         currentDictionary.words.sort(dynamicSort("name"));
         errorMessageArea.innerHTML = "";
 
@@ -106,11 +115,73 @@ function AddWord() {
         } else if (simpleDefinition == "" && longDefinition == "") {
             errorMessage += "You need at least one definition."
         }
+        
+        
     }
     
     errorMessageArea.innerHTML = errorMessage;
 }
 
+function ValidateWord(editIndex, word, simpleDefinition, longDefinition, partOfSpeech) {
+    var errorMessage = "";
+    var updateConflictArea = document.getElementById("updateConflict");
+    
+    var wordIndex = WordIndex(word);
+
+    if (editIndex != "") {
+        if (WordAtIndexWasChanged(editIndex, word, simpleDefinition, longDefinition, partOfSpeech)) {
+            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(simpleDefinition) + '\', \'' +
+                                                                                                                htmlEntities(longDefinition) + '\', \'' +
+                                                                                                                htmlEntities(partOfSpeech) + '\'); return false;">Yes, Update it</button>';
+            updateConflictArea.innerHTML += '<button type="button" id="updateCancelButton" onclick="CloseUpdateConflictArea(); 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 (currentDictionary.words[wordIndex].simpleDefinition != simpleDefinition || currentDictionary.words[wordIndex].longDefinition != longDefinition || currentDictionary.words[wordIndex].partOfSpeech != partOfSpeech) {
+            updateConflictArea.style.display = "block";
+            
+            var updateConflictText = "<span id='updateConflictMessage'>\"" + word + "\" is already in the dictionary";
+            if (currentDictionary.words[wordIndex].name != word) {
+                updateConflictText += " as \"" + currentDictionary.words[wordIndex].name + "\", and your dictionary is set to ignore case.";
+            } else {
+                updateConflictText += "."
+            }
+            updateConflictText += "<br>Do you want to update it to what you have set above?</span>";
+            updateConflictText += '<button type="button" id="updateConfirmButton" onclick="UpdateWord(' + wordIndex + ', \'' +
+                                                                                                        htmlEntities(word) + '\', \'' +
+                                                                                                        htmlEntities(simpleDefinition) + '\', \'' +
+                                                                                                        htmlEntities(longDefinition) + '\', \'' +
+                                                                                                        htmlEntities(partOfSpeech) + '\'); return false;">Yes, Update it</button>';
+            updateConflictText += ' <button type="button" id="updateCancelButton" onclick="CloseUpdateConflictArea(); return false;">No, Leave it</button>';
+            
+            updateConflictArea.innerHTML = updateConflictText;
+        } else {
+            errorMessage = "\"" + word + "\" is already in the dictionary exactly as it is written above";
+            if (currentDictionary.words[wordIndex].name != word) {
+                errorMessage += ". (Your dictionary is currently set to ignore case.)"
+            }
+        }
+    }
+    
+    return errorMessage;
+}
+
+function WordAtIndexWasChanged(indexString, word, simpleDefinition, longDefinition, partOfSpeech) {
+     return (!currentDictionary.settings.caseSensitive && currentDictionary.words[parseInt(indexString)].name.toLowerCase() != word.toLowerCase()) ||
+            (currentDictionary.settings.caseSensitive && currentDictionary.words[parseInt(indexString)].name != word) ||
+            currentDictionary.words[parseInt(indexString)].simpleDefinition != simpleDefinition ||
+            currentDictionary.words[parseInt(indexString)].longDefinition != longDefinition ||
+            currentDictionary.words[parseInt(indexString)].partOfSpeech != partOfSpeech;
+}
+
 function SaveScroll() {
     var doc = document.documentElement;
     var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
@@ -240,6 +311,7 @@ function ManagementArea(itemIndex) {
 function ShowSettings() {
     document.getElementById("settingsScreen").style.display = "block";
     document.getElementById("dictionaryNameEdit").value = htmlEntitiesParse(currentDictionary.name);
+    document.getElementById("dictionaryPartsOfSpeechEdit").value = htmlEntitiesParse(currentDictionary.settings.partsOfSpeech);
     document.getElementById("dictionaryIsComplete").checked = currentDictionary.settings.isComplete;
 }
 
@@ -247,11 +319,40 @@ function SaveSettings() {
     if (htmlEntities(document.getElementById("dictionaryNameEdit").value) != "") {
         currentDictionary.name = htmlEntities(document.getElementById("dictionaryNameEdit").value);
     }
+    
+    CheckForPartsOfSpeechChange();
+    
     currentDictionary.settings.isComplete = document.getElementById("dictionaryIsComplete").checked;
+    
     ShowDictionary();
     SaveDictionary();
 }
 
+function CheckForPartsOfSpeechChange () {
+    if (htmlEntities(document.getElementById("dictionaryPartsOfSpeechEdit").value) != currentDictionary.settings.partsOfSpeech) {
+        if (htmlEntities(document.getElementById("dictionaryPartsOfSpeechEdit").value) != "") {
+            currentDictionary.settings.partsOfSpeech = htmlEntities(document.getElementById("dictionaryPartsOfSpeechEdit").value);
+            SetPartsOfSpeech();
+        }
+    }
+}
+
+function SetPartsOfSpeech () {
+    var partsOfSpeechSelect = document.getElementById("partOfSpeech");
+    if (partsOfSpeechSelect.options.length > 0) {
+        for (var i = partsOfSpeechSelect.options.length - 1; i >= 0; i--) {
+            partsOfSpeechSelect.removeChild(partsOfSpeechSelect.options[i]);
+        }
+    }
+    var newPartsOfSpeech = htmlEntitiesParse(currentDictionary.settings.partsOfSpeech).trim().split(",");
+    for (var j = 0; j < newPartsOfSpeech.length; j++) {
+        var partOfSpeechOption = document.createElement('option');
+        partOfSpeechOption.appendChild(document.createTextNode(newPartsOfSpeech[j].trim()));
+        partOfSpeechOption.value = newPartsOfSpeech[j].trim();
+        partsOfSpeechSelect.appendChild(partOfSpeechOption);
+    }
+}
+
 function HideSettings() {
     document.getElementById("settingsScreen").style.display = "none";
     document.getElementById("wordEntryForm").style.display = (currentDictionary.settings.isComplete) ? "none" : "block";
@@ -279,6 +380,12 @@ function LoadDictionary() {
         tmpDictionary = null;
     }
     ShowDictionary();
+    
+    SetPartsOfSpeech();
+    
+    if (currentDictionary.settings.isComplete) {
+        document.getElementById("wordEntryForm").style.display = "none";
+    }
 }
 
 function ExportDictionary() {
@@ -303,7 +410,7 @@ function ImportDictionary() {
         // When it's loaded, process it
         reader.onloadend = function () {
             if (reader.result && reader.result.length) {
-                if (reader.result.substr(reader.result.length - 31) == '"dictionaryBuilderVersion":' + currentVersion + '}') {
+                if (reader.result.substr(reader.result.length - 30) == '"dictionaryImportVersion":' + currentVersion + '}') {
                     localStorage.setItem('dictionary', reader.result);
                     document.getElementById("importFile").value = "";
                     LoadDictionary();
@@ -324,7 +431,8 @@ function ImportDictionary() {
 function WordIndex(word) {
     for (var i = 0; i < currentDictionary.words.length; i++)
     {
-        if (currentDictionary.words[i].name == word) {
+        if ((!currentDictionary.settings.caseSensitive && currentDictionary.words[i].name.toLowerCase() == word.toLowerCase()) ||
+            (currentDictionary.settings.caseSensitive && currentDictionary.words[i].name == word)) {
             return i;
         }
     }