Allowed sorting by Equivalent Word, trim whitespace from fields.

Also added link to IPA Character Picker backup file (ignored in repo).

.gitignore

@@ -0,0 +1 @@
+ipa_character_picker/

css/styles.css

@@ -17,6 +17,10 @@ footer {
     max-height: 32px;   /* Update Dictionary Container's bottom margin to account for footer */
 }
 
+.inline {
+    display: inline !important;
+}
+
 #leftColumn {
     float: left;
 }
@@ -100,14 +104,18 @@ input[type=checkbox] {
     margin: 10px;
 }
 
-.clickable {
+.clickable, .helperlink {
+    display: inline;
     font-weight: bold;
-    cursor: pointer;
     padding: 4px;
     background: #dddddd;
     border-radius: 5px;
 }
 
+.clickable {
+    cursor: pointer;
+}
+
 #descriptionToggle {
     font-weight: bold;
     font-size: 12px;

index.html

@@ -22,16 +22,16 @@
         <label><span>Word</span>
             <input type="text" id="word" />
         </label>
-        <label><span>Pronunciation <a class="helperlink" href="ipa_character_picker.html" target="_blank" title="IPA Character Picker backed up from http://r12a.github.io/pickers/ipa/">IPA</a></span>
+        <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" />
         </label>
         <label><span>Part of Speech</span>
             <select id="partOfSpeech"></select>
         </label>
-        <label><span>Equivalent Word</span>
+        <label><span>Equivalent Word(s)</span>
             <input type="text" id="simpleDefinition" />
         </label>
-        <label><span>Explanation</span>
+        <label><span>Explanation/Long Definition</span>
             <textarea id="longDefinition"></textarea>
         </label>
         <input type="hidden" id="editIndex" />
@@ -105,7 +105,12 @@
                             <input type="checkbox" id="dictionaryCaseSensitive" />
                         </label>
                     </label>
+                    <label class="inline">
+                        <span class="checkboxlabel">Sort by Equivalent Word</span>
+                        <input type="checkbox" id="dictionarySortByEquivalent" />
+                    </label> <span class="helperlink clickable" onclick='alert("By default, your dictionary is organized alphabetically by word. Checking this box will organize it by the \"Equivalent Word\" field instead");'>?</span>
                     </div>
+                    <br>
                     <label>
                         <span class="checkboxlabel">Dictionary is Complete</span>
                         <input type="checkbox" id="dictionaryIsComplete" />

js/dictionaryBuilder.js

@@ -9,6 +9,7 @@ var currentDictionary = {
         allowDuplicates: false,
         caseSensitive: false,
         partsOfSpeech: "Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction",
+        sortByEquivalent: false,
         isComplete: false
     }
 }
@@ -35,10 +36,10 @@ window.onload = function () {
 }
 
 function AddWord() {
-    var word = htmlEntities(document.getElementById("word").value);
-    var pronunciation = htmlEntities(document.getElementById("pronunciation").value);
-    var partOfSpeech = htmlEntities(document.getElementById("partOfSpeech").value);
-    var simpleDefinition = htmlEntities(document.getElementById("simpleDefinition").value);
+    var word = htmlEntities(document.getElementById("word").value).trim();
+    var pronunciation = htmlEntities(document.getElementById("pronunciation").value).trim();
+    var partOfSpeech = htmlEntities(document.getElementById("partOfSpeech").value).trim();
+    var simpleDefinition = htmlEntities(document.getElementById("simpleDefinition").value).trim();
     var longDefinition = htmlEntities(document.getElementById("longDefinition").value);
     var editIndex = htmlEntities(document.getElementById("editIndex").value);
     var errorMessageArea = document.getElementById("errorMessage");
@@ -144,7 +145,11 @@ function EditWord(index) {
 }
 
 function SaveAndUpdateDictionary(keepFormContents) {
+    if (!currentDictionary.settings.sortByEquivalent) {
         currentDictionary.words.sort(dynamicSort("name"));
+    } else {
+        currentDictionary.words.sort(dynamicSort("simpleDefinition"));
+    }
     SaveDictionary();
     ShowDictionary();
     if (!keepFormContents) {
@@ -329,6 +334,7 @@ function ShowSettings() {
     document.getElementById("dictionaryPartsOfSpeechEdit").value = htmlEntitiesParse(currentDictionary.settings.partsOfSpeech);
     document.getElementById("dictionaryAllowDuplicates").checked = currentDictionary.settings.allowDuplicates;
     document.getElementById("dictionaryCaseSensitive").checked = currentDictionary.settings.caseSensitive;
+    document.getElementById("dictionarySortByEquivalent").checked = currentDictionary.settings.sortByEquivalent;
     document.getElementById("dictionaryIsComplete").checked = currentDictionary.settings.isComplete;
     document.getElementById("numberOfWordsInDictionary").innerHTML = currentDictionary.words.length.toString();
 }
@@ -345,6 +351,8 @@ function SaveSettings() {
     currentDictionary.settings.allowDuplicates = document.getElementById("dictionaryAllowDuplicates").checked;
     currentDictionary.settings.caseSensitive = document.getElementById("dictionaryCaseSensitive").checked;
     
+    currentDictionary.settings.sortByEquivalent = document.getElementById("dictionarySortByEquivalent").checked;
+    
     currentDictionary.settings.isComplete = document.getElementById("dictionaryIsComplete").checked;
     
     HideSettingsWhenComplete();