Allow Fullscreen Textarea for Word Long Description and Dictionary Description.

index.php

@@ -71,7 +71,7 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
         <label><span>Equivalent Word(s)</span>
             <input type="text" id="simpleDefinition" />
         </label>
-        <label><span>Explanation/Long Definition</span>
+        <label><span>Explanation/Long Definition <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox('longDefinition', 'Explanation/Long Definition')">Maximize</span></span>
             <textarea id="longDefinition"></textarea>
         </label>
         <input type="hidden" id="editIndex" />
@@ -141,7 +141,7 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
                         <span>Dictionary Name</span>
                         <input type="text" id="dictionaryNameEdit" />
                     </label>
-                    <label><span>Dictionary Details <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox()">Maximize</a></span>
+                    <label><span>Dictionary Details <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox('dictionaryDescriptionEdit', 'Dictionary Details')">Maximize</span></span>
                         <textarea id="dictionaryDescriptionEdit"></textarea>
                     </label>
 
@@ -211,6 +211,7 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
         <div id="expandedTextboxId" style="display:none;width:0px;height:0px;"></div>
         <div id="fullScreenTextboxPage">
             <span id="fullScreenTextboxScreenCloseButton" class="clickable" onclick="HideFullScreenTextbox()">Minimize</span>
+            <label><span id="fullScreenTextboxLabel"></span></label>
             <textarea id="fullScreenTextbox"></textarea>
         </div>
     </div>

js/ui.js

@@ -377,16 +377,29 @@ function HideSettingsWhenComplete() {
     }
 }
 
-function ShowFullScreenTextbox(textboxToExpandId) {
+function ShowFullScreenTextbox(textboxToExpandId, labelText) {
+    var sourceTextboxElement = document.getElementById(textboxToExpandId);
+    var targetTextboxElement = document.getElementById("fullScreenTextbox");
+    document.getElementById("fullScreenTextboxLabel").innerHTML = labelText;
+    var selection = getInputSelection(sourceTextboxElement);
+
     document.getElementById("expandedTextboxId").innerHTML = textboxToExpandId;
-    document.getElementById("fullScreenTextbox").value = document.getElementById(textboxToExpandId).value;
+    targetTextboxElement.value = sourceTextboxElement.value;
     document.getElementById("fullScreenTextboxScreen").style.display = "block";
+    
+    setSelectionRange(targetTextboxElement, selection.start, selection.end);
 }
 
 function HideFullScreenTextbox() {
     var expandedTextboxId = document.getElementById("expandedTextboxId").innerHTML;
-    document.getElementById("dictionaryDescriptionEdit").value = document.getElementById("fullScreenTextbox").value;
+    var sourceTextboxElement = document.getElementById("fullScreenTextbox");
+    var targetTextboxElement = document.getElementById(expandedTextboxId);
+    var selection = getInputSelection(sourceTextboxElement);
+
+    targetTextboxElement.value = sourceTextboxElement.value;
     document.getElementById("fullScreenTextboxScreen").style.display = "none";
+    
+    setSelectionRange(targetTextboxElement, selection.start, selection.end);
 }
 
 function ShowDictionaryDeleteMenu(dictionaryList) {
@@ -470,26 +483,51 @@ function FocusAfterAddingNewWord() {
     document.getElementById("word").focus();
 }
 
-function getCaret(element) {
+function getInputSelection(el) {
-// Retrieved from http://stackoverflow.com/a/263796/3508346
+// Retrieved from http://stackoverflow.com/a/4207763
-    if (element.selectionStart) {
+    var start = 0, end = 0, normalizedValue, range,
-        return element.selectionStart;
+        textInputRange, len, endRange;
-    } else if (document.selection) {
+    el.focus();
-        element.focus();
+    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
+        start = el.selectionStart;
+        end = el.selectionEnd;
+    } else {
+        range = document.selection.createRange();
 
-        var range = document.selection.createRange();
+        if (range && range.parentElement() == el) {
-        if (range == null) {
+            len = el.value.length;
-          return 0;
+            normalizedValue = el.value.replace(/\r\n/g, "\n");
+
+            // Create a working TextRange that lives only in the input
+            textInputRange = el.createTextRange();
+            textInputRange.moveToBookmark(range.getBookmark());
+
+            // Check if the start and end of the selection are at the very end
+            // of the input, since moveStart/moveEnd doesn't return what we want
+            // in those cases
+            endRange = el.createTextRange();
+            endRange.collapse(false);
+
+            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
+                start = end = len;
+            } else {
+                start = -textInputRange.moveStart("character", -len);
+                start += normalizedValue.slice(0, start).split("\n").length - 1;
+
+                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
+                    end = len;
+                } else {
+                    end = -textInputRange.moveEnd("character", -len);
+                    end += normalizedValue.slice(0, end).split("\n").length - 1;
+                }
+            }
+        }
     }
 
-        var re = element.createTextRange(),
+    return {
-            rc = re.duplicate();
+        start: start,
-        re.moveToBookmark(range.getBookmark());
+        end: end
-        rc.setEndPoint('EndToStart', re);
+    };
-
-        return rc.text.length;
-    }
-    return 0; 
 }
 
 function setSelectionRange(input, selectionStart, selectionEnd) {