kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleaned up new input management

Browse Source
This commit is contained in:
Kenneth Jao 2016-10-12 01:45:36 -04:00
parent b225da48a3
commit 640b59636d
2 changed files with 69 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
hourglass/client/main/main.css
View File

@ -126,19 +126,20 @@ body {
float: left; 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; margin: 0;
-webkit-filter: drop-shadow(2px 2px 5px #666); -webkit-filter: drop-shadow(2px 2px 5px #666);
filter: drop-shadow(2px 2px 5px #666); filter: drop-shadow(2px 2px 5px #666);
} }
.noScroll h1 { .noScroll h1, .gu-mirror h1 {
padding: 0.4%; padding: 0.4%;
float: left; float: left;
} }
.noScroll h4 { .noScroll h4, .gu-mirror h4 {
font-size: 130%; font-size: 130%;
font-weight: 200; font-weight: 200;
padding: 5%; padding: 5%;
@ -659,8 +660,6 @@ textarea.clickModify {
.clickModify.dropdown { .clickModify.dropdown {
font-size: 2.5vh; font-size: 2.5vh;
width: 100%; width: 100%;
height: 3vh;
padding: 3%;
background-color: rgba(0,0,0,0.15); background-color: rgba(0,0,0,0.15);
cursor: pointer; cursor: pointer;
@ -672,30 +671,30 @@ textarea.clickModify {
transition: background-color 0.4s ease; transition: background-color 0.4s ease;
} }
.dropdown:hover { .clickModify.dropdown:hover {
background-color: rgba(0,0,0,0.07); 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; pointer-events: none;
} }
.fa-caret-down { .fa-caret-down {
font-size: 1.8vh; font-size: 2.2vh;
margin-right: 5%; text-align: right;
line-height: 3vh;
float: right;
pointer-events: none; pointer-events: none;
} }
.optionHolder { .optionHolder {
width: 100%; width: 100%;
box-shadow: 2px 2px 5px 3px #666; border: 1px solid #666;
position: absolute; position: absolute;
display: none;
z-index: 5; z-index: 5;
opacity: 0; opacity: 0;
@ -713,7 +712,7 @@ textarea.clickModify {
.optionText { .optionText {
font-size: 150%; font-size: 150%;
min-width: 10%; min-width: 10%;
padding: 5% 7% 5% 7%; padding: 4% 7% 4% 7%;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;

171
hourglass/client/main/main.js
View File

@ -422,11 +422,12 @@ Template.main.helpers({
return; return;
}, },
work(value) { // Returns the specified work value. work(value) { // Returns the specified work value.
var thisWork = Session.get("currentWork");
if (Session.equals("currentWork", null)) return; if (Session.equals("currentWork", null)) return;
if (Session.get("newWork")) { if (Session.get("newWork") && (thisWork[value] === "Missing field" || thisWork[value] === undefined)) {
return defaultWork[value]; return defaultWork[value];
} else { } else {
return formReadable(Session.get("currentWork"),value); return formReadable(thisWork,value);
} }
}, },
selectOptions(val) { selectOptions(val) {
@ -480,12 +481,19 @@ Template.main.events({
'click' (event) { // Closes respective divs when clicking outside of them. Order matters. 'click' (event) { // Closes respective divs when clicking outside of them. Order matters.
var e = event.target.className; var e = event.target.className;
if (event.target.id !== modifyingInput && // Input for dropdown closing. if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
event.target.id !== modifyingInput + "a" && if (!_.contains(e, ["optionHolder", "optionText"])) {
!Session.equals("modifying", null) && if(document.getElementById(modifyingInput).className.includes("dropdown")) {
!event.target.parentNode.className.includes("workOptions") && $(".optionHolder")
!event.target.parentNode.className.includes("prefOptions")) { .fadeOut('fast')
closeInput(modifyingInput); .hide('fast');
dropOpen = false;
} else {
closeInput(modifyingInput);
}
modifyingInput = null;
}
} }
if (!Session.equals("sidebar", e) && // Sidebar closing. if (!Session.equals("sidebar", e) && // Sidebar closing.
@ -514,29 +522,6 @@ Template.main.events({
Session.set("commentRestrict", null); 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("userDropdown").contains(event.target)) closeDivFade(document.getElementById("userDropdown"));
if (!document.getElementById("requests").contains(event.target)) Session.set("requests", false); if (!document.getElementById("requests").contains(event.target)) Session.set("requests", false);
}, },
@ -654,37 +639,40 @@ Template.main.events({
}, },
// HANDLING INPUT CHANGING // HANDLING INPUT CHANGING
'click .clickModify' (event) { '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) { 'keydown .dropdown' (event) {
console.log("hi"); console.log("hi");
}, },
/*'focus .dropdown' (event) { 'focus .dropdown' (event) {
if(dropOpen) return; if(event.target.id === modifyingInput) return;
event.target.click(); event.target.click();
dropOpen = true; },
},*/ 'click .dropdown' (event) {
'click .clickModify.dropdown' (event) { console.log(dropOpen);
console.log(event.target.id === modifyingInput);
if(event.target.id === modifyingInput && dropOpen) { if(event.target.id === modifyingInput && dropOpen) {
dropOpen = false;
modifyingInput = null;
$("#" + modifyingInput).next() $("#" + modifyingInput).next()
.fadeOut(200) .fadeOut(200)
.hide(200); .hide(200);
dropOpen = false; console.log("hiasdf");
return; return;
} }
dropOpen = true; dropOpen = true;
$(".optionHolder")
.fadeOut('fast')
.hide('fast');
$("#" + modifyingInput).next() $("#" + modifyingInput).next()
.css('opacity', 0) .css('opacity',0)
.slideDown(300) .slideDown(300)
.animate( .animate(
{ opacity: 1 }, { opacity: 1 },
{ queue: false, duration: 100 } { queue: false, duration: 100 }
); )
//event.target.focus();
}, },
'click .optionText' (event) { // Click each preferences setting. 'click .optionText' (event) { // Click each preferences setting.
@ -781,13 +769,18 @@ Template.main.events({
} }
Session.set("commentRestrict", chars.toString() + " characters left"); Session.set("commentRestrict", chars.toString() + " characters left");
}, },
'focus #workDatea' () { // Open date picker. 'focus #wDueDate' () { // Open date picker.
$('#workDatea').datepicker({ $('#wDueDate').datepicker({
format: 'DD, MM d, yyyy', format: 'DD, MM d, yyyy',
clickInput: true,
startDate: 'd', startDate: 'd',
todayHighlight: true, todayHighlight: true,
todayBtn: true, todayBtn: true,
autoclose: true
onSelect: function(dateText, inst) {
alert("asdf");
closeInput(modifyingInput);
}
}); });
}, },
// WORK OVERLAY BUTTONS // WORK OVERLAY BUTTONS
@ -803,9 +796,7 @@ Template.main.events({
} }
}, },
'click #workSubmit' () { // Click submit work to create a work. 'click #workSubmit' () { // Click submit work to create a work.
if (getHomeworkFormData() === null) return; // Makes sure to check valid homework. serverData = Session.get("currentWork");
serverData = getHomeworkFormData();
serverData.class = Session.get("currentWorkId");
sendData("createWork"); sendData("createWork");
Session.set("newWork", null); Session.set("newWork", null);
closeDivFade(document.getElementsByClassName("overlay")[0]); 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. function closeInput() { // Close a changeable input and change it back to span.
/*var input = document.getElementById(modifyingInput + "a"); var data = getHomeworkFormData();
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;
Session.set("currentWork", data); 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. function getHomeworkFormData() { // Get all data relating to work creation.
/*var inputs = document.getElementsByClassName("req"); var inputs = ["wName", "wDueDate", "wDescription", "wType"]; // All work fields.
var stop; var optional = ["wDescription"]; // Optional work fields.
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 data = Session.get("currentWork"); var data = Session.get("currentWork");
for(var i = 0; i < inputs.length; i++) { for(var i = 0; i < inputs.length; i++) {
var title = inputs[i].charAt(1).toLowerCase() + inputs[i].slice(2); var title = inputs[i].charAt(1).toLowerCase() + inputs[i].slice(2);
var thisData = (title === 'type') ? $("#"+title+" span")[0].childNodes[0].nodeValue : $("#"+title)[0].value; var thisData = (title === 'type') ? $("#"+inputs[i]+" span")[0].childNodes[0].nodeValue : $("#"+inputs[i])[0].value;
data[title] = (thisData.search("Click here to edit") === 0 && !_.contains(optional, title)) ? "Missing field" : thisData; 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"]; var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];