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

More mobile development

Browse Source
This commit is contained in:
Kenneth Jao 2017-02-26 19:27:50 -05:00
parent 77f8772be8
commit 485be935f3
9 changed files with 500 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
hourglass/.meteor/packages
View File

@ -45,3 +45,5 @@ rochal:slimscroll
meteorhacks:sikka meteorhacks:sikka
mrt:jquery-ui mrt:jquery-ui
rajit:bootstrap3-datepicker rajit:bootstrap3-datepicker
hammer:hammer@=2.0.4_1
velocityjs:velocityjs

2
hourglass/.meteor/versions
View File

@ -48,6 +48,7 @@ fastclick@1.0.13
fortawesome:fontawesome@4.7.0 fortawesome:fontawesome@4.7.0
geojson-utils@1.0.10 geojson-utils@1.0.10
google@1.1.15 google@1.1.15
hammer:hammer@2.0.4_1
hot-code-push@1.0.4 hot-code-push@1.0.4
html-tools@1.0.11 html-tools@1.0.11
htmljs@1.0.11 htmljs@1.0.11
@ -127,6 +128,7 @@ tracker@1.1.1
ui@1.0.12 ui@1.0.12
underscore@1.0.10 underscore@1.0.10
url@1.0.11 url@1.0.11
velocityjs:velocityjs@1.2.1
webapp@1.3.12 webapp@1.3.12
webapp-hashing@1.0.9 webapp-hashing@1.0.9
yogiben:admin-edit@1.2.8 yogiben:admin-edit@1.2.8

3
hourglass/client/main/main.html
View File

