kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished new inputs for profile page

Browse Source
This commit is contained in:
Kenneth Jao 2016-10-16 19:55:19 -04:00
parent 87a36f8250
commit 98e5575e3d
6 changed files with 332 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
hourglass/client/main/main.css
View File

@ -154,7 +154,7 @@ body {
.noScroll input, .noScroll textarea {
font-family: 'Raleway';
background-color: #EBEBEB;
border: 3px solid #EBEBEB;
border: 3px solid #CECECE;
border-radius: 3px;
resize: none;
}
@ -662,7 +662,7 @@ textarea.clickModify {
.clickModify.dropdown {
font-size: 2.5vh;
width: 100%;
border: 1px solid #666;
border: 1px solid #999797;
background-color: rgba(0,0,0,0.07);
cursor: pointer;

29
hourglass/client/main/main.js
View File

@ -69,6 +69,15 @@ Template.main.rendered = function() {
Template.profile.rendered = function() {
Accounts._loginButtonsSession.set('dropdownVisible', true);
$(".optionText").hover(
function() {
console.log("hi");
$(this).addClass("selectedOption");
},
function() {
$(this).removeClass("selectedOption");
}
);
};
Template.registerHelper('userProfile', () => {
@ -243,7 +252,23 @@ Template.registerHelper('restrict', (input) => { // Returns characters left for
});
Template.registerHelper('selectOptions', (val) => {
return options[val]
if(val === "grade") {
var grade = [];
for(var i = 0; i < 5; i++) {
var year = (new Date).getFullYear() + i;
grade.push( { "val": year, "alias": year.toString() } );
}
return grade;
} else if(val === "school") {
var school = [];
var schoolList = schools.find().fetch();
for(var i = 0; i < schoolList.length; i++) {
school.push( { "val": schoolList[i].name, "alias": schoolList[i].name } );
}
return school;
} else {
return options[val];
}
});
Template.registerHelper('work', (value) => {// Returns the specified work value.
@ -254,7 +279,7 @@ Template.registerHelper('work', (value) => {// Returns the specified work value.
} else {
return formReadable(thisWork,value);
}
})
});
Template.main.helpers({
/*themeName() {

90
hourglass/client/profile/profile.css
View File

@ -1,9 +1,3 @@
.change {
font-size: 150%;
color: #BEBEBE;
cursor: pointer;
}
#profWrapper {
width: 100%;
height: 100%;
@ -11,21 +5,6 @@
overflow-y: hidden;
}
#profPage .change {
font-size: 2.5vh;
}
.radio {
cursor: pointer;
}
.changeInput {
font-size: 100%;
padding: 0;
color: #BEBEBE;
position: relative;
}
.profTitle {
font-size: 3vh;
font-weight: 400;
@ -40,11 +19,6 @@
padding: 6% 6% 0 8%;
}
#motda {
font-size: 100%;
width: 30% !important;
}
#profPage {
width: 100%;
height: 100%;
@ -102,6 +76,10 @@
color: #FFF;
}
#motdBox input {
width: 50% !important;
}
.username {
margin-left: 20% !important;
}
@ -126,25 +104,6 @@
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;
}
.profOptions p:hover {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
}
#profCards {
width: 100%;
height: 100%;
@ -179,6 +138,15 @@
text-align: left;
}
#profWrapper .clickModify span {
width: 80%;
padding: 3.5% 5% 3.5% 5%;
}
#profWrapper .clickModify, #profWrapper .optionHolder {
width: 90%;
}
#profInfo {
margin-left: 0;
border-top: 5px solid #CC4444;
@ -188,10 +156,6 @@
padding: 3% 5% 7% 14%;
}
.radioContainer {
position: relative;
}
#classes {
padding: 3% 5% 7% 7%;
}
@ -242,11 +206,11 @@
}
.profFunction i, .profFunction h4 {
padding: 1%;
padding: 1% !important;
}
.profFunction h4 {
font-size: 120%;
font-size: 120% !important;
}
#searchBar {
@ -404,19 +368,37 @@
position: relative;
}
#formContainer .clickModify {
background-color: #EBEBEB;
border: 1px solid #CECECE;
}
#formContainer .optionText:hover {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2);
}
.formDiv {
margin: 3% 6% 5% 6%;
width: 35%;
position: relative;
display: inline-block;
}
.formDiv input {
width: 90%;
}
#formContainer .optionHolder {
width: 96%;
}
.creInput {
font-size: 2vh;
padding: 3%;
}
.creOp {
margin: 0 !important;
.classDropdown {
cursor: pointer;
}
.formDiv .-autocomplete-container {
@ -499,7 +481,7 @@
}
#createdClasses {
width: 500px;
width: 600px;
height: 73vh;
padding: 30px 0 30px 30px;

207
hourglass/client/profile/profile.html
View File

@ -11,8 +11,10 @@
<img id="profAvatar" src='{{avatar}}' alt="Avatar">
<div id="motdBox">
<span class="username">{{username}} - </span>
<span class="change mo" restrict="50" id="motd">{{motd}}</span>
<span id="motdrestrict">{{commentLength}}</span>
<input id="description" class="clickModify restrict" style="color:#fff" value="{{description}}" maxLength="50">
<span class="resText">{{restrict 'description'}}</span>
<!-- <span class="change mo" restrict="50" id="description">{{description}}</span>
<span id="motdrestrict">{{commentLength}}</span> -->
</div>
</div>
<div id="profCards">
@ -21,87 +23,98 @@
<div id="profInfo" class="card" style="background-color:{{divColor 'secondaryColor'}}">
<h3 class="profHea">About</h3>
<div id="about">
<div>
<div class="prefWrapper">
<p class="profTitle">School Name:</p>
<span class="change" id="school">{{school}}</span>
</div>
<div id="school" class="clickModify dropdown" tabindex="1">
<span>{{school}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'school'}}
{{> option}}
{{/each}}
</div>
</div>
<br>
<div class="radioContainer">
<div>
<div class="prefWrapper">
<p class="profTitle">Grade:</p>
<span class="change radio" re="readonly" id="grade">{{grade}}</span>
</div>
<div class="profOptions">
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">9th</p>
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">10th</p>
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">11th</p>
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">12th</p>
</div>
</div>
<div id="grade" class="clickModify dropdown" tabindex="2">
<span>{{grade}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'grade'}}
{{> option}}
{{/each}}
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div id="profPreferences" class="card" style="background-color:{{divColor 'secondaryColor'}}">
<h3 class="profHea">Preferences</h3>
<div id="preferences">
<div class="radioContainer">
<div class="inputRadio">
<p class="profTitle">Theme:</p>
<span class="change radio" re="readonly" id="prefTheme">{{themeName}}</span>
</div>
<div class="profOptions">
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">Light</p>
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">Dark</p>
</div>
</div>
<br>
<div class="radioContainer">
<div class="inputRadio">
<p class="profTitle">Default Mode:</p>
<span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
</div>
<div class="profOptions">
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">Classes</p>
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">Calendar</p>
</div>
</div>
<br>
<div class="radioContainer">
<div class="inputRadio">
<p class="profTitle">Hide Homework:</p>
<span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
</div>
<div class="profOptions">
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">1 Day</p>
<P class="profOptionText" style="background-color:{{divColor 'mainColor'}}">2 Days</p>
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">1 Week</p>
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">1 Month</p>
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">Never</p>
</div>
</div>
<br>
<div class="radioContainer">
<div class="inputRadio">
<p class="profTitle">Hide Done:</p>
<span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
</div>
<div class="profOptions">
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">Yes</p>
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">No</p>
</div>
</div>
<br>
<div class="radioContainer">
<div class="inputRadio">
<p class="profTitle">Hide Reported:</p>
<span class="change radio" re="readonly" id="prefReport">{{pref 'hideReport'}}</span>
</div>
<div class="profOptions">
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">Yes</p>
<p class="profOptionText" style="background-color:{{divColor 'mainColor'}}">No</p>
</div>
</div>
</div>
<div class="prefWrapper">
<p class="prefTitle">Theme:</p>
<div id="theme" class="clickModify dropdown" tabindex="3">
<span>{{pref 'theme'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'theme'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<p class="prefTitle">Default Mode:</p>
<div id="mode" class="clickModify dropdown" tabindex="4">
<span>{{pref 'mode'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'mode'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<p class="prefTitle">Hide Homework:</p>
<div id="timeHide" class="clickModify dropdown" tabindex="5">
<span>{{pref 'timeHide'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'timeHide'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<p class="prefTitle">Hide Done:</p>
<div id="done" class="clickModify dropdown" tabindex="6">
<span>{{pref 'done'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'done'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<p class="prefTitle">Hide Reported:</p>
<div id="hideReport" class="clickModify dropdown" tabindex="7">
<span>{{pref 'hideReport'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'hideReport'}}
{{> option}}
{{/each}}
</div>
</div>
</div>
</div>
</div>
<div id="cardColRight">
@ -182,7 +195,7 @@
</div>
<div class="formDiv">
<p class="profTitle">Hour:</p>
<input class="creInput" type="text" name="hour">
<input class="creInput" type="text">
</div>
<div class="formDiv">
<p class="profTitle">Teacher:</p>
@ -190,40 +203,25 @@
</div>
<div class="formDiv">
<p class="profTitle">Class Name:</p>
<input class="creInput" type="text" name="classname">
<input class="creInput" type="text">
</div>
<div class="formDiv">
<p class="profTitle">Privacy:</p>
<!-- <script type="text/javascript"> -->
<!-- $(document).ready(function() { -->
<!-- $(".js-example-basic-single").select2(); -->
<!-- $('select').on('select2:open', function (e) { -->
<!-- console.log("hello"); -->
<!-- $('.select2-dropdown').hide(); -->
<!-- setTimeout(function(){ $('.select2-dropdown').slideDown("slow", "easeInOutQuint"); }, 200); -->
<!-- }); -->
<!-- }); -->
<!-- </script>-->
<!-- <select class="js-example-basic-single"> -->
<!-- <option value="AL">Alabama</option> -->
<!-- <option value="WY">Wyoming</option> -->
<!-- </select> -->
<input class="creInput radio op" type="text" name="privacy" readonly>
<div class="profOptions creOp">
<p class="profOptionText cre" style="background-color:{{divColor 'mainColor'}}">Public</p>
<p class="profOptionText cre" style="background-color:{{divColor 'mainColor'}}">Private</p>
</div>
<p class="profTitle">Privacy:</p>
<input id="privacy" class="creInput clickModify dropdown" type="text" readonly>
<div class="optionHolder">
{{#each selectOptions 'privacy'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="formDiv">
<p class="profTitle">Category:</p>
<input class="creInput radio op" type="text" name="category" readonly>
<div class="profOptions creOp">
<p class="profOptionText cre" style="background-color:{{divColor 'mainColor'}}">Class</p>
<p class="profOptionText cre" style="background-color:{{divColor 'mainColor'}}">Club</p>
<p class="profOptionText cre" style="background-color:{{divColor 'mainColor'}}">Other</p>
</div>
<input id="category" class="creInput clickModify dropdown" type="text" readonly>
<div class="optionHolder">
{{#each selectOptions 'category'}}
{{> option}}
{{/each}}
</div>
</div>
</div>
<h3 id="creSubmit">Submit Request</h3>
@ -321,3 +319,4 @@
<template name="teacherList">
{{teacher}}
</template>

319
hourglass/client/profile/profile.js
View File

@ -4,7 +4,7 @@ import {
} from 'meteor/templating';
var openValues = {
"owned": "-540px",
"owned": "-650px",
"priv": "-160px"
};
@ -25,7 +25,7 @@ Session.set("noclass", null); // If user doesn't have classes.
Session.set("notfound", null); // If no results for autocomplete.
Template.profile.helpers({
themeName() {
/* themeName() {
var vals = _.values(themeColors);
var curtheme = Session.get("user").preferences.theme;
for (var i = 0; i < vals.length; i++) {
@ -35,7 +35,7 @@ Template.profile.helpers({
}
}
return "Custom";
},
},*/
classSettings() { // Returns autocomplete array for classes.
return {
position: "bottom",
@ -86,7 +86,7 @@ Template.profile.helpers({
username() { //Returns current user's username
return Session.get("user").name;
},
motd() { // Returns the current user's description
description() { // Returns the current user's description
if (Session.get("user").description !== undefined && Session.get("user").description !== null && Session.get("user").description !== "") return Session.get("user").description;
return "Say something about yourself!";
},
@ -95,10 +95,10 @@ Template.profile.helpers({
return "Click here to edit...";
},
grade() { // Returns the current user's grade
if (Session.get("user").grade !== undefined && Session.get("user").grade !== null && Session.get("user").grade !== "") return Session.get("user").grade + "th";
if (Session.get("user").grade !== undefined && Session.get("user").grade !== null && Session.get("user").grade !== "") return Session.get("user").grade;
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 ) ( Only your school)
var array = classes.find({
status: {
$eq: true
@ -107,7 +107,10 @@ Template.profile.helpers({
$eq: false
},
_id: {
$nin: Meteor.user().profile.classes
$nin: Session.get("user").classes
},
school: {
$eq: Session.get("user").school
}
}, {
sort: {
@ -136,12 +139,12 @@ Template.profile.helpers({
return "0px";
},
profClassTabColor(status) {  // Change this [Supposed to show the current mode that's selected via color]    
if (Session.equals("profClassTab", status)) {
return Meteor.user().profile.preferences.theme.modeHighlight;
} else {
return;
}
},
if (Session.equals("profClassTab", status)) {
return Meteor.user().profile.preferences.theme.modeHighlight;
} else {
return;
}
},
profClassTab(tab) { // Tells current class
if (Session.equals("profClassTab", tab)) {
return true;
@ -174,23 +177,29 @@ Template.profile.helpers({
});
Template.profile.events({
'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) {}
'click' (event) { // Whenever a click happens'
var e = event.target.className;
if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
if (!(e.includes("optionHolder") || e.includes("optionText"))) {
if(document.getElementById(modifyingInput).className.includes("dropdown")) {
$(".optionHolder")
.fadeOut(250, "linear");
$(".selectedOption").removeClass("selectedOption");
} else {
if(modifyingInput === "description") {
Session.set("restrictText", {});
$("#"+modifyingInput).css('cursor','pointer');
var newSetting = Session.get("user");
newSetting[modifyingInput] = document.getElementById(modifyingInput).value;
serverData = newSetting;
sendData("editProfile");
}
}
modifyingInput = null;
}
}
if (!document.getElementById("createdClasses").contains(event.target) &&
!Session.equals("code", null) &&
!event.target.className.includes("fa-times-circle-o")) {
@ -219,39 +228,39 @@ Template.profile.events({
}
},
'click .addClass' () { 
if (Session.equals("profClassTab", "addClass")) return;         
var functionHolder = document.getElementById("profClassInfoHolder");
closeDivFade(functionHolder);
var div = document.getElementById("profClasses");
div.style.height = "50%";
setTimeout(function() {            
Session.set("profClassTab", "addClass");
div.style.height = "90%";          
openDivFade(functionHolder);        
}, 400);
},
    'click .manageClass' () { 
if (Session.equals("profClassTab", "manClass")) return;      
var functionHolder = document.getElementById("profClassInfoHolder");
closeDivFade(functionHolder);
var div = document.getElementById("profClasses");
div.style.height = "50%";     
setTimeout(function() {            
Session.set("profClassTab", "manClass"); 
div.style.height = "90%";           
openDivFade(functionHolder);        
}, 400);
},
    'click .createClass' () {
if (Session.equals("profClassTab", "addClass")) return;         
var functionHolder = document.getElementById("profClassInfoHolder");
closeDivFade(functionHolder);
var div = document.getElementById("profClasses");
div.style.height = "50%";
setTimeout(function() {            
Session.set("profClassTab", "addClass");
div.style.height = "70%";          
openDivFade(functionHolder);        
}, 400);
},
    'click .manageClass' () { 
if (Session.equals("profClassTab", "manClass")) return;      
var functionHolder = document.getElementById("profClassInfoHolder");
closeDivFade(functionHolder);
var div = document.getElementById("profClasses");
div.style.height = "50%";     
setTimeout(function() {            
Session.set("profClassTab", "manClass"); 
div.style.height = "70%";           
openDivFade(functionHolder);        
}, 400);
},
    'click .createClass' () {
if (Session.equals("profClassTab", "creClass")) return;
var functionHolder = document.getElementById("profClassInfoHolder");        
closeDivFade(functionHolder);
var div = document.getElementById("profClasses");
div.style.height = "50%";
setTimeout(function() {
Session.set("profClassTab", "creClass");
div.style.height = "90%";
openDivFade(functionHolder);
Session.set("profClassTab", "creClass");
div.style.height = "70%";
openDivFade(functionHolder);
}, 400);
},
'click .classBox' (event) { // When you click on a box that holds class
@ -281,6 +290,7 @@ Template.profile.events({
} else {
var attribute = event.target.getAttribute("classid");
}
if(attribute === Meteor.userId()) return;
Session.set("selectedClass", null);
var usertype = ["moderators", "banned"];
var array = classes.findOne({
@ -364,7 +374,7 @@ Template.profile.events({
input.className.replace(" formInvalid", "");
var value = input.value;
var classid = document.getElementById("createdClasses").getAttribute("classid");
input.value = "";
input.value = " ";
if (checkUser(value, classid)) {
input.className += " formInvalid";
input.placeholder = "Not a valid user";
@ -446,102 +456,105 @@ Template.profile.events({
confirm = null;
},
// INPUT HANDLING
'click .change' (event) { // Click changable inputs. Creates an input where the span is.
var ele = event.target;
var modifyingInput = Session.get("modifying");
if (ele.id !== modifyingInput && modifyingInput !== null) closeInput(modifyingInput);
'focus .clickModify' (event) {
$(".optionHolder")
.fadeOut(250, "linear");
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 = 0.9 * dim.height.toString() + "px";
input.style.width = "55%";
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();
var restrict = ele.getAttribute("restrict");
if (restrict !== null) {
input.maxLength = restrict;
input.className += " restrict";
Session.set("commentRestrict", restrict - input.value.length.toString() + " characters left");
var text = document.getElementById(Session.get("modifying") + "restrict");
text.style.display = "inherit";
text.style.color = "#7E7E7E";
if(modifyingInput !== null) {
if(!$("#"+modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput);
}
modifyingInput = event.target.id;
if(!$("#"+modifyingInput)[0].className.includes("dropdown")) {
event.target.select();
event.target.style.cursor = "text";
}
},
'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++) {
var curr = document.getElementsByClassName("profOptions")[i];
if (curr.childNodes[1] !== op.nextSibling.nextSibling.childNodes[1] &&
curr.childNodes[1] !== op.parentNode.parentNode.childNodes[3].childNodes[1]) {
closeDivFade(document.getElementsByClassName("profOptions")[i]);
'keydown .dropdown' (event) {
var first = $("#"+modifyingInput).next().children("p:first-child");
var last = $("#"+modifyingInput).next().children("p:last-child");
var next = $(".selectedOption").next();
var prev = $(".selectedOption").prev();
var lastSel = $(".selectedOption");
if (event.keyCode === 38) {
if (lastSel === undefined) {
last.addClass("selectedOption");
} else {
if (prev.length === 0) {
last.addClass("selectedOption");
lastSel.removeClass("selectedOption");
} else {
prev.addClass("selectedOption");
lastSel.removeClass("selectedOption");
}
}
} catch (err) {}
if (event.target.className.includes("op")) {
openDivFade(op.nextSibling.nextSibling);
} else {
openDivFade(op.parentNode.parentNode.childNodes[3]);
} else if (event.keyCode === 40) {
if (lastSel === undefined) {
first.addClass("selectedOption");
last.removeClass("selectedOption");
} else {
if (next.length === 0) {
first.addClass("selectedOption");
lastSel.removeClass("selectedOption");
} else {
next.addClass("selectedOption");
lastSel.removeClass("selectedOption");
}
}
} else if (event.keyCode === 13) {
lastSel[0].click();
}
},
'keydown input' (event) { // Restricts characters for certain inputs.
var modifyingInput = Session.get("modifying");
if (event.keyCode == 13) {
try {
closeInput(modifyingInput);
} catch (err) {}
'focus .dropdown' (event) {
$(".selectedOption").removeClass("selectedOption");
$("#" + modifyingInput).next()
.css('opacity',0)
.slideDown(300)
.animate(
{ opacity: 1 },
{ queue: false, duration: 100 }
);
},
'click .optionText' (event) { // Click each preferences setting.
var option = event.target.childNodes[0].nodeValue;
var userSettings = ["description","school","grade"];
var newSetting = Session.get("user");
if(modifyingInput === "privacy" || modifyingInput === "category") {
document.getElementById(modifyingInput).value = option;
$("#" + modifyingInput).next()
.fadeOut(250, "linear");
$(".selectedOption").removeClass("selectedOption");
return;
}
if(_.contains(userSettings, modifyingInput)) {
newSetting[modifyingInput] = (modifyingInput === "grade") ? parseInt(option) : option;
} else {
newSetting.preferences[modifyingInput] = (function() {
var value = options[modifyingInput].filter(function(entry) {
return option === entry.alias;
})[0].val;
return (modifyingInput === 'theme') ? themeColors[value] : value;
})();
}
Session.set("user", newSetting);
serverData = Session.get("user");
sendData("editProfile");
$("#" + modifyingInput).next()
.fadeOut(250, "linear");
$(".selectedOption").removeClass("selectedOption");
},
'input .restrict' (event) {
var restrict = event.target.maxLength;
var chars = restrict - event.target.value.length;
var text = document.getElementById(Session.get("modifying") + "restrict");
text.style.color = "#7E7E7E";
if (chars === restrict) { // Don't display if nothing in comment.
Session.set("commentRestrict", "");
return;
} else if (chars === 0) {
text.style.color = "#FF1A1A"; // Make text red if 0 characters left.
text.style.opacity = "0";
}
Session.set("commentRestrict", chars.toString() + " characters left");
},
'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];
} else {
var input = p.parentNode.parentNode.childNodes[1].childNodes[5];
}
input.value = p.childNodes[0].nodeValue;
try {
closeInput(modifyingInput);
} catch (err) {}
closeDivFade(p.parentNode);
input.focus();
var newSetting = Session.get("restrictText");
newSetting[event.target.id] = (chars === restrict) ? "" : (chars.toString() + ((chars === 1) ? " character " : " characters ") + "left");
newSetting.selected = event.target.id;
Session.set("restrictText", newSetting);
},
// AUTOCOMPLETE HANDLING
'keyup #profClassSearch' (event) { // Auto-complete updater
@ -572,10 +585,7 @@ Template.profile.events({
Session.set("autocompleteDivs", divs);
}
} catch (err) {}
},
'focus .op' (event) { // Selects input for next tabbing.
event.target.click();
},
}
});
function openDivFade(div) {
@ -593,27 +603,6 @@ function closeDivFade(div) {
}, 100);
}
function closeInput(modifyingInput) { // Closes current modifying input.
var input = document.getElementById(modifyingInput + "a");
var span = document.getElementById(modifyingInput);
input.parentNode.removeChild(input);
Session.set("commentRestrict", "");
try {
document.getElementById("modifyingInput" + "restrict").style.display = "none";
} 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);
Session.set("user", getProfileData());
serverData = Session.get("user");
sendData("editProfile");
}
function sendData(funcName) {
Meteor.call(funcName, serverData, function(err, result) {
if (funcName === "trackUserInClass") {

11
hourglass/lib/constants.js
View File

@ -1,7 +1,7 @@
themeColors = {
"light": {
"background": "White.jpg",
"mainColor": "#EBEBEB",
"mainColor": "#D9D9D9",
"secondaryColor": "#E8E8E8",
"sidebarColor": "#65839A",
"userDropdownColor": "#E6E6E6",
@ -97,6 +97,15 @@ options = {
{"val": "test", "alias": "Test"},
{"val": "project", "alias": "Project"},
{"val": "other", "alias": "Other"},
],
"privacy": [
{"val": true, "alias": "Private"},
{"val": false, "alias": "Public"}
],
"category": [
{"val": "class", "alias": "Class"},
{"val": "club", "alias": "Club"},
{"val": "other", "alias": "Other"}
]
}