From cd72662cb61deedfc832169b8ca5fcee85ed78dd Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Tue, 30 Aug 2016 18:49:33 -0400 Subject: [PATCH 1/2] var renaming and commenting, main.js --- hourglass/client/main/main.css | 5 + hourglass/client/main/main.js | 474 ++++++++++++++++----------------- 2 files changed, 228 insertions(+), 251 deletions(-) diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index 6acbf57..2a3e341 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -805,6 +805,10 @@ input, textarea { font-size: 75%; } +#commentRestrict { + font-weight: 400; +} + #commentSubmit { margin-bottom: 0; padding: 2%; @@ -832,6 +836,7 @@ input, textarea { .doneUser { padding: 12%; background-color: rgba(0,0,0,0.1); + overflow-y: auto; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index 91dcb30..cf4ad72 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -5,6 +5,7 @@ import { import './main.html'; var load = true; +var calCreWork = null; var openValues = { "menu": "-25%", @@ -42,14 +43,13 @@ var ref = { }; // Reactive variables. -Session.set("calendarclasses", null); // +Session.set("calendarClasses", null); // Session.set("sidebar", null); Session.set("newWork",null); Session.set("currentWork",null); Session.set("currentReadableWork",null); Session.set("modifying",null); Session.set("noclass",null); -Session.set("calCreWork",null); Session.set("calWorkDate",null); Session.set("classDisp",[]); Session.set("classDispHover",null); @@ -73,52 +73,54 @@ Template.registerHelper('overlayDim', (part) => { // Gets size of the overlay co return width + height + margin + bg; }); -Template.registerHelper('myClasses', () => { - if (Meteor.user().profile.classes === undefined || Meteor.user().profile.classes.length === 0) { - Session.set("noclass",true); +Template.registerHelper('myClasses', () => { // Gets all classes and respective works. + if (Meteor.user().profile.classes === undefined || Meteor.user().profile.classes.length === 0) { // Null checking. + Session.set("noclass",true); // Makes sure to display nothing. return []; } else { var array = []; var courses = Meteor.user().profile.classes; - var classDisp = Session.get("classDisp"); + var classDisp = Session.get("classDisp"); // Get sidebar class filter. var hide = Meteor.user().profile.preferences.timeHide; - for(var i = 0; i < courses.length; i++) { + + for(var i = 0; i < courses.length; i++) { // For each user class. found = classes.findOne({_id:courses[i]}); found.subscribers = found.subscribers.length; found.mine = true; - if(found.admin === Meteor.userId()) { + if(found.admin === Meteor.userId()) { // If user owns this class. found.box = " owned"; found.mine = false; } - if(classDisp.indexOf(courses[i]) !== -1) found.selected = true; + if(classDisp.indexOf(courses[i]) !== -1) found.selected = true; // Filter selected. array.push(found); var thisWork = work.find({class: courses[i]}).fetch(); - if(classDisp.length !== 0 && classDisp.indexOf(found._id) === -1) { + if(classDisp.length !== 0 && classDisp.indexOf(found._id) === -1) { // Filter classes based on filter. array[i].thisClassWork = []; continue; } - for(var j = 0; j < thisWork.length; j++) { - if(hide !== 0) { + for(var j = 0; j < thisWork.length; j++) { // For each work in class. + if(hide !== 0) { // Time to hide isn't never. var due = (moment(thisWork[j].dueDate))["_d"]; - var today = (moment().subtract(hide,'days'))["_d"]; - if(today > due) { + var offset = (moment().subtract(hide,'days'))["_d"]; + if(offset > due) { // If due is before hide days before today thisWork[j] = "no"; j = 0; } } - if(thisWork[j] !== "no" && Meteor.user().profile.preferences.done) { - if(thisWork[j].done.indexOf(Meteor.userId()) !== -1) { + if(thisWork[j] !== "no" && Meteor.user().profile.preferences.done) { // If done filter is true + if(thisWork[j].done.indexOf(Meteor.userId()) !== -1) { // If user marked this work done. thisWork[j] = "no"; j = 0; } } } - while(thisWork.indexOf("no") !== -1) thisWork.splice(thisWork.indexOf("no"),1); + while(thisWork.indexOf("no") !== -1) thisWork.splice(thisWork.indexOf("no"),1); // Splice all filtered works. for(var j = 0; j < thisWork.length; j++) { + thisWork[j].realDate = thisWork[j].dueDate; thisWork[j].dueDate = moment(thisWork[j].dueDate).calendar(null, { sameDay: '[Today]', nextDay: '[Tomorrow]', @@ -128,14 +130,14 @@ Template.registerHelper('myClasses', () => { sameElse: 'MMMM Do' }); - if(thisWork[j].dueDate === "Today") { + if(thisWork[j].dueDate === "Today") { // Font weight based on date proximity. thisWork[j].cardDate = "600"; } else if(thisWork[j].dueDate === "Tomorrow") { thisWork[j].cardDate = "400"; } thisWork[j].typeColor = workColors[thisWork[j].type]; - var hoverHighlight = Session.get("classDispHover"); + var hoverHighlight = Session.get("classDispHover"); // Highlight/scale related class works on hover. if(hoverHighlight !== null && hoverHighlight === found._id) { thisWork[j].scale = "-ms-transform: scale(1.12)-webkit-transform: scale(1.12);transform: scale(1.12)"; } else { @@ -145,13 +147,13 @@ Template.registerHelper('myClasses', () => { array[i].thisClassWork = thisWork; } Session.set("noclass",false); - Session.set("calendarclasses", Meteor.user().profile.classes); + Session.set("calendarClasses", array); return array; } }); -Template.registerHelper('pref', (val) => { - if(Object.keys(Meteor.user().profile.preferences).length !== Object.keys(defaults).length) { +Template.registerHelper('pref', (val) => { // Obtains all user preferences. + if(Object.keys(Meteor.user().profile.preferences).length !== Object.keys(defaults).length) { // Invalid preference checking. var array = Meteor.user().profile; array.preferences = defaults; serverData = array; @@ -169,10 +171,10 @@ Template.registerHelper('pref', (val) => { }); Template.main.helpers({ - schoolName() { // Finds the name of the user's school + schoolName() { // Finds the name of the user's school. return " - " + Meteor.user().profile.school; }, - iconColor(icon) { //Sets the color of the user's icon + iconColor(icon) { // Sidebar status color if (Session.get("sidebar") === icon + "Container") { return themeColors[Meteor.user().profile.preferences.theme].statusIcons; } else if (Session.get("sidebar") === "both") { @@ -181,19 +183,19 @@ Template.main.helpers({ return; } }, - defaultMode() { //Loads the defaults for a new/uncustomized user + defaultMode() { //Loads the default display mode for user. if(load) { Session.set("mode",Meteor.user().profile.preferences.mode); load = false; } return; }, - bgSrc() { // Adjusts for different, larger screen sizes + bgSrc() { // Adjusts for different, larger screen sizes. var dim = [window.innerWidth, window.innerHeight]; var pic = "Backgrounds/"+themeColors[Meteor.user().profile.preferences.theme].background; return pic; }, - menuStatus() { + menuStatus() { // Status of of menu sidebar. if (Session.get("sidebar") === "menuContainer") { return "0%"; } else if (Session.get("sidebar") === "both") { @@ -202,7 +204,7 @@ Template.main.helpers({ return openValues.menu; } }, - optionsStatus() { + optionsStatus() { // Status of options sidebar. if (Session.get("sidebar") === "optionsContainer") { return "0%"; } else if (Session.get("sidebar") === "both") { @@ -211,14 +213,14 @@ Template.main.helpers({ return openValues.options; } }, - modeStatus(status) { + modeStatus(status) { // Color status of display modes. if (status === Session.get("mode")) { return themeColors[Meteor.user().profile.preferences.theme].highlightText; } else { return; } }, - currMode(name) { + currMode(name) { // Status of display mode. var mode = Session.get("mode"); if (name === mode) { return true; @@ -226,7 +228,7 @@ Template.main.helpers({ return false; } }, - calendarOptions() { // Sets up and modifies the calendar code + calendarOptions() { // Settings for the calendar, including work displaying. return { id: "fullcalendar", height: window.innerHeight * 0.8, @@ -238,57 +240,42 @@ Template.main.helpers({ }, events: function(start, end, timezone, callback) { var events = []; - var cursor = work.find({class: {$in: Session.get("calendarclasses")}}); - var classDisp = Session.get("classDisp"); - var hide = Meteor.user().profile.preferences.timeHide; - cursor.forEach(function(current) { - var disp = true; - if(classDisp.length !== 0 && classDisp.indexOf(current.class) === -1) disp = false; + var userClasses = Session.get("calendarClasses"); - if(hide !== 0) { - var due = (moment(current.dueDate))["_d"]; - var today = (moment().subtract(hide,'days'))["_d"]; - if(today > due) { - disp = false; - } - } - if(Meteor.user().profile.preferences.done && current.done.indexOf(Meteor.userId()) !== -1) disp = false; + for(var i = 0; i < userClasses.length; i++) { + var works = userClasses[i].thisClassWork; + for(var j = 0; j < works.length; j++) { + var work = works[j]; + var currClass = classes.findOne({_id: work.class}) + var inRole = false; - var inRole = false; - var currClass = classes.findOne({_id: current.class}) + if(Meteor.userId() === work.creator || + Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) || + currClass.moderators.indexOf(Meteor.userId()) !== -1 || + currClass.banned.indexOf(Meteor.userId()) !== -1 + ) inRole = true; - if(Meteor.userId() === current.creator || - Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) || - currClass.moderators.indexOf(Meteor.userId()) !== -1 || - currClass.banned.indexOf(Meteor.userId()) !== -1 - ) inRole = true; - - backgroundColor = workColors[current.type]; - title = current.name; - duedate = current.dueDate.toISOString().slice(0, 10); - - if(disp) { events.push({ - id: current._id, - start: duedate, - title: title, - backgroundColor: backgroundColor, + id: work._id, + start: work.realDate.toISOString().slice(0, 10), + title: work.name, + backgroundColor: workColors[work.type], borderColor: "#444", startEditable: inRole, - className: "workevent "+current.class, - }); + className: "workevent "+work.class, + }) } - }); + } callback(events); }, - eventDrop: function(event, delta, revertFunc) { + eventDrop: function(event, delta, revertFunc) { // When user drops from click-dragging. var current = work.findOne({_id:event.id}); var date = event.start.format().split("-"); current.dueDate = new Date(date[0],parseInt(date[1])-1,date[2],11,59,59); serverData = current; sendData("editWork"); }, - eventClick: function(event, jsEvent, view) { + eventClick: function(event, jsEvent, view) { // On-click for work. Session.set("newWork",false); var thisWork = work.findOne({_id:event.id}) Session.set("currentWork",thisWork); @@ -296,9 +283,9 @@ Template.main.helpers({ Session.set("currentReadableWork",thisReadWork); openDivFade(document.getElementsByClassName("overlay")[0]); }, - dayClick: function(date, jsEvent, view) { + dayClick: function(date, jsEvent, view) { // On-click for each day. if(jsEvent.target.className.includes("fc-past")) return; - Session.set("calCreWork",true); + calCreWork = true; Session.set("calWorkDate",date.format()); Session.set("sidebar","menuContainer"); } @@ -316,8 +303,8 @@ Template.main.helpers({ var height = window.innerHeight * 0.76; return "width:" + width.toString() + "px;height:" + height.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;margin-top:" + (0.47 * window.innerHeight - 0.5 * height).toString() + "px"; }, - calCreWork() { - if(Session.get("calCreWork")) { + calCreWork() { // Display instructions for creating a work. + if(calCreWork) { var div = document.getElementById("calCreWork"); div.style.setProperty("display","inline-block","important"); div.style.setProperty("opacity","0","important"); @@ -332,7 +319,7 @@ Template.main.helpers({ return; } }, - highlight() { // Lets someone highlight a section of the calendar + highlight() { // Calendar highlight/scale option. var hoverHighlight = Session.get("classDispHover"); var works = document.getElementsByClassName("workevent"); var work = $('.workevent'); @@ -359,22 +346,22 @@ Template.main.helpers({ } return; }, - workCenter() { // Dimensions the work center + workCenter() { // Centers work overlay. var w = window.innerWidth * 0.3; var h = window.innerHeight * 0.7; return "width:"+w.toString()+"px;height:"+h.toString()+"px;margin-left:"+-0.5*w.toString()+"px;margin-top:"+-0.5*h.toString()+"px"; }, - commentDim() { + commentDim() { // Dimensions of comment container. var work = Session.get("currentWork"); if(Session.get("newWork") === null || work === null) return; if(Session.get("newWork") || work.comments.length <= 3) return; return 0.23*window.innerHeight.toString() + "px"; }, - work(value) { + work(value) { // Returns the specified work value. if(Session.get("currentWork") === null) return; return Session.get("currentReadableWork")[value]; }, - workType() { + workType() { // Returns color for respective work type. if(Session.get("currentWork") === null) return; if(Session.get("currentWork").type === undefined) return; type = Session.get("currentWork").type; @@ -384,13 +371,13 @@ Template.main.helpers({ return workColors[type]; } }, - commentLength() { + commentLength() { // Returns characters left for comment length. return Session.get("commentRestrict"); }, - newWork() { + newWork() { // If user is creating a new work. return Session.get("newWork"); }, - inRole() { + inRole() { // Checks correct permissions. if(Session.get("newWork")) { return true; } else { @@ -405,75 +392,31 @@ Template.main.helpers({ }); Template.main.events({ - 'click .fa-bars' () { - var side = Session.get("sidebar"); - if (side === "menuContainer") { - Session.set("sidebar", null); - } else if (side === "optionsContainer") { - Session.set("sidebar", "both"); - } else if (side === "both") { - Session.set("sidebar", "optionsContainer"); - } else { - Session.set("sidebar", "menuContainer"); - } - }, - 'click .fa-cog' () { - var side = Session.get("sidebar"); - if (side === "optionsContainer") { - Session.set("sidebar", null); - } else if (side === "menuContainer") { - Session.set("sidebar", "both"); - } else if (side === "both") { - Session.set("sidebar", "menuContainer"); - } else { - Session.set("sidebar", "optionsContainer"); - } - }, - 'click .classes' () { - if (Session.get("mode") === "classes") return; - var modeHolder = document.getElementById("mainBody"); - closeDivFade(modeHolder); - setTimeout(function() { - Session.set("mode", "classes"); - openDivFade(modeHolder); - }, 300); - Session.set("sidebar",null); - }, - 'click .calendar' () { // Applies on a click of the calendar. First checks if the mode is currently the calendar, and then sets it to that if it isn't. - if (Session.get("mode") === "calendar") return; - var modeHolder = document.getElementById("mainBody"); - closeDivFade(modeHolder); - setTimeout(function() { - Session.set("mode", "calendar"); - openDivFade(modeHolder); - }, 300); - Session.set("sidebar",null); - }, - 'click' (event) { + 'click' (event) { // Closes respective divs when clicking outside of them. Order matters. var e = event.target.className; - var sessval = Session.get("modifying"); + var modifyingInput = Session.get("modifying"); - if (event.target.id !== sessval && - event.target.id !== sessval + "a" && + if (event.target.id !== modifyingInput && // Input for dropdown closing. + event.target.id !== modifyingInput + "a" && !Session.equals("modifying", null) && !event.target.parentNode.className.includes("workOptions") && !event.target.parentNode.className.includes("prefOptions")) { - closeInput(sessval); + closeInput(modifyingInput); } - if (e !== Session.get("sidebar") && + if (e !== Session.get("sidebar") && // Sidebar closing. !e.includes("fa-cog") && !e.includes("fa-bars") && !document.getElementById("menuContainer").contains(event.target) && !document.getElementById("optionsContainer").contains(event.target) && !(event.target.className.includes("fc-day") && !event.target.className.includes("fc-past"))) { - if(Session.get("calCreWork")) { - Session.set("calCreWork",false); + if(calCreWork) { + calCreWork = false; } Session.set("sidebar",null); } - if(e === "overlay") { + if(e === "overlay") { // Overlay closing. closeDivFade(document.getElementsByClassName("overlay")[0]); if(!Session.get("newWork")) { if(getHomeworkFormData() === null) return; @@ -486,10 +429,9 @@ Template.main.events({ Session.set("currentReadableWork",null); $('.req').css("color",""); Session.set("commentRestrict",null); - } - if (!event.target.className.includes("radio") && + if (!event.target.className.includes("radio") && // Dropdown closing. !event.target.parentNode.className.includes("workOptions") && !event.target.parentNode.className.includes("prefOptions") && event.target.readOnly !== true) { @@ -505,14 +447,59 @@ Template.main.events({ } } }, - 'click .creWork' (event) { + // MAIN MENU BUTTONS + 'click .fa-bars' () { // Click menu button. + var side = Session.get("sidebar"); + if (side === "menuContainer") { + Session.set("sidebar", null); + } else if (side === "optionsContainer") { + Session.set("sidebar", "both"); + } else if (side === "both") { + Session.set("sidebar", "optionsContainer"); + } else { + Session.set("sidebar", "menuContainer"); + } + }, + 'click .fa-cog' () { // Click settings button. + var side = Session.get("sidebar"); + if (side === "optionsContainer") { + Session.set("sidebar", null); + } else if (side === "menuContainer") { + Session.set("sidebar", "both"); + } else if (side === "both") { + Session.set("sidebar", "menuContainer"); + } else { + Session.set("sidebar", "optionsContainer"); + } + }, + 'click .classes' () { // Click classes mode button. + if (Session.get("mode") === "classes") return; + var modeHolder = document.getElementById("mainBody"); + closeDivFade(modeHolder); + setTimeout(function() { + Session.set("mode", "classes"); + openDivFade(modeHolder); + }, 300); + Session.set("sidebar",null); // Closes all sidebars. + }, + 'click .calendar' () { // Click calendar mode button. + if (Session.get("mode") === "calendar") return; + var modeHolder = document.getElementById("mainBody"); + closeDivFade(modeHolder); + setTimeout(function() { + Session.set("mode", "calendar"); + openDivFade(modeHolder); + }, 300); + Session.set("sidebar",null); // Closes all sidebars. + }, + 'click .creWork' (event) { // Cick add work button. if(event.target.className !== "creWork") { var attr = event.target.parentNode.getAttribute("classid"); } else { var attr = event.target.getAttribute("classid"); } Session.set("newWork", true); - Session.set("currentReadableWork", + Session.set("currentReadableWork", // Default readable work. { name:"Name | Click here to edit...", class:attr, @@ -522,20 +509,43 @@ Template.main.events({ }); Session.set("currentWork",{class:attr}); openDivFade(document.getElementsByClassName("overlay")[0]); - }, - 'click .change' (event) { + }, + '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); + var thisWork = work.findOne({_id:workid}); + Session.set("currentWork",thisWork); + var thisReadWork = formReadable(thisWork); + Session.set("currentReadableWork",thisReadWork); + if(!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) { var currClass = classes.findOne({_id: Session.get("currentWork")["class"]}); - if(!(Meteor.userId() === Session.get("currentWork").creator || + if(!(Meteor.userId() === Session.get("currentWork").creator || // If user has permission. + 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"); + }; + } + openDivFade(document.getElementsByClassName("overlay")[0]); + }, + // HANDLING INPUT CHANGING + 'click .change' (event) { // Click changable inputs. Creates an input where the span is. + if(!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) { + var currClass = classes.findOne({_id: Session.get("currentWork")["class"]}); + if(!(Meteor.userId() === Session.get("currentWork").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 sessval = Session.get("modifying"); - if (ele.id !== sessval && sessval !== null) closeInput(sessval); + var modifyingInput = Session.get("modifying"); + if (ele.id !== modifyingInput && modifyingInput !== null) closeInput(modifyingInput); Session.set("modifying", ele.id); var dim = ele.getBoundingClientRect(); @@ -585,7 +595,7 @@ Template.main.events({ ele.parentNode.appendChild(span); } }, - 'click .radio' (event) { + 'click .radio' (event) { // Click dropdown input. Opens the dropdown menu. if(!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) { var currClass = classes.findOne({_id: Session.get("currentWork")["class"]}); if(!(Meteor.userId() === Session.get("currentWork").creator || @@ -602,7 +612,7 @@ Template.main.events({ var radio = "workOptions"; } try { - for (var i = 0; i < document.getElementsByClassName(radio).length; i++) { + 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]); @@ -611,58 +621,49 @@ Template.main.events({ } catch (err) {} openDivFade(op.parentNode.parentNode.childNodes[3]); }, - 'click .workOptionText' (event) { - var sessval = Session.get("modifying"); + '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; try { - closeInput(sessval); + closeInput(modifyingInput); } catch (err) {} closeDivFade(p.parentNode); input.focus(); }, - 'click .prefOptionText' (event) { - var sessval = Session.get("modifying"); + '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; try { - closeInput(sessval); + closeInput(modifyingInput); } catch (err) {} closeDivFade(p.parentNode); input.focus(); }, - 'keydown' (event) { - var sessval = Session.get("modifying"); - if (event.keyCode == 13 && sessval != "workDesc") { + 'keydown' (event) { // Enter to close input. + var modifyingInput = Session.get("modifying"); + if (event.keyCode == 13 && modifyingInput != "workDesc") { try { - closeInput(sessval); + closeInput(modifyingInput); } catch (err) {} } - if (sessval !== null && event.keyCode !== 13) { - var restrict = document.getElementById(sessval).getAttribute("restrict"); - if (restrict !== null) { - var num = parseInt(restrict) - event.target.value.length; - var restext = document.getElementById("restrict"); - if (num === 1) { - restext.childNodes[0].nodeValue = num.toString() + " character left"; - restext.style.setProperty("color", "#999", "important"); - } else if (num <= 0) { - var input = document.getElementById(sessval + "a"); - input.value = input.value.substring(0, parseInt(restrict)); - restext.childNodes[0].nodeValue = "0 characters left"; - restext.style.setProperty("color", "#FF1A1A", "important"); - } else { - restext.childNodes[0].nodeValue = num.toString() + " characters left"; - restext.style.setProperty("color", "#999", "important"); - } - } - } }, - 'click #commentSubmit' (event) { + 'focus #workDatea' () { // Open date picker. + $('#workDatea').datepicker({ + format: 'DD, MM d, yyyy', + startDate: 'd', + todayHighlight: true, + todayBtn: true, + autoclose: true + }); + }, + // WORK OVERLAY BUTTONS + 'click #commentSubmit' (event) { // Click to submit a comment. workId = Session.get("currentWork")._id; var input = document.getElementById('workComment'); comment = input.value; @@ -676,10 +677,9 @@ Template.main.events({ Session.set("currentReadableWork",thisReadWork); }); } - }, - 'click #workSubmit' () { // Apples on the work submit button. If the current value, then terminate. Otherwise, create a new work or edit the current piece of work - if(getHomeworkFormData() === null) return; + 'click #workSubmit' () { // Click submit work to create a work. + if(getHomeworkFormData() === null) return; // Makes sure to check valid homework. serverData = Session.get("currentWork"); if(Session.get("newWork")) { sendData("createWork"); @@ -689,48 +689,40 @@ Template.main.events({ Session.set("newWork",null); closeDivFade(document.getElementsByClassName("overlay")[0]); }, - 'focus .op' (event) { - event.target.click(); - }, - 'click .workCard' (event) { - var dom = event.target; - while(event.target.className !== "workCard") event.target = event.target.parentNode; - workid = event.target.getAttribute("workid"); - - Session.set("newWork",false); - var thisWork = work.findOne({_id:workid}); - Session.set("currentWork",thisWork); - var thisReadWork = formReadable(thisWork); - Session.set("currentReadableWork",thisReadWork); - - if(!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) { - var currClass = classes.findOne({_id: Session.get("currentWork")["class"]}); - if(!(Meteor.userId() === Session.get("currentWork").creator || - 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"); - }; + 'keydown #workComment' (event) { // Restrict length on comment. + var chars = event.target.value.length; + document.getElementById("commentRestrict").style.color = "#7E7E7E"; + if(chars === 0) { // Don't display if nothing in comment. + Session.set("commentRestrict",""); + return; } + if(chars === 200) { + document.getElementById("commentRestrict").style.color = "#FF1A1A"; // Make text red if 0 characters left. - openDivFade(document.getElementsByClassName("overlay")[0]); + } + Session.set("commentRestrict", "Characters left: " + (200-chars).toString()); + + }, + 'click #markDone' () { // Click done button. + serverData = [Session.get("currentWork")._id, "done"] + sendData("toggleWork"); }, - 'focus #workDatea' () { - $('#workDatea').datepicker({ - format: 'DD, MM d, yyyy', - startDate: 'd', - todayHighlight: true, - todayBtn: true, - autoclose: true - }); + 'click #markConfirm' () { // Click confirm button. + serverData = [Session.get("currentWork")._id, "confirmations"] + sendData("toggleWork"); }, - 'click .sideClass' (event) { + 'click #markReport' () { // Click report button. + serverData = [Session.get("currentWork")._id, "reports"] + sendData("toggleWork"); + }, + // CLASS FILTERS + 'click .sideClass' (event) { // Click class list in sidebar. var div = event.target; while(div.getAttribute("classid") === null) div = div.parentNode; var classid = div.getAttribute("classid"); - if(Session.get("calCreWork")) { - Session.set("calCreWork",null); + if(calCreWork) { // If creating work from calendar. + calCreWork = null; Session.set("sidebar",null); var date = Session.get("calWorkDate").split("-"); @@ -746,7 +738,7 @@ Template.main.events({ }); Session.set("currentWork",{class:classid,dueDate:date}); openDivFade(document.getElementsByClassName("overlay")[0]); - } else { + } else { // Normal clicking turns on filter. var array = Session.get("classDisp"); if(array.indexOf(classid) !== -1) { array.splice(array.indexOf(classid),1); @@ -754,10 +746,10 @@ Template.main.events({ array.push(classid); } Session.set("classDisp",array); - $("#fullcalendar").fullCalendar( 'refetchEvents' ); + $("#fullcalendar").fullCalendar( 'refetchEvents' ); // Update calendar events. } }, - 'mouseover .sideClass' (event) { + 'mouseover .sideClass' (event) { // Highlight/scale filter on-hover. if(event.target.className !== "sideClass") { var div = event.target.parentNode; } else { @@ -767,32 +759,12 @@ Template.main.events({ var classid = div.getAttribute("classid"); Session.set("classDispHover",classid); }, - 'mouseleave .sideClass' (event) { + 'mouseleave .sideClass' (event) { // Turn off highlight/scale filter on-leave. if(event.target.className !== "sideClass") { var div = event.target.parentNode; if(div.contains(event.target)) return; } Session.set("classDispHover",null); - }, - 'keydown #workComment' (event) { - var chars = event.target.value.length; - document.getElementById("commentRestrict").style.color = "#CCC"; - if(chars === 200) { - document.getElementById("commentRestrict").style.color = "#FF1A1A"; - } - Session.set("commentRestrict", "Characters left: " + (200-chars).toString()); - }, - 'click #markDone' () { - serverData = [Session.get("currentWork")._id, "done"] - sendData("toggleWork"); - }, - 'click #markConfirm' () { - serverData = [Session.get("currentWork")._id, "confirmations"] - sendData("toggleWork"); - }, - 'click #markReport' () { - serverData = [Session.get("currentWork")._id, "reports"] - sendData("toggleWork"); } }); @@ -811,7 +783,7 @@ function closeDivFade(div) { }, 100); } -function sendData(funcName) { +function sendData(funcName) { // Call Meteor function, and do actions after function is completed depending on function. Meteor.call(funcName, serverData , function(err,result) { if((funcName === "editWork" || funcName === "createWork") && Session.get("mode") === "calendar") { $("#fullcalendar").fullCalendar( 'refetchEvents' ); @@ -827,9 +799,9 @@ function sendData(funcName) { }); } -function closeInput(sessval) { - var input = document.getElementById(sessval + "a"); - var span = document.getElementById(sessval); +function closeInput(modifyingInput) { // Close a changeable input and change it back to span. + var input = document.getElementById(modifyingInput + "a"); + var span = document.getElementById(modifyingInput); if(Session.equals("sidebar","optionsContainer") || Session.equals("sidebar","both")) { var color = "#000"; } else { @@ -841,7 +813,7 @@ function closeInput(sessval) { var restrict = document.getElementById("restrict"); restrict.parentNode.removeChild(restrict); } catch (err) {} - if (input.value === "") { + if (input.value === "") { // If input has nothing. span.childNodes[0].nodeValue = "Click here to edit..."; } else { span.childNodes[0].nodeValue = input.value; @@ -849,7 +821,7 @@ function closeInput(sessval) { span.style.display = "initial"; Session.set("modifying", null); - if(Session.equals("sidebar","optionsContainer") || Session.equals("sidebar","both")) { + if(Session.equals("sidebar","optionsContainer") || Session.equals("sidebar","both")) { // Close depending on work or preferences. serverData = getPreferencesData(); sendData("editProfile"); } else if(!Session.get("newWork")) { @@ -859,7 +831,7 @@ function closeInput(sessval) { } } -function getHomeworkFormData() { +function getHomeworkFormData() { // Get all data relating to work creation. var inputs = document.getElementsByClassName("req"); var stop; for(var i = 0; i < inputs.length; i++) { @@ -883,7 +855,7 @@ function getHomeworkFormData() { Session.set("currentReadableWork", readableData); } -function getPreferencesData() { +function getPreferencesData() { // Get all data relating to preferences. var profile = Meteor.user().profile; var options = { "theme":document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase(), @@ -898,11 +870,11 @@ function getPreferencesData() { var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var months = ["January","February","March","April","May","June","July","August","September","October","November","December"]; -function getReadableDate(date) { +function getReadableDate(date) { // Get readable date from Date constructor. return days[date.getDay()]+", "+months[date.getMonth()]+" "+date.getDate()+", "+date.getFullYear(); } -function toDate(date) { //Formats the date into the format needed for niceness +function toDate(date) { // Turns formatted date back to Date constructor. date = date.substring(date.search(",")+2,date.length); month = months.indexOf(date.substring(0,date.search(" "))); day = date.substring(date.search(" ")+1,date.search(",")); @@ -910,12 +882,12 @@ function toDate(date) { //Formats the date into the format needed for niceness return new Date(year,month,day,11,59,59); } -function formReadable(input) { +function formReadable(input) { // Makes work information readable by users. input.dueDate = getReadableDate(input.dueDate); input.type = input.type[0].toUpperCase() + input.type.slice(1); if(!Session.get("newWork")) { - if(input.done.indexOf(Meteor.userId()) !== -1) { + if(input.done.indexOf(Meteor.userId()) !== -1) { // If user marked as done. input.doneCol = "#27A127"; input.doneText = "Done!"; } else { @@ -923,17 +895,17 @@ function formReadable(input) { input.doneText = "Mark done"; } - for(var i = 0; i < input.done.length; i++) { + for(var i = 0; i < input.done.length; i++) { // Display users who marked as done. input.done[i] = {"user":Meteor.users.findOne({_id:input.done[i]}).profile.name}; } - if(input.confirmations.indexOf(Meteor.userId()) !== -1) { + if(input.confirmations.indexOf(Meteor.userId()) !== -1) { // If user confirmed. input.userConfirm = "#27A127"; } else { input.userConfirm = ""; } - if(input.reports.indexOf(Meteor.userId()) !== -1) { + if(input.reports.indexOf(Meteor.userId()) !== -1) { // If user reported. input.userReport = "#FF1A1A"; } else { input.userReport = ""; @@ -944,7 +916,7 @@ function formReadable(input) { var comments = input.comments; var resort = []; - if(!Session.get("newWork")) { + if(!Session.get("newWork")) { // Don't display comments if user is creating work. for(var k = 0; k < comments.length; k++) { var re = comments.length-k-1; resort[re] = {"comment":comments[k].comment,"date":null,"user":null}; From 535ee70bbd3c050392e1a9d7f0e211387951e085 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Tue, 30 Aug 2016 22:49:02 -0400 Subject: [PATCH 2/2] comments for profile, and small changes --- hourglass/client/main/main.js | 27 +- hourglass/client/profile/profile.html | 6 +- hourglass/client/profile/profile.js | 581 +++++++++++++------------- 3 files changed, 310 insertions(+), 304 deletions(-) diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index cf4ad72..fcfbb40 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -6,6 +6,7 @@ import './main.html'; var load = true; var calCreWork = null; +var calWorkDate = null; var openValues = { "menu": "-25%", @@ -43,17 +44,16 @@ var ref = { }; // Reactive variables. -Session.set("calendarClasses", null); // -Session.set("sidebar", null); -Session.set("newWork",null); -Session.set("currentWork",null); -Session.set("currentReadableWork",null); -Session.set("modifying",null); -Session.set("noclass",null); -Session.set("calWorkDate",null); -Session.set("classDisp",[]); -Session.set("classDispHover",null); -Session.set("commentRestrict",null); +Session.set("calendarClasses", null); +Session.set("sidebar", null); // Status of sidebar +Session.set("newWork",null); // If user creating new work. +Session.set("currentWork",null); // Stores current selected work info. +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. +Session.set("classDisp",[]); // Stores current filter for classes. +Session.set("classDispHover",null); // Stores current hovered filter. +Session.set("commentRestrict",null); // Stores text for comment character restriction. Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors. return themeColors[Meteor.user().profile.preferences.theme][div]; @@ -286,7 +286,7 @@ Template.main.helpers({ dayClick: function(date, jsEvent, view) { // On-click for each day. if(jsEvent.target.className.includes("fc-past")) return; calCreWork = true; - Session.set("calWorkDate",date.format()); + calWorkDate = date.format(); Session.set("sidebar","menuContainer"); } }; @@ -725,7 +725,7 @@ Template.main.events({ calCreWork = null; Session.set("sidebar",null); - var date = Session.get("calWorkDate").split("-"); + var date = calWorkDate.split("-"); var date = new Date(date[0],parseInt(date[1])-1,date[2],11,59,59); Session.set("newWork", true); Session.set("currentReadableWork", @@ -796,6 +796,7 @@ function sendData(funcName) { // Call Meteor function, and do actions after func } else if(funcName === "editProfile") { $("#fullcalendar").fullCalendar( 'refetchEvents' ); } + console.log(err,result); }); } diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html index 95b697d..18063fa 100644 --- a/hourglass/client/profile/profile.html +++ b/hourglass/client/profile/profile.html @@ -68,7 +68,7 @@ {{#if profClassTab "addClass"}} - {{> inputAutocomplete id="profClassSearch" settings=classsettings placeholder="Search..."}} + {{> inputAutocomplete id="profClassSearch" settings=classSettings placeholder="Search..."}}

