From a137dff49fec4c5242410c793ba0488efa39e8ee Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sun, 15 Jan 2017 23:59:10 -0500 Subject: [PATCH] signup page --- hourglass/client/main/main.js | 7 +-- hourglass/client/profile/profile.css | 56 +++++++++++++++++ hourglass/client/profile/profile.html | 37 +++++++++--- hourglass/client/profile/profile.js | 86 ++++++++++++++++++++++++++- hourglass/lib/constants.js | 7 ++- hourglass/lib/router.js | 1 - 6 files changed, 177 insertions(+), 17 deletions(-) diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index b5bd0d7..226592d 100644 --- a/hourglass/client/main/main.js +++ b/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() diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css index e69de29..ab7f9e4 100644 --- a/hourglass/client/profile/profile.css +++ b/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); +} + diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html index 3e8c4d3..3e8dd71 100644 --- a/hourglass/client/profile/profile.html +++ b/hourglass/client/profile/profile.html @@ -1,12 +1,33 @@ diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js index e1b73d0..7c90fcc 100644 --- a/hourglass/client/profile/profile.js +++ b/hourglass/client/profile/profile.js @@ -15,7 +15,89 @@ Template.profile.helpers({ }); Template.profile.events({ - 'click #schoolnext' () { + '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"); + }, }); diff --git a/hourglass/lib/constants.js b/hourglass/lib/constants.js index 03bc54a..3649b06 100644 --- a/hourglass/lib/constants.js +++ b/hourglass/lib/constants.js @@ -122,4 +122,9 @@ options = { } serverData = null; -confirm = null; \ No newline at end of file +confirm = null; + +//Input Handling +modifyingInput = null; +clickDisabled = false; +optionOpen = false; \ No newline at end of file diff --git a/hourglass/lib/router.js b/hourglass/lib/router.js index 50de376..5456e8f 100644 --- a/hourglass/lib/router.js +++ b/hourglass/lib/router.js @@ -54,7 +54,6 @@ Router.route('/profile', { } }, action: function() { - Session.set("user", Meteor.user().profile); this.render("profile"); } });