@ -1,6 +1,7 @@
<head> <head>
<title>Hourglass</title> <title>Hourglass</title>
<link rel="icon" href="/favicon.ico?v=2"> <link rel="icon" href="/favicon.ico?v=2">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
</head> </head>
<template name="main"> <template name="main">
@ -68,7 +69,7 @@
</div> </div>
<div class="overlay"> <div class="overlay">
<div id="editWork" style="width:{{screen '.5'}};max-width:{{screen '.5'}}"> <div id="editWork" style="width:40%;max-width:40%">
<div id="editWorkCont" style="background-color:{{divColor 'mainColor'}};border-top:10px solid {{work 'typeColor'}};"> <div id="editWorkCont" style="background-color:{{divColor 'mainColor'}};border-top:10px solid {{work 'typeColor'}};">
<div id="workInfoContainer"> <div id="workInfoContainer">
{{#if inRole}} {{#if inRole}}

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

@ -279,22 +279,24 @@ Template.main.helpers({
}, },
inRole() { // Checks correct permissions. inRole() { // Checks correct permissions.
if(Session.equals("currentWork",null)) return; if(Session.equals("currentWork",null)) return;
var thisWork = work.findOne({ try {
_id: Session.get("currentWork")._id var thisWork = work.findOne({
}); _id: Session.get("currentWork")._id
if (Session.get("newWork")) {
return true;
} else {
if (thisWork === undefined) return;
var currClass = classes.findOne({
_id: thisWork["class"]
}); });
if (Meteor.userId() === thisWork.creator || if (Session.get("newWork")) {
Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) || return true;
currClass.moderators.indexOf(Meteor.userId()) !== -1 || } else {
currClass.banned.indexOf(Meteor.userId()) !== -1 if (thisWork === undefined) return;
) return true; var currClass = classes.findOne({
} _id: thisWork["class"]
});
if (Meteor.userId() === thisWork.creator ||
Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
currClass.banned.indexOf(Meteor.userId()) !== -1
) return true;
}
} catch(err) {}
}, },
admin() { admin() {
return Roles.userIsInRole(Meteor.userId(), ['admin', 'superadmin']); return Roles.userIsInRole(Meteor.userId(), ['admin', 'superadmin']);
@ -615,7 +617,6 @@ Template.main.events({
serverData = Session.get("currentWork"); serverData = Session.get("currentWork");
if(checkMissing()) return; if(checkMissing()) return;
sendData("createWork"); sendData("createWork");
Session.set("newWork",false);
$(".overlay").fadeOut(150); $(".overlay").fadeOut(150);
}, },
'click #workDelete' () { 'click #workDelete' () {
@ -780,88 +781,90 @@ function toDate(date) { // Turns formatted date back to Date constructor.
} }
function formReadable(input, val) { // Makes work information readable by users. function formReadable(input, val) { // Makes work information readable by users.
switch (val) { try {
case "typeColor": switch (val) {
return input.typeColor = workColors[input.type]; case "typeColor":
case "name": return input.typeColor = workColors[input.type];
return input.name; case "name":
case "dueDate": return input.name;
return getReadableDate(input.dueDate); case "dueDate":
case "description": return getReadableDate(input.dueDate);
return input.description; case "description":
case "type": return input.description;
return input.type[0].toUpperCase() + input.type.slice(1); case "type":
case "comments": return input.type[0].toUpperCase() + input.type.slice(1);
var comments = input.comments; case "comments":
var resort = []; var comments = input.comments;
if (Session.get("newWork")) return []; // Don't display comments if user is creating work. var resort = [];
for (var k = 0; k < comments.length; k++) { if (Session.get("newWork")) return []; // Don't display comments if user is creating work.
var re = comments.length - k - 1; for (var k = 0; k < comments.length; k++) {
resort[re] = { var re = comments.length - k - 1;
"comment": comments[k].comment, resort[re] = {
"date": null, "comment": comments[k].comment,
"user": null, "date": null,
"avatar": null, "user": null,
"email": null "avatar": null,
}; "email": null
var user = Meteor.users.findOne({ };
_id: comments[k].user var user = Meteor.users.findOne({
}); _id: comments[k].user
resort[re].user = user.profile.name; });
resort[re].date = moment(comments[k].date).fromNow(); resort[re].user = user.profile.name;
resort[re].avatar = user.services.google.picture; resort[re].date = moment(comments[k].date).fromNow();
resort[re].email = user.services.google.email; resort[re].avatar = user.services.google.picture;
} resort[re].email = user.services.google.email;
return resort; }
case "done": return resort;
if (Session.get("newWork")) return []; case "done":
for (var i = 0; i < input.done.length; i++) { // Display users who marked as done. if (Session.get("newWork")) return [];
var user = Meteor.users.findOne({ for (var i = 0; i < input.done.length; i++) { // Display users who marked as done.
_id: input.done[i] var user = Meteor.users.findOne({
}); _id: input.done[i]
});
input.done[i] = { input.done[i] = {
"user": user.profile.name, "user": user.profile.name,
"avatar": user.services.google.picture, "avatar": user.services.google.picture,
"email": user.services.google.email "email": user.services.google.email
}; };
}
return input.done;
case "doneCol":
if (Session.get("newWork")) return "";
if (!_.contains(input.done, Meteor.userId())) return "";
return "#27A127";
case "doneText":
if (Session.get("newWork")) return "";
if (!_.contains(input.done, Meteor.userId())) return "Mark done";
return "Done!";
case "doneIcon":
if (Session.get("newWork")) return "";
if (!_.contains(input.done, Meteor.userId())) return "fa-square-o";
return "fa-check-square-o";
case "userConfirm":
if (!_.contains(input.confirmations, Meteor.userId())) return "";
return "#27A127";
case "confirmations":
return input.confirmations.length;
case "userReport":
if (!_.contains(input.reports, Meteor.userId())) return "";
return "#FF1A1A";
case "reports":
return input.reports.length;
case "email":
return Meteor.users.findOne({
_id: input.creator
}).services.google.email;
case "avatar":
return Meteor.users.findOne({
_id: input.creator
}).services.google.picture;
case "creator":
return Meteor.users.findOne({
_id: input.creator
}).profile.name;
} }
return input.done; } catch(err){}
case "doneCol":
if (Session.get("newWork")) return "";
if (!_.contains(input.done, Meteor.userId())) return "";
return "#27A127";
case "doneText":
if (Session.get("newWork")) return "";
if (!_.contains(input.done, Meteor.userId())) return "Mark done";
return "Done!";
case "doneIcon":
if (Session.get("newWork")) return "";
if (!_.contains(input.done, Meteor.userId())) return "fa-square-o";
return "fa-check-square-o";
case "userConfirm":
if (!_.contains(input.confirmations, Meteor.userId())) return "";
return "#27A127";
case "confirmations":
return input.confirmations.length;
case "userReport":
if (!_.contains(input.reports, Meteor.userId())) return "";
return "#FF1A1A";
case "reports":
return input.reports.length;
case "email":
return Meteor.users.findOne({
_id: input.creator
}).services.google.email;
case "avatar":
return Meteor.users.findOne({
_id: input.creator
}).services.google.picture;
case "creator":
return Meteor.users.findOne({
_id: input.creator
}).profile.name;
}
} }
checkComplete = function(required, inputs) { checkComplete = function(required, inputs) {

185
hourglass/client/mobile/mobile.css
View File

@ -1,37 +1,204 @@
#mobileHeader {
box-shadow: -1px 2px 2px 1px #444;
position: relative;
}
#mobileHeader h2 { #mobileHeader h2 {
font-size: 3vh; font-size: 3vh;
font-weight: 200; font-weight: 200;
padding: 0; padding: 0;
height: 6vh; height: 8vh;
display: inline; display: inline;
line-height: 6vh; line-height: 8vh;
text-align: right; text-align: right;
} }
#mobileHeader .fa-bars { #mobileHeader .fa-bars {
height: 6vh; margin-left: 1vh;
height: 8vh;
border: 0; border: 0;
line-height: 8vh;
} }
#mobileBody { #mobileBody {
width: 100%; width: 100%;
height: 94vh; height: 92vh;
margin-bottom: 10%;
background-color: #111;
overflow-y: auto;
overflow-x: hidden;
}
.mClassContainer {
border-bottom: 1px solid #AAA;
position: relative;
} }
.mobileClass { .mobileClass {
width: 100%; width: 100%;
height: 10vh; height: 20vw;
border-bottom: 1px solid #AAA; z-index: 30;
}
.mClassContainer:last-child {
margin-bottom: 20vw;
border: 0;
}
.mobileType {
width: 2vw;
height: 100%;
display: inline-block;
pointer-events: none;
} }
.mobileClassContent { .mobileClassContent {
padding: 2vh; width: 88vw;
height: 12vw;
padding: 4vw;
display: inline-block;
vertical-align: top;
pointer-events: none;
} }
.mobileClassContent h4 { .mobileClassContent h4 {
font-size: 3vh; font-size: 5vw;
vertical-align: top;
}
.minorHeader {
font-size: 4vw !important;
width: 100%;
padding: 2%;
background-color: rgba(255,255,255,0.2);
}
.mContTop {
width: 100%;
}
.mName {
font-size: 4.3vw !important;
width: 50%;
}
.mDate {
font-size: 3.4vw !important;
width: 48%;
text-align: right;
}
.mClass {
font-size: 3.5vw !important;
width: 100%;
}
.mDesc {
font-size: 3.4vw !important;
color: #BBB;
}
#mAddWork {
width: 13vw;
height: 13vw;
position: absolute;
bottom: 6vw;
right: 6vw;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: rgb(255, 26, 26);
-webkit-filter: drop-shadow(3px 4px 4px #111);
filter: drop-shadow(3px 4px 4px #111);
}
#mAddWork .fa {
font-size: 5vw;
margin-left: 4.25vw;
margin-top: 4vw;
pointer-events: none
}
.mUndo {
font-size: 4vw;
width: 13vw;
height: 13vw;
background-color: rgb(17,17,17);
display: none;
opacity: 0;
position: absolute;
top: 3.75vw;
right: 4vw;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.mUndo .fa {
width: 100%;
height: 50%;
text-align: center;
line-height: 9vw;
pointer-events: none;
}
.mUndo p {
font-size: 3vw;
width: 100%;
height: 50%;
margin: 0;
text-align: center;
pointer-events: none;
}
.mUndoText {
font-size: 4vw !important;
height: 13vw;
display: none;
opacity: 0;
position: absolute;
top: 3.75vw;
left: 8vw;
line-height: 13vw;
pointer-events: none;
}
#mOverlay {
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.3);
position: absolute;
top: 0;
left: 0;
}
#mSidebar {
height: 100%;
width: 85%;
background-color: #fff;
box-shadow: 2px 0px 1px 1px #222;
position: absolute;
top: 0;
left: 0;
} }

