Basic new input system
This commit is contained in:
Kenneth Jao
parent
b5a4351bc2
commit
4c813b6667
@ -246,8 +246,7 @@ input, textarea {
|
||||
}
|
||||
|
||||
#optionsContainer {
|
||||
width: 200px;
|
||||
padding: 40px;
|
||||
padding: 40px 0 40px 40px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@ -576,6 +575,29 @@ input, textarea {
|
||||
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 {
|
||||
min-height: 68vh;
|
||||
margin: auto;
|
||||
@ -584,19 +606,6 @@ input, textarea {
|
||||
box-shadow: 2px 2px 5px 3px #333;
|
||||
}
|
||||
|
||||
#editWork input, #editWork textarea {
|
||||
font-size: 2vh;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
#workDesca {
|
||||
width: 15vw;
|
||||
}
|
||||
|
||||
#workDatea {
|
||||
width: 17vw;
|
||||
}
|
||||
|
||||
#editWorkCont {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -613,11 +622,12 @@ input, textarea {
|
||||
|
||||
#workNameDiv {
|
||||
padding: 4% 4% 0 3.5%;
|
||||
}f
|
||||
}
|
||||
|
||||
#workName {
|
||||
#wName {
|
||||
font-weight: 400;
|
||||
font-size: 3vh;
|
||||
font-size: 2.5vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.workTitle, .prefTitle {
|
||||
@ -632,6 +642,11 @@ input, textarea {
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
.prefWrapper {
|
||||
width: 85%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#workNamerestrict, #workDescrestrict, #commentrestrict {
|
||||
display: none;
|
||||
}
|
||||
@ -641,7 +656,42 @@ input, textarea {
|
||||
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;
|
||||
|
||||
position: absolute;
|
||||
@ -656,13 +706,16 @@ input, textarea {
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.workOptionText, .prefOptionText {
|
||||
.optionHolder:hover {
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.optionText {
|
||||
font-size: 150%;
|
||||
min-width: 10%;
|
||||
padding: 20px;
|
||||
padding: 5% 7% 5% 7%;
|
||||
margin: 0;
|
||||
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-transition: box-shadow 0.4s ease;
|
||||
@ -671,6 +724,10 @@ input, textarea {
|
||||
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 {
|
||||
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
|
||||
}
|
||||
@ -695,12 +752,18 @@ input, textarea {
|
||||
|
||||
#workInfoNmCont {
|
||||
padding: 3% 0 3% 7%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#workInfoNmCont div {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
#wType {
|
||||
margin: 0 !important;
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
box-shadow: 2px 2px 5px 3px #666;
|
||||
color: #000;
|
||||
@ -708,12 +771,12 @@ input, textarea {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.inputRadio {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.type {
|
||||
margin-left: 11%;
|
||||
width: 95%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
.type p {
|
||||
padding: 3% 5% 3% 5%;
|
||||
}
|
||||
|
||||
#workComments h3 {
|
||||
@ -1042,7 +1105,7 @@ input, textarea {
|
||||
}
|
||||
|
||||
#prefCont {
|
||||
padding: 5%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
#prefCont .changeInput {
|
||||
@ -1144,7 +1207,7 @@ input, textarea {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
#done {
|
||||
#doneUsers {
|
||||
height: 34vh;
|
||||
top: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
@ -61,63 +61,70 @@
|
||||
</div>
|
||||
<div id="optionsContainer" style="right:{{optionsStatus}};background-color:{{divColor 'sidebarColor'}}">
|
||||
<h3>Preferences</h3>
|
||||
|
||||
<div id="prefCont">
|
||||
<div>
|
||||
<div class="inputRadioPref">
|
||||
<div class="prefWrapper">
|
||||
<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 class="prefOptions">
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Light</p>
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Dark</p>
|
||||
<div class="optionHolder">
|
||||
{{#each selectOptions 'theme'}}
|
||||
{{> option}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="inputRadioPref">
|
||||
<div class="prefWrapper">
|
||||
<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 class="prefOptions">
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Classes</p>
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Calendar</p>
|
||||
<div class="optionHolder">
|
||||
{{#each selectOptions 'mode'}}
|
||||
{{> option}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="inputRadioPref">
|
||||
<div class="prefWrapper">
|
||||
<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 class="prefOptions">
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">1 Day</p>
|
||||
<P class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">2 Days</p>
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">1 Week</p>
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">1 Month</p>
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Never</p>
|
||||
<div class="optionHolder">
|
||||
{{#each selectOptions 'timeHide'}}
|
||||
{{> option}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="inputRadioPref">
|
||||
<div class="prefWrapper">
|
||||
<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 class="prefOptions">
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Yes</p>
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">No</p>
|
||||
<div class="optionHolder">
|
||||
{{#each selectOptions 'done'}}
|
||||
{{> option}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="inputRadioPref">
|
||||
<div class="prefWrapper">
|
||||
<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 class="prefOptions">
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">Yes</p>
|
||||
<p class="prefOptionText" style="background-color:{{divColor 'mainColor'}}">No</p>
|
||||
<div class="optionHolder">
|
||||
{{#each selectOptions 'hideReport'}}
|
||||
{{> option}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img id="bg" src={{bgSrc}} style="min-width:{{screen}}">
|
||||
<div id="mainBody{{highlight}}">
|
||||
{{#if currMode 'classes'}}
|
||||
@ -141,29 +148,31 @@
|
||||
<div id="workInfoContainer">
|
||||
<div id="workNameDiv">
|
||||
<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 id="workInfoNmCont">
|
||||
<div>
|
||||
<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>
|
||||
<span class="workTitle">Description:</span><br>
|
||||
<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 class="inputRadio">
|
||||
<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 class="workOptions type">
|
||||
<p class="workOptionText" style="background-color:{{divColor 'mainColor'}}">Normal</p>
|
||||
<p class="workOptionText" style="background-color:{{divColor 'mainColor'}}">Quiz</p>
|
||||
<p class="workOptionText" style="background-color:{{divColor 'mainColor'}}">Test</p>
|
||||
<p class="workOptionText" style="background-color:{{divColor 'mainColor'}}">Project</p>
|
||||
<p class="workOptionText" style="background-color:{{divColor 'mainColor'}}">Other</p>
|
||||
<div class="optionHolder type">
|
||||
{{#each selectOptions 'type'}}
|
||||
{{> option}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="workAttach">Attach other files</div>
|
||||
@ -193,7 +202,7 @@
|
||||
</div>
|
||||
{{#unless newWork}}
|
||||
<div id="workToggle">
|
||||
<div id="done">
|
||||
<div id="doneUsers">
|
||||
{{#each work 'done'}}
|
||||
{{> doneUsers}}
|
||||
{{/each}}
|
||||
@ -364,3 +373,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="option">
|
||||
<p class="optionText" style="background-color:{{divColor 'mainColor'}}">{{alias}}</p>
|
||||
</template>
|
||||
|
||||
@ -8,6 +8,8 @@ import './main.html';
|
||||
var load = true;
|
||||
var calWorkOpen = null;
|
||||
var calWorkDate = null;
|
||||
modifyingInput = null;
|
||||
dropOpen = null;
|
||||
|
||||
var openValues = {
|
||||
"menu": "-270px",
|
||||
@ -31,18 +33,6 @@ var defaultWork = {
|
||||
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.
|
||||
Session.set("user",{}); // Stores user preferences.
|
||||
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("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.
|
||||
@ -227,11 +218,9 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
|
||||
|
||||
Template.registerHelper('pref', (val) => { // Obtains all user preferences.
|
||||
var preferences = Session.get("user").preferences;
|
||||
if(val === 'timeHide' || val === 'done' || val == 'hideReport') {
|
||||
var invert = _.invert(ref);
|
||||
return invert[preferences[val]];
|
||||
}
|
||||
return preferences[val].charAt(0).toUpperCase() + preferences[val].slice(1);
|
||||
return options[val].filter(function(entry) {
|
||||
return (val === 'theme') ? _.isEqual(preferences[val], themeColors[entry.val]) : preferences[val] === entry.val;
|
||||
})[0].alias;
|
||||
});
|
||||
|
||||
Template.registerHelper('commentLength', () => { // Returns characters left for comment length.
|
||||
@ -255,7 +244,6 @@ function startDragula() {
|
||||
}
|
||||
Meteor.call("reorderClasses", final);
|
||||
});
|
||||
console.log("Started!");
|
||||
}
|
||||
|
||||
Template.main.helpers({
|
||||
@ -430,14 +418,16 @@ Template.main.helpers({
|
||||
return;
|
||||
},
|
||||
work(value) { // Returns the specified work value.
|
||||
if (Session.equals("currentWorkId", null)) return;
|
||||
if (Session.equals("currentWork", null)) return;
|
||||
if (Session.get("newWork")) {
|
||||
return defaultWork[value];
|
||||
} else {
|
||||
var thisWork = work.findOne({_id: Session.get("currentWorkId")});
|
||||
return formReadable(thisWork,value);
|
||||
return formReadable(Session.get("currentWork"),value);
|
||||
}
|
||||
},
|
||||
selectOptions(val) {
|
||||
return options[val];
|
||||
},
|
||||
newWork() { // If user is creating a new work.
|
||||
return Session.get("newWork");
|
||||
},
|
||||
@ -485,7 +475,6 @@ Template.main.helpers({
|
||||
Template.main.events({
|
||||
'click' (event) { // Closes respective divs when clicking outside of them. Order matters.
|
||||
var e = event.target.className;
|
||||
var modifyingInput = Session.get("modifying");
|
||||
|
||||
if (event.target.id !== modifyingInput && // Input for dropdown closing.
|
||||
event.target.id !== modifyingInput + "a" &&
|
||||
@ -523,7 +512,7 @@ Template.main.events({
|
||||
|
||||
if (!event.target.className.includes("radio") && // Dropdown closing.
|
||||
!event.target.parentNode.className.includes("workOptions") &&
|
||||
!event.target.parentNode.className.includes("prefOptions") &&
|
||||
!event.target.parentNode.className.includes("optionHolder") &&
|
||||
event.target.readOnly !== true) {
|
||||
var radio;
|
||||
if (Session.equals("sidebar", "optionsContainer") || Session.equals("sidebar", "both")) {
|
||||
@ -531,11 +520,17 @@ Template.main.events({
|
||||
} else {
|
||||
radio = "workOptions";
|
||||
}
|
||||
for (var i = 0; i < document.getElementsByClassName(radio).length; i++) {
|
||||
/*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"));
|
||||
@ -600,7 +595,7 @@ Template.main.events({
|
||||
attr = event.target.getAttribute("classid");
|
||||
}
|
||||
Session.set("newWork", true);
|
||||
Session.set("currentWorkId",attr);
|
||||
Session.set("currentWork",{"class": attr});
|
||||
openDivFade(document.getElementsByClassName("overlay")[0]);
|
||||
},
|
||||
'click #dropdown' (event) {
|
||||
@ -612,14 +607,14 @@ Template.main.events({
|
||||
'click .workCard' (event) { // Display work information on work card click.
|
||||
var dom = event.target;
|
||||
while (event.target.className !== "workCard") event.target = event.target.parentNode;
|
||||
workid = event.target.getAttribute("workid");
|
||||
|
||||
Session.set("newWork", false);
|
||||
Session.set("currentWorkId",workid);
|
||||
var workid = event.target.getAttribute("workid");
|
||||
var thisWork = work.findOne({
|
||||
_id: workid
|
||||
});
|
||||
|
||||
Session.set("newWork", false);
|
||||
Session.set("currentWork", thisWork);
|
||||
|
||||
if (!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) {
|
||||
var currClass = classes.findOne({
|
||||
_id: thisWork["class"]
|
||||
@ -628,7 +623,7 @@ Template.main.events({
|
||||
Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
|
||||
currClass.moderators.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]);
|
||||
@ -653,122 +648,62 @@ Template.main.events({
|
||||
});
|
||||
},
|
||||
// HANDLING INPUT CHANGING
|
||||
'click .change' (event) { // Click changable inputs. Creates an input where the span is.
|
||||
var thisWork = work.findOne({
|
||||
_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 .clickModify' (event) {
|
||||
modifyingInput = event.target.id;
|
||||
},
|
||||
'click .radio' (event) { // Click dropdown input. Opens the dropdown menu.
|
||||
var thisWork = work.findOne({
|
||||
_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 ||
|
||||
Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
|
||||
currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
|
||||
currClass.banned.indexOf(Meteor.userId()) !== -1
|
||||
)) return;
|
||||
'keydown .dropdown' (event) {
|
||||
console.log("hi");
|
||||
},
|
||||
/*'focus .dropdown' (event) {
|
||||
if(dropOpen) return;
|
||||
event.target.click();
|
||||
dropOpen = true;
|
||||
},*/
|
||||
'click .dropdown' (event) {
|
||||
if(event.target.id === modifyingInput && dropOpen) {
|
||||
$("#" + modifyingInput).next()
|
||||
.fadeOut(200)
|
||||
.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;
|
||||
var radio;
|
||||
if (Session.equals("sidebar", "optionsContainer") || Session.equals("sidebar", "both")) {
|
||||
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();
|
||||
$("#" + modifyingInput).next()
|
||||
.fadeOut('fast')
|
||||
.hide('fast');
|
||||
},
|
||||
'click #workComment' (event) {
|
||||
var restrict = event.target.maxLength;
|
||||
@ -976,8 +911,8 @@ function sendData(funcName) { // Call Meteor function, and do actions after func
|
||||
Meteor.call(funcName, serverData);
|
||||
}
|
||||
|
||||
function closeInput(modifyingInput) { // Close a changeable input and change it back to span.
|
||||
var input = document.getElementById(modifyingInput + "a");
|
||||
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")) {
|
||||
@ -1006,11 +941,17 @@ function closeInput(modifyingInput) { // Close a changeable input and change it
|
||||
if (getHomeworkFormData() === null) return;
|
||||
serverData = getHomeworkFormData();
|
||||
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.
|
||||
var inputs = document.getElementsByClassName("req");
|
||||
/*var inputs = document.getElementsByClassName("req");
|
||||
var stop;
|
||||
for (var i = 0; i < inputs.length; i++) {
|
||||
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.type = document.getElementById("workType").childNodes[0].nodeValue.toLowerCase();
|
||||
|
||||
return data;
|
||||
return data;*/
|
||||
var inputs = ["wName", "wDueDate", "wDescription", "wType"];
|
||||
var optional = ["wDescription"];
|
||||
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;
|
||||
}
|
||||
|
||||
function getPreferencesData() { // Get all data relating to preferences.
|
||||
var profile = Session.get("user");
|
||||
var options = {
|
||||
"theme": themeColors[document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase()],
|
||||
"mode": document.getElementById("prefMode").childNodes[0].nodeValue.toLowerCase(),
|
||||
"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"];
|
||||
@ -1069,6 +1005,7 @@ function toDate(date) { // Turns formatted date back to Date constructor.
|
||||
}
|
||||
|
||||
function formReadable(input, val) { // Makes work information readable by users.
|
||||
if(input)
|
||||
switch(val) {
|
||||
case "typeColor": return input.typeColor = workColors[input.type];
|
||||
case "name": return input.name;
|
||||
|
||||
@ -67,13 +67,30 @@ themeColors = {
|
||||
}
|
||||
};
|
||||
|
||||
options = {
|
||||
"theme": [
|
||||
{"val": "light", "alias": "Light"},
|
||||
{"val": "dark", "alias": "Dark"}
|
||||
],
|
||||
"mode": [
|
||||
{"val": "classes", "alias": "Classes"},
|
||||
{"val": "calendar", "alias": "Calendar"}
|
||||
],
|
||||
"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;
|
||||
ref = {
|
||||
"1 Day":1,
|
||||
"2 Days":2,
|
||||
"1 Week":7,
|
||||
"1 Month":30,
|
||||
"Never":0,
|
||||
"Yes":true,
|
||||
"No":false
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user