Word Entry Form can now be unlocked and scroll next to the dictionary.

announcement.php

@@ -1,3 +0,0 @@
-If you look in the top right corner of the page, you'll now see a new button.<br>
-That's right, you can now create an account to store as many dictionaries as you could possibly need and access them all from wherever you want!<br>
-Check the <span id="aboutButton" class="clickable" onclick="ShowInfo('aboutText')">About Lexiconga</span> button and look under "Accounts" for all the details!

css/styles.css

@@ -59,6 +59,10 @@ and (max-device-width : 480px) {
     #dictionaryContainer {
         margin-bottom: 15px !important;
     }
+
+    #formLockButton {
+        display: none;
+    }
 }
 
 #leftColumn {
@@ -140,6 +144,10 @@ input[type=checkbox] {
     text-decoration: underline;
 }
 
+#formLockButton {
+    float: right;
+}
+
 #createAccountSubmitButton, #accountSettingsSubmitButton {
     margin-top: 10px;
 }

index.php

@@ -58,6 +58,7 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
     </div>
     <div id="leftColumn">
     <form id="wordEntryForm">
+        <div id="formLockButton" class="clickable" onclick="ToggleWordFormLock()" title="Lock/lnlock form from the top of the page">&#128274;</div>
         <label><span>Word</span>
             <input type="text" id="word" />
         </label>

js/dictionaryBuilder.js

@@ -127,7 +127,9 @@ function SaveScroll() {
 
 function EditWord(index) {
     SaveScroll();
+    if (wordFormIsLocked()) {
         window.scroll(0, 0);
+    }
 
     ClearForm();
 

js/ui.js

@@ -199,6 +199,35 @@ function ExplainAllowEmails() {
     alert("We'll make sure that you're the first to hear about any new features that get added or if any of our policies change for any reason. We'll never spam you or sell your information, but you may need to mark emails from lexicon.ga as not spam to receive them.\nNOTE: Password reset emails will be sent regardless of your choice.");
 }
 
+function wordFormIsLocked() {
+    return document.getElementById("formLockButton").innerHTML == "\uD83D\uDD12";
+}
+
+function ToggleWordFormLock() {
+    var lockButton = document.getElementById("formLockButton");
+    var leftColumn = document.getElementById("leftColumn");
+    var wordForm = document.getElementById("wordEntryForm");
+
+    if (wordFormIsLocked()) {  //If it is already locked, change it to Unlocked and get everything working as it needs to.
+        var wordFormWidth = wordForm.offsetWidth - 20;
+        var leftColumnWidth = leftColumn.offsetWidth;
+        var leftColumnHeight = leftColumn.offsetHeight;
+
+        lockButton.innerHTML = "🔓";
+        
+        wordForm.style.position = "fixed";
+        wordForm.style.top = document.getElementsByTagName("header")[0].offsetHeight.toString() + "px";
+        wordForm.style.width = wordFormWidth.toString() + "px";
+
+        leftColumn.style.width = leftColumnWidth.toString() + "px";
+        leftColumn.style.height = leftColumnHeight.toString() + "px";
+    } else {
+        lockButton.innerHTML = "🔒";
+        leftColumn.removeAttribute('style');
+        wordForm.removeAttribute('style');
+    }
+}
+
 function CloseUpdateConflictArea(displayId) {
     displayId = (typeof displayId !== 'undefined' && displayId != null) ? displayId : false;
     if (displayId != false) {