diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index 0dab4af..e883c3f 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -76,6 +76,10 @@ body { pointer-events: all; } +input { + font-family: Raleway !important; +} + .noScroll { width: 100%; height: 100%; diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index 4a007c0..fe3a541 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...", @@ -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) { diff --git a/hourglass/client/menus/menus.js b/hourglass/client/menus/menus.js index 9cf6eb8..f8c8e91 100644 --- a/hourglass/client/menus/menus.js +++ b/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 = []; - 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; - } - 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; - }), { + var alert = checkComplete(required, inputs); + var values = alert[2]; + if (!alert[0]) { // Check missing fields. + sAlert.error("Missing " + alert[1], { effect: 'stackslide', position: 'top', timeout: 3000 diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css index 7b55c75..381bf12 100644 --- a/hourglass/client/profile/profile.css +++ b/hourglass/client/profile/profile.css @@ -1,11 +1,144 @@ -#profInfo { - margin: auto; - margin-top: 5%; - width: 50%; - padding: 1%; +#profPageWrapper { + width: 100%; + height: 100%; + + background-color: #282933; + color: #FCF0F0 !important; + + position: absolute; + top: 0; + left: 0; + + user-select: none; } -#schoolnext { - text-align: right; - margin-right: 2%; -} \ No newline at end of file +#profPageWrapper input { + color: #FCF0F0 !important; +} + +#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); +} diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html index ed4c83a..dc4f350 100644 --- a/hourglass/client/profile/profile.html +++ b/hourglass/client/profile/profile.html @@ -1,42 +1,70 @@ diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js index 7b70f2d..a6c8317 100644 --- a/hourglass/client/profile/profile.js +++ b/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. - -// Sets up global variables - -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("sections", [0,0]) // [Completed, Viewing] +Session.set("profile", {}); +Session.set("notsearching", true); // If user isn't searching Session.set("noclass", null); // If user doesn't have classes. Session.set("notfound", null); // If no results for autocomplete. Template.profile.helpers({ - /* themeName() { - var vals = _.values(themeColors); - var curtheme = Session.get("user").preferences.theme; - for (var i = 0; i < vals.length; i++) { - if (_.isEqual(vals[i], curtheme)) { - var name = _.keys(themeColors)[i]; - return name.charAt(0).toUpperCase() + name.slice(1); - } + schoolgradenext() { + if(_.contains([null, undefined, ""], Meteor.user().profile.school || + _.contains([null, undefined, ""], Meteor.user().profile.grade))) { + return ""; + } else { + return "disabled"; + } + }, + 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"; - },*/ - classSettings() { // Returns autocomplete array for classes. + }, { + sort: { + 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"); - } else { - if (modifyingInput === "description") { - Session.set("restrictText", {}); - $("#" + modifyingInput).css('cursor', 'pointer'); - var newSetting = Session.get("user"); - newSetting[modifyingInput] = document.getElementById(modifyingInput).value; - serverData = newSetting; - sendData("editProfile"); - } - } + if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) { + if (!(e.includes("optionHolder") || e.includes("optionText"))) { + toggleOptionMenu(false, modifyingInput); modifyingInput = null; } } - }, - // MAIN BUTTONS - 'click #mainpage' () { - if (!Meteor.userId() || _.contains([null, undefined, ""], Meteor.user().profile.school)) { - sAlert.closeAll(); - sAlert.error('Please fill in your profile!', { + 'click #basicNext' () { + var inputs = document.getElementsByClassName("basicInfoField"); + var required = ["school", "grade"]; + var alert = checkComplete(required, inputs); + 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({ - "services.google.email": value - }); - serverData = [ - user._id, - classid, - event.target.parentNode.childNodes[1].childNodes[0].nodeValue.replace(":", "").toLowerCase(), - true - ]; - sendData("trackUserInClass"); + } + var profile = Session.get("profile"); + profile.school = values["school"]; + profile.grade = values["grade"]; + Session.set("profile", profile); + Session.set("sections", [(Session.get("sections")[0] < 1) ? 1 : Session.get("sections")[0], Session.get("sections")[1]]) + slideToField(1); }, - 'click .userBox .fa-times' (event) { // Removes user from permissions - var box = event.target.parentNode; - 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 #backArrow' () { + slideToField(Session.get("sections")[1]-1); }, - 'click #deleteClass' () { - serverData = document.getElementById("createdClasses").getAttribute("classid"); - confirm = "deleteClass"; - Session.set("confirmText", "Delete this class?"); - openDivFade(document.getElementsByClassName("overlay")[0]); + 'click #forwardArrow' () { + slideToField(Session.get("sections")[1]+1); }, - 'click #changeAdmin span' (event) { // Click to give ownership of class. - 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 + // HANDLING INPUT CHANGING 'focus .clickModify' (event) { $(".optionHolder") - .fadeOut(250, "linear"); + .fadeOut(100); - if (modifyingInput !== null) { - if (!$("#" + modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput); + if(modifyingInput !== null) { + 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 last = $("#" + modifyingInput).next().children("p:last-child"); + 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"); @@ -516,63 +190,26 @@ Template.profile.events({ } } else if (event.keyCode === 13) { lastSel[0].click(); + $("#"+modifyingInput)[0].focus(); } }, - 'focus .dropdown' (event) { - $(".selectedOption").removeClass("selectedOption"); - - $("#" + modifyingInput).next() - .css('opacity', 0) - .slideDown(300) - .animate({ - opacity: 1 - }, { - queue: false, - duration: 100 - }); + '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; - var userSettings = ["description", "school", "grade"]; - var newSetting = Session.get("user"); - - 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"); - + document.getElementById(modifyingInput).value = option; + toggleOptionMenu(false, modifyingInput); $(".selectedOption").removeClass("selectedOption"); }, - 'input .restrict' (event) { - 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 + 'input #classSearch' (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) { - div.style.display = "block"; - div.style.opacity = "0"; - setTimeout(function() { - div.style.opacity = "1"; - }, 100); -} - -function closeDivFade(div) { - div.style.opacity = "0"; - setTimeout(function() { - div.style.display = "none"; - }, 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 slideToField(field) { + var order = ["basicInfo", "enrollInfo"]; + $(".moveArrow").animate({"opacity":0}) + var viewing = Session.get("sections")[1] + var move = (viewing-field < 0) ? "-50%" : "150%"; + $("#"+order[viewing]).animate({top: move}); + $("#"+order[field]).animate({ + top:"20%" + },{ + complete: function() { + Session.set("sections", [Session.get("sections")[0],field]); + $(".moveArrow").animate({"opacity":1}); } }); } - -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; - } -} 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 0633ab5..be739f1 100644 --- a/hourglass/lib/router.js +++ b/hourglass/lib/router.js @@ -62,7 +62,6 @@ Router.route('/profile', { } }, action: function() { - Session.set("user", Meteor.user().profile); this.render("profile"); } });