From 4c813b6667284a9f9748b93cd23db1c574cee5fb Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Sun, 9 Oct 2016 22:57:04 -0400
Subject: [PATCH] Basic new input system

---
 hourglass/client/main/main.css  | 121 +++++++++----
 hourglass/client/main/main.html | 105 +++++++-----
 hourglass/client/main/main.js   | 291 +++++++++++++-------------------
 hourglass/lib/constants.js      |  39 +++--
 4 files changed, 293 insertions(+), 263 deletions(-)

diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index 7e63165..c341a02 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -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;
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index cb5eca9..dc88f55 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -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>
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 670de05..a781b73 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -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.
@@ -240,22 +229,21 @@ Template.registerHelper('commentLength', () => { // Returns characters left for
 
 function startDragula() {
     dragula([document.querySelector('#classesMode'), document.querySelector('#nonexistant')],
-            {
-                moves: function(el, container, handle) {
-                    // return handle.classList.contains("classInfo") || handle.classList.contains("mainClassName");
-                    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);
+        {
+            moves: function(el, container, handle) {
+                // return handle.classList.contains("classInfo") || handle.classList.contains("mainClassName");
+                return _.intersection(["classInfo", "mainClassName", "mainClassHour", "mainClassTeacher"], handle.classList).length > 0;
             }
-            Meteor.call("reorderClasses", final);
-        });
-    console.log("Started!");
+        })
+    .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);
+    });
 }
 
 Template.main.helpers({
@@ -266,7 +254,7 @@ Template.main.helpers({
             if (_.isEqual(vals[i], curtheme)) {
                 var name = _.keys(themeColors)[i];
                 return name.charAt(0).toUpperCase() + name.slice(1);
-            }
+            }       
         }
         return "Custom";
     },
@@ -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;
-}
-
-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;
+    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;
+    }
 }
 
 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;
diff --git a/hourglass/lib/constants.js b/hourglass/lib/constants.js
index f0de329..d64aff5 100644
--- a/hourglass/lib/constants.js
+++ b/hourglass/lib/constants.js
@@ -63,17 +63,34 @@ themeColors =  {
         "iconHighlight": "#70e6e6",
         "modeHighlight": "#70e6e6",
         "classCardColor":"#1faab1",
-        "textColor": "#fcf0f0"  
+        "textColor": "#fcf0f0"
     }
 };
 
-serverData = null;
-ref = {
-    "1 Day":1,
-    "2 Days":2,
-    "1 Week":7,
-    "1 Month":30,
-    "Never":0,
-    "Yes":true,
-    "No":false
-};
\ No newline at end of file
+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;
\ No newline at end of file