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

Basic new input system

Browse Source
This commit is contained in:
Kenneth Jao 2016-10-09 22:57:04 -04:00
parent b5a4351bc2
commit 4c813b6667
4 changed files with 293 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -246,8 +246,7 @@ input, textarea {
} }
#optionsContainer { #optionsContainer {
width: 200px; padding: 40px 0 40px 40px;
padding: 40px;
right: 0; right: 0;
} }
@ -576,6 +575,29 @@ input, textarea {
text-align: right; text-align: right;
} }
input.clickModify, textarea.clickModify {
font-size: 2.2vh;
font-weight: 200;
background-color: rgba(0,0,0,0);
border-color: rgba(0,0,0,0);
-webkit-transition: background-color 0.4s ease, border-color 0.4s ease;
-moz-transition: background-color 0.4s ease, border-color 0.4s ease;
-ms-transition: background-color 0.4s ease, border-color 0.4s ease;
transition: background-color 0.4s ease, border-color 0.4s ease;
}
input.clickModify:hover, textarea.clickModify:hover {
cursor: pointer;
background-color: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.1);;
}
textarea.clickModify {
font-size: 1.8vh;
width: 100%;
}
#editWork { #editWork {
min-height: 68vh; min-height: 68vh;
margin: auto; margin: auto;
@ -584,19 +606,6 @@ input, textarea {
box-shadow: 2px 2px 5px 3px #333; box-shadow: 2px 2px 5px 3px #333;
} }
#editWork input, #editWork textarea {
font-size: 2vh;
background-color: #FFF;
}
#workDesca {
width: 15vw;
}
#workDatea {
width: 17vw;
}
#editWorkCont { #editWorkCont {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -613,11 +622,12 @@ input, textarea {
#workNameDiv { #workNameDiv {
padding: 4% 4% 0 3.5%; padding: 4% 4% 0 3.5%;
}f }
#workName { #wName {
font-weight: 400; font-weight: 400;
font-size: 3vh; font-size: 2.5vh;
width: 100%;
} }
.workTitle, .prefTitle { .workTitle, .prefTitle {
@ -632,6 +642,11 @@ input, textarea {
margin-top: 5%; margin-top: 5%;
} }
.prefWrapper {
width: 85%;
position: relative;
}
#workNamerestrict, #workDescrestrict, #commentrestrict { #workNamerestrict, #workDescrestrict, #commentrestrict {
display: none; display: none;
} }
@ -641,7 +656,42 @@ input, textarea {
float: right; float: right;
} }
.workOptions, .prefOptions { .dropdown {
font-size: 2.5vh;
width: 100%;
height: 3vh;
padding: 3%;
background-color: rgba(0,0,0,0.15);
cursor: pointer;
outline: 0;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.dropdown:hover {
background-color: rgba(0,0,0,0.07);
}
.dropdown span {
pointer-events: none;
}
.fa-caret-down {
font-size: 1.8vh;
margin-right: 5%;
line-height: 3vh;
float: right;
pointer-events: none;
}
.optionHolder {
width: 100%;
box-shadow: 2px 2px 5px 3px #666; box-shadow: 2px 2px 5px 3px #666;
position: absolute; position: absolute;
@ -656,13 +706,16 @@ input, textarea {
transition: opacity 0.4s ease; transition: opacity 0.4s ease;
} }
.workOptionText, .prefOptionText { .optionHolder:hover {
background-color: rgba(255,255,255,0.05);
}
.optionText {
font-size: 150%; font-size: 150%;
min-width: 10%; min-width: 10%;
padding: 20px; padding: 5% 7% 5% 7%;
margin: 0; margin: 0;
text-align: center;
cursor: pointer; cursor: pointer;
-webkit-transition: box-shadow 0.4s ease; -webkit-transition: box-shadow 0.4s ease;
@ -671,6 +724,10 @@ input, textarea {
transition: box-shadow 0.4s ease; transition: box-shadow 0.4s ease;
} }
.optionText:hover {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
}
.workOptions p:hover, .prefOptions p:hover { .workOptions p:hover, .prefOptions p:hover {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1); box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
} }
@ -695,12 +752,18 @@ input, textarea {
#workInfoNmCont { #workInfoNmCont {
padding: 3% 0 3% 7%; padding: 3% 0 3% 7%;
position: relative;
} }
#workInfoNmCont div { #workInfoNmCont div {
margin-bottom: 5%; margin-bottom: 5%;
} }
#wType {
margin: 0 !important;
padding: 2%;
}
.datepicker { .datepicker {
box-shadow: 2px 2px 5px 3px #666; box-shadow: 2px 2px 5px 3px #666;
color: #000; color: #000;
@ -708,12 +771,12 @@ input, textarea {
position: absolute; position: absolute;
} }
.inputRadio {
margin-bottom: 0 !important;
}
.type { .type {
margin-left: 11%; width: 95%;
margin-left: 1%;
}
.type p {
padding: 3% 5% 3% 5%;
} }
#workComments h3 { #workComments h3 {
@ -1042,7 +1105,7 @@ input, textarea {
} }
#prefCont { #prefCont {
padding: 5%; margin-left: 5%;
} }
#prefCont .changeInput { #prefCont .changeInput {
@ -1144,7 +1207,7 @@ input, textarea {
background-color: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2);
} }
#done { #doneUsers {
height: 34vh; height: 34vh;
top: 0; top: 0;
overflow-y: auto; overflow-y: auto;

