New inputs for creating work, restriction and comments still needed

This commit is contained in:
Kenneth Jao 2016-10-14 01:49:08 -04:00
parent fcdfa3e63e
commit 3f931f617a
6 changed files with 208 additions and 142 deletions

View File

@ -9,10 +9,9 @@ mobile-experience@1.0.4 # Packages for a great mobile UX
mongo@1.1.12_1 # The database Meteor supports right now
blaze-html-templates@1.0.4 # Compile .html files into Meteor Blaze views
reactive-var@1.0.10 # Reactive variable for tracker
jquery@1.11.9 # Helpful client-side library
jquery # Helpful client-side library
tracker@1.1.0 # Meteor's client-side reactive programming library
standard-minifier-css@1.2.0_1 # CSS minifier run for production mode
standard-minifier-js@1.2.0_1 # JS minifier run for production mode
es5-shim@4.6.14_1 # ECMAScript 5 compatibility for older browsers.
ecmascript@0.5.8_1 # Enable ECMAScript2015+ syntax in app code
@ -36,7 +35,6 @@ underscore@1.0.9
ahref:dragula
harrison:papa-parse
pfafman:filesaver
flemay:less-autoprefixer
natestrauser:select2
juliancwirko:s-alert
juliancwirko:s-alert-stackslide
@ -44,3 +42,4 @@ aldeed:collection2
dburles:collection-helpers
yogiben:admin-edit
mfactory:admin-lte
standard-minifier-css

View File

@ -42,7 +42,6 @@ email@1.0.16
es5-shim@4.6.14_1
eternicode:bootstrap-datepicker@1.6.0_3
fastclick@1.0.12
flemay:less-autoprefixer@1.2.0
fortawesome:fontawesome@4.5.0
geojson-utils@1.0.9
google@1.1.14
@ -74,7 +73,7 @@ meteor-base@1.0.4
meteorhacks:meteorx@1.4.1
meteorhacks:unblock@1.1.0
mfactory:admin-lte@0.0.2
minifier-css@1.2.14
minifier-css@1.2.14_1
minifier-js@1.2.14_1
minimongo@1.0.17
mizzao:autocomplete@0.5.1

View File