65
hourglass/client/mobile/mobile.html
View File

@ -2,17 +2,58 @@
<div class="noScroll"> <div class="noScroll">
<header id="mobileHeader" style="background-color:{{divColor 'mainColor'}}"> <header id="mobileHeader" style="background-color:{{divColor 'mainColor'}}">
<i class="fa fa-bars" style="color:{{iconStatus}}" aria-hidden="true"></i> <i class="fa fa-bars" style="color:{{iconStatus}}" aria-hidden="true"></i>
<h2>{{schoolName}}</h2> <h2>{{schoolName}}</h2>
</header> </header>
<div id="mobileBody" style="background-color:{{divColor 'secondaryColor'}}"> <div id="mobileBody">
{{#each myWork}} {{#if showMode 'main'}}
<div class="mobileClass"> <h4 class="minorHeader">Main</h4>
<div class="mobileType"></div> {{#each myWork}}
<div class="mobileClassContent"> {{> mobileClass}}
<h4>{{name}}</h4> {{/each}}
</div> {{/if}}
</div> {{#if showMode 'done'}}
{{/each}} <h4 class="minorHeader">Done</h4>
</div> {{#each myWork "done"}}
{{> mobileClass}}
{{/each}}
{{/if}}
{{#if showMode 'addWork'}}
{{/if}}
</div>
<div id="mAddWork">
<i class="fa fa-pencil" aria-hidden="true"></i>
</div>
<div id="mOverlay">
<div id="mSidebar">
<div class="mSectionTitle">
<div class="mStatus" style="background-color:{{modeStatus 'main'}}"></div>
<i class="fa fa-list-ul" aria-hidden="true"></i>
<h4>Create Classes</h4>
</div>
</div>
</div>
</div>
</template>
<template name="mobileClass">
<div class="mClassContainer" workid="{{_id}}">
{{#if isDone}}
<h4 class="mUndoText" workid="{{_id}}">Unmarked as done!</h4>
{{else}}
<h4 class="mUndoText" workid="{{_id}}">Marked as done!</h4>
{{/if}}
<div class="mUndo" workid="{{_id}}">
<i class="fa fa-undo" aria-hidden="true"></i>
<p>Undo</p>
</div>
<div class="mobileClass" style="background-color:{{divColor 'secondaryColor'}}" workid="{{_id}}">
<div class="mobileType" style="background-color:{{typeColor}}"></div>
<div class="mobileClassContent">
<h4 class="mName">{{name}}</h4>
<h4 class="mDate">{{dueDate}}</h4>
<h4 class="mClass">{{class}}</h4>
<h4 class="mDesc">{{shortdesc}}</h4>
</div>
</div>
</div> </div>
</template> </template>

166
hourglass/client/mobile/mobile.js
View File

@ -1,26 +1,174 @@
Session.set("mobileWork", []); Session.set("mobileWork", []);
Session.set("mobileMode", "main");
Template.mobile.rendered = function() { Template.mobile.rendered = function() {
document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor; document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
addListeners();
addMobileButton($("#mAddWork")[0], 50, function() {
$("#mAddWork").velocity("fadeOut", 200);
$("#mobileBody").velocity("fadeOut", {
duration: 200,
complete: function() {
Session.set("mobileMode", "addWork");
$("#mobileBody").velocity("fadeIn", 200);
}
});
});
} }
Template.mobile.helpers({ Template.mobile.helpers({
schoolName() { // Finds the name of the user's school. schoolName() { // Finds the name of the user's school.
if (Session.get("user").school === undefined || Session.get("user").school === null) return; if (Session.get("user").school === undefined || Session.get("user").school === null) return;
return Session.get("user").school; return Session.get("user").school;
}, },
iconStatus() { iconStatus() {
return (Session.get("sidebarMode") === "mobile") ? Session.get("user").preferences.theme.iconHighlight : ""; return (Session.get("sidebarMode") === "mobile") ? Session.get("user").preferences.theme.iconHighlight : "";
}, },
myWork() { myWork(done) {
var array = myClasses(); var array = myClasses();
var allWork = []; var notDoneWork = [];
var doneWork = [];
for(var i = 0; i < array.length; i++) { for(var i = 0; i < array.length; i++) {
for(var j = 0; j < array[i].thisClassWork.length; j++) { for(var j = 0; j < array[i].thisClassWork.length; j++) {
allWork.push(array[i].thisClassWork[j]); var classid = array[i].thisClassWork[j].classid;
var desc = array[i].thisClassWork[j].description;
if(desc) {
array[i].thisClassWork[j].shortdesc = (desc.length <= 40 ) ? desc : desc.substring(0,40) +"...";
}
array[i].thisClassWork[j]["class"] = (classid === Meteor.userId()) ? "Personal" : classes.findOne({_id:classid}).name;
if(_.contains(array[i].thisClassWork[j].done, Meteor.userId())) {
array[i].thisClassWork[j].isDone = true;
doneWork.push(array[i].thisClassWork[j]);
} else {
notDoneWork.push(array[i].thisClassWork[j]);
}
} }
} }
Session.set("mobileWork", allWork); doneWork = doneWork.sort(function(a,b) {
return allWork; return Date.parse(a.realDate) - Date.parse(b.realDate);
});
notDoneWork = notDoneWork.sort(function(a,b) {
return Date.parse(a.realDate) - Date.parse(b.realDate);
});
Session.set("mobileWork", [notDoneWork, doneWork]);
return (done === "done") ? Session.get("mobileWork")[1] : Session.get("mobileWork")[0];
},
showMode(mode) {
return Session.equals("mobileMode", mode);
},
modeStatus(mode) {
return (Session.equals("mobileMode", mode)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
} }
}); });
function addListeners() {
var deltaX = 0;
var clearTile;
for(var i = 0; i < $(".mClassContainer").length; i++) {
let id = $(".mClassContainer")[i].getAttribute("workid");
new Hammer($(".mobileClass")[i], {
domEvents: true
});
$(".mobileClass[workid="+id+"]").on('panmove', function(e) {
var dX = deltaX + (e.originalEvent.gesture.deltaX);
if(dX < 0) {
$.Velocity.hook(jQuery(e.target), 'translateX', dX/45 + 'px');
} else {
$.Velocity.hook(jQuery(e.target), 'translateX', dX + 'px');
}
});
$(".mobileClass[workid="+id+"]").on('panend', function(e) {
if(e.target === document.getElementById("mobileBody")) return;
deltaX = deltaX + (e.originalEvent.gesture.deltaX);
if(deltaX >= window.innerWidth * 0.5) {
deltaX = 0;
jQuery(e.target).velocity(
{
translateX: window.innerWidth*1.2+"px"
},
{
duration: 150,
complete: function() {
$(".mUndoText[workid="+id+"]").velocity("fadeIn", {duration: 300});
$(".mUndo[workid="+id+"]").velocity("fadeIn", {duration: 300});
var container = $(".mClassContainer[workid="+id+"]");
clearTile = setTimeout(function() {
container.velocity(
{
height: 0
},
{
duration: 200,
complete: function() {
serverData = [container[0].getAttribute("workid"), "done"];
sendData("toggleWork");
container.remove();
}
});
}, 3000);
}
});
} else {
deltaX = 0;
jQuery(e.target).velocity({translateX: "0px"},300);
}
});
addMobileButton($(".mUndo[workid="+id+"]")[0], 30, function() {
clearTimeout(clearTile);
$(".mobileClass[workid="+id+"]").velocity({translateX: "0px"},300);
$(".mUndoText[workid="+id+"]").velocity("fadeOut", {duration: 300});
$(".mUndo[workid="+id+"]").velocity("fadeOut", {duration: 300});
});
}
}
function addMobileButton(element, lighten, thisFunction) {
let button = new Hammer.Manager(element);
let add = lighten;
let ele = jQuery(element);
let execute = thisFunction;
let colors = [
parseFloat($.Velocity.hook(ele, "backgroundColorRed")),
parseFloat($.Velocity.hook(ele, "backgroundColorGreen")),
parseFloat($.Velocity.hook(ele, "backgroundColorBlue"))
];
var press = new Hammer.Press({
event: 'press',
pointers: 1,
time: 0.01,
threshold: 3000
});
button.add(press);
button.on('press', function(e) {
ele.velocity(
{
backgroundColorRed: colors[0] + add,
backgroundColorGreen: colors[1] + add,
backgroundColorBlue: colors[2] + add,
},100);
});
button.on('pressup', function(e) {
ele.velocity("stop");
ele.velocity(
{
backgroundColorRed: colors[0],
backgroundColorGreen: colors[1],
backgroundColorBlue: colors[2],
},
{
duration: 200,
complete: execute()
});
});
}

4
hourglass/lib/router.js
View File

@ -30,8 +30,8 @@ Router.route('/', {
this.redirect('/profile'); this.redirect('/profile');
} else { } else {
Session.set("user", Meteor.user().profile); Session.set("user", Meteor.user().profile);
this.render("main"); //this.render("main");
//this.render("mobile"); this.render("mobile");
} }
} }
} }

2
hourglass/server/main.js
View File

@ -501,6 +501,7 @@ Meteor.methods({
// Work Functions // Work Functions
'createWork': function(input) { 'createWork': function(input) {
input.creator = Meteor.userId(); input.creator = Meteor.userId();
if(input.description) input.description = input.description.trim();
work.schema.validate(input); work.schema.validate(input);
var found = classes.findOne({ var found = classes.findOne({
_id: input.class _id: input.class
@ -522,6 +523,7 @@ Meteor.methods({
var currentclass = classes.findOne({ var currentclass = classes.findOne({
_id: currentwork.class _id: currentwork.class
}); });
if(change.description) change.description = change.description.trim();
var security = securityCheck([[1, 16, 13, 5, false], 11, 12, 10, 20, true], var security = securityCheck([[1, 16, 13, 5, false], 11, 12, 10, 20, true],
Object.assign({}, currentclass || {}, currentwork, {description: change.description, name: change.name, dueDate: change.dueDate, type: change.type})); Object.assign({}, currentclass || {}, currentwork, {description: change.description, name: change.name, dueDate: change.dueDate, type: change.type}));
if (!security) { if (!security) {