From 640b59636d95ee3f10060a3de6d1590b462b7c44 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Wed, 12 Oct 2016 01:45:36 -0400 Subject: [PATCH] Cleaned up new input management --- hourglass/client/main/main.css | 31 +++--- hourglass/client/main/main.js | 171 +++++++++++---------------------- 2 files changed, 69 insertions(+), 133 deletions(-) diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index 6417caa..915384f 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -126,19 +126,20 @@ body { float: left; } -.noScroll h1,.noScroll h2,.noScroll h3,.noScroll h4,.noScroll h5 { +.noScroll h1,.noScroll h2,.noScroll h3,.noScroll h4,.noScroll h5, +.gu-mirror h1,.gu-mirror h2,.gu-mirror h3,.gu-mirror h4,.gu-mirror h5 { margin: 0; -webkit-filter: drop-shadow(2px 2px 5px #666); filter: drop-shadow(2px 2px 5px #666); } -.noScroll h1 { +.noScroll h1, .gu-mirror h1 { padding: 0.4%; float: left; } -.noScroll h4 { +.noScroll h4, .gu-mirror h4 { font-size: 130%; font-weight: 200; padding: 5%; @@ -659,8 +660,6 @@ textarea.clickModify { .clickModify.dropdown { font-size: 2.5vh; width: 100%; - height: 3vh; - padding: 3%; background-color: rgba(0,0,0,0.15); cursor: pointer; @@ -672,30 +671,30 @@ textarea.clickModify { transition: background-color 0.4s ease; } -.dropdown:hover { +.clickModify.dropdown:hover { background-color: rgba(0,0,0,0.07); } -.dropdown span { +.clickModify.dropdown span { + width: 75%; + padding: 3% 5% 3% 5%; + + display: inline-block; pointer-events: none; } .fa-caret-down { - font-size: 1.8vh; - margin-right: 5%; - - line-height: 3vh; - float: right; + font-size: 2.2vh; + text-align: right; pointer-events: none; } .optionHolder { width: 100%; - box-shadow: 2px 2px 5px 3px #666; - + border: 1px solid #666; position: absolute; - display: none; + z-index: 5; opacity: 0; @@ -713,7 +712,7 @@ textarea.clickModify { .optionText { font-size: 150%; min-width: 10%; - padding: 5% 7% 5% 7%; + padding: 4% 7% 4% 7%; margin: 0; cursor: pointer; diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index 520573c..46ce6a5 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -422,11 +422,12 @@ Template.main.helpers({ return; }, work(value) { // Returns the specified work value. + var thisWork = Session.get("currentWork"); if (Session.equals("currentWork", null)) return; - if (Session.get("newWork")) { + if (Session.get("newWork") && (thisWork[value] === "Missing field" || thisWork[value] === undefined)) { return defaultWork[value]; } else { - return formReadable(Session.get("currentWork"),value); + return formReadable(thisWork,value); } }, selectOptions(val) { @@ -480,12 +481,19 @@ Template.main.events({ 'click' (event) { // Closes respective divs when clicking outside of them. Order matters. var e = event.target.className; - if (event.target.id !== modifyingInput && // Input for dropdown closing. - event.target.id !== modifyingInput + "a" && - !Session.equals("modifying", null) && - !event.target.parentNode.className.includes("workOptions") && - !event.target.parentNode.className.includes("prefOptions")) { - closeInput(modifyingInput); + if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) { + if (!_.contains(e, ["optionHolder", "optionText"])) { + if(document.getElementById(modifyingInput).className.includes("dropdown")) { + $(".optionHolder") + .fadeOut('fast') + .hide('fast'); + + dropOpen = false; + } else { + closeInput(modifyingInput); + } + modifyingInput = null; + } } if (!Session.equals("sidebar", e) && // Sidebar closing. @@ -514,29 +522,6 @@ Template.main.events({ Session.set("commentRestrict", null); } - if (!event.target.className.includes("radio") && // Dropdown closing. - !event.target.parentNode.className.includes("workOptions") && - !event.target.parentNode.className.includes("optionHolder") && - event.target.readOnly !== true) { - var radio; - if (Session.equals("sidebar", "optionsContainer") || Session.equals("sidebar", "both")) { - radio = "prefOptions"; - } else { - radio = "workOptions"; - } - /*for (var i = 0; i < document.getElementsByClassName(radio).length; i++) { - try { - closeDivFade(document.getElementsByClassName(radio)[i]); - } catch (err) {} - }*/ - $(".optionHolder") - .fadeOut('fast') - .hide('fast'); - - dropOpen = false; - modifyingInput = null; - } - if (!document.getElementById("userDropdown").contains(event.target)) closeDivFade(document.getElementById("userDropdown")); if (!document.getElementById("requests").contains(event.target)) Session.set("requests", false); }, @@ -654,37 +639,40 @@ Template.main.events({ }, // HANDLING INPUT CHANGING 'click .clickModify' (event) { - modifyingInput = event.target.id; + if(modifyingInput !== event.target.id) modifyingInput = event.target.id; + }, + 'focus .clickModify' (event) { + if(modifyingInput !== event.target.id) modifyingInput = event.target.id; }, 'keydown .dropdown' (event) { console.log("hi"); }, - /*'focus .dropdown' (event) { - if(dropOpen) return; + 'focus .dropdown' (event) { + if(event.target.id === modifyingInput) return; event.target.click(); - dropOpen = true; - },*/ - 'click .clickModify.dropdown' (event) { + }, + 'click .dropdown' (event) { + console.log(dropOpen); + console.log(event.target.id === modifyingInput); if(event.target.id === modifyingInput && dropOpen) { + dropOpen = false; + modifyingInput = null; $("#" + modifyingInput).next() .fadeOut(200) .hide(200); - dropOpen = false; + console.log("hiasdf"); return; } dropOpen = true; - $(".optionHolder") - .fadeOut('fast') - .hide('fast'); - $("#" + modifyingInput).next() - .css('opacity', 0) + .css('opacity',0) .slideDown(300) .animate( { opacity: 1 }, { queue: false, duration: 100 } - ); + ) + //event.target.focus(); }, 'click .optionText' (event) { // Click each preferences setting. @@ -781,13 +769,18 @@ Template.main.events({ } Session.set("commentRestrict", chars.toString() + " characters left"); }, - 'focus #workDatea' () { // Open date picker. - $('#workDatea').datepicker({ + 'focus #wDueDate' () { // Open date picker. + $('#wDueDate').datepicker({ format: 'DD, MM d, yyyy', + clickInput: true, startDate: 'd', todayHighlight: true, todayBtn: true, - autoclose: true + + onSelect: function(dateText, inst) { + alert("asdf"); + closeInput(modifyingInput); + } }); }, // WORK OVERLAY BUTTONS @@ -803,9 +796,7 @@ Template.main.events({ } }, 'click #workSubmit' () { // Click submit work to create a work. - if (getHomeworkFormData() === null) return; // Makes sure to check valid homework. - serverData = getHomeworkFormData(); - serverData.class = Session.get("currentWorkId"); + serverData = Session.get("currentWork"); sendData("createWork"); Session.set("newWork", null); closeDivFade(document.getElementsByClassName("overlay")[0]); @@ -926,81 +917,27 @@ function sendData(funcName) { // Call Meteor function, and do actions after func } function closeInput() { // Close a changeable input and change it back to span. - /*var input = document.getElementById(modifyingInput + "a"); - var span = document.getElementById(modifyingInput); - var color; - if (Session.equals("sidebar", "optionsContainer") || Session.equals("sidebar", "both")) { - color = "#000"; - } else { - color = "#BEBEBE"; - } - span.style.color = color; - Session.set("commentRestrict", ""); - try { - input.parentNode.removeChild(input); - document.getElementById(modifyingInput + "restrict").style.display = "none"; - } catch (err) {} - if (input.value === "") { // If input has nothing. - span.childNodes[0].nodeValue = "Click here to edit..."; - } else { - span.childNodes[0].nodeValue = input.value; - } - span.style.display = "initial"; - Session.set("modifying", null); - - if (Session.equals("sidebar", "optionsContainer") || Session.equals("sidebar", "both")) { // Close depending on work or preferences. - serverData = getPreferencesData(); - sendData("editProfile"); - } else if (!Session.get("newWork")) { - if (getHomeworkFormData() === null) return; - serverData = getHomeworkFormData(); - sendData("editWork"); - }*/ - if(Session.get("newWork")) return; - var data = getHomeworkFormData(); - if(data === null) return; + var data = getHomeworkFormData(); Session.set("currentWork", data); - serverData = Session.get("currentWork"); - //sendData("editWork"); + + if(!Session.get("newWork")) { + serverData = Session.get("currentWork"); + //sendData("editWork"); + } + console.log(serverData); + } function getHomeworkFormData() { // Get all data relating to work creation. - /*var inputs = document.getElementsByClassName("req"); - var stop; - for (var i = 0; i < inputs.length; i++) { - var value = inputs[i].childNodes[0].nodeValue; - if (value.includes("Click here to edit")) { - inputs[i].childNodes[0].nodeValue = "Missing field"; - inputs[i].style.color = "#FF1A1A"; - stop = true; - } - } - if (stop) return null; - var data; - - if (Session.get("newWork")) { - data = { - "class": Session.get("currentWorkId") - }; - } else { - data = work.findOne({ - _id: Session.get("currentWorkId") - }); - } - data.name = document.getElementById("workName").childNodes[0].nodeValue; - data.dueDate = toDate(document.getElementById("workDate").childNodes[0].nodeValue); - data.description = document.getElementById("workDesc").childNodes[0].nodeValue; - data.type = document.getElementById("workType").childNodes[0].nodeValue.toLowerCase(); - - return data;*/ - var inputs = ["wName", "wDueDate", "wDescription", "wType"]; - var optional = ["wDescription"]; + var inputs = ["wName", "wDueDate", "wDescription", "wType"]; // All work fields. + var optional = ["wDescription"]; // Optional work fields. var data = Session.get("currentWork"); for(var i = 0; i < inputs.length; i++) { var title = inputs[i].charAt(1).toLowerCase() + inputs[i].slice(2); - var thisData = (title === 'type') ? $("#"+title+" span")[0].childNodes[0].nodeValue : $("#"+title)[0].value; - data[title] = (thisData.search("Click here to edit") === 0 && !_.contains(optional, title)) ? "Missing field" : thisData; + var thisData = (title === 'type') ? $("#"+inputs[i]+" span")[0].childNodes[0].nodeValue : $("#"+inputs[i])[0].value; + data[title] = (thisData.includes(defaultWork[title].slice(0,-3)) && !_.contains(optional, title)) ? "Missing field" : thisData; } + return data; } var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];