From 7cf5eeb2527dbd51be0f24c47431bd9472f848bc Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <gamedev@alamantus.com>
Date: Wed, 24 Feb 2016 12:50:30 -0700
Subject: [PATCH] Word Entry Form can now be unlocked and scroll next to the
 dictionary.

---
 announcement.php        |  3 ---
 css/styles.css          |  8 ++++++++
 index.php               |  1 +
 js/dictionaryBuilder.js |  4 +++-
 js/ui.js                | 29 +++++++++++++++++++++++++++++
 5 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/announcement.php b/announcement.php
index 3486089..e69de29 100644
--- a/announcement.php
+++ b/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!
diff --git a/css/styles.css b/css/styles.css
index 56af25a..4a8ee2a 100644
--- a/css/styles.css
+++ b/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;
 }
diff --git a/index.php b/index.php
index 42a3ced..0243157 100644
--- a/index.php
+++ b/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>
diff --git a/js/dictionaryBuilder.js b/js/dictionaryBuilder.js
index 7fdf30b..042cb6c 100644
--- a/js/dictionaryBuilder.js
+++ b/js/dictionaryBuilder.js
@@ -127,7 +127,9 @@ function SaveScroll() {
 
 function EditWord(index) {
     SaveScroll();
-    window.scroll(0, 0);
+    if (wordFormIsLocked()) {
+        window.scroll(0, 0);
+    }
 
     ClearForm();
 
diff --git a/js/ui.js b/js/ui.js
index cebf8bf..129764c 100644
--- a/js/ui.js
+++ b/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 = "&#128275;";
+        
+        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 = "&#128274;";
+        leftColumn.removeAttribute('style');
+        wordForm.removeAttribute('style');
+    }
+}
+
 function CloseUpdateConflictArea(displayId) {
     displayId = (typeof displayId !== 'undefined' && displayId != null) ? displayId : false;
     if (displayId != false) {