From 09104bbbeb05c9c093a7036858f0bed1b9305b77 Mon Sep 17 00:00:00 2001 From: Yaman Qalieh Date: Fri, 12 Aug 2016 12:28:55 -0400 Subject: [PATCH] formatting --- hourglass/client/login/login.css | 181 +++-- hourglass/client/main/main.js | 356 +++++----- hourglass/client/profile/profile.css | 435 ++++++------ hourglass/client/profile/profile.html | 2 +- hourglass/client/profile/profile.js | 945 +++++++++++++------------- 5 files changed, 952 insertions(+), 967 deletions(-) diff --git a/hourglass/client/login/login.css b/hourglass/client/login/login.css index 4e12108..c8497dd 100644 --- a/hourglass/client/login/login.css +++ b/hourglass/client/login/login.css @@ -1,151 +1,134 @@ #loginHeader { - font-weight: 600; - width: 100%; - margin: 0; - box-shadow: 2px 2px 5px 3px #666; - - background-color: #EBEBEB; - - display: inline-block; - position: relative; - z-index: 50; + font-weight: 600; + width: 100%; + margin: 0; + box-shadow: 2px 2px 5px 3px #666; + background-color: #EBEBEB; + display: inline-block; + position: relative; + z-index: 50; } #logo { - padding: 0.5%; - padding-left: 1%; - float: left; - - -webkit-filter: drop-shadow(2px 2px 5px #333); - filter: drop-shadow(2px 2px 5px #333); + padding: 0.5%; + padding-left: 1%; + float: left; + -webkit-filter: drop-shadow(2px 2px 5px #333); + filter: drop-shadow(2px 2px 5px #333); } #banner { - height: 100%; - position: relative; + height: 100%; + position: relative; } #loginTitle { - font-size: 255%; - padding: 1.4%; - padding-left: 1%; + font-size: 255%; + padding: 1.4%; + padding-left: 1%; } #loginMain { - width: 100%; - min-height: 100%; - position: absolute; - top: 11%; - - background-color: #E5E5E5; - background-image: url("banner100.jpg"); + width: 100%; + min-height: 100%; + position: absolute; + top: 11%; + background-color: #E5E5E5; + background-image: url("banner100.jpg"); } #circle { - position: fixed; - top: 50%; - left: 50%; - - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; - - background-color: rgba(0,0,0,0.2); - - -webkit-filter: drop-shadow(2px 2px 5px #333); - filter: drop-shadow(2px 2px 5px #333); + position: fixed; + top: 50%; + left: 50%; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.2); + -webkit-filter: drop-shadow(2px 2px 5px #333); + filter: drop-shadow(2px 2px 5px #333); } #loginContent { - position: fixed; - top: 50%; - left: 50%; + position: fixed; + top: 50%; + left: 50%; } .text { - text-align: center; - color: #FFF; - - -webkit-filter: drop-shadow(2px 2px 5px #444); - filter: drop-shadow(2px 2px 5px #444); + text-align: center; + color: #FFF; + -webkit-filter: drop-shadow(2px 2px 5px #444); + filter: drop-shadow(2px 2px 5px #444); } h2.text { - font-size: 400%; - padding-bottom: 2%; - border-bottom: 1px solid #FEFEFE; + font-size: 400%; + padding-bottom: 2%; + border-bottom: 1px solid #FEFEFE; } p.text { - font-size: 150%; - margin-bottom: 5%; + font-size: 150%; + margin-bottom: 5%; } #loginButton { - font-size: 200%; - padding: 2%; - - -webkit-border-radius: 6; - -moz-border-radius: 6; - border-radius: 6px; - - position: relative; - - background-color: #005CE6; - - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; - - cursor: pointer; + font-size: 200%; + padding: 2%; + -webkit-border-radius: 6; + -moz-border-radius: 6; + border-radius: 6px; + position: relative; + background-color: #005CE6; + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; + cursor: pointer; } #loginButton:hover { - background-color: #0066FF; + background-color: #0066FF; } #loginButton:active { - background-color: #FF4D4D; - - -webkit-transition: background-color 0.1s ease; - -moz-transition: background-color 0.1s ease; - -ms-transition: background-color 0.1s ease; - transition: background-color 0.1s ease; + background-color: #FF4D4D; + -webkit-transition: background-color 0.1s ease; + -moz-transition: background-color 0.1s ease; + -ms-transition: background-color 0.1s ease; + transition: background-color 0.1s ease; } #loginFooter { - width: 100%; - box-shadow: 2px 2px 5px 3px #666; - background-color: #EBEBEB; - position: absolute; - bottom: 0; + width: 100%; + box-shadow: 2px 2px 5px 3px #666; + background-color: #EBEBEB; + position: absolute; + bottom: 0; } .login-button { - display: none !important; + display: none !important; } #github { - font-size: 150%; - margin: 0; - padding: 1%; - - -webkit-filter: drop-shadow(2px 2px 5px #444); - filter: drop-shadow(2px 2px 5px #444); + font-size: 150%; + margin: 0; + padding: 1%; + -webkit-filter: drop-shadow(2px 2px 5px #444); + filter: drop-shadow(2px 2px 5px #444); } a { - color: #0099CC; - text-decoration: none; - - -webkit-transition: color 0.4s ease; - -moz-transition: color 0.4s ease; - -ms-transition: color 0.4s ease; - transition: color 0.4s ease + color: #0099CC; + text-decoration: none; + -webkit-transition: color 0.4s ease; + -moz-transition: color 0.4s ease; + -ms-transition: color 0.4s ease; + transition: color 0.4s ease } a:hover { - color: #00BFFF; -} - + color: #00BFFF; +} \ No newline at end of file diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index de0e6a5..ba25972 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -1,205 +1,211 @@ -import { Template } from 'meteor/templating'; +import { + Template +} from 'meteor/templating'; import './main.html'; var openValues = { - "menu": "-25%", - "options": "-20%" + "menu": "-25%", + "options": "-20%" }; var themeColors = { - "light": { - "background":"White.jpg", - "header":"#EBEBEB", - "sidebar":"#65839A", - "statusIcons":"#33ADFF", - "highlightText":"#FF1A1A", - "cards":"#FEFEFE" - }, - "dark": { + "light": { + "background": "White.jpg", + "header": "#EBEBEB", + "sidebar": "#65839A", + "statusIcons": "#33ADFF", + "highlightText": "#FF1A1A", + "cards": "#FEFEFE" + }, + "dark": { - } + } }; var calendarColors = { - "test": "red", - "project": "blue", - "normal": "green", - "quiz": "black" -} + "test": "red", + "project": "blue", + "normal": "green", + "quiz": "black" +}; var options = { - "privacy": ["Public", "Hidden"], - "category": ["Class", "Club", "Other"] -} + "privacy": ["Public", "Hidden"], + "category": ["Class", "Club", "Other"] +}; var searchSchools = []; -Session.set("sidebar",null); -Session.set("mode",null); // Change to user preferences +Session.set("sidebar", null); +Session.set("mode", null); // Change to user preferences -Template.registerHelper( 'divColor', (div) => { - return themeColors[Cookie.get("theme")][div]; -}) +Template.registerHelper('divColor', (div) => { + return themeColors[Cookie.get("theme")][div]; +}); -Template.registerHelper( 'overlayDim', (part) => { - var dim = [window.innerWidth * .2,window.innerHeight * .2]; - var width = "width:"+dim[0].toString() + "px;"; - var height = "height:"+dim[1].toString() + "px;"; - var margin = "margin-left:"+(-dim[0]/2).toString() + "px;"; - var bg = "background-color:"+themeColors[Cookie.get("theme")]["header"]+";"; - return width+height+margin+bg; -}) +Template.registerHelper('overlayDim', (part) => { + var dim = [window.innerWidth * .2, window.innerHeight * 0.2]; + var width = "width:" + dim[0].toString() + "px;"; + var height = "height:" + dim[1].toString() + "px;"; + var margin = "margin-left:" + (-dim[0] / 2).toString() + "px;"; + var bg = "background-color:" + themeColors[Cookie.get("theme")].header + ";"; + return width + height + margin + bg; +}); Template.main.helpers({ - schoolName() { - return " - " + Meteor.user().profile.school; - }, - iconColor(icon) { - if(Session.get("sidebar") === icon+"Container") { - return themeColors[Cookie.get("theme")].statusIcons; - } else if(Session.get("sidebar") === "both") { - return themeColors[Cookie.get("theme")].statusIcons; - } else { - return; - } - }, - bgSrc() { - var dim = [window.innerWidth,window.innerHeight]; - var pic = themeColors[Cookie.get("theme")].background; - return pic; - }, - menuStatus() { - if(Session.get("sidebar") === "menuContainer") { - return "0%"; - } else if(Session.get("sidebar") === "both") { - return "0%"; - } else { - return openValues["menu"]; - } - }, - optionsStatus() { - if(Session.get("sidebar") === "optionsContainer") { - return "0%"; - } else if(Session.get("sidebar") === "both") { - return "0%"; - } else { - return openValues["options"]; - } - }, - modeStatus(status) { - if(status === Session.get("mode")) { - return themeColors[Cookie.get("theme")].highlightText; - } else { - return; - } - }, - currMode(name) { - if(name === Session.get("mode")) { - return true; - } else { - return false; - } - }, - calendarOptions() { - var cursor = work.find({}); - var events = []; - cursor.forEach(function(current) { - backgroundColor = calendarColors[current.type]; - title = current.name; - duedate = current.dueDate.toISOString().slice(0,10); - events.push({start: duedate, title: title, backgroundColor: backgroundColor}); - }); - return { - height: window.innerHeight *.8, - events: events, - buttonText: { - today: 'Today', - month: 'Month', - week: 'Week', - day: 'Day' - } - }; - }, - calCenter() { - var width = window.innerWidth * .85; - return "width:"+width.toString()+"px;margin-left:"+(.5*window.innerWidth-.5*width).toString()+"px"; - }, - calbg() { - var width = window.innerWidth * .865; - var height = window.innerHeight * .76; - return "width:"+width.toString()+"px;height:"+height.toString()+"px;margin-left:"+(.5*window.innerWidth-.5*width).toString()+"px;margin-top:"+(.47*window.innerHeight-.5*height).toString()+"px"; - } + schoolName() { + return " - " + Meteor.user().profile.school; + }, + iconColor(icon) { + if (Session.get("sidebar") === icon + "Container") { + return themeColors[Cookie.get("theme")].statusIcons; + } else if (Session.get("sidebar") === "both") { + return themeColors[Cookie.get("theme")].statusIcons; + } else { + return; + } + }, + bgSrc() { + var dim = [window.innerWidth, window.innerHeight]; + var pic = themeColors[Cookie.get("theme")].background; + return pic; + }, + menuStatus() { + if (Session.get("sidebar") === "menuContainer") { + return "0%"; + } else if (Session.get("sidebar") === "both") { + return "0%"; + } else { + return openValues.menu; + } + }, + optionsStatus() { + if (Session.get("sidebar") === "optionsContainer") { + return "0%"; + } else if (Session.get("sidebar") === "both") { + return "0%"; + } else { + return openValues.options; + } + }, + modeStatus(status) { + if (status === Session.get("mode")) { + return themeColors[Cookie.get("theme")].highlightText; + } else { + return; + } + }, + currMode(name) { + if (name === Session.get("mode")) { + return true; + } else { + return false; + } + }, + calendarOptions() { + var cursor = work.find({}); + var events = []; + cursor.forEach(function(current) { + backgroundColor = calendarColors[current.type]; + title = current.name; + duedate = current.dueDate.toISOString().slice(0, 10); + events.push({ + start: duedate, + title: title, + backgroundColor: backgroundColor + }); + }); + return { + height: window.innerHeight * .8, + events: events, + buttonText: { + today: 'Today', + month: 'Month', + week: 'Week', + day: 'Day' + } + }; + }, + calCenter() { + var width = window.innerWidth * 0.85; + return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px"; + }, + calbg() { + var width = window.innerWidth * 0.865; + 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"; + } }); 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); - }, - 'click .calendar' () { - if(Session.get("mode") === "calendar") return; - var modeHolder = document.getElementById("mainBody"); - closeDivFade(modeHolder); - setTimeout(function() { - Session.set("mode","calendar"); - openDivFade(modeHolder); - }, 300); - }, - 'click' (event) { - var e = event.target.className; - if(e !== Session.get("sidebar") && - !e.includes("fa-cog") && - !e.includes("fa-bars") && - !document.getElementById("menuContainer").contains(event.target) && - !document.getElementById("optionsContainer").contains(event.target)) { - Session.set("sidebar", null); - } - } + '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); + }, + 'click .calendar' () { + if (Session.get("mode") === "calendar") return; + var modeHolder = document.getElementById("mainBody"); + closeDivFade(modeHolder); + setTimeout(function() { + Session.set("mode", "calendar"); + openDivFade(modeHolder); + }, 300); + }, + 'click' (event) { + var e = event.target.className; + if (e !== Session.get("sidebar") && + !e.includes("fa-cog") && + !e.includes("fa-bars") && + !document.getElementById("menuContainer").contains(event.target) && + !document.getElementById("optionsContainer").contains(event.target)) { + Session.set("sidebar", null); + } + } }); function openDivFade(div) { - div.style.display = "block"; - div.style.opacity = "0"; - setTimeout(function() { - div.style.opacity = "1"; - }, 100); + 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); + div.style.opacity = "0"; + setTimeout(function() { + div.style.display = "none"; + }, 100); } function sendData() { - // Take form data -} \ No newline at end of file + // Take form data +} diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css index 3ce1268..46de61b 100644 --- a/hourglass/client/profile/profile.css +++ b/hourglass/client/profile/profile.css @@ -1,374 +1,356 @@ .change { - font-size: 150%; - color: #8C8C8C; - cursor: pointer; + font-size: 150%; + color: #8C8C8C; + cursor: pointer; } .radio { - cursor: pointer; + cursor: pointer; } .changeInput { - font-size: 100%; - padding: 0; - color: #8C8C8C; - position: relative; + font-size: 100%; + padding: 0; + color: #8C8C8C; + position: relative; } .profTitle { - font-size: 150%; - font-weight: 400; - margin: 0; - margin-bottom: 1%; + font-size: 150%; + font-weight: 400; + margin: 0; + margin-bottom: 1%; } .profHea { - font-size: 300%; - font-weight: 200; + font-size: 300%; + font-weight: 200; } #motda { - font-size: 100%; - width: 30% !important; + font-size: 100%; + width: 30% !important; } #profPage { - width: 100%; - padding-right: 10%; - overflow-x: hidden; - overflow-y: auto; + width: 100%; + padding-right: 10%; + overflow-x: hidden; + overflow-y: auto; } #profMainContainer { - position: relative; - top: 0; - left: 50%; + position: relative; + top: 0; + left: 50%; } #profBanner { - border: 5px solid #0D0D0D; - border-top: 0; - border-bottom: 0; + border: 5px solid #0D0D0D; + border-top: 0; + border-bottom: 0; } #profAvatar { - border: 10px solid #0D0D0D; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; - - position: absolute; - top: 43%; - left: 2.5%; - float: left; - z-index: 5; + border: 10px solid #0D0D0D; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + position: absolute; + top: 43%; + left: 2.5%; + float: left; + z-index: 5; } #motdBox { - width: 100%; - height: 5%; - padding: 0.5% 0 0.5% 0; - - background-color: #0D0D0D; + width: 100%; + height: 5%; + padding: 0.5% 0 0.5% 0; + background-color: #0D0D0D; } #motdBox span { - font-size: 130% !important; - margin: 0; - color: #FFF; + font-size: 130% !important; + margin: 0; + color: #FFF; } .username { - margin-left: 20% !important; + margin-left: 20% !important; } .profOptions { - box-shadow: 2px 2px 5px 3px #666; - - position: absolute; - display: none; - z-index: 5; - - opacity: 0; - - -webkit-transition: opacity 0.4s ease; - -moz-transition: opacity 0.4s ease; - -ms-transition: opacity 0.4s ease; - transition: opacity 0.4s ease; + box-shadow: 2px 2px 5px 3px #666; + position: absolute; + display: none; + z-index: 5; + opacity: 0; + -webkit-transition: opacity 0.4s ease; + -moz-transition: opacity 0.4s ease; + -ms-transition: opacity 0.4s ease; + transition: opacity 0.4s ease; } .profOptionText { - font-size: 150%; - min-width: 10%; - padding: 20px; - margin: 0; - - text-align: center; - cursor: pointer; - - -webkit-transition: box-shadow 0.4s ease; - -moz-transition: box-shadow 0.4s ease; - -ms-transition: box-shadow 0.4s ease; - transition: box-shadow 0.4s ease; + font-size: 150%; + min-width: 10%; + padding: 20px; + margin: 0; + text-align: center; + cursor: pointer; + -webkit-transition: box-shadow 0.4s ease; + -moz-transition: box-shadow 0.4s ease; + -ms-transition: box-shadow 0.4s ease; + transition: box-shadow 0.4s ease; } .profOptions p:hover { - box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1); + box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.1); } #profCards { - margin-top: 3%; - margin-bottom: 3%; + margin-top: 3%; + margin-bottom: 3%; } .card { - margin-bottom: 5%; - padding: 4%; - padding-top: 2.5%; - padding-right: 4%; - - box-shadow: 2px 2px 5px 3px #666; + margin-bottom: 5%; + padding: 4%; + padding-top: 2.5%; + padding-right: 4%; + box-shadow: 2px 2px 5px 3px #666; } #profInfo { - width: 30%; - float: left; - border-top: 5px solid #CC4444; + width: 30%; + float: left; + border-top: 5px solid #CC4444; } #about { - padding: 5%; + padding: 5%; } #profClasses { - width: 50%; - height: 30%; - float: right; - border-top: 5px solid #2E4F74; - - -webkit-transition: width 0.4s ease; - -moz-transition: width 0.4s ease; - -ms-transition: width 0.4s ease; - transition: width 0.4s ease; + width: 50%; + height: 30%; + float: right; + border-top: 5px solid #2E4F74; + -webkit-transition: width 0.4s ease; + -moz-transition: width 0.4s ease; + -ms-transition: width 0.4s ease; + transition: width 0.4s ease; } #profClassInfoHolder { - -webkit-transition: opacity 0.4s ease; - -moz-transition: opacity 0.4s ease; - -ms-transition: opacity 0.4s ease; - transition: opacity 0.4s ease; + -webkit-transition: opacity 0.4s ease; + -moz-transition: opacity 0.4s ease; + -ms-transition: opacity 0.4s ease; + transition: opacity 0.4s ease; } #classes { - padding: 4% 0 4% 0; + padding: 4% 0 4% 0; } #profFunctions { - display: inline; + display: inline; } .profFunction { - margin-right: 1%; - padding: 2%; - - border: 2px solid rgba(0,0,0,0.2); - - display: inherit; - cursor: pointer; - - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; + margin-right: 1%; + padding: 2%; + border: 2px solid rgba(0, 0, 0, 0.2); + display: inherit; + cursor: pointer; + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; } .profFunction:hover { - background-color: rgba(0,0,0,0.1); - + background-color: rgba(0, 0, 0, 0.1); } -.profFunction i, .profFunction h4 { - padding: 1%; +.profFunction i, +.profFunction h4 { + padding: 1%; } #searchBar { - display: inline; + display: inline; } #profClassSearch { - font-size: 125%; - width: 30%; - margin-top: 3%; - padding: 1.5% 1% 1.5% 1%; - - -webkit-animation: expand .7s ease 1; + font-size: 125%; + width: 30%; + margin-top: 3%; + padding: 1.5% 1% 1.5% 1%; + -webkit-animation: expand .7s ease 1; animation: expand .7s ease 1; } @-webkit-keyframes expand { - 0% { width: 0%; } - 100% { width: 30%; } -} + 0% { + width: 0%; + } + 100% { + width: 30%; + } +} @keyframes expand { - 0% { width: 0%; } - 100% { width: 30%; } + 0% { + width: 0%; + } + 100% { + width: 30%; + } } #label { - width: 90%; - margin-top: 2.5%; - margin-bottom: 2%; - - background-color: rgba(0,0,0,0.2); - box-shadow: none; - - display: table; - cursor: default; + width: 90%; + margin-top: 2.5%; + margin-bottom: 2%; + background-color: rgba(0, 0, 0, 0.2); + box-shadow: none; + display: table; + cursor: default; } .classHolder { - width: 90%; - padding: 1%; - padding-right: 100%; - - display: inline-block; - - overflow-x: hidden; - overflow-y: scroll; + width: 90%; + padding: 1%; + padding-right: 100%; + display: inline-block; + overflow-x: hidden; + overflow-y: scroll; } .classHolder h3 { - font-style: italic; - font-weight: 200; - margin-left: 1%; - - color: #999; - - -webkit-filter :none; - filter: none; + font-style: italic; + font-weight: 200; + margin-left: 1%; + color: #999; + -webkit-filter: none; + filter: none; } .classBox { - font-size: 150%; - width: 100%; - margin-bottom: 3%; - padding: 2%; - - box-shadow: 2px 2px 5px 3px #666; - display: table; - cursor: pointer; - - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; + font-size: 150%; + width: 100%; + margin-bottom: 3%; + padding: 2%; + box-shadow: 2px 2px 5px 3px #666; + display: table; + cursor: pointer; + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; } .classBox:hover { - background-color: rgba(0,0,0,0.1); + background-color: rgba(0, 0, 0, 0.1); } .classText { - margin-left: .5%; - margin-right: 10%; - display: table-cell; + margin-left: .5%; + margin-right: 10%; + display: table-cell; } .name { - width: 40%; + width: 40%; } .teacher { - width: 25%; + width: 25%; } .hour { - width: 15%; + width: 15%; } .subscribers { - width: 13%; + width: 13%; } #creRules { - position: absolute; + position: absolute; } #create { - margin-top: 2.5%; - padding: 5%; - padding-top: 1%; + margin-top: 2.5%; + padding: 5%; + padding-top: 1%; } #create div { - margin: 2%; - margin-left: 11%; - margin-bottom: 5%; - display: inline-block; + margin: 2%; + margin-left: 11%; + margin-bottom: 5%; + display: inline-block; } .creInput { - font-size: 120%; - padding: 3%; + font-size: 120%; + padding: 3%; } .creOp { - margin: 0 !important; + margin: 0 !important; } .-autocomplete-container { - margin: 0.5% 0 0 0 !important; - display: none; + margin: 0.5% 0 0 0 !important; + display: none; } #creSubmit { - font-weight: 200; - font-size: 140%; - margin: 0 35% 0 35%; - padding: 2%; - - background-color: rgba(0,0,0,0.25); - text-align: center; - cursor: pointer; - - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; + font-weight: 200; + font-size: 140%; + margin: 0 35% 0 35%; + padding: 2%; + background-color: rgba(0, 0, 0, 0.25); + text-align: center; + cursor: pointer; + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; } #creSubmit:hover { - background-color: rgba(0,0,0,0.15); + background-color: rgba(0, 0, 0, 0.15); } #restrict { - font-size: 100%; - font-style: italic; - font-weight: 300; - padding-left: 1%; - color: #999 !important; + font-size: 100%; + font-style: italic; + font-weight: 300; + padding-left: 1%; + color: #999 !important; } #save { - font-size: 90%; - background-color: #CC4444; - - box-shadow: -1px 2px 5px 1px #333; - - position: absolute; - top: 0; - right: 10%; - z-index: 5; - - -webkit-transition: transform 0.2s ease, background-color 0.1s ease; - -moz-transition: transform 0.2s ease, background-color 0.1s ease; - -ms-transition: transform 0.2s ease, background-color 0.1s ease; - transition: transform 0.2s ease, background-color 0.1s ease; + font-size: 90%; + background-color: #CC4444; + box-shadow: -1px 2px 5px 1px #333; + position: absolute; + top: 0; + right: 10%; + z-index: 5; + -webkit-transition: transform 0.2s ease, background-color 0.1s ease; + -moz-transition: transform 0.2s ease, background-color 0.1s ease; + -ms-transition: transform 0.2s ease, background-color 0.1s ease; + transition: transform 0.2s ease, background-color 0.1s ease; } #save:hover { - -webkit-transform: scale(1.05); + -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); @@ -376,16 +358,13 @@ } #save:active { - background-color: #34CB34; + background-color: #34CB34; } #save h2 { - font-weight: 200; - width: 100%; - padding: 8%; - - -webkit-filter: none; - filter: none !important; -} - - + font-weight: 200; + width: 100%; + padding: 8%; + -webkit-filter: none; + filter: none !important; +} \ No newline at end of file diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html index 42a674c..f2ce225 100644 --- a/hourglass/client/profile/profile.html +++ b/hourglass/client/profile/profile.html @@ -148,4 +148,4 @@ {{hour}} {{subscribers}} - \ No newline at end of file + diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js index 065d82c..46a9311 100644 --- a/hourglass/client/profile/profile.js +++ b/hourglass/client/profile/profile.js @@ -1,497 +1,514 @@ -import { Template } from 'meteor/templating'; +import { + Template +} from 'meteor/templating'; -Session.set("profInputOpen",null); -Session.set("profClassTab","manClass"); -Session.set("modifying",null); -Session.set("radioDiv",null); -Session.set("notsearching",true); -Session.set("confirm",null); -Session.set("serverData",null); +Session.set("profInputOpen", null); +Session.set("profClassTab", "manClass"); +Session.set("modifying", null); +Session.set("radioDiv", null); +Session.set("notsearching", true); +Session.set("confirm", null); +Session.set("serverData", null); Session.set("autocompleteDivs", null); -Session.set("confirmText",null); +Session.set("confirmText", null); var themeColors = { - "light": { - "header":"#EBEBEB", - "sidebar":"#65839A", - "statusIcons":"#33ADFF", - "highlightText":"#FF1A1A", - "cards":"#FEFEFE" - }, - "dark": { + "light": { + "header": "#EBEBEB", + "sidebar": "#65839A", + "statusIcons": "#33ADFF", + "highlightText": "#FF1A1A", + "cards": "#FEFEFE" + }, + "dark": { - } + } }; Template.profile.helpers({ - classsettings: function() { - return { - position: "bottom", - limit: 10, - rules: [{ - token: '', - collection: classes, - field: "name", - template: Template.classDisplay, - filter: {status: true} - }] - }; - }, - schoolcomplete() { - return { - position: "bottom", - limit: 6, - rules: [{ - token: '', - collection: schools, - field: 'name', - matchAll: true, - template: Template.schoollist - }] - }; - }, - teachercomplete() { - return { - position: "bottom", - limit: 1, - rules: [{ - token: '', - collection: classes, - field: 'teacher', - template: Template.teacherlist - }] - }; - }, - mainCenter() { - var width = window.innerWidth * 1600/1920 + 10; - return "width:"+width.toString()+"px;margin-left:"+-.5*width.toString()+"px"; - }, - mainHeight() { - return window.innerHeight.toString()+"px"; - }, - banner() { - var width = window.innerWidth * 1600/1920; - var height = width * 615/1600; - if(Meteor.user().profile.banner !== undefined) { - var banner = Meteor.user().profile.banner; - } else { - var banner = "defaultcover.jpg"; - } - return "width:"+width.toString()+"px;height:"+height.toString()+"px;background-image:url(\'"+banner+"\');background-size:"+width.toString()+"px "+height.toString()+"px"; - }, - avatar() { - var dim = window.innerWidth * 1600/1920 * .16; - if(Meteor.user().profile.avatar !== undefined) { - var pic = "\'"+Meteor.user().profile.avatar+"\'"; - } else { - var pic = "defaultAvatars/"+(Math.floor(Math.random() * (11 - 1)) + 1).toString()+".png"; - } - return "background-image:url("+pic+");background-size:"+dim.toString()+"px "+dim.toString()+"px"; - }, - avatarDim() { - var dim = window.innerWidth * 1600/1920 * .16; - return "height:"+dim.toString()+"px;width:"+dim.toString()+"px;top:"+.43*window.innerHeight.toString()+"px;"; - }, - username() { - return Meteor.user().profile.name; - }, - motd() { - if(Meteor.user().profile.description !== undefined) { - return Meteor.user().profile.description; - } else { - return "Say something about yourself!"; - } - }, - school() { - if(Meteor.user().profile.school !== undefined) { - return Meteor.user().profile.school; - } else { - return "Click here to edit..."; - } - }, - grade() { - if(Meteor.user().profile.grade !== undefined) { - return Meteor.user().profile.grade+"th"; - } else { - return "Click here to edit..."; - } - }, - classes() { - return classes.find( { status: { $eq: true }, privacy: { $eq: false }}, {sort: { subscribers: -1 }}, {limit: 20}).fetch(); - }, - profClassHeight() { - return .6*window.innerHeight.toString()+"px"; - }, - classHolderHeight() { - return .26*window.innerHeight.toString()+"px"; - }, - profClassTabColor(status) { -        if(status === Session.get("profClassTab")) { -            return themeColors[Cookie.get("theme")].highlightText; -        } else { -            return; -        } -    }, - profClassTab(tab) { - if(tab === Session.get("profClassTab")) { - return true; - } else { - return false; - } - }, - notsearching() { - return Session.get("notsearching"); - }, - autocompleteClasses() { - return Session.get("autocompleteDivs"); - }, - /*myclasses() { - if (Meteor.user().profile.classes === undefined || Meteor.user().profile.classes.length === 0) { - return []; - } else { - return Meteor.user().profile.classes; - } - },*/ - notfound() { - return Session.get("notfound"); - }, - confirmText() { - return Session.get("confirmText"); - } -}) + classsettings: function() { + return { + position: "bottom", + limit: 10, + rules: [{ + token: '', + collection: classes, + field: "name", + template: Template.classDisplay, + filter: { + status: true + } + }] + }; + }, + schoolcomplete() { + return { + position: "bottom", + limit: 6, + rules: [{ + token: '', + collection: schools, + field: 'name', + matchAll: true, + template: Template.schoollist + }] + }; + }, + teachercomplete() { + return { + position: "bottom", + limit: 1, + rules: [{ + token: '', + collection: classes, + field: 'teacher', + template: Template.teacherlist + }] + }; + }, + mainCenter() { + var width = window.innerWidth * 1600 / 1920 + 10; + return "width:" + width.toString() + "px;margin-left:" + -0.5 * width.toString() + "px"; + }, + mainHeight() { + return window.innerHeight.toString() + "px"; + }, + banner() { + var width = window.innerWidth * 1600 / 1920; + var height = width * 615 / 1600; + if (Meteor.user().profile.banner !== undefined) { + var banner = Meteor.user().profile.banner; + } else { + var banner = "defaultcover.jpg"; + } + return "width:" + width.toString() + "px;height:" + height.toString() + "px;background-image:url(\'" + banner + "\');background-size:" + width.toString() + "px " + height.toString() + "px"; + }, + avatar() { + var dim = window.innerWidth * 1600 / 1920 * 0.16; + if (Meteor.user().profile.avatar !== undefined) { + var pic = "\'" + Meteor.user().profile.avatar + "\'"; + } else { + var pic = "defaultAvatars/" + (Math.floor(Math.random() * (11 - 1)) + 1).toString() + ".png"; + } + return "background-image:url(" + pic + ");background-size:" + dim.toString() + "px " + dim.toString() + "px"; + }, + avatarDim() { + 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() { + return Meteor.user().profile.name; + }, + motd() { + if (Meteor.user().profile.description !== undefined) { + return Meteor.user().profile.description; + } else { + return "Say something about yourself!"; + } + }, + school() { + if (Meteor.user().profile.school !== undefined) { + return Meteor.user().profile.school; + } else { + return "Click here to edit..."; + } + }, + grade() { + if (Meteor.user().profile.grade !== undefined) { + return Meteor.user().profile.grade + "th"; + } else { + return "Click here to edit..."; + } + }, + classes() { + return classes.find({ + status: { + $eq: true + }, + privacy: { + $eq: false + } + }, { + sort: { + subscribers: -1 + } + }, { + limit: 20 + }).fetch(); + }, + profClassHeight() { + return 0.6 * window.innerHeight.toString() + "px"; + }, + classHolderHeight() { + return 0.26 * window.innerHeight.toString() + "px"; + }, + profClassTabColor(status) {         + if (status === Session.get("profClassTab")) {             + return themeColors[Cookie.get("theme")].highlightText;         + } else {             + return;         + }     + }, + profClassTab(tab) { + if (tab === Session.get("profClassTab")) { + return true; + } else { + return false; + } + }, + notsearching() { + return Session.get("notsearching"); + }, + autocompleteClasses() { + return Session.get("autocompleteDivs"); + }, + /*myclasses() { + if (Meteor.user().profile.classes === undefined || Meteor.user().profile.classes.length === 0) { + return []; + } else { + return Meteor.user().profile.classes; + } + },*/ + notfound() { + return Session.get("notfound"); + }, + confirmText() { + return Session.get("confirmText"); + } +}); Template.profile.events({ - 'click profOptions p' (event) { - var p = event.target; - p.parentNode.parentNode.childNodes[1].value = p.childNodes[0].nodeValue; - closeDivFade(p.parentNode); - Session.set("radioDiv",null); - Session.set("radioOffset",null); - }, - 'click .change' (event) { - var ele = event.target; - var sessval = Session.get("modifying"); - if(ele.id !== sessval && sessval !== null) closeInput(sessval); + 'click profOptions p' (event) { + var p = event.target; + p.parentNode.parentNode.childNodes[1].value = p.childNodes[0].nodeValue; + closeDivFade(p.parentNode); + Session.set("radioDiv", null); + Session.set("radioOffset", null); + }, + 'click .change' (event) { + var ele = event.target; + var sessval = Session.get("modifying"); + if (ele.id !== sessval && sessval !== null) closeInput(sessval); - Session.set("modifying", ele.id); - var dim = ele.getBoundingClientRect(); - ele.style.display = "none"; - var input = document.createElement("input"); - - if(ele.getAttribute("type") !== null) { - input.type = ele.getAttribute("type"); - } else { - input.type = "text"; - } - input.value = ele.childNodes[0].nodeValue; - input.className = "changeInput"; - input.style.height = .9*dim.height.toString()+"px"; - input.style.width = "70%"; - input.style.padding = "0.1%"; - input.id = ele.id+"a"; - input.setAttribute("opc",ele.getAttribute("opc")); - ele.parentNode.appendChild(input); - if(ele.getAttribute("re") == "readonly") { - input.readOnly = true; - input.className += " op"; - input.style.cursor = "pointer"; - } else { - input.select(); - } - input.focus(); - if(ele.getAttribute("restrict") !== null) { - var span = document.createElement("span"); - span.id = "restrict"; - var num = parseInt(ele.getAttribute("restrict"))-input.value.length; - if(num <= 0) { - span.style.setProperty("color","#FF1A1A","important"); - num = 0; - } - span.appendChild(document.createTextNode(num.toString()+" characters left")); - ele.parentNode.appendChild(span); - } - }, - 'click' (event) { - 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") && - !Session.equals("radioDiv",null) && - !event.target.parentNode.className.includes("profOptions") && - event.target.readOnly !== true) { - var opnum = (parseInt(Session.get("radioDiv"))-parseInt(Session.get("radioOffset"))).toString(); - for(var i = 0; i < document.getElementsByClassName("profOptions").length; i++) { - try { - closeDivFade(document.getElementsByClassName("profOptions")[i]); - } catch(err) {} - } - Session.set("radioDiv",null); - Session.set("radioOffset",null); - } - }, - 'keydown' (event) { - 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) { - var op = event.target; - Session.set("radioDiv", op.getAttribute("op")); - Session.set("radioOffset", op.getAttribute("opc")); - try { - for(var i = 0; i < document.getElementsByClassName("profOptions").length; i++) { - var curr = document.getElementsByClassName("profOptions")[i]; - if(Session.get("radioDiv") !== i.toString()) { - closeDivFade(document.getElementsByClassName("profOptions")[i]); - } - } - } catch(err) {} - openDivFade(document.getElementsByClassName("profOptions")[op.getAttribute("op")]); - }, - 'click .profOptions p' (event) { - var sessval = Session.get("modifying"); - var p = event.target; - var opnum = (parseInt(Session.get("radioDiv"))-parseInt(Session.get("radioOffset"))).toString(); - var input = document.getElementsByClassName("op")[opnum]; - input.value = p.childNodes[0].nodeValue; - try{ - closeInput(sessval); - } catch(err) {} - - closeDivFade(p.parentNode); - input.focus(); - Session.set("radioDiv",null); - Session.set("radioOffset",null); - }, - '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 .fa-search' () { - Session.set("searching",true); - }, - 'click .fa-times-thin' () { - Session.set("searching",false); - }, - 'keydown #profClassSearch' (event) { - if(event.target.value === "") { - Session.set("notsearching",true); - } else { - Session.set("notsearching",false); - } - Session.set("autocompleteDivs",null); - var divs = []; - try { - var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes; - if(items.length === 0) { - Session.set("notfound",true); - } else { - Session.set("notfound",false); - } - for(var i = 2; i < items.length; i+=3) { - var item = items[i].childNodes[3]; - divs.push({ - name: item.childNodes[1].childNodes[0].nodeValue, - teacher: item.childNodes[3].childNodes[0].nodeValue, - hour: item.childNodes[5].childNodes[0].nodeValue, - subscribers: item.childNodes[7].childNodes[0].nodeValue, - _id:item.getAttribute("classid") - }); - Session.set("autocompleteDivs", divs); - } - } catch(err) {} - }, - 'click .classBox' (event) { - if(event.target.id === "label") return; - if(event.target.className !== "classBox") { - var attribute = event.target.parentNode.getAttribute("classid"); - } else { - var attribute = event.target.getAttribute("classid"); - } - var data = [attribute,""]; - Session.set("serverData",data); - Session.set("confirm","joinClass"); - Session.set("confirmText","Join class?"); + Session.set("modifying", ele.id); + var dim = ele.getBoundingClientRect(); + ele.style.display = "none"; + var input = document.createElement("input"); - openDivFade(document.getElementsByClassName("overlay")[0]); - setTimeout(function() { - document.getElementsByClassName("overlay")[0].style.opacity = "1"; - }, 200); - }, - 'click .fa-check-circle-o' () { - sendData(Session.get("confirm")); - closeDivFade(document.getElementsByClassName("overlay")[0]); - Session.set("serverData",null); - Session.set("confirm",null); - }, - 'click .fa-times-circle-o' () { - closeDivFade(document.getElementsByClassName("overlay")[0]); - Session.set("serverData",null); - Session.set("confirm",null); - }, - 'click #save' () { - Session.set("serverData",getProfileData()); - Session.set("confirm","editProfile"); - Session.set("confirmText", "Save new profile settings?"); + if (ele.getAttribute("type") !== null) { + input.type = ele.getAttribute("type"); + } else { + input.type = "text"; + } + input.value = ele.childNodes[0].nodeValue; + input.className = "changeInput"; + input.style.height = 0.9 * dim.height.toString() + "px"; + input.style.width = "70%"; + input.style.padding = "0.1%"; + input.id = ele.id + "a"; + input.setAttribute("opc", ele.getAttribute("opc")); + ele.parentNode.appendChild(input); + if (ele.getAttribute("re") == "readonly") { + input.readOnly = true; + input.className += " op"; + input.style.cursor = "pointer"; + } else { + input.select(); + } + input.focus(); + if (ele.getAttribute("restrict") !== null) { + var span = document.createElement("span"); + span.id = "restrict"; + var num = parseInt(ele.getAttribute("restrict")) - input.value.length; + if (num <= 0) { + span.style.setProperty("color", "#FF1A1A", "important"); + num = 0; + } + span.appendChild(document.createTextNode(num.toString() + " characters left")); + ele.parentNode.appendChild(span); + } + }, + 'click' (event) { + 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") && + !Session.equals("radioDiv", null) && + !event.target.parentNode.className.includes("profOptions") && + event.target.readOnly !== true) { + var opnum = (parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"))).toString(); + for (var i = 0; i < document.getElementsByClassName("profOptions").length; i++) { + try { + closeDivFade(document.getElementsByClassName("profOptions")[i]); + } catch (err) {} + } + Session.set("radioDiv", null); + Session.set("radioOffset", null); + } + }, + 'keydown' (event) { + 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) { + var op = event.target; + Session.set("radioDiv", op.getAttribute("op")); + Session.set("radioOffset", op.getAttribute("opc")); + try { + for (var i = 0; i < document.getElementsByClassName("profOptions").length; i++) { + var curr = document.getElementsByClassName("profOptions")[i]; + if (Session.get("radioDiv") !== i.toString()) { + closeDivFade(document.getElementsByClassName("profOptions")[i]); + } + } + } catch (err) {} + openDivFade(document.getElementsByClassName("profOptions")[op.getAttribute("op")]); + }, + 'click .profOptions p' (event) { + var sessval = Session.get("modifying"); + var p = event.target; + var opnum = (parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"))).toString(); + var input = document.getElementsByClassName("op")[opnum]; + input.value = p.childNodes[0].nodeValue; + try { + closeInput(sessval); + } catch (err) {} - openDivFade(document.getElementsByClassName("overlay")[0]); - setTimeout(function() { - document.getElementsByClassName("overlay")[0].style.opacity = "1"; - }, 200); - }, - 'click #creSubmit' () { - var data = getCreateFormData(); - if(data == null) return; - Session.set("serverData",data); - Session.set("confirm","createClass"); - Session.set("confirmText", "Submit request?"); + closeDivFade(p.parentNode); + input.focus(); + Session.set("radioDiv", null); + Session.set("radioOffset", null); + }, + '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 .fa-search' () { + Session.set("searching", true); + }, + 'click .fa-times-thin' () { + Session.set("searching", false); + }, + 'keydown #profClassSearch' (event) { + if (event.target.value === "") { + Session.set("notsearching", true); + } else { + Session.set("notsearching", false); + } + Session.set("autocompleteDivs", null); + var divs = []; + try { + var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes; + if (items.length === 0) { + Session.set("notfound", true); + } else { + Session.set("notfound", false); + } + for (var i = 2; i < items.length; i += 3) { + var item = items[i].childNodes[3]; + divs.push({ + name: item.childNodes[1].childNodes[0].nodeValue, + teacher: item.childNodes[3].childNodes[0].nodeValue, + hour: item.childNodes[5].childNodes[0].nodeValue, + subscribers: item.childNodes[7].childNodes[0].nodeValue, + _id: item.getAttribute("classid") + }); + Session.set("autocompleteDivs", divs); + } + } catch (err) {} + }, + 'click .classBox' (event) { + if (event.target.id === "label") return; + if (event.target.className !== "classBox") { + var attribute = event.target.parentNode.getAttribute("classid"); + } else { + var attribute = event.target.getAttribute("classid"); + } + var data = [attribute, ""]; + Session.set("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); - }, - 'focus .op' (event) { - event.target.click(); - } -}) + openDivFade(document.getElementsByClassName("overlay")[0]); + setTimeout(function() { + document.getElementsByClassName("overlay")[0].style.opacity = "1"; + }, 200); + }, + 'click .fa-check-circle-o' () { + sendData(Session.get("confirm")); + closeDivFade(document.getElementsByClassName("overlay")[0]); + Session.set("serverData", null); + Session.set("confirm", null); + }, + 'click .fa-times-circle-o' () { + closeDivFade(document.getElementsByClassName("overlay")[0]); + Session.set("serverData", null); + Session.set("confirm", null); + }, + 'click #save' () { + Session.set("serverData", getProfileData()); + Session.set("confirm", "editProfile"); + Session.set("confirmText", "Save new profile settings?"); + + openDivFade(document.getElementsByClassName("overlay")[0]); + setTimeout(function() { + document.getElementsByClassName("overlay")[0].style.opacity = "1"; + }, 200); + }, + 'click #creSubmit' () { + var data = getCreateFormData(); + if (data === null) return; + Session.set("serverData", data); + Session.set("confirm", "createClass"); + Session.set("confirmText", "Submit request?"); + + openDivFade(document.getElementsByClassName("overlay")[0]); + setTimeout(function() { + document.getElementsByClassName("overlay")[0].style.opacity = "1"; + }, 200); + }, + 'focus .op' (event) { + event.target.click(); + } +}); function openDivFade(div) { - if(div.className === "profOptions") { - div.style.display = "inline-block"; - } else { - div.style.display = "block"; - } - div.style.opacity = "0"; - setTimeout(function() { - div.style.opacity = "1"; - }, 100); + if (div.className === "profOptions") { + div.style.display = "inline-block"; + } else { + 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); + div.style.opacity = "0"; + setTimeout(function() { + div.style.display = "none"; + }, 100); } function closeInput(sessval) { - var input = document.getElementById(sessval+"a"); - var span = document.getElementById(sessval); - input.parentNode.removeChild(input); - try{ - var restrict = document.getElementById("restrict"); - restrict.parentNode.removeChild(restrict) - } catch(err) {} - if(input.value == "") { - span.childNodes[0].nodeValue = "Click here to edit..."; - } else { - span.childNodes[0].nodeValue = input.value; - } - span.style.display = "initial"; - Session.set("modifying",null); + var input = document.getElementById(sessval + "a"); + var span = document.getElementById(sessval); + input.parentNode.removeChild(input); + try { + var restrict = document.getElementById("restrict"); + restrict.parentNode.removeChild(restrict); + } catch (err) {} + if (input.value === "") { + span.childNodes[0].nodeValue = "Click here to edit..."; + } else { + span.childNodes[0].nodeValue = input.value; + } + span.style.display = "initial"; + Session.set("modifying", null); } function sendData(funcName) { - Meteor.call(funcName,Session.get("serverData")); + Meteor.call(funcName, Session.get("serverData")); } function getProfileData() { - var description = document.getElementById("motd").childNodes[0].nodeValue; - var school = document.getElementById("school").childNodes[0].nodeValue; - var gradein = document.getElementById("grade").childNodes[0].nodeValue; - var grade = parseInt(gradein.substring(gradein.length-2,gradein)); - var avatar = document.getElementById("profAvatar").style.backgroundImage.replace(")","").replace("url(","").replace("\"","").replace("\"",""); - var banner = document.getElementById("profBanner").style.backgroundImage.replace(")","").replace("url(","").replace("\"","").replace("\"",""); + var description = document.getElementById("motd").childNodes[0].nodeValue; + var school = document.getElementById("school").childNodes[0].nodeValue; + var gradein = document.getElementById("grade").childNodes[0].nodeValue; + var grade = parseInt(gradein.substring(gradein.length - 2, gradein)); + var avatar = document.getElementById("profAvatar").style.backgroundImage.replace(")", "").replace("url(", "").replace("\"", "").replace("\"", ""); + var banner = document.getElementById("profBanner").style.backgroundImage.replace(")", "").replace("url(", "").replace("\"", "").replace("\"", ""); - return { - school: school, - grade: grade, - description: description, - avatar: avatar, - banner: banner - }; + return { + school: school, + grade: grade, + description: description, + avatar: avatar, + banner: banner + }; } function getCreateFormData() { - var stop; - var form = document.getElementsByClassName("creInput"); - for(var i = 0; i < form.length; i++) { - 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 stop; + var form = document.getElementsByClassName("creInput"); + for (var i = 0; i < form.length; i++) { + 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; - return { - school: school, - hour: hour, - teacher: teacher, - name: name, - privacy: privacy, - category: category, - status: false, - code: "" - }; -} \ No newline at end of file + 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; + return { + school: school, + hour: hour, + teacher: teacher, + name: name, + privacy: privacy, + category: category, + status: false, + code: "" + }; +}