105
hourglass/client/main/main.html
View File

@ -61,63 +61,70 @@
</div> </div>
<div id="optionsContainer" style="right:{{optionsStatus}};background-color:{{divColor 'sidebarColor'}}"> <div id="optionsContainer" style="right:{{optionsStatus}};background-color:{{divColor 'sidebarColor'}}">
<h3>Preferences</h3> <h3>Preferences</h3>
<div id="prefCont"> <div id="prefCont">
<div> <div class="prefWrapper">
<div class="inputRadioPref">
<p class="prefTitle">Theme:</p> <p class="prefTitle">Theme:</p>
<span class="change radio" re="readonly" id="prefTheme">{{themeName}}</span> <div id="theme" class="clickModify dropdown" tabindex="1">
<span>{{pref 'theme'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div> </div>
<div class="prefOptions"> <div class="optionHolder">
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Light</p> {{#each selectOptions 'theme'}}
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Dark</p> {{> option}}
{{/each}}
</div> </div>
</div> </div>
<div> <div class="prefWrapper">
<div class="inputRadioPref">
<p class="prefTitle">Default Mode:</p> <p class="prefTitle">Default Mode:</p>
<span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span> <div id="mode" class="clickModify dropdown" tabindex="2">
<span>{{pref 'mode'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div> </div>
<div class="prefOptions"> <div class="optionHolder">
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Classes</p> {{#each selectOptions 'mode'}}
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Calendar</p> {{> option}}
{{/each}}
</div> </div>
</div> </div>
<div> <div class="prefWrapper">
<div class="inputRadioPref">
<p class="prefTitle">Hide Homework:</p> <p class="prefTitle">Hide Homework:</p>
<span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span> <div id="timeHide" class="clickModify dropdown" tabindex="3">
<span>{{pref 'timeHide'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div> </div>
<div class="prefOptions"> <div class="optionHolder">
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">1 Day</p> {{#each selectOptions 'timeHide'}}
<P class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">2 Days</p> {{> option}}
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">1 Week</p> {{/each}}
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">1 Month</p>
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Never</p>
</div> </div>
</div> </div>
<div> <div class="prefWrapper">
<div class="inputRadioPref">
<p class="prefTitle">Hide Done:</p> <p class="prefTitle">Hide Done:</p>
<span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span> <div id="done" class="clickModify dropdown" tabindex="4">
<span>{{pref 'done'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div> </div>
<div class="prefOptions"> <div class="optionHolder">
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Yes</p> {{#each selectOptions 'done'}}
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">No</p> {{> option}}
{{/each}}
</div> </div>
</div> </div>
<div> <div class="prefWrapper">
<div class="inputRadioPref">
<p class="prefTitle">Hide Reported:</p> <p class="prefTitle">Hide Reported:</p>
<span class="change radio" re="readonly" id="prefReport">{{pref 'hideReport'}}</span> <div id="hideReport" class="clickModify dropdown" tabindex="5">
<span>{{pref 'hideReport'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div> </div>
<div class="prefOptions"> <div class="optionHolder">
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Yes</p> {{#each selectOptions 'hideReport'}}
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">No</p> {{> option}}
{{/each}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<img id="bg" src={{bgSrc}} style="min-width:{{screen}}"> <img id="bg" src={{bgSrc}} style="min-width:{{screen}}">
<div id="mainBody{{highlight}}"> <div id="mainBody{{highlight}}">
{{#if currMode 'classes'}} {{#if currMode 'classes'}}
@ -141,29 +148,31 @@
<div id="workInfoContainer"> <div id="workInfoContainer">
<div id="workNameDiv"> <div id="workNameDiv">
<span id="workNamerestrict">{{commentLength}}</span> <span id="workNamerestrict">{{commentLength}}</span>
<span class="change req" id="workName" restrict="50">{{work 'name'}}</span> <!-- <span class="change req" id="workName" restrict="50">{{work 'name'}}</span> -->
<input id="wName" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'name'}}">
</div> </div>
<div id="workInfoNmCont"> <div id="workInfoNmCont">
<div> <div>
<span class="workTitle">Due Date:</span><br> <span class="workTitle">Due Date:</span><br>
<span class="change req" re="readonly" id="workDate">{{work 'dueDate'}}</span> <!-- <span class="change req" re="readonly" id="workDate">{{work 'dueDate'}}</span> -->
<input id="wDueDate" class="clickModify" style="color:{{divColor 'textColor'}}" value="{{work 'dueDate'}}">
</div> </div>
<div> <div>
<span class="workTitle">Description:</span><br> <span class="workTitle">Description:</span><br>
<span id="workDescrestrict">{{commentLength}}</span> <span id="workDescrestrict">{{commentLength}}</span>
<span class="change" type="textarea" id="workDesc" restrict="150">{{work 'description'}}</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>
</div> </div>
<div> <div>
<div class="inputRadio">
<span class="workTitle">Type:</span> <span class="workTitle">Type:</span>
<span class="change radio req" re="readonly" id="workType">{{work 'type'}}</span> <div id="wType" class="clickModify dropdown">
<span>{{work 'type'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div> </div>
<div class="workOptions type"> <div class="optionHolder type">
<p class="workOptionText" style="background-color:{{divColor 'mainColor'}}">Normal</p> {{#each selectOptions 'type'}}
<p class="workOptionText" style="background-color:{{divColor 'mainColor'}}">Quiz</p> {{> option}}
<p class="workOptionText" style="background-color:{{divColor 'mainColor'}}">Test</p> {{/each}}
<p class="workOptionText" style="background-color:{{divColor 'mainColor'}}">Project</p>
<p class="workOptionText" style="background-color:{{divColor 'mainColor'}}">Other</p>
</div> </div>
</div> </div>
<!-- <div id="workAttach">Attach other files</div> <!-- <div id="workAttach">Attach other files</div>
@ -193,7 +202,7 @@
</div> </div>
{{#unless newWork}} {{#unless newWork}}
<div id="workToggle"> <div id="workToggle">
<div id="done"> <div id="doneUsers">
{{#each work 'done'}} {{#each work 'done'}}
{{> doneUsers}} {{> doneUsers}}
{{/each}} {{/each}}
@ -364,3 +373,7 @@
</div> </div>
</div> </div>
</template> </template>
<template name="option">
<p class="optionText" style="background-color:{{divColor 'mainColor'}}">{{alias}}</p>
</template>

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

@ -8,6 +8,8 @@ import './main.html';
var load = true; var load = true;
var calWorkOpen = null; var calWorkOpen = null;
var calWorkDate = null; var calWorkDate = null;
modifyingInput = null;
dropOpen = null;
var openValues = { var openValues = {
"menu": "-270px", "menu": "-270px",
@ -31,18 +33,6 @@ var defaultWork = {
type: "Click here to edit..." type: "Click here to edit..."
}; };
// Creates variables for due dates
var ref = {
"1 Day": 1,
"2 Days": 2,
"1 Week": 7,
"1 Month": 30,
"Never": 0,
"Yes": true,
"No": false
};
// Reactive variables. // Reactive variables.
Session.set("user",{}); // Stores user preferences. Session.set("user",{}); // Stores user preferences.
Session.set("calendarClasses", []); // Stores calendar classes. Session.set("calendarClasses", []); // Stores calendar classes.
@ -50,6 +40,7 @@ Session.set("sidebar", null); // Status of sidebar.
Session.set("requests",false); // Status of requests. Session.set("requests",false); // Status of requests.
Session.set("newWork", null); // If user creating new work. Session.set("newWork", null); // If user creating new work.
Session.set("currentWorkId",null); // Stores current work Id. Session.set("currentWorkId",null); // Stores current work Id.
Session.set("currentWork",null);
Session.set("currentReadableWork", null); // Stores readable selected work info. Session.set("currentReadableWork", null); // Stores readable selected work info.
Session.set("modifying", null); // Stores current open input. Session.set("modifying", null); // Stores current open input.
Session.set("noclass", null); // If user does not have classes. Session.set("noclass", null); // If user does not have classes.
@ -227,11 +218,9 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
Template.registerHelper('pref', (val) => { // Obtains all user preferences. Template.registerHelper('pref', (val) => { // Obtains all user preferences.
var preferences = Session.get("user").preferences; var preferences = Session.get("user").preferences;
if(val === 'timeHide' || val === 'done' || val == 'hideReport') { return options[val].filter(function(entry) {
var invert = _.invert(ref); return (val === 'theme') ? _.isEqual(preferences[val], themeColors[entry.val]) : preferences[val] === entry.val;
return invert[preferences[val]]; })[0].alias;
}
return preferences[val].charAt(0).toUpperCase() + preferences[val].slice(1);
}); });
Template.registerHelper('commentLength', () => { // Returns characters left for comment length. Template.registerHelper('commentLength', () => { // Returns characters left for comment length.
@ -240,22 +229,21 @@ Template.registerHelper('commentLength', () => { // Returns characters left for
function startDragula() { function startDragula() {
dragula([document.querySelector('#classesMode'), document.querySelector('#nonexistant')], dragula([document.querySelector('#classesMode'), document.querySelector('#nonexistant')],
{ {
moves: function(el, container, handle) { moves: function(el, container, handle) {
// return handle.classList.contains("classInfo") || handle.classList.contains("mainClassName"); // return handle.classList.contains("classInfo") || handle.classList.contains("mainClassName");
return _.intersection(["classInfo", "mainClassName", "mainClassHour", "mainClassTeacher"], handle.classList).length > 0; return _.intersection(["classInfo", "mainClassName", "mainClassHour", "mainClassTeacher"], handle.classList).length > 0;
}
})
.on('out', function(el) {
var els = document.getElementsByClassName("classWrapper");
var final = [];
for(var i = 0; i < els.length; i++) {
var classid = els[i].getElementsByClassName("creWork")[0].getAttribute("classid");
final.push(classid);
} }
Meteor.call("reorderClasses", final); })
}); .on('out', function(el) {
console.log("Started!"); var els = document.getElementsByClassName("classWrapper");
var final = [];
for(var i = 0; i < els.length; i++) {
var classid = els[i].getElementsByClassName("creWork")[0].getAttribute("classid");
final.push(classid);
}
Meteor.call("reorderClasses", final);
});
} }
Template.main.helpers({ Template.main.helpers({
@ -266,7 +254,7 @@ Template.main.helpers({
if (_.isEqual(vals[i], curtheme)) { if (_.isEqual(vals[i], curtheme)) {
var name = _.keys(themeColors)[i]; var name = _.keys(themeColors)[i];
return name.charAt(0).toUpperCase() + name.slice(1); return name.charAt(0).toUpperCase() + name.slice(1);
} }
} }
return "Custom"; return "Custom";
}, },
@ -430,14 +418,16 @@ Template.main.helpers({
return; return;
}, },
work(value) { // Returns the specified work value. work(value) { // Returns the specified work value.
if (Session.equals("currentWorkId", null)) return; if (Session.equals("currentWork", null)) return;
if (Session.get("newWork")) { if (Session.get("newWork")) {
return defaultWork[value]; return defaultWork[value];
} else { } else {
var thisWork = work.findOne({_id: Session.get("currentWorkId")}); return formReadable(Session.get("currentWork"),value);
return formReadable(thisWork,value);
} }
}, },
selectOptions(val) {
return options[val];
},
newWork() { // If user is creating a new work. newWork() { // If user is creating a new work.
return Session.get("newWork"); return Session.get("newWork");
}, },
@ -485,7 +475,6 @@ Template.main.helpers({
Template.main.events({ 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;
var modifyingInput = Session.get("modifying");
if (event.target.id !== modifyingInput && // Input for dropdown closing. if (event.target.id !== modifyingInput && // Input for dropdown closing.
event.target.id !== modifyingInput + "a" && event.target.id !== modifyingInput + "a" &&
@ -523,7 +512,7 @@ Template.main.events({
if (!event.target.className.includes("radio") && // Dropdown closing. if (!event.target.className.includes("radio") && // Dropdown closing.
!event.target.parentNode.className.includes("workOptions") && !event.target.parentNode.className.includes("workOptions") &&
!event.target.parentNode.className.includes("prefOptions") && !event.target.parentNode.className.includes("optionHolder") &&
event.target.readOnly !== true) { event.target.readOnly !== true) {
var radio; var radio;
if (Session.equals("sidebar", "optionsContainer") || Session.equals("sidebar", "both")) { if (Session.equals("sidebar", "optionsContainer") || Session.equals("sidebar", "both")) {
@ -531,11 +520,17 @@ Template.main.events({
} else { } else {
radio = "workOptions"; radio = "workOptions";
} }
for (var i = 0; i < document.getElementsByClassName(radio).length; i++) { /*for (var i = 0; i < document.getElementsByClassName(radio).length; i++) {
try { try {
closeDivFade(document.getElementsByClassName(radio)[i]); closeDivFade(document.getElementsByClassName(radio)[i]);
} catch (err) {} } 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"));
@ -600,7 +595,7 @@ Template.main.events({
attr = event.target.getAttribute("classid"); attr = event.target.getAttribute("classid");
} }
Session.set("newWork", true); Session.set("newWork", true);
Session.set("currentWorkId",attr); Session.set("currentWork",{"class": attr});
openDivFade(document.getElementsByClassName("overlay")[0]); openDivFade(document.getElementsByClassName("overlay")[0]);
}, },
'click #dropdown' (event) { 'click #dropdown' (event) {
@ -612,14 +607,14 @@ Template.main.events({
'click .workCard' (event) { // Display work information on work card click. 'click .workCard' (event) { // Display work information on work card click.
var dom = event.target; var dom = event.target;
while (event.target.className !== "workCard") event.target = event.target.parentNode; while (event.target.className !== "workCard") event.target = event.target.parentNode;
workid = event.target.getAttribute("workid"); var workid = event.target.getAttribute("workid");
Session.set("newWork", false);
Session.set("currentWorkId",workid);
var thisWork = work.findOne({ var thisWork = work.findOne({
_id: workid _id: workid
}); });
Session.set("newWork", false);
Session.set("currentWork", thisWork);
if (!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) { if (!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) {
var currClass = classes.findOne({ var currClass = classes.findOne({
_id: thisWork["class"] _id: thisWork["class"]
@ -628,7 +623,7 @@ Template.main.events({
Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) || Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
currClass.moderators.indexOf(Meteor.userId()) !== -1 || currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
currClass.banned.indexOf(Meteor.userId()) !== -1)) { currClass.banned.indexOf(Meteor.userId()) !== -1)) {
var inputs = $('#editWork .change').css("cursor", "default"); var inputs = $('#editWork .clickModify').css("cursor", "default");
} }
} }
openDivFade(document.getElementsByClassName("overlay")[0]); openDivFade(document.getElementsByClassName("overlay")[0]);
@ -653,122 +648,62 @@ Template.main.events({
}); });
}, },
// HANDLING INPUT CHANGING // HANDLING INPUT CHANGING
'click .change' (event) { // Click changable inputs. Creates an input where the span is. 'click .clickModify' (event) {
var thisWork = work.findOne({ modifyingInput = event.target.id;
_id: Session.get("currentWorkId")
});
if (!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) {
var currClass = classes.findOne({
_id: thisWork["class"]
});
if (!(Meteor.userId() === thisWork.creator || // If user has permission.
Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
currClass.banned.indexOf(Meteor.userId()) !== -1
)) return;
}
// CSS and DOM manipulation.
var ele = event.target;
var modifyingInput = Session.get("modifying");
if (ele.id !== modifyingInput && modifyingInput !== null) closeInput(modifyingInput);
Session.set("modifying", ele.id);
var dim = ele.getBoundingClientRect();
ele.style.display = "none";
var input = document.createElement("input");
var typ = ele.getAttribute("type");
if (typ === "textarea") {
input = document.createElement("textarea");
input.style.height = 3 * dim.height.toString() + "px";
input.rows = "4";
} else if (typ !== null) {
input.type = typ;
input.style.height = 0.9 * dim.height.toString() + "px";
} else {
input.typ = "text";
input.style.height = 0.9 * dim.height.toString() + "px";
}
if (event.target.id !== "workDate") input.value = ele.childNodes[0].nodeValue;
input.className = "changeInput";
input.style.padding = "0.1%";
input.id = ele.id + "a";
ele.parentNode.appendChild(input);
if (ele.getAttribute("re") == "readonly") {
input.readOnly = true;
input.className += " op";
input.style.cursor = "pointer";
} else {
input.select();
}
if (ele.id === "workDate") {
input.className += " form-control";
}
input.focus();
var restrict = ele.getAttribute("restrict");
if (restrict !== null) {
input.maxLength = restrict;
input.className += " restrict";
Session.set("commentRestrict",restrict-input.value.length.toString() + " characters left");
var text = document.getElementById(Session.get("modifying")+"restrict");
text.style.display = "initial";
text.style.color = "#7E7E7E";
}
}, },
'click .radio' (event) { // Click dropdown input. Opens the dropdown menu. 'keydown .dropdown' (event) {
var thisWork = work.findOne({ console.log("hi");
_id: Session.get("currentWorkId") },
}); /*'focus .dropdown' (event) {
if (!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) { if(dropOpen) return;
var currClass = classes.findOne({ event.target.click();
_id: thisWork["class"] dropOpen = true;
}); },*/
if (!(Meteor.userId() === thisWork.creator || 'click .dropdown' (event) {
Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) || if(event.target.id === modifyingInput && dropOpen) {
currClass.moderators.indexOf(Meteor.userId()) !== -1 || $("#" + modifyingInput).next()
currClass.banned.indexOf(Meteor.userId()) !== -1 .fadeOut(200)
)) return; .hide(200);
dropOpen = false;
return;
}
dropOpen = true;
$(".optionHolder")
.fadeOut('fast')
.hide('fast');
$("#" + 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;
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");
} }
var op = event.target; $("#" + modifyingInput).next()
var radio; .fadeOut('fast')
if (Session.equals("sidebar", "optionsContainer") || Session.equals("sidebar", "both")) { .hide('fast');
radio = "prefOptions";
} else {
radio = "workOptions";
}
try {
for (var i = 0; i < document.getElementsByClassName(radio).length; i++) { // Close any previously open menus.
var curr = document.getElementsByClassName(radio)[i];
if (curr.childNodes[1] !== op.parentNode.parentNode.childNodes[3].childNodes[1]) {
closeDivFade(document.getElementsByClassName(radio)[i]);
}
}
} catch (err) {}
openDivFade(op.parentNode.parentNode.childNodes[3]);
},
'click .workOptionText' (event) { // Click each work setting
var modifyingInput = Session.get("modifying");
var p = event.target;
var input = p.parentNode.parentNode.childNodes[1].childNodes[5];
input.value = p.childNodes[0].nodeValue;
closeDivFade(p.parentNode);
try {
closeInput(modifyingInput);
} catch (err) {}
input.focus();
},
'click .prefOptionText' (event) { // Click each preferences setting.
var modifyingInput = Session.get("modifying");
var p = event.target;
var input = p.parentNode.parentNode.childNodes[1].childNodes[5];
input.value = p.childNodes[0].nodeValue;
closeDivFade(p.parentNode);
try {
closeInput(modifyingInput);
} catch (err) {}
input.focus();
}, },
'click #workComment' (event) { 'click #workComment' (event) {
var restrict = event.target.maxLength; var restrict = event.target.maxLength;
@ -976,8 +911,8 @@ function sendData(funcName) { // Call Meteor function, and do actions after func
Meteor.call(funcName, serverData); Meteor.call(funcName, serverData);
} }
function closeInput(modifyingInput) { // 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 input = document.getElementById(modifyingInput + "a");
var span = document.getElementById(modifyingInput); var span = document.getElementById(modifyingInput);
var color; var color;
if (Session.equals("sidebar", "optionsContainer") || Session.equals("sidebar", "both")) { if (Session.equals("sidebar", "optionsContainer") || Session.equals("sidebar", "both")) {
@ -1006,11 +941,17 @@ function closeInput(modifyingInput) { // Close a changeable input and change it
if (getHomeworkFormData() === null) return; if (getHomeworkFormData() === null) return;
serverData = getHomeworkFormData(); serverData = getHomeworkFormData();
sendData("editWork"); sendData("editWork");
} }*/
if(Session.get("newWork")) return;
var data = getHomeworkFormData();
if(data === null) return;
Session.set("currentWork", data);
serverData = Session.get("currentWork");
//sendData("editWork");
} }
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 = document.getElementsByClassName("req");
var stop; var stop;
for (var i = 0; i < inputs.length; i++) { for (var i = 0; i < inputs.length; i++) {
var value = inputs[i].childNodes[0].nodeValue; var value = inputs[i].childNodes[0].nodeValue;
@ -1037,20 +978,15 @@ function getHomeworkFormData() { // Get all data relating to work creation.
data.description = document.getElementById("workDesc").childNodes[0].nodeValue; data.description = document.getElementById("workDesc").childNodes[0].nodeValue;
data.type = document.getElementById("workType").childNodes[0].nodeValue.toLowerCase(); data.type = document.getElementById("workType").childNodes[0].nodeValue.toLowerCase();
return data; return data;*/
} var inputs = ["wName", "wDueDate", "wDescription", "wType"];
var optional = ["wDescription"];
function getPreferencesData() { // Get all data relating to preferences. var data = Session.get("currentWork");
var profile = Session.get("user"); for(var i = 0; i < inputs.length; i++) {
var options = { var title = inputs[i].charAt(1).toLowerCase() + inputs[i].slice(2);
"theme": themeColors[document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase()], var thisData = (title === 'type') ? $("#"+title+" span")[0].childNodes[0].nodeValue : $("#"+title)[0].value;
"mode": document.getElementById("prefMode").childNodes[0].nodeValue.toLowerCase(), data[title] = (thisData.search("Click here to edit") === 0 && !_.contains(optional, title)) ? "Missing field" : thisData;
"timeHide": ref[document.getElementById("prefHide").childNodes[0].nodeValue], }
"done": ref[document.getElementById("prefDone").childNodes[0].nodeValue],
"hideReport": ref[document.getElementById("prefReport").childNodes[0].nodeValue]
};
profile.preferences = options;
return profile;
} }
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
@ -1069,6 +1005,7 @@ function toDate(date) { // Turns formatted date back to Date constructor.
} }
function formReadable(input, val) { // Makes work information readable by users. function formReadable(input, val) { // Makes work information readable by users.
if(input)
switch(val) { switch(val) {
case "typeColor": return input.typeColor = workColors[input.type]; case "typeColor": return input.typeColor = workColors[input.type];
case "name": return input.name; case "name": return input.name;

39
hourglass/lib/constants.js
View File

@ -63,17 +63,34 @@ themeColors = {
"iconHighlight": "#70e6e6", "iconHighlight": "#70e6e6",
"modeHighlight": "#70e6e6", "modeHighlight": "#70e6e6",
"classCardColor":"#1faab1", "classCardColor":"#1faab1",
"textColor": "#fcf0f0" "textColor": "#fcf0f0"
} }
}; };
serverData = null; options = {
ref = { "theme": [
"1 Day":1, {"val": "light", "alias": "Light"},
"2 Days":2, {"val": "dark", "alias": "Dark"}
"1 Week":7, ],
"1 Month":30, "mode": [
"Never":0, {"val": "classes", "alias": "Classes"},
"Yes":true, {"val": "calendar", "alias": "Calendar"}
"No":false ],
}; "timeHide": [
{"val": 1, "alias": "1 Day"},
{"val": 2, "alias": "2 Days"},
{"val": 7, "alias": "1 Week"},
{"val": 30, "alias": "1 Month"},
{"val": 0, "alias": "Never"}
],
"done": [
{"val": true, "alias": "Yes"},
{"val": false, "alias": "No"}
],
"hideReport": [
{"val": true, "alias": "Yes"},
{"val": false, "alias": "No"}
]
}
serverData = null;