Mobile page updates
This commit is contained in:
Kenneth Jao
parent
b651d23e9d
commit
77051d70ca
@ -383,6 +383,10 @@ input {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sideFilter span {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sideClassName {
|
||||
width: 50%;
|
||||
padding-left: 5%;
|
||||
|
||||
@ -101,10 +101,7 @@ Template.sidebarMenuPlate.events({
|
||||
Session.set("classDisp", array);
|
||||
},
|
||||
'click .sideFilter' (event) {
|
||||
var div = event.target;
|
||||
while (div.getAttribute("type") === null) div = div.parentNode;
|
||||
var type = div.getAttribute("type");
|
||||
|
||||
var type = event.target.getAttribute("type");
|
||||
var array = Session.get("typeFilter");
|
||||
if (array.indexOf(type) !== -1) {
|
||||
array.splice(array.indexOf(type), 1);
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
}
|
||||
|
||||
.mClassContainer {
|
||||
opacity: 0;
|
||||
border-bottom: 1px solid #AAA;
|
||||
position: relative;
|
||||
}
|
||||
@ -298,6 +299,20 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mDisableFilter {
|
||||
font-weight: 200;
|
||||
font-size: 90%;
|
||||
margin-left: 30%;
|
||||
padding: 3%;
|
||||
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
|
||||
display: none;
|
||||
line-height: normal;
|
||||
pointer-events: all;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#mTypeFilterWrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -348,4 +363,10 @@
|
||||
|
||||
#mSettings h3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mNoneText {
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
padding: 5%;
|
||||
}
|
||||
@ -12,12 +12,14 @@
|
||||
{{#each myWork}}
|
||||
{{> mobileClass}}
|
||||
{{/each}}
|
||||
<h3 class="mNoneText" style="display:{{noMain}}">Nothing left here!</h3>
|
||||
{{/if}}
|
||||
{{#if showMode 'done'}}
|
||||
<h4 class="minorHeader">Done</h4>
|
||||
{{#each myWork "done"}}
|
||||
{{> mobileClass}}
|
||||
{{/each}}
|
||||
<h3 class="mNoneText" style="display:{{noDone}}">You... should really get to work.</h3>
|
||||
{{/if}}
|
||||
{{#if showMode 'addWork'}}
|
||||
{{/if}}
|
||||
@ -26,7 +28,7 @@
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mOverlay"></div>
|
||||
<div id="mSidebar" style="background-color:{{divColor 'sidebarColor'}}">
|
||||
<div id="mSidebar" style="background-color:{{divColor 'sidebarColor'}};border-left:3vw solid {{divColor 'sidebarColor'}}">
|
||||
<div class="mSectionTitle downOffset">
|
||||
<h3>Main</h3>
|
||||
</div>
|
||||
@ -42,6 +44,7 @@
|
||||
</div>
|
||||
<div id="mFilterHead" class="mSectionTitle mOpenable downOffset">
|
||||
<h3>Filters</h3>
|
||||
<h3 id="mDisableFilter" style="display:{{filterOn}}">Disable All</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mFilterWrapper">
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
Session.set("mobileWork", []);
|
||||
Session.set("mobileMode", "main");
|
||||
Session.set("mobileSidebar", false);
|
||||
Session.set("classDisp", []);
|
||||
Session.set("typeFilter", []);
|
||||
|
||||
var filterOpen = [false, true, true];
|
||||
|
||||
@ -29,6 +31,7 @@ Template.mobile.rendered = function() {
|
||||
} else {
|
||||
Session.set("mobileMode","main");
|
||||
toggleSidebar(false);
|
||||
timedPushback();
|
||||
}
|
||||
});
|
||||
|
||||
@ -38,6 +41,7 @@ Template.mobile.rendered = function() {
|
||||
} else {
|
||||
Session.set("mobileMode","done");
|
||||
toggleSidebar(false);
|
||||
timedPushback();
|
||||
}
|
||||
});
|
||||
|
||||
@ -45,8 +49,8 @@ Template.mobile.rendered = function() {
|
||||
console.log("Go to settings!"); // Render setting template
|
||||
});
|
||||
|
||||
addMobileButton($("#mFilterHead"), 0.1, "brightness", function() {
|
||||
if (event.target.id === "disableFilter") return;
|
||||
addMobileButton($("#mFilterHead")[0], 0.1, "brightness", function() {
|
||||
if(event.target.id === "mDisableFilter") return;
|
||||
if (!filterOpen[0]) {
|
||||
$("#mFilterWrapper").slideDown(300);
|
||||
} else {
|
||||
@ -55,7 +59,7 @@ Template.mobile.rendered = function() {
|
||||
filterOpen[0] = !filterOpen[0];
|
||||
});
|
||||
|
||||
addMobileButton($("#mTypeFilterWrapper"), 0.1, "brightness", function() {
|
||||
addMobileButton($("#mTypeFilterWrapper")[0], 0.1, "brightness", function() {
|
||||
if (!filterOpen[1]) {
|
||||
$("#mClassFilterHolder").slideDown(300);
|
||||
} else {
|
||||
@ -64,7 +68,7 @@ Template.mobile.rendered = function() {
|
||||
filterOpen[1] = !filterOpen[1];
|
||||
});
|
||||
|
||||
addMobileButton($("#mClassFilterWrapper"), 0.1, "brightness", function() {
|
||||
addMobileButton($("#mClassFilterWrapper")[0], 0.1, "brightness", function() {
|
||||
if (!filterOpen[2]) {
|
||||
$("#mClassListHolder").slideDown(300);
|
||||
} else {
|
||||
@ -73,8 +77,14 @@ Template.mobile.rendered = function() {
|
||||
filterOpen[2] = !filterOpen[2];
|
||||
});
|
||||
|
||||
addMobileButton($("#mDisableFilter")[0], -0.1, "brightness", function() {
|
||||
Session.set("typeFilter", []);
|
||||
Session.set("classDisp", []);
|
||||
timedPushback();
|
||||
});
|
||||
|
||||
// FOR SIDEBAR SLIDEBACK
|
||||
/*var deltaX = 0;
|
||||
var deltaX = 0;
|
||||
var sidebar = $("#mSidebar");
|
||||
new Hammer(sidebar[0], {
|
||||
domEvents: true
|
||||
@ -84,48 +94,23 @@ Template.mobile.rendered = function() {
|
||||
var dX = deltaX + (e.originalEvent.gesture.deltaX);
|
||||
if(dX > 0) {
|
||||
$.Velocity.hook(jQuery(e.target), 'translateX', dX/70 + 'px');
|
||||
$.Velocity.hook(jQuery)
|
||||
} else {
|
||||
$.Velocity.hook(jQuery(e.target), 'translateX', dX + 'px');
|
||||
}
|
||||
});
|
||||
|
||||
movable.on('panend', function(e) {
|
||||
deltaX = deltaX + (e.originalEvent.gesture.deltaX);
|
||||
if(deltaX <= window.innerWidth * 0.3) {
|
||||
sidebar.on('panend', function(e) {
|
||||
deltaX += (e.originalEvent.gesture.deltaX);
|
||||
if(deltaX >= -window.innerWidth * 0.4) {
|
||||
deltaX = 0;
|
||||
jQuery(e.target).velocity(
|
||||
{
|
||||
translateX: window.innerWidth*1.2+"px"
|
||||
},
|
||||
{
|
||||
duration: 150,
|
||||
complete: function() {
|
||||
undo[0].velocity("fadeIn", {duration: 300});
|
||||
undo[1].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);
|
||||
}
|
||||
});
|
||||
|
||||
jQuery(e.target).velocity({'translateX': "0px"}, 150);
|
||||
} else {
|
||||
deltaX = 0;
|
||||
jQuery(e.target).velocity({translateX: "0px"},300);
|
||||
toggleSidebar(false);
|
||||
|
||||
}
|
||||
});*/
|
||||
});
|
||||
timedPushback();
|
||||
}
|
||||
|
||||
|
||||
@ -150,7 +135,8 @@ Template.mobileClass.rendered = function() {
|
||||
|
||||
movable.on('panend', function(e) {
|
||||
if(e.target === document.getElementById("mobileBody")) return;
|
||||
deltaX = deltaX + (e.originalEvent.gesture.deltaX);
|
||||
deltaX += (e.originalEvent.gesture.deltaX);
|
||||
var id = this.getAttribute("workid");
|
||||
if(deltaX >= window.innerWidth * 0.5) {
|
||||
deltaX = 0;
|
||||
jQuery(e.target).velocity(
|
||||
@ -176,7 +162,7 @@ Template.mobileClass.rendered = function() {
|
||||
container.remove();
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
|
||||
@ -194,6 +180,36 @@ Template.mobileClass.rendered = function() {
|
||||
});
|
||||
}
|
||||
|
||||
Template.mSidebarClasses.rendered = function() {
|
||||
let div = this.firstNode;
|
||||
addMobileButton(div, 0.1, "brightness", function() {
|
||||
var classid = div.getAttribute("classid");
|
||||
var array = Session.get("classDisp");
|
||||
if (array.indexOf(classid) !== -1) {
|
||||
array.splice(array.indexOf(classid), 1);
|
||||
} else {
|
||||
array.push(classid);
|
||||
}
|
||||
Session.set("classDisp", array);
|
||||
timedPushback();
|
||||
});
|
||||
}
|
||||
|
||||
Template.mSideTypeFilter.rendered = function() {
|
||||
let div = this.firstNode;
|
||||
addMobileButton(div, 0.1, "brightness", function() {
|
||||
var type = div.getAttribute("type");
|
||||
var array = Session.get("typeFilter");
|
||||
if (array.indexOf(type) !== -1) {
|
||||
array.splice(array.indexOf(type), 1);
|
||||
} else {
|
||||
array.push(type);
|
||||
}
|
||||
Session.set("typeFilter", array);
|
||||
timedPushback();
|
||||
});
|
||||
}
|
||||
|
||||
Template.mobile.helpers({
|
||||
schoolName() { // Finds the name of the user's school.
|
||||
if (Session.get("user").school === undefined || Session.get("user").school === null) return;
|
||||
@ -249,8 +265,20 @@ Template.mobile.helpers({
|
||||
});
|
||||
}
|
||||
return array;
|
||||
},
|
||||
filterOn() {
|
||||
return (Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0) ? "inline-block" : "none";
|
||||
},
|
||||
noMain() {
|
||||
try {
|
||||
return (Session.get("mobileWork")[0].length === 0) ? "block" : "none";
|
||||
} catch(err) {}
|
||||
},
|
||||
noDone() {
|
||||
try {
|
||||
return (Session.get("mobileWork")[1].length === 0) ? "block" : "none";
|
||||
} catch(err) {}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function addMobileButton(element, lighten, animateType, completeFunction) {
|
||||
@ -268,7 +296,6 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
|
||||
];
|
||||
|
||||
ele.on('touchstart', function(e) {
|
||||
console.log("start!");
|
||||
care = true;
|
||||
switch(type) {
|
||||
case "color":
|
||||
@ -336,9 +363,51 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
|
||||
function toggleSidebar(open) {
|
||||
if(open) {
|
||||
$("#mOverlay").velocity("fadeIn", 300);
|
||||
$("#mSidebar").velocity({left: '0vw'}, 300);
|
||||
$("#mSidebar").velocity({left: '-3vw'}, 300);
|
||||
} else {
|
||||
$("#mOverlay").velocity("fadeOut", 300);
|
||||
$("#mSidebar").velocity({left: '-100vw'});
|
||||
$("#mSidebar").velocity(
|
||||
{
|
||||
left: '-100vw'
|
||||
},
|
||||
{
|
||||
duration: 300,
|
||||
complete: function() {
|
||||
$.Velocity.hook($("#mSidebar"), 'translateX', '0px');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function timedPushback() {
|
||||
$(".mobileClass").velocity("stop", true);
|
||||
if($(".mClassContainer").length === 0) {
|
||||
$(".mNoneText").velocity("fadeOut", {
|
||||
duration: 100,
|
||||
complete: function() {
|
||||
$(".mClassContainer").velocity({left: "-150vw"}, 0);
|
||||
$(".mClassContainer").velocity("fadeIn", 0);
|
||||
var i = 0;
|
||||
var timer = setInterval(function() {
|
||||
$($(".mClassContainer")[i]).velocity({left: ""});
|
||||
if(i === $(".mClassContainer").length - 1) clearInterval(timer);
|
||||
i += 1;
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$(".mClassContainer").velocity("fadeOut", {
|
||||
duration: 100,
|
||||
complete: function() {
|
||||
$(".mClassContainer").velocity({left: "-150vw"}, 0);
|
||||
$(".mClassContainer").velocity("fadeIn", 0);
|
||||
var i = 0;
|
||||
var timer = setInterval(function() {
|
||||
$($(".mClassContainer")[i]).velocity({left: ""});
|
||||
if(i === $(".mClassContainer").length - 1) clearInterval(timer);
|
||||
i += 1;
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user