@ -476,8 +476,8 @@ body {
white-space: normal;
word-break: break-all;
-webkit-filter: none;
filter: none;
-webkit-filter: none !important;
filter: none !important;
}
.mainClassHour {
@ -555,8 +555,8 @@ body {
width: 50%;
margin-top: 0;
-webkit-filter: none;
filter: none;
-webkit-filter: none !important;
filter: none !important;
display: table-cell;
white-space: normal;
@ -574,10 +574,12 @@ body {
}
input.clickModify, textarea.clickModify {
width: 100%;
font-size: 2.2vh;
font-weight: 200;
background-color: rgba(0,0,0,0);
border-color: rgba(0,0,0,0);
cursor: pointer;
-webkit-transition: background-color 0.4s ease, border-color 0.4s ease;
-moz-transition: background-color 0.4s ease, border-color 0.4s ease;
@ -586,9 +588,8 @@ input.clickModify, textarea.clickModify {
}
input.clickModify:hover, textarea.clickModify:hover {
cursor: pointer;
background-color: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.1);;
background-color: rgba(0,0,0,0.1);
border-color: rgba(0,0,0,0.1);;
}
textarea.clickModify {
@ -657,8 +658,9 @@ textarea.clickModify {
.clickModify.dropdown {
font-size: 2.5vh;
width: 100%;
border: 1px solid #666;
background-color: rgba(0,0,0,0.15);
background-color: rgba(0,0,0,0.07);
cursor: pointer;
outline: 0;
@ -669,7 +671,7 @@ textarea.clickModify {
}
.clickModify.dropdown:hover {
background-color: rgba(0,0,0,0.07);
background-color: rgba(0,0,0,0.03);
}
.clickModify.dropdown span {
@ -688,11 +690,14 @@ textarea.clickModify {
.optionHolder {
width: 100%;
margin-top: -1px;
border: 1px solid #666;
border-top: none;
position: absolute;
z-index: 5;
display: none;
opacity: 0;
@ -702,10 +707,6 @@ textarea.clickModify {
transition: opacity 0.4s ease;
}
.optionHolder:hover {
background-color: rgba(255,255,255,0.05);
}
.optionText {
font-size: 150%;
min-width: 10%;
@ -720,8 +721,8 @@ textarea.clickModify {
transition: box-shadow 0.4s ease;
}
.optionText:hover {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
.selectedOption {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2);
}
.workOptions p:hover, .prefOptions p:hover {
@ -757,7 +758,13 @@ textarea.clickModify {
#wType {
margin: 0 !important;
padding: 2%;
}
#typeWrapper {
margin: 0 !important;
min-width: 56%;
position: relative;
display: inline-block;
}
.datepicker {
@ -768,11 +775,7 @@ textarea.clickModify {
}
.type {
width: 95%;
margin-left: 1%;
}
.type p {
padding: 3% 5% 3% 5%;
margin: -1px 0 0 0 !important;
}
#workComments h3 {

View File

@ -148,31 +148,29 @@
<div id="workInfoContainer">
<div id="workNameDiv">
<span id="workNamerestrict">{{commentLength}}</span>
<!-- <span class="change req" id="workName" restrict="50">{{work 'name'}}</span> -->
<input id="wName" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'name'}}">
<input id="wName" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'name'}}" tabindex="10">
</div>
<div id="workInfoNmCont">
<div>
<span class="workTitle">Due Date:</span><br>
<!-- <span class="change req" re="readonly" id="workDate">{{work 'dueDate'}}</span> -->
<input id="wDueDate" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'dueDate'}}">
<input id="wDueDate" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'dueDate'}}" tabindex="11" readonly>
</div>
<div>
<span class="workTitle">Description:</span><br>
<span id="workDescrestrict">{{commentLength}}</span>
<!-- <span class="change" type="textarea" id="workDesc" restrict="150">{{work 'description'}}</span> -->
<textarea id="wDescription" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'description'}}" rows="5"></textarea>
<textarea id="wDescription" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'description'}}" rows="5" tabindex="12"></textarea>
</div>
<div>
<span class="workTitle">Type:</span>
<div id="wType" class="clickModify dropdown">
<span>{{work 'type'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder type">
{{#each selectOptions 'type'}}
{{> option}}
{{/each}}
<div id="typeWrapper">
<div id="wType" class="clickModify dropdown" tabindex="13">
<span>{{work 'type'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder type">
{{#each selectOptions 'type'}}
{{> option}}
{{/each}}
</div>
</div>
</div>
<!-- <div id="workAttach">Attach other files</div>

View File

@ -41,7 +41,6 @@ Session.set("requests", false); // Status of requests.
Session.set("newWork", null); // If user creating new work.
Session.set("currentWorkId",null); // Stores current work Id.
Session.set("currentWork",null);
Session.set("currentReadableWork", null); // Stores readable selected work info.
Session.set("modifying", null); // Stores current open input.
Session.set("noclass", null); // If user does not have classes.
Session.set("calCreWork", null); // If user is creating a work from calendar.
@ -60,6 +59,14 @@ Template.login.rendered = function() {
Template.main.rendered = function() {
Accounts._loginButtonsSession.set('dropdownVisible', true);
setTimeout(startDragula, 300);
$(".optionText").hover(
function() {
$(this).addClass("selectedOption");
},
function() {
$(this).removeClass("selectedOption");
}
);
};
Template.profile.rendered = function() {
@ -250,6 +257,8 @@ function startDragula() {
});
}
Template.main.helpers({
themeName() {
var vals = _.values(themeColors);
@ -424,7 +433,7 @@ Template.main.helpers({
work(value) { // Returns the specified work value.
var thisWork = Session.get("currentWork");
if (Session.equals("currentWork", null)) return;
if (Session.get("newWork") && (thisWork[value] === "Missing field" || thisWork[value] === undefined)) {
if (Session.get("newWork") && (thisWork[value] === true || thisWork[value] === undefined)) {
return defaultWork[value];
} else {
return formReadable(thisWork,value);
@ -482,14 +491,13 @@ Template.main.events({
var e = event.target.className;
if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
if (!_.contains(e, ["optionHolder", "optionText"])) {
if (!(e.includes("optionHolder") || e.includes("optionText"))) {
if(document.getElementById(modifyingInput).className.includes("dropdown")) {
$(".optionHolder")
.fadeOut('fast')
.hide('fast');
.fadeOut(250, "linear");
dropOpen = false;
} else {
$(".selectedOption").removeClass("selectedOption");
} else {
closeInput(modifyingInput);
}
modifyingInput = null;
@ -517,7 +525,6 @@ Template.main.events({
if (!Session.get("newWork")) {
document.getElementById("workComment").value = "";
}
Session.set("newWork", null);
$('.req').css("color", "");
Session.set("commentRestrict", null);
}
@ -637,74 +644,6 @@ Template.main.events({
}, 750);
});
},
// HANDLING INPUT CHANGING
'click .clickModify' (event) {
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(event.target.id === modifyingInput) return;
event.target.click();
},
'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);
console.log("hiasdf");
return;
}
dropOpen = true;
$("#" + modifyingInput).next()
.css('opacity',0)
.slideDown(300)
.animate(
{ opacity: 1 },
{ queue: false, duration: 100 }
)
//event.target.focus();
},
'click .optionText' (event) { // Click each preferences setting.
var option = event.target.childNodes[0].nodeValue;
if(modifyingInput[0] === 'w') {
var newSetting = Session.get("currentWork");
newSetting[modifyingInput.charAt(1).toLowerCase() + modifyingInput.slice(2)] = option;
Session.set("currentWork", newSetting);
} else {
var newSetting = Session.get("user");
newSetting.preferences[modifyingInput] = (function() {
var value = options[modifyingInput].filter(function(entry) {
return option === entry.alias;
})[0].val;
return (modifyingInput === 'theme') ? themeColors[value] : value;
})();
Session.set("user", newSetting);
serverData = Session.get("user");
sendData("editProfile");
}
$("#" + modifyingInput).next()
.fadeOut('fast')
.hide('fast');
},
'click #workComment' (event) {
var restrict = event.target.maxLength;
Session.set("commentRestrict", restrict - event.target.value.length.toString() + " characters left");
var text = document.getElementById("commentrestrict");
text.style.display = "initial";
text.style.color = "#7E7E7E";
},
'click #exportDiv' (event) {
var events = [];
var userClasses = Session.get("calendarClasses");
@ -741,14 +680,98 @@ Template.main.events({
});
saveAs(eventBlob, "hourglass.csv");
},
'keydown input' (event) { // Enter to close input.
var modifyingInput = Session.get("modifying");
if (event.keyCode == 13 && modifyingInput != "workDesc") {
try {
closeInput(modifyingInput);
} catch (err) {}
// HANDLING INPUT CHANGING
'focus .clickModify' (event) {
$(".optionHolder")
.fadeOut(250, "linear");
if(modifyingInput !== null) {
if(!$("#"+modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput);
}
modifyingInput = event.target.id;
if(!$("#"+modifyingInput)[0].className.includes("dropdown")) {
event.target.select();
event.target.style.cursor = "text";
}
},
'keydown .dropdown' (event) {
var first = $("#"+modifyingInput).next().children("p:first-child");
var last = $("#"+modifyingInput).next().children("p:last-child");
var next = $(".selectedOption").next();
var prev = $(".selectedOption").prev();
var lastSel = $(".selectedOption");
if (event.keyCode === 38) {
if (lastSel === undefined) {
last.addClass("selectedOption");
} else {
if (prev.length === 0) {
last.addClass("selectedOption");
lastSel.removeClass("selectedOption");
} else {
prev.addClass("selectedOption");
lastSel.removeClass("selectedOption");
}
}
} else if (event.keyCode === 40) {
if (lastSel === undefined) {
first.addClass("selectedOption");
last.removeClass("selectedOption");
} else {
if (next.length === 0) {
first.addClass("selectedOption");
lastSel.removeClass("selectedOption");
} else {
next.addClass("selectedOption");
lastSel.removeClass("selectedOption");
}
}
} else if (event.keyCode === 13) {
lastSel[0].click();
}
},
'focus .dropdown' (event) {
$(".selectedOption").removeClass("selectedOption");
$("#" + modifyingInput).next()
.css('opacity',0)
.slideDown(300)
.animate(
{ opacity: 1 },
{ queue: false, duration: 100 }
);
},
'click .optionText' (event) { // Click each preferences setting.
var option = event.target.childNodes[0].nodeValue;
if(modifyingInput[0] === 'w') {
var newSetting = Session.get("currentWork");
newSetting[modifyingInput.charAt(1).toLowerCase() + modifyingInput.slice(2)] = option.toLowerCase();
Session.set("currentWork", newSetting);
} else {
var newSetting = Session.get("user");
newSetting.preferences[modifyingInput] = (function() {
var value = options[modifyingInput].filter(function(entry) {
return option === entry.alias;
})[0].val;
return (modifyingInput === 'theme') ? themeColors[value] : value;
})();
Session.set("user", newSetting);
serverData = Session.get("user");
sendData("editProfile");
}
$("#" + modifyingInput).next()
.fadeOut(250, "linear");;
$(".selectedOption").removeClass("selectedOption");
},
'click #workComment' (event) {
var restrict = event.target.maxLength;
Session.set("commentRestrict", restrict - event.target.value.length.toString() + " characters left");
var text = document.getElementById("commentrestrict");
text.style.display = "initial";
text.style.color = "#7E7E7E";
},
'input .restrict' (event) {
var restrict = event.target.maxLength;
var chars = restrict - event.target.value.length;
@ -776,11 +799,7 @@ Template.main.events({
startDate: 'd',
todayHighlight: true,
todayBtn: true,
onSelect: function(dateText, inst) {
alert("asdf");
closeInput(modifyingInput);
}
autoclose: true
});
},
// WORK OVERLAY BUTTONS
@ -797,8 +816,9 @@ Template.main.events({
},
'click #workSubmit' () { // Click submit work to create a work.
serverData = Session.get("currentWork");
if(checkMissing()) return;
sendData("createWork");
Session.set("newWork", null);
Session.set("newWork",false);
closeDivFade(document.getElementsByClassName("overlay")[0]);
},
'click #workDelete' () {
@ -807,15 +827,15 @@ Template.main.events({
closeDivFade(document.getElementsByClassName("overlay")[0]);
},
'click #markDone' () { // Click done button.
serverData = [Session.get("currentWorkId"), "done"];
serverData = [Session.get("currentWork")._id, "done"];
sendData("toggleWork");
},
'click #markConfirm' () { // Click confirm button.
serverData = [Session.get("currentWorkId"), "confirmations"];
serverData = [Session.get("currentWork")._id, "confirmations"];
sendData("toggleWork");
},
'click #markReport' () { // Click report button.
serverData = [Session.get("currentWorkId"), "reports"];
serverData = [Session.get("currentWork")._id, "reports"];
sendData("toggleWork");
},
// CLASS FILTERS
@ -913,19 +933,28 @@ function closeDivFade(div) {
}
function sendData(funcName) { // Call Meteor function, and do actions after function is completed depending on function.
Meteor.call(funcName, serverData);
Meteor.call(funcName, serverData, function(error, result) {
serverData = null;
currWork = Session.get("currentWork");
if(currWork !== null && currWork._id !== undefined) {
Session.set("currentWork", work.findOne({
_id: currWork._id
}));
}
});
}
function closeInput() { // Close a changeable input and change it back to span.
var data = getHomeworkFormData();
Session.set("currentWork", data);
$("#"+modifyingInput).css('cursor','pointer');
if(!Session.get("newWork")) {
serverData = Session.get("currentWork");
//sendData("editWork");
}
console.log(serverData);
if(checkMissing()) return;
sendData("editWork");
}
}
function getHomeworkFormData() { // Get all data relating to work creation.
@ -934,12 +963,43 @@ function getHomeworkFormData() { // Get all data relating to work creation.
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') ? $("#"+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;
var thisData = (function() {
if(title === "type") {
console.log($("#"+inputs[i]+" span")[0].childNodes[0].nodeValue.toLowerCase())
return $("#"+inputs[i]+" span")[0].childNodes[0].nodeValue.toLowerCase();
} else if (title === "dueDate") {
var val = $("#"+inputs[i])[0].value;
return (val.includes(defaultWork[title].slice(0,-3))) ? val : toDate(val);
} else {
return $("#"+inputs[i])[0].value;
}
})();
// True signifies missing field to prevent missing if value is'Missing field.'
data[title] = (thisData.toString().includes(defaultWork[title].slice(0,-3)) && !_.contains(optional, title)) ? true : thisData;
}
return data;
}
function checkMissing() {
var no = false;
console.log("hi");
for(var key in serverData) {
if(!_.contains(["name","dueDate","description","type"],key)) continue;
var id = "w" + key.charAt(0).toUpperCase() + key.slice(1);
console.log(id);
if(serverData[key] === true) {
no = true;
$("#"+id).addClass("formInvalid");
$("#"+id)[0].value = "";
$("#"+id)[0].placeholder = "Missing field";
} else {
$("#"+id)[0].placeholder = "";
$("#"+id).removeClass("formInvalid");
}
}
return no;
}
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

View File

@ -2,7 +2,7 @@ themeColors = {
"light": {
"background": "White.jpg",
"mainColor": "#EBEBEB",
"secondaryColor": "#FEFEFE",
"secondaryColor": "#E8E8E8",
"sidebarColor": "#65839A",
"userDropdownColor": "#E6E6E6",
"iconHighlight": "#33ADFF",
@ -90,6 +90,13 @@ options = {
"hideReport": [
{"val": true, "alias": "Yes"},
{"val": false, "alias": "No"}
],
"type": [
{"val": "normal", "alias": "Normal"},
{"val": "quiz", "alias": "Quiz"},
{"val": "test", "alias": "Test"},
{"val": "project", "alias": "Project"},
{"val": "other", "alias": "Other"},
]
}