From cb9f0a020d78cdbd36bbf0ff6ba8156e0adcb807 Mon Sep 17 00:00:00 2001 From: Cristian Rodriguez Date: Thu, 31 Jan 2013 09:16:58 -0800 Subject: [PATCH] Merge pull request #7863 from crdlc/bug-836023 Bug 836023 - Click events on desktop homescreen are ignored [r=arcturus] --- apps/homescreen/js/dock.js | 41 ++++++++++++++++++---------- apps/homescreen/js/dragdrop.js | 21 ++++++++++---- apps/homescreen/js/grid.js | 50 ++++++++++++++++++++-------------- 3 files changed, 72 insertions(+), 40 deletions(-) diff --git a/apps/homescreen/js/dock.js b/apps/homescreen/js/dock.js index 065e3e339a2b..bb4de464fe55 100644 --- a/apps/homescreen/js/dock.js +++ b/apps/homescreen/js/dock.js @@ -12,21 +12,31 @@ const DockManager = (function() { var duration = 300; var initialOffsetLeft, initialOffsetRight, numApps, cellWidth; - var isPanning = false, startX, currentX, deltaX; + var isPanning = false, startEvent, currentX, deltaX; var tapThreshold = Page.prototype.tapThreshold; + var isTouch = 'ontouchstart' in window; + var touchstart = isTouch ? 'touchstart' : 'mousedown'; + var touchmove = isTouch ? 'touchmove' : 'mousemove'; + var touchend = isTouch ? 'touchend' : 'mouseup'; + + var getX = (function getXWrapper() { + return isTouch ? function(e) { return e.touches[0].pageX } : + function(e) { return e.pageX }; + })(); + function handleEvent(evt) { switch (evt.type) { - case 'touchstart': + case touchstart: initialOffsetLeft = dock.getLeft(); initialOffsetRight = dock.getRight(); numApps = dock.getNumIcons(); - startX = evt.touches[0].pageX; + startEvent = isTouch ? evt.touches[0] : evt; attachEvents(); break; - case 'touchmove': - deltaX = evt.touches[0].pageX - startX; + case touchmove: + deltaX = getX(evt) - startEvent.pageX; if (!isPanning) { if (Math.abs(deltaX) < tapThreshold) { return; @@ -64,7 +74,7 @@ const DockManager = (function() { dock.moveBy(initialOffsetLeft + deltaX); break; - case 'touchend': + case touchend: releaseEvents(); if (!isPanning) { @@ -86,7 +96,10 @@ const DockManager = (function() { Homescreen.setMode('edit'); if ('isIcon' in evt.target.dataset) { - DragDropManager.start(evt, {x: evt.clientX, y: evt.clientY}); + DragDropManager.start(evt, { + 'x': startEvent.pageX, + 'y': startEvent.pageY + }); } } break; @@ -126,14 +139,14 @@ const DockManager = (function() { function releaseEvents() { container.removeEventListener('contextmenu', handleEvent); - window.removeEventListener('touchmove', handleEvent); - window.removeEventListener('touchend', handleEvent); + window.removeEventListener(touchmove, handleEvent); + window.removeEventListener(touchend, handleEvent); } function attachEvents() { container.addEventListener('contextmenu', handleEvent); - window.addEventListener('touchmove', handleEvent); - window.addEventListener('touchend', handleEvent); + window.addEventListener(touchmove, handleEvent); + window.addEventListener(touchend, handleEvent); } function placeAfterRemovingApp(numApps, centering) { @@ -174,7 +187,7 @@ const DockManager = (function() { */ init: function dm_init(containerEl, page) { container = containerEl; - container.addEventListener('touchstart', handleEvent); + container.addEventListener(touchstart, handleEvent); dock = this.page = page; var numIcons = dock.getNumIcons(); @@ -190,7 +203,7 @@ const DockManager = (function() { }, onDragStop: function dm_onDragStop() { - container.addEventListener('touchstart', handleEvent); + container.addEventListener(touchstart, handleEvent); var numApps = dock.getNumIcons(); calculateDimentions(numApps); @@ -207,7 +220,7 @@ const DockManager = (function() { onDragStart: function dm_onDragStart() { releaseEvents(); - container.removeEventListener('touchstart', handleEvent); + container.removeEventListener(touchstart, handleEvent); numAppsBeforeDrag = dock.getNumIcons(); }, diff --git a/apps/homescreen/js/dragdrop.js b/apps/homescreen/js/dragdrop.js index 2893241f849b..7bd944129697 100644 --- a/apps/homescreen/js/dragdrop.js +++ b/apps/homescreen/js/dragdrop.js @@ -55,6 +55,15 @@ const DragDropManager = (function() { } } + var isTouch = 'ontouchstart' in window; + var touchmove = isTouch ? 'touchmove' : 'mousemove'; + var touchend = isTouch ? 'touchend' : 'mouseup'; + + var getTouch = (function getTouchWrapper() { + return isTouch ? function(e) { return e.touches[0] } : + function(e) { return e }; + })(); + var transitioning = false; function onNavigationEnd() { @@ -213,8 +222,8 @@ const DragDropManager = (function() { * @param {Object} DOMElement behind draggable icon */ function onMove(evt) { - var x = currentEvent.x = evt.touches[0].pageX; - var y = currentEvent.y = evt.touches[0].pageY; + var x = currentEvent.x = getTouch(evt).pageX; + var y = currentEvent.y = getTouch(evt).pageY; draggableIcon.onDragMove(x, y); @@ -279,8 +288,8 @@ const DragDropManager = (function() { return; clearTimeout(overlapingTimeout); - window.removeEventListener('touchmove', onMove); - window.removeEventListener('touchend', onEnd); + window.removeEventListener(touchmove, onMove); + window.removeEventListener(touchend, onEnd); stop(function dg_stop() { GridManager.onDragStop(); DockManager.onDragStop(); @@ -308,8 +317,8 @@ const DragDropManager = (function() { * @param {Object} DOM event */ start: function ddm_start(evt, initCoords) { - window.addEventListener('touchmove', onMove); - window.addEventListener('touchend', onEnd); + window.addEventListener(touchmove, onMove); + window.addEventListener(touchend, onEnd); GridManager.onDragStart(); DockManager.onDragStart(); startEvent = initCoords; diff --git a/apps/homescreen/js/grid.js b/apps/homescreen/js/grid.js index f03a64941435..8e18a5908836 100644 --- a/apps/homescreen/js/grid.js +++ b/apps/homescreen/js/grid.js @@ -35,21 +35,31 @@ const GridManager = (function() { var startEvent, isPanning = false, deltaX, removePanHandler, dummy = function() {}; + var isTouch = 'ontouchstart' in window; + var touchstart = isTouch ? 'touchstart' : 'mousedown'; + var touchmove = isTouch ? 'touchmove' : 'mousemove'; + var touchend = isTouch ? 'touchend' : 'mouseup'; + + var getX = (function getXWrapper() { + return isTouch ? function(e) { return e.touches[0].pageX } : + function(e) { return e.pageX }; + })(); + function handleEvent(evt) { switch (evt.type) { - case 'touchstart': + case touchstart: touchStartTimestamp = evt.timeStamp; - startEvent = evt.touches[0]; + startEvent = isTouch ? evt.touches[0] : evt; deltaX = 0; attachEvents(); removePanHandler = dummy; isPanning = false; break; - case 'touchmove': + case touchmove: // Start panning immediately but only disable // the tap when we've moved far enough. - deltaX = evt.touches[0].pageX - startEvent.pageX; + deltaX = getX(evt).pageX - startEvent.pageX; if (deltaX === 0) return; @@ -59,7 +69,7 @@ const GridManager = (function() { // method for panning only the 2 relevants pages based on the // direction of the inputs. The code here is carefully written // to avoid as much as possible allocations while panning. - window.removeEventListener('touchmove', handleEvent); + window.removeEventListener(touchmove, handleEvent); // Before panning pages that are directly next to the current // target are set visible. @@ -128,7 +138,7 @@ const GridManager = (function() { // Generate a function accordingly to the current page position. if (Homescreen.isInEditMode() || currentPage > 2) { var pan = function(e) { - deltaX = e.touches[0].pageX - startX; + deltaX = getX(e) - startX; if (!isPanning && Math.abs(deltaX) >= tapThreshold) { isPanning = true; } @@ -136,7 +146,7 @@ const GridManager = (function() { }; } else { var pan = function(e) { - deltaX = e.touches[0].pageX - startX; + deltaX = getX(e) - startX; if (!isPanning && Math.abs(deltaX) >= tapThreshold) { isPanning = true; } @@ -148,25 +158,25 @@ const GridManager = (function() { } var container = pages[index].container; - container.addEventListener('touchmove', pan, true); + container.addEventListener(touchmove, pan, true); removePanHandler = function removePanHandler(e) { touchEndTimestamp = e ? e.timeStamp : Number.MAX_VALUE; - window.removeEventListener('touchend', removePanHandler, true); + window.removeEventListener(touchend, removePanHandler, true); - container.removeEventListener('touchmove', pan, true); + container.removeEventListener(touchmove, pan, true); window.mozRequestAnimationFrame(function panTouchEnd() { onTouchEnd(deltaX, e); }); }; - window.addEventListener('touchend', removePanHandler, true); - window.removeEventListener('touchend', handleEvent); + window.addEventListener(touchend, removePanHandler, true); + window.removeEventListener(touchend, handleEvent); break; - case 'touchend': + case touchend: releaseEvents(); pageHelper.getCurrent().tap(evt.target); break; @@ -228,13 +238,13 @@ const GridManager = (function() { } function attachEvents() { - window.addEventListener('touchmove', handleEvent); - window.addEventListener('touchend', handleEvent); + window.addEventListener(touchmove, handleEvent); + window.addEventListener(touchend, handleEvent); } function releaseEvents() { - window.removeEventListener('touchmove', handleEvent); - window.removeEventListener('touchend', handleEvent); + window.removeEventListener(touchmove, handleEvent); + window.removeEventListener(touchend, handleEvent); } function togglePagesVisibility(start, end) { @@ -599,7 +609,7 @@ const GridManager = (function() { container = document.querySelector(selector); container.addEventListener('contextmenu', handleEvent); - container.addEventListener('touchstart', handleEvent, true); + container.addEventListener(touchstart, handleEvent, true); limits.left = container.offsetWidth * 0.05; limits.right = container.offsetWidth * 0.95; @@ -906,7 +916,7 @@ const GridManager = (function() { onDragStart: function gm_onDragSart() { releaseEvents(); - container.removeEventListener('touchstart', handleEvent, true); + container.removeEventListener(touchstart, handleEvent, true); dragging = document.body.dataset.dragging = true; }, @@ -914,7 +924,7 @@ const GridManager = (function() { delete document.body.dataset.dragging; dragging = false; delete document.body.dataset.transitioning; - container.addEventListener('touchstart', handleEvent, true); + container.addEventListener(touchstart, handleEvent, true); ensurePagesOverflow(); removeEmptyPages(); },