signup page

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...",
@@ -77,7 +74,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 +747,7 @@ Template.main.events({
 
 // Other Functions
 
-function toggleOptionMenu(toggle, menu) {
+toggleOptionMenu = function(toggle, menu) {
     if(toggle) {
         $(".selectedOption").removeClass("selectedOption");
         $("#" + menu).next()

hourglass/client/profile/profile.css

@@ -0,0 +1,56 @@
+#profPageWrapper {
+	width: 100%;
+	height: 100%;
+
+	background-color: #DBDBDB;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+#basicInfo {
+	margin-top: 10%;
+}
+
+#newUserWrapper {
+	width: 25%;
+	padding: 3%;
+	margin: auto;
+
+	background-color: rgba(255,255,255,0.3);
+}
+
+#newUserWrapper .formDiv {
+	width: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+.opTitle {
+	font-weight: 200;
+	margin: 0;
+}
+
+#newUserWrapper .optionHolder {
+	width: 100% !important;
+}
+
+#basicNext {
+	padding: 2%;
+	-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);
+}
+

hourglass/client/profile/profile.html

@@ -1,12 +1,33 @@
 <template name="profile">
     {{> sAlert}}
-    <div id="schoolgrade">
+    <div id="profPageWrapper">
-        <!-- SCHOOL INPUT -->
+        <div id="basicInfo">
-        <!-- GRAD YEAR INPUT -->
+            <div id="newUserWrapper">
+                <div class="formDiv">
+                    <p class="opTitle">**School:</p>
+                    <input id="school" class="clickModify dropdown" type="text" form="privacy" placeholder=" Click here to edit..." readonly>
+                    <div class="optionHolder">
+                        {{#each selectOptions 'school'}}
+                            {{> option}}
+                        {{/each}}
+                    </div>
+               </div>
+               <div class="formDiv">
+                    <p class="opTitle">**Grade:</p>
+                    <input id="grade" class="clickModify dropdown" type="text" form="privacy" placeholder="Click here to edit..." readonly>
+                    <div class="optionHolder">
+                        {{#each selectOptions 'grade'}}
+                            {{> option}}
+                        {{/each}}
+                    </div>
+               </div>
+               <h3 id="basicNext" style="border:1px solid {{divColor 'textColor'}}">Continue</h3>
+           </div>
+        </div>
+        <button id="schoolnext" {{schoolgradenext}}>Next</button>
+        <div id="classsection" style="display:none;">
+            <!-- CLASS ENROLLMENT + CREATE -->
+        </div>
+        <button>Finish</button>
     </div>
-    <button id="schoolnext" {{schoolgradenext}}>Next</button>
-    <div id="classsection" style="display:none;">
-        <!-- CLASS ENROLLMENT + CREATE -->
-    </div>
-    <button>Finish</button>
 </template>

hourglass/client/profile/profile.js

@@ -15,7 +15,89 @@ Template.profile.helpers({
 });
 
 Template.profile.events({
+    'click' (event) { // Closes respective divs when clicking outside of them. Order matters.
+        console.log("asdf");
+        var e = event.target.className;
+
+        if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
+            console.log("hia");
+            if (!(e.includes("optionHolder") || e.includes("optionText"))) {
+                console.log("hi");
+                toggleOptionMenu(false, modifyingInput);
+                modifyingInput = null;
+            }
+        }
+    },
     'click #schoolnext' () {    
         // Animation to display class section
-    }
+    },
+    // HANDLING INPUT CHANGING
+    'focus .clickModify' (event) {
+        $(".optionHolder")
+        .fadeOut(100);
+
+        if(modifyingInput !== null) {
+            if(!$("#"+modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput);
+        }
+        modifyingInput = event.target.id;
+        if(!$("#"+modifyingInput)[0].className.includes("dropdown")) {
+            event.target.select();
+            event.target.style.cursor = "text";
+        }
+    },
+    'keydown .dropdown' (event) {
+        var first = $("#"+modifyingInput).next().children("p:first-child");
+        var last = $("#"+modifyingInput).next().children("p:last-child");
+        var next = $(".selectedOption").next();
+        var prev = $(".selectedOption").prev();
+        var lastSel = $(".selectedOption");
+
+        if (event.keyCode === 38) {
+            event.preventDefault();
+            if (lastSel === undefined) {
+                last.addClass("selectedOption");
+            } else {
+                if (prev.length === 0) {
+                    last.addClass("selectedOption");
+                    lastSel.removeClass("selectedOption");
+                } else {
+                    prev.addClass("selectedOption");
+                    lastSel.removeClass("selectedOption");
+                }
+            }
+        } else if (event.keyCode === 40) {
+            event.preventDefault();
+            if (lastSel === undefined) {
+                first.addClass("selectedOption");
+                last.removeClass("selectedOption");
+            } else {
+                if (next.length === 0) {
+                    first.addClass("selectedOption");
+                    lastSel.removeClass("selectedOption");
+                } else {
+                    next.addClass("selectedOption");
+                    lastSel.removeClass("selectedOption");
+                }
+            }
+        } else if (event.keyCode === 13) {
+            lastSel[0].click();
+            $("#"+modifyingInput)[0].focus();
+        }
+    },
+    'click .dropdown, focus .dropdown' (event) {
+        if(clickDisabled) return;
+        clickDisabled = true;
+        if(event.target.id === optionOpen[0] && optionOpen[1]) {
+            toggleOptionMenu(false, event.target.id);
+        } else {
+            toggleOptionMenu(true, event.target.id);
+        }
+        setTimeout(function(){clickDisabled = false;},130); // Prevents spamming and handles extra click events.
+    },
+    'click .optionText' (event) { // Click each preferences setting.
+        var option = event.target.childNodes[0].nodeValue;
+        document.getElementById(modifyingInput).value = option;
+        toggleOptionMenu(false, modifyingInput);
+        $(".selectedOption").removeClass("selectedOption");
+    },
 });

hourglass/lib/constants.js

@@ -123,3 +123,8 @@ options = {
 
 serverData = null;
 confirm = null;
+
+//Input Handling
+modifyingInput = null;
+clickDisabled = false;
+optionOpen = false;

hourglass/lib/router.js

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