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";