Basic new input system
This commit is contained in:
Kenneth Jao
parent
b5a4351bc2
commit
4c813b6667
@ -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;
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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({
|
||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
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