Join Private Class

Class Name @@ -101,7 +101,7 @@

School:

- {{> inputAutocomplete settings=schoolcomplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }} + {{> inputAutocomplete settings=schoolComplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }}

Hour:

@@ -109,7 +109,7 @@

Teacher:

- {{> inputAutocomplete settings=teachercomplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }} + {{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}

Class Name:

diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js index 75c678d..3a8d6cd 100644 --- a/hourglass/client/profile/profile.js +++ b/hourglass/client/profile/profile.js @@ -2,22 +2,22 @@ Template } from 'meteor/templating'; +confirm = null; // Sets function to execute after confirmation click. + // Sets up global variables -Session.set("profClassTab", "manClass"); -Session.set("modifying", null); -Session.set("notsearching", true); -Session.set("confirm", null); -Session.set("autocompleteDivs", null); -Session.set("confirmText", null); -Session.set("selectedClass",null); -Session.set("selectClassId",null); -Session.set("code",null); -Session.set("noclass",null); -Session.set("notfound",null); +Session.set("profClassTab", "manClass"); // Set default classes card mode to 'Manage Classes.' +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("selectClassId",null); // Stores selected owned class ID. +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({ - classsettings: function() { + classSettings() { // Returns autocomplete array for classes. return { position: "bottom", limit: 10, @@ -33,7 +33,7 @@ Template.profile.helpers({ }] }; }, - schoolcomplete() { + schoolComplete() { // Returns autocomplete array for schools. return { position: "bottom", limit: 6, @@ -46,7 +46,7 @@ Template.profile.helpers({ }] }; }, - teachercomplete() { + teacherComplete() { // Returns autocomplete array for teachers. return { position: "bottom", limit: 1, @@ -58,14 +58,14 @@ Template.profile.helpers({ }] }; }, - mainCenter() { // Centers main container + mainCenter() { // Centers main div container. var width = window.innerWidth * 1600 / 1920 + 10; return "width:" + width.toString() + "px;margin-left:" + -0.5 * width.toString() + "px"; }, - mainHeight() { + mainHeight() { // Returns height of screen for div. return window.innerHeight.toString() + "px"; }, - banner() { //Styles the banner + banner() { // Styles the banner var width = window.innerWidth * 1600 / 1920; var height = width * 615 / 1600; if (Meteor.user().profile.banner !== undefined) { @@ -78,7 +78,7 @@ Template.profile.helpers({ } return "width:" + width.toString() + "px;height:" + height.toString() + "px;background-image:url(" + banner + ");background-size:" + width.toString() + "px " + height.toString() + "px"; }, - avatar() { //Styles the avatar + avatar() { // Styles the avatar var dim = window.innerWidth * 1600 / 1920 * 0.16; var pic = ""; var userprofile = Meteor.user().profile.avatar; @@ -92,35 +92,35 @@ Template.profile.helpers({ } return "background-image:url(" + pic + ");background-size:" + dim.toString() + "px " + dim.toString() + "px"; }, - avatarDim() { //Dimensions the avatar + avatarDim() { // Dimensions of the avatar var dim = window.innerWidth * 1600 / 1920 * 0.16; return "height:" + dim.toString() + "px;width:" + dim.toString() + "px;top:" + 0.43 * window.innerHeight.toString() + "px;"; }, username() { //Returns current user's username return Meteor.user().profile.name; }, - motd() { //Returns the current user's description + motd() { // Returns the current user's description if (Meteor.user().profile.description) { return Meteor.user().profile.description; } else { return "Say something about yourself!"; } }, - school() { //Returns the current user's school's name + school() { // Returns the current user's school's name if (Meteor.user().profile.school) { return Meteor.user().profile.school; } else { return "Click here to edit..."; } }, - grade() { //Returns the current user's grade + grade() { // Returns the current user's grade if (Meteor.user().profile.grade) { return Meteor.user().profile.grade + "th"; } else { return "Click here to edit..."; } }, - classes() { //Loads all of the possible classes ( Limit of twenty shown ) ( Sorts by class size ) + classes() { // Loads all of the possible classes ( Limit of twenty shown ) ( Sorts by class size ) var array = classes.find( { status: {$eq: true}, @@ -147,7 +147,7 @@ Template.profile.helpers({ classHolderHeight() { // Dimensions the container for the classes return 0.26 * window.innerHeight.toString() + "px"; }, - profClassTabColor(status) { // Change this [Supposed to show the current mode that's selected via color]        + profClassTabColor(status) { // Change this [Supposed to show the current mode that's selected via color]      if (status === Session.get("profClassTab")) {             return Session.get("themeColors")[Meteor.user().profile.preferences.theme].highlightText;         } else {             @@ -167,16 +167,16 @@ Template.profile.helpers({ autocompleteClasses() { // Returns current auto-completes for classes return Session.get("autocompleteDivs"); }, - notfound() { + notfound() { // Returns if autocomplete has no results. return Session.get("notfound"); }, - noclass() { + noclass() { // Returns if user has classes. return Session.get("noclass"); }, - confirmText() { + confirmText() { // Returns respective text for different confirm functions. return Session.get("confirmText"); }, - selectedClass(val) { + selectedClass(val) { // Returns values for selectedClass if(Session.get("selectClassId") === null) return; var usertype = ["moderators","banned"]; var attribute = Session.get("selectClassId"); @@ -204,19 +204,237 @@ Template.profile.helpers({ } return array[val]; }, - code() { + code() { // Returns if selected class has code. return Session.get("code"); }, - userHolder() { + userHolder() { // Returns height of user holders for moderators/banned. return 0.15 * window.innerHeight.toString() + "px"; } }); Template.profile.events({ - 'click .change' (event) { // Allows changes to profile values + 'click' (event) { // Whenever a click happens + var modifyingInput = Session.get("modifying"); + if (event.target.id !== modifyingInput && + event.target.id !== modifyingInput + "a" && + !Session.equals("modifying", null) && + !event.target.parentNode.className.includes("profOptions")) { + closeInput(modifyingInput); + } + if (!event.target.className.includes("radio") && + !event.target.parentNode.className.includes("profOptions") && + event.target.readOnly !== true) { + for (var i = 0; i < document.getElementsByClassName("profOptions").length; i++) { + try { + closeDivFade(document.getElementsByClassName("profOptions")[i]); + } catch (err) {} + } + } + if(!document.getElementById("createdClasses").contains(event.target) && + Session.get("code") !== null && + !event.target.className.includes("fa-times-circle-o")) { + document.getElementById("createdClasses").style.marginRight = "-40%"; + } + if(Session.get("changeAdmin") && + !document.getElementById("changeAdmin").contains(event.target)) { + Session.set("changeAdmin",false); + var div = document.getElementById("changeAdmin"); + div.removeChild(div.childNodes[3]); + div.removeChild(div.childNodes[3]); + } + if(Session.get("privateClass") && + !document.getElementById("joinPrivClass").contains(event.target)) { + Session.set("privateClass",false); + document.getElementById("joinPrivClass").style.marginBottom = "-10%"; + } + }, + // MAIN BUTTONS + 'click .addClass' () {         + var functionHolder = document.getElementById("profClassInfoHolder"); + closeDivFade(functionHolder);         + setTimeout(function() {             + Session.set("profClassTab", "addClass");             + openDivFade(functionHolder);         + }, 300);     + }, +    'click .manageClass' () {         + var functionHolder = document.getElementById("profClassInfoHolder"); + closeDivFade(functionHolder);         + setTimeout(function() {             + Session.set("profClassTab", "manClass");             + openDivFade(functionHolder);         + }, 300);     + }, +    'click .createClass' () {         + var functionHolder = document.getElementById("profClassInfoHolder");         + closeDivFade(functionHolder);         + setTimeout(function() {             + Session.set("profClassTab", "creClass");             + openDivFade(functionHolder);         + }, 300);     + }, + 'click .classBox' (event) { // When you click on a box that holds class + if (event.target.id === "label" || + Session.get("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"); + } + Session.set("selectClassId",attribute); + document.getElementById("createdClasses").style.marginRight = "0"; + }, + '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 + Session.set("privateClass",true); + var input = document.getElementById("privateCode"); + input.className = ""; + input.placeholder = "Enter code here..."; + document.getElementById("joinPrivClass").style.marginBottom = "0"; + }, + '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) { + document.getElementById("joinPrivClass").style.marginBottom = "-10%"; + } 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"); + }, + '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 #deleteClass' () { + serverData = document.getElementById("createdClasses").getAttribute("classid"); + confirm = "deleteClass"; + Session.set("confirmText", "Delete this class?"); + openDivFade(document.getElementsByClassName("overlay")[0]); + }, + '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.getElementById("create"); + 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 + 'click .change' (event) { // Click changable inputs. Creates an input where the span is. var ele = event.target; - var sessval = Session.get("modifying"); - if (ele.id !== sessval && sessval !== null) closeInput(sessval); + var modifyingInput = Session.get("modifying"); + if (ele.id !== modifyingInput && modifyingInput !== null) closeInput(modifyingInput); Session.set("modifying", ele.id); var dim = ele.getBoundingClientRect(); @@ -256,70 +474,7 @@ Template.profile.events({ ele.parentNode.appendChild(span); } }, - 'click' (event) { // Whenever a click happens - var sessval = Session.get("modifying"); - if (event.target.id !== sessval && - event.target.id !== sessval + "a" && - !Session.equals("modifying", null) && - !event.target.parentNode.className.includes("profOptions")) { - closeInput(sessval); - } - if (!event.target.className.includes("radio") && - !event.target.parentNode.className.includes("profOptions") && - event.target.readOnly !== true) { - for (var i = 0; i < document.getElementsByClassName("profOptions").length; i++) { - try { - closeDivFade(document.getElementsByClassName("profOptions")[i]); - } catch (err) {} - } - } - if(!document.getElementById("createdClasses").contains(event.target) && - Session.get("code") !== null && - !event.target.className.includes("fa-times-circle-o")) { - document.getElementById("createdClasses").style.marginRight = "-40%"; - setTimeout(function() { Session.set("selectedClass", null); }, 300); - } - if(Session.get("changeAdmin") && - !document.getElementById("changeAdmin").contains(event.target)) { - Session.set("changeAdmin",false); - var div = document.getElementById("changeAdmin"); - div.removeChild(div.childNodes[3]); - div.removeChild(div.childNodes[3]); - } - if(Session.get("privateClass") && - !document.getElementById("joinPrivClass").contains(event.target)) { - Session.set("privateClass",false); - document.getElementById("joinPrivClass").style.marginBottom = "-10%"; - } - }, - 'keydown' (event) { // Whenever one key is pressed (for character restrictions) - var sessval = Session.get("modifying"); - if (event.keyCode == 13) { - try { - closeInput(sessval); - } catch (err) {} - } - if (sessval !== null && event.keyCode !== 13) { - var restrict = document.getElementById(sessval).getAttribute("restrict"); - if (restrict !== null) { - var num = parseInt(restrict) - event.target.value.length; - var restext = document.getElementById("restrict"); - if (num === 1) { - restext.childNodes[0].nodeValue = num.toString() + " character left"; - restext.style.setProperty("color", "#999", "important"); - } else if (num <= 0) { - var input = document.getElementById(sessval + "a"); - input.value = input.value.substring(0, parseInt(restrict)); - restext.childNodes[0].nodeValue = "0 characters left"; - restext.style.setProperty("color", "#FF1A1A", "important"); - } else { - restext.childNodes[0].nodeValue = num.toString() + " characters left"; - restext.style.setProperty("color", "#999", "important"); - } - } - } - }, - 'click .radio' (event) { // Click on an input that has a drop-down menu + 'click .radio' (event) { // Click dropdown input. Opens the dropdown menu. var op = event.target; try { for (var i = 0; i < document.getElementsByClassName("profOptions").length; i++) { @@ -337,8 +492,35 @@ Template.profile.events({ openDivFade(op.parentNode.parentNode.childNodes[3]); } }, - 'click .profOptionText' (event) { // When someone selects "drop-down item" - var sessval = Session.get("modifying"); + 'keydown' (event) { // Restricts characters for certain inputs. + var modifyingInput = Session.get("modifying"); + if (event.keyCode == 13) { + try { + closeInput(modifyingInput); + } catch (err) {} + } + if (modifyingInput !== null && event.keyCode !== 13) { + var restrict = document.getElementById(modifyingInput).getAttribute("restrict"); + if (restrict !== null) { + var num = parseInt(restrict) - event.target.value.length; + var restext = document.getElementById("restrict"); + if (num === 1) { + restext.childNodes[0].nodeValue = num.toString() + " character left"; + restext.style.setProperty("color", "#999", "important"); + } else if (num <= 0) { + var input = document.getElementById(modifyingInput + "a"); + input.value = input.value.substring(0, parseInt(restrict)); + restext.childNodes[0].nodeValue = "0 characters left"; + restext.style.setProperty("color", "#FF1A1A", "important"); + } else { + restext.childNodes[0].nodeValue = num.toString() + " characters left"; + restext.style.setProperty("color", "#999", "important"); + } + } + } + }, + 'click .profOptionText' (event) { // Click each profile option setting. + var modifyingInput = Session.get("modifying"); var p = event.target; if(p.className.includes("cre")) { var input = p.parentNode.parentNode.childNodes[3] @@ -347,36 +529,13 @@ Template.profile.events({ } input.value = p.childNodes[0].nodeValue; try { - closeInput(sessval); + closeInput(modifyingInput); } catch (err) {} closeDivFade(p.parentNode); input.focus(); }, - 'click .addClass' () {         - var functionHolder = document.getElementById("profClassInfoHolder"); - closeDivFade(functionHolder);         - setTimeout(function() {             - Session.set("profClassTab", "addClass");             - openDivFade(functionHolder);         - }, 300);     - }, -    'click .manageClass' () {         - var functionHolder = document.getElementById("profClassInfoHolder"); - closeDivFade(functionHolder);         - setTimeout(function() {             - Session.set("profClassTab", "manClass");             - openDivFade(functionHolder);         - }, 300);     - }, -    'click .createClass' () {         - var functionHolder = document.getElementById("profClassInfoHolder");         - closeDivFade(functionHolder);         - setTimeout(function() {             - Session.set("profClassTab", "creClass");             - openDivFade(functionHolder);         - }, 300);     - }, + // AUTOCOMPLETE HANDLING 'keyup #profClassSearch' (event) { // Auto-complete updater if (event.target.value.length === 0) { Session.set("notsearching", true); @@ -387,12 +546,12 @@ Template.profile.events({ var divs = []; try { var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes; - if (items.length === 0) { + if (items.length === 0) { // If no results. Session.set("notfound", true); } else { Session.set("notfound", false); } - for (var i = 2; i < items.length; i += 3) { + for (var i = 2; i < items.length; i += 3) { // Iterate through autocomplete div. var item = items[i].childNodes[3]; if(Meteor.user().profile.classes.indexOf(item.getAttribute("classid")) !== -1) continue; divs.push({ @@ -406,163 +565,9 @@ Template.profile.events({ } } catch (err) {} }, - 'click .classBox' (event) { // When you click on a box that holds class - if (event.target.id === "label" || - Session.get("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; - Session.set("confirm", "joinClass"); - Session.set("confirmText", "Join class?"); - - openDivFade(document.getElementsByClassName("overlay")[0]); - setTimeout(function() { - document.getElementsByClassName("overlay")[0].style.opacity = "1"; - }, 200); - }, - 'click .fa-check-circle-o' () { // Confirmation Button - sendData(Session.get("confirm")); - closeDivFade(document.getElementsByClassName("overlay")[0]); - if(Session.get("confirm") === "createClass") { - var form = document.getElementById("create"); - for(var i = 0; i < form.length; i++) form[i].value = ""; - } - serverData = null; - Session.set("confirm", null); - }, - 'click .fa-times-circle-o' () { // Deny Button - closeDivFade(document.getElementsByClassName("overlay")[0]); - serverData = null; - Session.set("confirm", null); - }, - 'click #creSubmit' () { //Submits form data for class - var data = getCreateFormData(); - if (data === null) return; - serverData = data; - Session.set("confirm", "createClass"); - Session.set("confirmText", "Submit request?"); - - openDivFade(document.getElementsByClassName("overlay")[0]); - }, - 'focus .op' (event) { // Browser Casework + 'focus .op' (event) { // Selects input for next tabbing. event.target.click(); }, - '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"); - } - Session.set("selectClassId",attribute); - document.getElementById("createdClasses").style.marginRight = "0"; - }, - '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() - ]; - sendData("trackUserInClass"); - - }, - 'click .classBox .fa-times' (event) { // Leaves a class - var box = event.target.parentNode; - var classid = box.getAttribute("classid"); - serverData = box.getAttribute("classid"); - Session.set("confirm","leaveClass"); - Session.set("confirmText", "Leave this class?"); - openDivFade(document.getElementsByClassName("overlay")[0]); - }, - '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() - ]; - sendData("untrackUserInClass"); - }, - 'click #copy' () { //Copies googlee-classroom style code - if(document.getElementById("code").value === "None") return; - document.getElementById("code").select(); - document.execCommand("copy"); - }, - 'click #deleteClass' () { - serverData = document.getElementById("createdClasses").getAttribute("classid"); - Session.set("confirm", "deleteClass"); - Session.set("confirmText", "Delete this class?"); - openDivFade(document.getElementsByClassName("overlay")[0]); - }, - 'click #changeAdmin span' (event) { - 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]; - Session.set("confirm","changeAdmin"); - Session.set("confirmText", "Are you really sure?"); - openDivFade(document.getElementsByClassName("overlay")[0]) - document.getElementById("createdClasses").style.marginRight = "-40%"; - }, - 'click #private' (event) { // Joins private class - Session.set("privateClass",true); - var input = document.getElementById("privateCode"); - input.className = ""; - input.placeholder = "Enter code here..."; - document.getElementById("joinPrivClass").style.marginBottom = "0"; - }, - '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) { - document.getElementById("joinPrivClass").style.marginBottom = "-10%"; - } else { - input.className = "formInvalid"; - input.placeholder = "Invalid code."; - } - }); - } }); function openDivFade(div) { @@ -580,9 +585,9 @@ function closeDivFade(div) { }, 100); } -function closeInput(sessval) { - var input = document.getElementById(sessval + "a"); - var span = document.getElementById(sessval); +function closeInput(modifyingInput) { // Closes current modifying input. + var input = document.getElementById(modifyingInput + "a"); + var span = document.getElementById(modifyingInput); input.parentNode.removeChild(input); try { var restrict = document.getElementById("restrict"); @@ -603,7 +608,7 @@ function sendData(funcName) { Meteor.call(funcName, serverData); } -function getProfileData() { +function getProfileData() { // Gets all data related to profile. var profile = Meteor.user().profile; profile.description = document.getElementById("motd").childNodes[0].nodeValue; profile.school = document.getElementById("school").childNodes[0].nodeValue; @@ -620,10 +625,10 @@ function getProfileData() { return profile; } -function getCreateFormData() { +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++) { + 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(); @@ -658,7 +663,7 @@ function getCreateFormData() { }; } -function checkUser(email,classid) { +function checkUser(email,classid) { // Checks if user email exists. var user = Meteor.users.findOne({"services.google.email":email}); if(user === undefined) { return true;