diff --git a/css/mobile.css b/css/mobile.css
index faad8ea..fb8cead 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -63,6 +63,23 @@ and (max-device-width : 910px) {
height: 30px;
margin: 0px auto;
}
+
+ #mobileWordFormPullout {
+ position: fixed;
+ top: 7%;
+ left: 0;
+ width: 32px;
+ height: 32px;
+ font-size: 20px;
+ font-weight: bold;
+ text-align: center;
+ padding: 6px;
+ background: #86ac41;
+ -webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+ -moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+ box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
+ border: none;
+ }
#dictionaryColumn {
width: 100%;
diff --git a/index.php b/index.php
index 93c0bac..b598a0c 100644
--- a/index.php
+++ b/index.php
@@ -190,6 +190,8 @@ if ($display_mode != "build") {
+
+
+
diff --git a/js/ui.js b/js/ui.js
index c5529e2..90e3021 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -12,6 +12,7 @@ function Initialize() {
GetTextFile("/IMPORT.form", "importForm", false);
SetKeyboardShortcuts();
+ SetWindowListeners();
}
function SetKeyboardShortcuts() {
@@ -116,6 +117,25 @@ function SetKeyboardShortcuts() {
}, false);
}
+function SetWindowListeners() {
+ window.addEventListener("scroll", function() {
+ var doc = document.documentElement;
+ var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+ var dictionaryColumn = document.getElementById("dictionaryColumn");
+ var wordPullout = document.getElementById("mobileWordFormPullout");
+
+ if (top > dictionaryColumn.offsetTop) {
+ wordPullout.style.display = "block";
+ } else {
+ wordPullout.style.display = "none";
+ if (wordPullout.innerHTML != "+") {
+ LockWordForm();
+ wordPullout.innerHTML = "+";
+ }
+ }
+ });
+}
+
function SubmitWordOnCtrlEnter(keypress) {
var keyCode = (event.which ? event.which : event.keyCode);
@@ -335,26 +355,36 @@ function wordFormIsLocked() {
return document.getElementById("formLockButton").innerHTML == "\uD83D\uDD12";
}
-function ToggleWordFormLock() {
+function MobileToggleWordForm() {
+ var pullout = document.getElementById("mobileWordFormPullout");
+ ToggleWordFormLock("7%");
+ if (pullout.innerHTML == "+") {
+ pullout.innerHTML = "✕";
+ } else {
+ pullout.innerHTML = "+";
+ }
+}
+
+function ToggleWordFormLock(topValue) {
if (wordFormIsLocked()) { //If it is already locked, change it to Unlocked and get everything working as it needs to.
- UnlockWordForm();
+ UnlockWordForm(topValue);
} else {
LockWordForm();
}
}
-function UnlockWordForm() {
+function UnlockWordForm(topValue) {
var lockButton = document.getElementById("formLockButton");
var leftColumn = document.getElementById("leftColumn");
var wordForm = document.getElementById("wordEntryForm");
- var wordFormWidth = wordForm.offsetWidth - 20;
+ var wordFormWidth = wordForm.offsetWidth;
var leftColumnWidth = leftColumn.offsetWidth;
var leftColumnHeight = leftColumn.offsetHeight;
lockButton.innerHTML = "🔓"; // Change to the "Unlocked lock" icon.
wordForm.style.position = "fixed";
- wordForm.style.top = document.getElementsByTagName("header")[0].offsetHeight.toString() + "px";
+ wordForm.style.top = (typeof topValue !== 'undefined') ? topValue : document.getElementById("dictionaryColumn").offsetTop.toString() + "px";
wordForm.style.width = wordFormWidth.toString() + "px";
leftColumn.style.width = leftColumnWidth.toString() + "px";