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}}

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

@ -279,6 +279,7 @@ Template.main.helpers({
}, },
inRole() { // Checks correct permissions. inRole() { // Checks correct permissions.
if(Session.equals("currentWork",null)) return; if(Session.equals("currentWork",null)) return;
try {
var thisWork = work.findOne({ var thisWork = work.findOne({
_id: Session.get("currentWork")._id _id: Session.get("currentWork")._id
}); });
@ -295,6 +296,7 @@ Template.main.helpers({
currClass.banned.indexOf(Meteor.userId()) !== -1 currClass.banned.indexOf(Meteor.userId()) !== -1
) return true; ) 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,6 +781,7 @@ 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.
try {
switch (val) { switch (val) {
case "typeColor": case "typeColor":
return input.typeColor = workColors[input.type]; return input.typeColor = workColors[input.type];
@ -862,6 +864,7 @@ function formReadable(input, val) { // Makes work information readable by users.
_id: input.creator _id: input.creator
}).profile.name; }).profile.name;
} }
} catch(err){}
} }
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;
} }

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

@ -4,15 +4,56 @@
<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">
{{#if showMode 'main'}}
<h4 class="minorHeader">Main</h4>
{{#each myWork}} {{#each myWork}}
<div class="mobileClass"> {{> mobileClass}}
<div class="mobileType"></div>
<div class="mobileClassContent">
<h4>{{name}}</h4>
</div>
</div>
{{/each}} {{/each}}
{{/if}}
{{#if showMode 'done'}}
<h4 class="minorHeader">Done</h4>
{{#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> </div>
</template> </template>

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

@ -1,7 +1,23 @@
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({
@ -12,15 +28,147 @@ Template.mobile.helpers({
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); }
return allWork; doneWork = doneWork.sort(function(a,b) {
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) {