fixed button handling for mobile
This commit is contained in:
Kenneth Jao
parent
1b589176b4
commit
e51814b3fb
@ -90,7 +90,7 @@
|
||||
|
||||
.minorHeader {
|
||||
font-size: 4vw !important;
|
||||
width: 100%;
|
||||
width: 96%;
|
||||
padding: 2%;
|
||||
background-color: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
@ -5,9 +5,7 @@ Session.set("mobileSidebar", false);
|
||||
Template.mobile.rendered = function() {
|
||||
document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
|
||||
|
||||
addListeners();
|
||||
|
||||
addMobileButton($("#mAddWork")[0], 50, function() {
|
||||
addMobileButton($("#mAddWork")[0], 50, "color", function() {
|
||||
$("#mAddWork").velocity("fadeOut", 200);
|
||||
$("#mobileBody").velocity("fadeOut", {
|
||||
duration: 200,
|
||||
@ -18,21 +16,94 @@ Template.mobile.rendered = function() {
|
||||
});
|
||||
});
|
||||
|
||||
addMobileSideButton($("#mSidebarToggle")[0], 0.2, function() {
|
||||
addMobileButton($("#mSidebarToggle")[0], 0.2, "brightness", function() {
|
||||
Session.set("mobileSidebar", true);
|
||||
toggleSidebar(true);
|
||||
});
|
||||
|
||||
addMobileSideButton($(".mSectionMode")[0], 0.2, function() {
|
||||
addMobileButton($(".mSectionMode")[0], 0.2, "brightness", function() {
|
||||
if(Session.equals("mobileMode", "main")) {
|
||||
toggleSidebar(false);
|
||||
} else {
|
||||
Session.set("mobileMode","main");
|
||||
toggleSidebar(false);
|
||||
}
|
||||
});
|
||||
|
||||
addMobileSideButton($(".mSectionMode")[1], 0.2, function() {
|
||||
addMobileButton($(".mSectionMode")[1], 0.2, "brightness", function() {
|
||||
if(Session.equals("mobileMode", "done")) {
|
||||
toggleSidebar(false);
|
||||
} else {
|
||||
Session.set("mobileMode","done");
|
||||
toggleSidebar(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Template.mobileClass.rendered = function() {
|
||||
var deltaX = 0;
|
||||
var clearTile;
|
||||
let movable = jQuery(this.firstNode.children[2]);
|
||||
let undo = [jQuery(this.firstNode.children[0]), jQuery(this.firstNode.children[1])]
|
||||
|
||||
new Hammer(movable[0], {
|
||||
domEvents: true
|
||||
});
|
||||
|
||||
movable.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');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
movable.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() {
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
deltaX = 0;
|
||||
jQuery(e.target).velocity({translateX: "0px"},300);
|
||||
}
|
||||
});
|
||||
|
||||
addMobileButton(undo[1], 30, "color", function() {
|
||||
clearTimeout(clearTile);
|
||||
movable.velocity({translateX: "0px"},300);
|
||||
undo[0].velocity("fadeOut", {duration: 300});
|
||||
undo[1].velocity("fadeOut", {duration: 300});
|
||||
});
|
||||
}
|
||||
|
||||
Template.mobile.helpers({
|
||||
@ -94,100 +165,40 @@ Template.mobile.helpers({
|
||||
|
||||
});
|
||||
|
||||
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);
|
||||
function addMobileButton(element, lighten, animateType, completeFunction) {
|
||||
let add = lighten;
|
||||
let type = animateType;
|
||||
let ele = jQuery(element);
|
||||
let execute = thisFunction;
|
||||
let execute = completeFunction;
|
||||
let care = true;
|
||||
|
||||
let colors = [
|
||||
parseFloat($.Velocity.hook(ele, "backgroundColorRed")),
|
||||
parseFloat($.Velocity.hook(ele, "backgroundColorGreen")),
|
||||
parseFloat($.Velocity.hook(ele, "backgroundColorBlue"))
|
||||
parseFloat($.Velocity.hook(ele, "backgroundColorBlue")),
|
||||
parseFloat($.Velocity.hook(ele, "backgroundColorAlpha"))
|
||||
];
|
||||
var press = new Hammer.Press({
|
||||
event: 'press',
|
||||
pointers: 1,
|
||||
time: 0.01,
|
||||
threshold: 3000
|
||||
});
|
||||
|
||||
button.add(press);
|
||||
|
||||
button.on('press', function(e) {
|
||||
ele.on('touchstart mousedown', function(e) {
|
||||
care = true;
|
||||
switch(type) {
|
||||
case "color":
|
||||
ele.velocity(
|
||||
{
|
||||
backgroundColorRed: colors[0] + add,
|
||||
backgroundColorGreen: colors[1] + add,
|
||||
backgroundColorBlue: colors[2] + add,
|
||||
},100);
|
||||
case "brightness":
|
||||
ele.velocity({backgroundColorAlpha: colors[3] + add},100);
|
||||
}
|
||||
});
|
||||
|
||||
ele.bind('touchend', function(e) {
|
||||
ele.on('touchend mouseup', function(e) {
|
||||
if(!care) return;
|
||||
ele.velocity("stop");
|
||||
switch(type) {
|
||||
case "color":
|
||||
ele.velocity(
|
||||
{
|
||||
backgroundColorRed: colors[0],
|
||||
@ -198,53 +209,38 @@ function addMobileButton(element, lighten, thisFunction) {
|
||||
duration: 200,
|
||||
complete: execute()
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function addMobileSideButton(element, lighten, thisFunction) {
|
||||
let button = new Hammer.Manager(element);
|
||||
let add = lighten;
|
||||
let ele = jQuery(element);
|
||||
let execute = thisFunction;
|
||||
let care = true;
|
||||
|
||||
let colors = parseFloat($.Velocity.hook(ele, "backgroundColorAlpha"));
|
||||
|
||||
var press = new Hammer.Press({
|
||||
event: 'press',
|
||||
pointers: 1,
|
||||
time: 0.01
|
||||
});
|
||||
|
||||
var pan = new Hammer.Pan();
|
||||
|
||||
button.add(press);
|
||||
button.add(pan);
|
||||
|
||||
button.on('press', function(e) {
|
||||
care = true;
|
||||
ele.velocity({backgroundColorAlpha: colors + add},100);
|
||||
});
|
||||
|
||||
button.on('pan', function(e) {
|
||||
if(element !== document.elementFromPoint(e.pX, e.pY)) {
|
||||
care = false;
|
||||
ele.velocity("stop");
|
||||
ele.velocity({backgroundColorAlpha: colors}, 200);
|
||||
}
|
||||
});
|
||||
|
||||
ele.bind('touchend', function(e) {
|
||||
if(!care) return;
|
||||
ele.velocity("stop");
|
||||
case "brightness":
|
||||
ele.velocity(
|
||||
{
|
||||
backgroundColorAlpha: colors
|
||||
backgroundColorAlpha: colors[3]
|
||||
},
|
||||
{
|
||||
duration: 200,
|
||||
complete: execute()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
ele.on('touchmove', function(e) {
|
||||
if (element !== document.elementFromPoint(e.originalEvent.touches[0].pageX,e.originalEvent.touches[0].pageY)) {
|
||||
ele.mouseleave();
|
||||
}
|
||||
})
|
||||
|
||||
ele.on('mouseleave', function(e) {
|
||||
if(!care) return;
|
||||
care = false;
|
||||
switch(type) {
|
||||
case "color":
|
||||
ele.velocity(
|
||||
{
|
||||
backgroundColorRed: colors[0],
|
||||
backgroundColorGreen: colors[1],
|
||||
backgroundColorBlue: colors[2],
|
||||
},200);
|
||||
case "brightness":
|
||||
ele.velocity({backgroundColorAlpha: colors[3]},200);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user