From e51814b3fb840061bb7c7206cf0304fdf9d60147 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Thu, 9 Mar 2017 00:56:02 -0500 Subject: [PATCH] fixed button handling for mobile --- hourglass/client/mobile/mobile.css | 2 +- hourglass/client/mobile/mobile.js | 294 ++++++++++++++--------------- 2 files changed, 146 insertions(+), 150 deletions(-) diff --git a/hourglass/client/mobile/mobile.css b/hourglass/client/mobile/mobile.css index 6aad343..28ee3b8 100644 --- a/hourglass/client/mobile/mobile.css +++ b/hourglass/client/mobile/mobile.css @@ -90,7 +90,7 @@ .minorHeader { font-size: 4vw !important; - width: 100%; + width: 96%; padding: 2%; background-color: rgba(255,255,255,0.15); } diff --git a/hourglass/client/mobile/mobile.js b/hourglass/client/mobile/mobile.js index 87b8ab0..72654db 100644 --- a/hourglass/client/mobile/mobile.js +++ b/hourglass/client/mobile/mobile.js @@ -4,10 +4,8 @@ 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() { - Session.set("mobileMode","main"); - toggleSidebar(false); + 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() { - Session.set("mobileMode","done"); - toggleSidebar(false); + 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,157 +165,82 @@ 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.velocity( - { - backgroundColorRed: colors[0] + add, - backgroundColorGreen: colors[1] + add, - backgroundColorBlue: colors[2] + add, - },100); - }); - - ele.bind('touchend', function(e) { - ele.velocity("stop"); - ele.velocity( - { - backgroundColorRed: colors[0], - backgroundColorGreen: colors[1], - backgroundColorBlue: colors[2], - }, - { - 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) { + ele.on('touchstart mousedown', 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); + 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"); - ele.velocity( - { - backgroundColorAlpha: colors - }, - { - duration: 200, - complete: execute() - }); + switch(type) { + case "color": + ele.velocity( + { + backgroundColorRed: colors[0], + backgroundColorGreen: colors[1], + backgroundColorBlue: colors[2], + }, + { + duration: 200, + complete: execute() + }); + case "brightness": + ele.velocity( + { + 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); + } }); }