Merge branch 'master' of github.com:ksjdragon/hourglass

hourglass/client/main/main.css

@@ -76,6 +76,10 @@ body {
 	pointer-events: all;
 }
 
+input {
+	font-family: Raleway !important;
+}
+
 .noScroll {
 	width: 100%;
 	height: 100%;

hourglass/client/main/main.js

@@ -8,9 +8,6 @@ import './main.html';
 var load = true;
 var calWorkOpen = null;
 var calWorkDate = null;
-modifyingInput = null;
-var clickDisabled = false;
-var optionOpen = false;
 
 var defaultWork = {
     name: "Name | Click here to edit...",
@@ -59,11 +56,6 @@ Template.main.rendered = function() {
     document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
 };
 
-Template.profile.rendered = function() {
-    Accounts._loginButtonsSession.set('dropdownVisible', true);
-    document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
-};
-
 // Global Helpers
 
 Template.registerHelper('adminPage', () => {
@@ -77,7 +69,7 @@ Template.registerHelper('screen', (multiplier, fraction) => {
 });
 
 Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors.
-    return Session.get("user").preferences.theme[div];
+    return (Object.keys(Session.get("user")).length === 0) ? themeColors["lux"][div] : Session.get("user").preferences.theme[div];
 });
 
 Template.registerHelper('overlayDim', (part) => { // Gets size of the overlay container.
@@ -750,7 +742,7 @@ Template.main.events({
 
 // Other Functions
 
-function toggleOptionMenu(toggle, menu) {
+toggleOptionMenu = function(toggle, menu) {
     if(toggle) {
         $(".selectedOption").removeClass("selectedOption");
         $("#" + menu).next()
@@ -971,6 +963,26 @@ function formReadable(input, val) { // Makes work information readable by users.
     }
 }
 
+checkComplete = function(required, inputs) {
+    var values = {};
+    var no = [];
+    for (var i = 0; i < inputs.length; i++) {
+        var val = inputs[i].value;
+        var where = inputs[i].getAttribute("form");
+        if (val === "" && _.contains(required, where)) {
+            no.push(where);
+        }
+        values[where] = val;
+    }
+    if (no.length > 0) { // Check missing fields.
+        return [false,no.reduce(function(a, b) {
+            return (b === no[no.length - 1]) ? a + ((no.length === 2) ? " and " : ", and ") + b : a + ", " + b;
+        }), values];
+    } else {
+        return [true,"", values];
+    }   
+}
+
 startDragula = function() {
     dragula([document.querySelector('#classesMode'), document.querySelector('#nonexistant')], {
         moves: function(el, container, handle) {

hourglass/client/menus/menus.js

@@ -503,23 +503,11 @@ Template.createClass.helpers({
 Template.createClass.events({
     'click #creSubmit' () {
         var inputs = document.getElementsByClassName("creInput");
-        var values = {};
         var required = ["school", "name", "privacy", "category"];
-        var no = [];
+        var alert = checkComplete(required, inputs);
-        for (var i = 0; i < inputs.length; i++) {
+        var values = alert[2];
-            var val = inputs[i].value;
+        if (!alert[0]) { // Check missing fields.
-            var where = inputs[i].getAttribute("form");
+            sAlert.error("Missing " + alert[1], {
-            if (val === "" && _.contains(required, where)) {
-                no.push(where);
-            }
-            values[where] = val;
-        }
-        console.log(values);
-        console.log(no);
-        if (no.length > 0) { // Check missing fields.
-            sAlert.error("Missing " + no.reduce(function(a, b) {
-                return (b === no[no.length - 1]) ? a + ", and " + b : a + ", " + b;
-            }), {
                 effect: 'stackslide',
                 position: 'top',
                 timeout: 3000

hourglass/client/profile/profile.css

@@ -1,11 +1,144 @@
-#profInfo {
+#profPageWrapper {
-    margin: auto;
+	width: 100%;
-    margin-top: 5%;
+	height: 100%;
-    width: 50%;
+
-    padding: 1%;
+	background-color: #282933;
+	color: #FCF0F0 !important;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	user-select: none;
 }
 
-#schoolnext {
+#profPageWrapper input {
-    text-align: right;
+	color: #FCF0F0 !important;
-    margin-right: 2%;
+}
-}
+
+#profPageWrapper .optionText {
+	background-color: #282933 !important;
+}
+
+#profPageWrapper #classSearch {
+	background-color: rgba(0,0,0,0.1);
+	border: 0;
+
+	-webkit-transition: background-color 0.5s ease;  
+	-moz-transition: background-color 0.5s ease; 
+	-ms-transition: background-color 0.5s ease;
+	transition: background-color 0.5s ease;
+}
+
+#profPageWrapper #classSearch:hover {
+	background-color: rgba(0,0,0,0.2);
+}
+
+#profPageWrapper .classBox:not(:first-child) {
+	border: 1px solid #FCF0F0 !important;
+}
+
+#basicInfo {
+	width: 100%;
+	position: absolute;
+	top: 20%;
+}
+
+#newUserWrapper {
+	width: 25%;
+	padding: 2.5%;
+	margin: auto;
+
+	background-color: rgba(255,255,255,0.2);
+}
+
+#newUserWrapper .formDiv {
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	background-color: transparent;
+}
+
+.opTitle {
+	font-weight: 200;
+	margin: 0;
+}
+
+#newUserWrapper .optionHolder {
+	width: 100% !important;
+}
+
+#basicNext {
+	padding: 2%;
+	border: 1px solid #FCF0F0;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+
+	cursor: pointer;
+	text-align: center; 
+
+	-webkit-transition: background-color 0.5s ease;  
+	-moz-transition: background-color 0.5s ease; 
+	-ms-transition: background-color 0.5s ease;
+	transition: background-color 0.5s ease;
+}
+
+#basicNext:hover {
+	background-color: rgba(0,0,0,0.1);
+}
+
+#backArrow {
+	margin: auto;
+	z-index: 10;
+	cursor: pointer;
+	opacity: 0;
+
+	position: relative;
+	top: 5%;
+
+	-webkit-transition: background-color 0.5s ease;  
+	-moz-transition: background-color 0.5s ease; 
+	-ms-transition: background-color 0.5s ease;
+	transition: background-color 0.5s ease;
+}
+
+#backArrow i {
+	line-height: 5vh;
+}
+
+#backArrow:hover {
+	background-color: rgba(255,255,255,0.05);
+}
+
+#forwardArrow {
+	margin: auto;
+	z-index: 10;
+	cursor: pointer;
+	opacity: 0;
+
+	position: relative;
+	top: 85%;
+
+	-webkit-transition: background-color 0.5s ease;  
+	-moz-transition: background-color 0.5s ease; 
+	-ms-transition: background-color 0.5s ease;
+	transition: background-color 0.5s ease;
+}
+
+#forwardArrow:hover {
+	background-color: rgba(255,255,255,0.05);
+}
+
+#enrollInfo {
+	width: 100%;
+	position: absolute;
+	top: 150%;	
+}
+
+#enrollUserWrapper {
+	width: 60%;
+	margin: auto;
+	padding: 1%;
+	background-color: rgba(255,255,255,0.2);
+}

hourglass/client/profile/profile.html

@@ -1,42 +1,70 @@
 <template name="profile">
     {{> sAlert}}
-    <div id="schoolgrade">
+    <div id="profPageWrapper">
-
+        <div id="backArrow" class="circleIcon moveArrow" style="display:{{showArrow 'back'}}">
-        <div id="profInfo" class="card" style="background-color:{{divColor 'secondaryColor'}}">
+            <i class="fa fa-chevron-up" aria-hidden="true"></i>
-						<h2 class="profHea">About You</h2>
+        </div>
-						<div id="about">
+        <div id="basicInfo">
-								<div class="prefWrapper">
+            <div id="newUserWrapper">
-										<p class="profTitle">School Name:</p>
+                <div class="formDiv">
-										<div id="school" class="clickModify dropdown" tabindex="1">
+                    <p class="opTitle">**School:</p>
-						            <span>{{school}}</span>
+                    <input id="school" class="basicInfoField clickModify dropdown" type="text" form="school" placeholder=" Click here to edit..." readonly>
-						            <i class="fa fa-caret-down" aria-hidden="true"></i>
+                    <div class="optionHolder">
-						        </div>
+                        {{#each selectOptions 'school'}}
-						        <div class="optionHolder smallText">
+                            {{> option}}
-						            {{#each selectOptions 'school'}}
+                        {{/each}}
-						            {{> option}}
+                    </div>
-						            {{/each}}
+               </div>
-						        </div>
+               <div class="formDiv">
-					      </div>
+                    <p class="opTitle">**Grade:</p>
-								<br>
+                    <input id="grade" class="basicInfoField clickModify dropdown" type="text" form="grade" placeholder="Click here to edit..." readonly>
-								<div class="prefWrapper">
+                    <div class="optionHolder">
-										<p class="profTitle">Graduation Year:</p>
+                        {{#each selectOptions 'grade'}}
-										<div id="grade" class="clickModify dropdown" tabindex="2">
+                            {{> option}}
-						            <span>{{grade}}</span>
+                        {{/each}}
-						            <i class="fa fa-caret-down" aria-hidden="true"></i>
+                    </div>
-						        </div>
+               </div>
-						        <div class="optionHolder">
+               <h3 id="basicNext">Continue</h3>
-						            {{#each selectOptions 'grade'}}
+           </div>
-						            {{> option}}
+        </div>
-						            {{/each}}
+        <div id="enrollInfo">
-						        </div>
+            <div id="enrollUserWrapper">
-					      </div>
+                <div id="joinTop">
-						</div>
+                    <i class="fa fa-search" aria-hidden="true"></i>
-    <p id="schoolnext" {{schoolgradenext}}>Next</p>
+                    {{> inputAutocomplete id="classSearch" settings=classSettings placeholder="Search..."}}
-    <div id="classsection" style="display:none;">
+                    <!-- <h4 id="private">Join Private Class</h4>
-        <!-- CLASS ENROLLMENT + CREATE -->
+                    <input id="privateCode" placeholder="Enter code here..."> -->
-    </div>
+                </div>
-				</div>
+                <div id="settingClassWrapper">
-
+                    <div id="label" class="classBox">
-        <!-- GRAD YEAR INPUT -->
+                        <span class="name classText">Class Name</span>
+                        <span class="teacher classText">Teacher</span>
+                        <span class="hour classText">Hour</span>
+                        <span class="subscriptions classText">Members</span>
+                    </div>
+                    {{#if notsearching}}
+                        {{#each classes}}
+                            {{> classDisplay}}
+                        {{/each}}
+                        {{#if noclass}}
+                            <h3>No results found...</h3>
+                        {{/if}}
+                    {{else}}
+                        {{#each autocompleteClasses}}
+                            {{> classDisplay}}
+                        {{/each}}
+                        {{#if notfound}}
+                            <h3>No results found...</h3>
+                        {{/if}}
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+        <div id="classsection" style="display:none;">
+            <!-- CLASS ENROLLMENT + CREATE -->
+        </div>
+        <div id="forwardArrow" class="circleIcon moveArrow" style="display:{{showArrow 'forward'}}">
+            <i class="fa fa-chevron-down" aria-hidden="true"></i>
+        </div>
     </div>
 </template>

hourglass/client/profile/profile.js

@@ -3,40 +3,69 @@ import {
     Template
 } from 'meteor/templating';
 
-var openValues = {
-    "owned": "-650px",
-    "priv": "-160px"
-};
 
-confirm = null; // Sets function to execute after confirmation click.
+Session.set("sections", [0,0]) // [Completed, Viewing] 
-
+Session.set("profile", {});
-// Sets up global variables
+Session.set("notsearching", true); // If user isn't searching
-
-Session.set("profClassTab", "manClass"); // Set default classes card mode to 'Manage Classes.'
-Session.set("owned", false); // Status of createdClasses.
-Session.set("privClass", false); //Status of joinPrivClass.
-Session.set("modifying", null); // Stores current open input.
-Session.set("notsearching", true); // If user is searching in search box.
-Session.set("autocompleteDivs", null); // Stores returned autocomplete results.
-Session.set("confirmText", null); // Stores text for different confirmation functions.
-Session.set("selectedClass", null); // Stores selected owned class info.
-Session.set("code", null); // If owned class has a code.
 Session.set("noclass", null); // If user doesn't have classes.
 Session.set("notfound", null); // If no results for autocomplete.
 
 Template.profile.helpers({
-    /*    themeName() {
+    schoolgradenext() {
-            var vals = _.values(themeColors);
+        if(_.contains([null, undefined, ""], Meteor.user().profile.school ||
-            var curtheme = Session.get("user").preferences.theme;
+                      _.contains([null, undefined, ""], Meteor.user().profile.grade))) {
-            for (var i = 0; i < vals.length; i++) {
+            return "";
-                if (_.isEqual(vals[i], curtheme)) {
+        } else {
-                    var name = _.keys(themeColors)[i];
+            return "disabled";
-                    return name.charAt(0).toUpperCase() + name.slice(1);
+        }
-                }
+    },
+    showArrow(type) {
+        var order = [
+            {"back":false, "forward":true},
+            {"back":true, "forward":true},
+            {"back":true, "forward":false}
+        ];
+        var section = Session.get("sections");
+        if(type === "forward") {
+            return (section[1]+1 <= section[0] && order[section[1]][type]) ? "block":"none";
+        } else {
+            return (order[section[1]][type]) ? "block":"none";
+        }
+    },
+    classes() {
+         var array = classes.find({
+            status: {
+                $eq: true
+            },
+            privacy: {
+                $eq: false
+            },
+            school: {
+                $eq: Session.get("profile").school
             }
-            return "Custom";
+        }, {
-        },*/
+            sort: {
-    classSettings() { // Returns autocomplete array for classes.
+                subscribers: -1
+            }
+        }, {
+            limit: 20
+        }).fetch();
+
+        for (var i = 0; i < array.length; i++) {
+            array[i].join = true;
+            array[i].subscribers = array[i].subscribers.length;
+            array[i].teachershort = array[i].teacher.split(" ").slice(1).reduce(function(a, b) {
+                return a + " " + b;
+            });
+        }
+        if (array.length === 0) {
+            Session.set("noclass", true);
+        } else {
+            Session.set("noclass", false);
+        }
+        return array;
+    },
+    classSettings() {
         return {
             position: "bottom",
             limit: 10,
@@ -63,108 +92,6 @@ Template.profile.helpers({
             }]
         };
     },
-    schoolComplete() { // Returns autocomplete array for schools.
-        return {
-            position: "bottom",
-            limit: 6,
-            rules: [{
-                token: '',
-                collection: schools,
-                field: 'name',
-                matchAll: true,
-                template: Template.schoolList
-            }]
-        };
-    },
-    teacherComplete() { // Returns autocomplete array for teachers.
-        return {
-            position: "bottom",
-            limit: 1,
-            rules: [{
-                token: '',
-                collection: classes,
-                field: 'teacher',
-                template: Template.teacherList
-            }]
-        };
-    },
-    banner() { // Returns banner
-        return Session.get("user").banner;
-    },
-    avatar() { // Returns avatar
-        return Meteor.user().services.google.picture;
-    },
-    username() { //Returns current user's username
-        return Session.get("user").name;
-    },
-    description() { // Returns the current user's description
-        if (Session.get("user").description !== undefined && Session.get("user").description !== null && Session.get("user").description !== "") return Session.get("user").description;
-        return "Say something about yourself!";
-    },
-    school() { // Returns the current user's school's name
-        if (!_.contains([null, undefined, ""], Session.get("user").school)) return Session.get("user").school;
-        return "Click here to edit...";
-    },
-    grade() { // Returns the current user's grade
-        if (Session.get("user").grade !== undefined &&
-            Session.get("user").grade !== null &&
-            Session.get("user").grade !== "") return (Session.get("user").grade === 0) ? "Faculty" : Session.get("user").grade;
-        return "Click here to edit...";
-    },
-    classes() { // Loads all of the possible classes ( Limit of twenty shown ) ( Sorts by class size ) ( Only your school)
-        var array = classes.find({
-            status: {
-                $eq: true
-            },
-            privacy: {
-                $eq: false
-            },
-            _id: {
-                $nin: Session.get("user").classes
-            },
-            school: {
-                $eq: Session.get("user").school
-            }
-        }, {
-            sort: {
-                subscribers: -1
-            }
-        }, {
-            limit: 20
-        }).fetch();
-
-        for (var i = 0; i < array.length; i++) {
-            array[i].subscribers = array[i].subscribers.length;
-        }
-        if (array.length === 0) {
-            Session.set("noclass", true);
-        } else {
-            Session.set("noclass", false);
-        }
-        return array;
-    },
-    ownedStatus() { // Status of createdClasses
-        if (!Session.get("owned")) return openValues.owned;
-        return "0px";
-    },
-    privStatus() {
-        if (!Session.get("privClass")) return openValues.priv;
-        return "0px";
-    },
-    profClassTabColor(status) { // Change this [Supposed to show the current mode that's selected via color]    
-        if (Session.equals("profClassTab", status)) {
-            return Meteor.user().profile.preferences.theme.modeHighlight;
-        } else {
-            return;
-        }
-    },
-    profClassTab(tab) { // Tells current class
-        if (Session.equals("profClassTab", tab)) {
-            return true;
-        } else {
-            return false;
-        }
-    },
     notsearching() { // Tells whether user is using the searchbox
         return Session.get("notsearching");
     },
@@ -173,316 +100,63 @@ Template.profile.helpers({
     },
     notfound() { // Returns if autocomplete has no results.
         return Session.get("notfound");
-    },
-    noclass() { // Returns if user has classes.
-        return Session.get("noclass");
-    },
-    confirmText() { // Returns respective text for different confirm functions.
-        return Session.get("confirmText");
-    },
-    selectedClass(val) { // Returns values for selectedClass
-        if (Session.equals("selectedClass", null)) return;
-        return Session.get("selectedClass")[val];
-    },
-    code() { // Returns if selected class has code.
-        return Session.get("code");
     }
 });
 
 Template.profile.events({
-    'click' (event) { // Whenever a click happens'
+    'click' (event) { // Closes respective divs when clicking outside of them. Order matters.
         var e = event.target.className;
-        if (modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
-            if (!(e.includes("optionHolder") || e.includes("optionText"))) {
-                if (document.getElementById(modifyingInput).className.includes("dropdown")) {
-                    $(".optionHolder")
-                        .fadeOut(250, "linear");
 
-                    $(".selectedOption").removeClass("selectedOption");
+        if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
-                } else {
+            if (!(e.includes("optionHolder") || e.includes("optionText"))) {
-                    if (modifyingInput === "description") {
+                toggleOptionMenu(false, modifyingInput);
-                        Session.set("restrictText", {});
-                        $("#" + modifyingInput).css('cursor', 'pointer');
-                        var newSetting = Session.get("user");
-                        newSetting[modifyingInput] = document.getElementById(modifyingInput).value;
-                        serverData = newSetting;
-                        sendData("editProfile");
-                    }
-                }
                 modifyingInput = null;
             }
         }
-
     },
-    // MAIN BUTTONS
+    'click #basicNext' () {
-    'click #mainpage' () {
+        var inputs = document.getElementsByClassName("basicInfoField");
-        if (!Meteor.userId() || _.contains([null, undefined, ""], Meteor.user().profile.school)) {
+        var required = ["school", "grade"];
-            sAlert.closeAll();
+        var alert = checkComplete(required, inputs);
-            sAlert.error('Please fill in your profile!', {
+        var values = alert[2];
+        if(!alert[0]) {
+            sAlert.error("Missing " + alert[1], {
                 effect: 'stackslide',
-                position: 'top'
+                position: 'top',
+                timeout: 3000
             });
-        } else {
-            window.location = '/';
-        }
-    },
-    'click #schoolnext' () {
-        if (Meteor.user().profile.school && Meteor.user().profile.grade) {
-            document.getElementById('schoolnext').style.display = "none";
-            document.getElementById('classsection').style.display = "";
-        } else {
-            sAlert.error("Please fill out the fields", {
-                effect: 'stackslide',
-                position: 'top'
-            });
-        }
-    },
-    'click .addClass' () {
-        if (Session.equals("profClassTab", "addClass")) return;
-        var functionHolder = document.getElementById("profClassInfoHolder");
-        closeDivFade(functionHolder);
-        var div = document.getElementById("profClasses");
-        div.style.height = "50%";
-        setTimeout(function() {
-            Session.set("profClassTab", "addClass");
-            div.style.height = "70%";
-            openDivFade(functionHolder);
-        }, 400);
-    },
-    'click .manageClass' () {
-        if (Session.equals("profClassTab", "manClass")) return;
-        var functionHolder = document.getElementById("profClassInfoHolder");
-        closeDivFade(functionHolder);
-        var div = document.getElementById("profClasses");
-        div.style.height = "50%";
-        setTimeout(function() {
-            Session.set("profClassTab", "manClass");
-            div.style.height = "70%";
-            openDivFade(functionHolder);
-        }, 400);
-    },
-    'click .createClass' () {
-        if (Session.equals("profClassTab", "creClass")) return;
-        var functionHolder = document.getElementById("profClassInfoHolder");
-        closeDivFade(functionHolder);
-        var div = document.getElementById("profClasses");
-        div.style.height = "50%";
-        setTimeout(function() {
-            Session.set("profClassTab", "creClass");
-            div.style.height = "70%";
-            openDivFade(functionHolder);
-        }, 400);
-    },
-    'click .classBox' (event) { // When you click on a box that holds class
-        if (event.target.id === "label" ||
-            Session.equals("profClassTab", "manClass") ||
-            event.target.className.includes("fa-times")) return;
-
-        if (event.target.className !== "classBox") {
-            var attribute = event.target.parentNode.getAttribute("classid");
-        } else {
-            var attribute = event.target.getAttribute("classid");
-        }
-        var data = [attribute, ""];
-        serverData = data;
-        confirm = "joinClass";
-        Session.set("confirmText", "Join class?");
-
-        openDivFade(document.getElementsByClassName("overlay")[0]);
-        setTimeout(function() {
-            document.getElementsByClassName("overlay")[0].style.opacity = "1";
-        }, 200);
-    },
-    'click .owned' (event) { // When you click your own class
-        if (event.target.id === "label") return;
-        if (!event.target.className.includes("owned")) {
-            var attribute = event.target.parentNode.getAttribute("classid");
-        } else {
-            var attribute = event.target.getAttribute("classid");
-        }
-        if (attribute === Meteor.userId()) return;
-        Session.set("selectedClass", null);
-        var usertype = ["moderators", "banned"];
-        var array = classes.findOne({
-            _id: attribute
-        });
-
-        for (var i = 0; i < usertype.length; i++) {
-            var users = array[usertype[i]];
-            array[usertype[i]] = [];
-            for (var j = 0; j < users.length; j++) {
-                var detailusers = {};
-                var user = Meteor.users.findOne({
-                    _id: users[j]
-                });
-                detailusers._id = user._id;
-                detailusers.email = user.services.google.email;
-                detailusers.name = user.profile.name;
-                array[usertype[i]].push(detailusers);
-            }
-        }
-
-        Meteor.call('getCode', attribute, function(err, result) {
-            array.code = result;
-            if (result === "None") {
-                Session.set("code", false);
-            } else {
-                Session.set("code", true);
-            }
-
-            Session.set("selectedClass", array);
-            Session.set("owned", true);
-        });
-    },
-    'click .classBox .fa-times' (event) { // Leaves a class
-        var box = event.target.parentNode;
-        var classid = box.getAttribute("classid");
-        serverData = box.getAttribute("classid");
-        confirm = "leaveClass";
-        Session.set("confirmText", "Leave this class?");
-        openDivFade(document.getElementsByClassName("overlay")[0]);
-    },
-    'click #creSubmit' () { //Submits form data for class
-        var data = getCreateFormData();
-        if (data === null) return;
-        serverData = data;
-        confirm = "createClass";
-        Session.set("confirmText", "Submit request?");
-
-        openDivFade(document.getElementsByClassName("overlay")[0]);
-    },
-    'click #private' (event) { // Joins private class
-        if (Session.get("privClass")) return;
-        var input = document.getElementById("privateCode");
-        input.className = "";
-        input.placeholder = "Enter code here...";
-        Session.set("privClass", true);
-    },
-    'click #privSubmit' () { // Submits private class code
-        var input = document.getElementById("privateCode");
-        var code = input.value;
-        input.value = "";
-        serverData = code;
-        Meteor.call("joinPrivateClass", code, function(error, result) {
-            if (result) {
-                Session.set("privClass", false);
-            } else {
-                input.className = "formInvalid";
-                input.placeholder = "Invalid code.";
-            }
-        });
-    },
-    // OWNED CLASS BUTTONS
-    'click #copy' () { // Copies code for private classes.
-        if (document.getElementById("code").value === "None") return;
-        document.getElementById("code").select();
-        document.execCommand("copy");
-    },
-    'click .userAdder .fa-plus' (event) { // Gives/Removes user privileges
-        var input = event.target.parentNode.childNodes[3];
-        input.placeholder = "1234@abc.xyz";
-        input.className.replace(" formInvalid", "");
-        var value = input.value;
-        var classid = document.getElementById("createdClasses").getAttribute("classid");
-        input.value = " ";
-        if (checkUser(value, classid)) {
-            input.className += " formInvalid";
-            input.placeholder = "Not a valid user";
             return;
-        }
+        } 
-        var user = Meteor.users.findOne({
+        var profile = Session.get("profile");
-            "services.google.email": value
+        profile.school = values["school"];
-        });
+        profile.grade = values["grade"];
-        serverData = [
+        Session.set("profile", profile);
-            user._id,
+        Session.set("sections", [(Session.get("sections")[0] < 1) ? 1 : Session.get("sections")[0], Session.get("sections")[1]])
-            classid,
+        slideToField(1);
-            event.target.parentNode.childNodes[1].childNodes[0].nodeValue.replace(":", "").toLowerCase(),
-            true
-        ];
-        sendData("trackUserInClass");
     },
-    'click .userBox .fa-times' (event) { // Removes user from permissions
+    'click #backArrow' () {
-        var box = event.target.parentNode;
+        slideToField(Session.get("sections")[1]-1);
-        serverData = [
-            box.getAttribute("userid"),
-            document.getElementById("createdClasses").getAttribute("classid"),
-            box.parentNode.parentNode.childNodes[1].childNodes[1].childNodes[0].nodeValue.replace(":", "").toLowerCase(),
-            false
-        ];
-        sendData("trackUserInClass");
     },
-    'click #deleteClass' () {
+    'click #forwardArrow' () {
-        serverData = document.getElementById("createdClasses").getAttribute("classid");
+        slideToField(Session.get("sections")[1]+1);
-        confirm = "deleteClass";
-        Session.set("confirmText", "Delete this class?");
-        openDivFade(document.getElementsByClassName("overlay")[0]);
     },
-    'click #changeAdmin span' (event) { // Click to give ownership of class.
+    // HANDLING INPUT CHANGING
-        if (Session.get("changeAdmin")) return;
-        Session.set("changeAdmin", true);
-        var input = document.createElement("input");
-        input.placeholder = "1234@abc.xyz";
-        var i = document.createElement("i");
-        i.className = "fa fa-exchange";
-        i.setAttribute("aria-hidden", "true");
-        event.target.parentNode.appendChild(input);
-        event.target.parentNode.appendChild(i);
-    },
-    'click .fa-exchange' (event) { //Changes class admin upon confirmation
-        var input = event.target.parentNode.childNodes[3];
-        input.placeholder = "1234@abc.xyz";
-        input.className.replace(" formInvalid", "");
-        var value = input.value;
-        var classid = document.getElementById("createdClasses").getAttribute("classid");
-        input.value = "";
-        if (checkUser(value, classid)) {
-            input.className += " formInvalid";
-            input.placeholder = "Not a valid user";
-            return;
-        }
-        var user = Meteor.users.findOne({
-            "services.google.email": value
-        });
-        serverData = [user._id, classid];
-        confirm = "changeAdmin";
-        Session.set("confirmText", "Are you really sure?");
-        openDivFade(document.getElementsByClassName("overlay")[0]);
-        document.getElementById("createdClasses").style.marginRight = "-40%";
-    },
-    // OVERLAY BUTTONS
-    'click .fa-check-circle-o' () { // Confirmation Button
-        sendData(confirm);
-        closeDivFade(document.getElementsByClassName("overlay")[0]);
-        if (confirm === "createClass") {
-            var form = document.getElementsByClassName("creInput");
-            for (var i = 0; i < form.length; i++) form[i].value = "";
-        }
-        serverData = null;
-        confirm = null;
-    },
-    'click .fa-times-circle-o' () { // Deny Button
-        closeDivFade(document.getElementsByClassName("overlay")[0]);
-        serverData = null;
-        confirm = null;
-    },
-    // INPUT HANDLING
     'focus .clickModify' (event) {
         $(".optionHolder")
-            .fadeOut(250, "linear");
+        .fadeOut(100);
 
-        if (modifyingInput !== null) {
+        if(modifyingInput !== null) {
-            if (!$("#" + modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput);
+            if(!$("#"+modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput);
         }
         modifyingInput = event.target.id;
-        if (!$("#" + modifyingInput)[0].className.includes("dropdown")) {
+        if(!$("#"+modifyingInput)[0].className.includes("dropdown")) {
             event.target.select();
             event.target.style.cursor = "text";
         }
     },
     'keydown .dropdown' (event) {
-        event.preventDefault();
+        var first = $("#"+modifyingInput).next().children("p:first-child");
-        var first = $("#" + modifyingInput).next().children("p:first-child");
+        var last = $("#"+modifyingInput).next().children("p:last-child");
-        var last = $("#" + modifyingInput).next().children("p:last-child");
         var next = $(".selectedOption").next();
         var prev = $(".selectedOption").prev();
         var lastSel = $(".selectedOption");
@@ -516,63 +190,26 @@ Template.profile.events({
             }
         } else if (event.keyCode === 13) {
             lastSel[0].click();
+            $("#"+modifyingInput)[0].focus();
         }
     },
-    'focus .dropdown' (event) {
+    'click .dropdown, focus .dropdown' (event) {
-        $(".selectedOption").removeClass("selectedOption");
+        if(clickDisabled) return;
-
+        clickDisabled = true;
-        $("#" + modifyingInput).next()
+        if(event.target.id === optionOpen[0] && optionOpen[1]) {
-            .css('opacity', 0)
+            toggleOptionMenu(false, event.target.id);
-            .slideDown(300)
+        } else {
-            .animate({
+            toggleOptionMenu(true, event.target.id);
-                opacity: 1
+        }
-            }, {
+        setTimeout(function(){clickDisabled = false;},130); // Prevents spamming and handles extra click events.
-                queue: false,
-                duration: 100
-            });
     },
     'click .optionText' (event) { // Click each preferences setting.
         var option = event.target.childNodes[0].nodeValue;
-        var userSettings = ["description", "school", "grade"];
+        document.getElementById(modifyingInput).value = option;
-        var newSetting = Session.get("user");
+        toggleOptionMenu(false, modifyingInput);
-
-        if (modifyingInput === "privacy" || modifyingInput === "category") {
-            document.getElementById(modifyingInput).value = option;
-            $("#" + modifyingInput).next()
-                .fadeOut(250, "linear");
-            $(".selectedOption").removeClass("selectedOption");
-            return;
-        }
-
-        if (_.contains(userSettings, modifyingInput)) {
-            newSetting[modifyingInput] = (modifyingInput === "grade") ? parseInt(option) : option;
-        } else {
-            newSetting.preferences[modifyingInput] = (function() {
-                var value = options[modifyingInput].filter(function(entry) {
-                    return option === entry.alias;
-                })[0].val;
-                return (modifyingInput === 'theme') ? themeColors[value] : value;
-            })();
-        }
-        Session.set("user", newSetting);
-        serverData = Session.get("user");
-        sendData("editProfile");
-
-        $("#" + modifyingInput).next()
-            .fadeOut(250, "linear");
-
         $(".selectedOption").removeClass("selectedOption");
     },
-    'input .restrict' (event) {
+    'input #classSearch' (event) { // Auto-complete updater
-        var restrict = event.target.maxLength;
-        var chars = restrict - event.target.value.length;
-        var newSetting = Session.get("restrictText");
-        newSetting[event.target.id] = (chars === restrict) ? "" : (chars.toString() + ((chars === 1) ? " character " : " characters ") + "left");
-        newSetting.selected = event.target.id;
-        Session.set("restrictText", newSetting);
-    },
-    // AUTOCOMPLETE HANDLING
-    'input #profClassSearch' (event) { // Auto-complete updater
         if (event.target.value.length === 0) {
             Session.set("notsearching", true);
         } else {
@@ -599,132 +236,24 @@ Template.profile.events({
                 });
             }
             Session.set("autocompleteDivs", divs.sort(function(a, b) {
-                return b.subscribers - a.subscribers
+                return b.subscribers - a.subscribers;
             }));
         } catch (err) {}
-    }
+    },
 });
 
-function openDivFade(div) {
+function slideToField(field) {
-    div.style.display = "block";
+    var order = ["basicInfo", "enrollInfo"];
-    div.style.opacity = "0";
+    $(".moveArrow").animate({"opacity":0})
-    setTimeout(function() {
+    var viewing = Session.get("sections")[1]
-        div.style.opacity = "1";
+    var move = (viewing-field < 0) ? "-50%" : "150%";
-    }, 100);
+    $("#"+order[viewing]).animate({top: move});
-}
+    $("#"+order[field]).animate({
-
+        top:"20%"
-function closeDivFade(div) {
+    },{
-    div.style.opacity = "0";
+        complete: function() {
-    setTimeout(function() {
+            Session.set("sections", [Session.get("sections")[0],field]);
-        div.style.display = "none";
+            $(".moveArrow").animate({"opacity":1});
-    }, 100);
-}
-
-function sendData(funcName) {
-    Meteor.call(funcName, serverData, function(err, result) {
-        if (funcName === "trackUserInClass") {
-            var selectedClass = Session.get("selectedClass");
-            var array = classes.findOne({
-                _id: selectedClass._id
-            });
-            var usertype = ["moderators", "banned"];
-            for (var i = 0; i < usertype.length; i++) {
-                var users = array[usertype[i]];
-                array[usertype[i]] = [];
-                for (var j = 0; j < users.length; j++) {
-                    var detailusers = {};
-                    var user = Meteor.users.findOne({
-                        _id: users[j]
-                    });
-                    detailusers._id = user._id;
-                    detailusers.email = user.services.google.email;
-                    detailusers.name = user.profile.name;
-                    array[usertype[i]].push(detailusers);
-                }
-            }
-            selectedClass.moderators = array.moderators;
-            selectedClass.banned = array.banned;
-            Session.set("selectedClass", selectedClass);
         }
     });
 }
-
-function getProfileData() { // Gets all data related to profile.
-    var profile = Session.get("user");
-
-    profile.description = document.getElementById("motd").childNodes[0].nodeValue;
-    if (profile.description.includes("Say something about yourself!")) profile.description = "";
-
-    profile.school = document.getElementById("school").childNodes[0].nodeValue;
-    if (profile.school === "Click here to edit...") profile.school = "";
-
-    var gradein = document.getElementById("grade").childNodes[0].nodeValue;
-    profile.grade = parseInt(gradein.substring(gradein.length - 2, gradein));
-    if (!profile.grade) profile.grade = "";
-
-    profile.avatar = document.getElementById("profAvatar").src;
-    profile.banner = document.getElementById("profBanner").src;
-
-    var themename = document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase();
-    var themeobj = themeColors[themename];
-    profile.preferences = {
-        "theme": themeobj,
-        "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]
-    };
-    return profile;
-}
-
-function getCreateFormData() { // Gets create class form data, and returns null.
-    var stop;
-    var form = document.getElementsByClassName("creInput");
-    for (var i = 0; i < form.length; i++) { // Checks for missing/invalid fields.
-        if (i === 1 || i === 2) continue;
-        if (form[i].value === "") {
-            form[i].focus();
-            form[i].placeholder = "Missing field";
-            form[i].className += " formInvalid";
-            stop = true;
-        } else {
-            form[i].className = form[i].className.replace(" formInvalid", "");
-        }
-    }
-    if (stop) return null;
-
-    var school = form[0].value;
-    var hour = form[1].value;
-    var teacher = form[2].value;
-    var name = form[3].value;
-    if (form[4].value == "Public") {
-        var privacy = false;
-    } else {
-        var privacy = true;
-    }
-    var category = form[5].value.toLowerCase();
-    return {
-        school: school,
-        hour: hour,
-        teacher: teacher,
-        name: name,
-        privacy: privacy,
-        category: category,
-        status: false,
-        code: ""
-    };
-}
-
-function checkUser(email, classid) { // Checks if user email exists.
-    var user = Meteor.users.findOne({
-        "services.google.email": email
-    });
-    if (user === undefined) {
-        return true;
-    } else {
-        if (classes.findOne({
-                _id: classid
-            }).subscribers)
-            return false;
-    }
-}

hourglass/lib/constants.js

@@ -122,4 +122,9 @@ options = {
 }
 
 serverData = null;
-confirm = null;
+confirm = null;
+
+//Input Handling
+modifyingInput = null;
+clickDisabled = false;
+optionOpen = false;

hourglass/lib/router.js

@@ -62,7 +62,6 @@ Router.route('/profile', {
         }
     },
     action: function() {
-        Session.set("user", Meteor.user().profile);
         this.render("profile");
     }
 });