Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #7677 from crdlc/bug-831656
Browse files Browse the repository at this point in the history 
Bug 831656 - Homescreen tap/swipe breaks on non-target devices [r=jordan...
  • Loading branch information
@vingtetun
Cristian Rodriguez authored and vingtetun committed Jan 25, 2013
1 parent fc8b21f commit 8d78036
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 94 deletions.
1 change: 0 additions & 1 deletion apps/homescreen/index.html
View file
Expand Up @@ -14,7 +14,6 @@
<script type="text/javascript" src="shared/js/l10n.js"></script>
<script type="text/javascript" src="shared/js/l10n_date.js"></script>
<script type="text/javascript" defer src="shared/js/manifest_helper.js"></script>
<script type="text/javascript" src="shared/js/mouse_event_shim.js"></script>
<script type="text/javascript" src="shared/js/settings_listener.js"></script>

<link rel="stylesheet" type="text/css" href="shared/style_unstable/progress_activity.css">
Expand Down
35 changes: 19 additions & 16 deletions apps/homescreen/js/dock.js
View file
Expand Up @@ -13,25 +13,22 @@ const DockManager = (function() {

var initialOffsetLeft, initialOffsetRight, numApps, cellWidth;
var isPanning = false, startX, currentX, deltaX;
var thresholdForTapping = 10;
var tapThreshold = Page.prototype.tapThreshold;

function handleEvent(evt) {
switch (evt.type) {
case 'mousedown':
evt.stopPropagation();
case 'touchstart':
initialOffsetLeft = dock.getLeft();
initialOffsetRight = dock.getRight();
numApps = dock.getNumIcons();
startX = evt.clientX;
startX = evt.touches[0].pageX;
attachEvents();
break;

case 'mousemove':
evt.stopPropagation();

deltaX = evt.clientX - startX;
case 'touchmove':
deltaX = evt.touches[0].pageX - startX;
if (!isPanning) {
if (Math.abs(deltaX) < thresholdForTapping) {
if (Math.abs(deltaX) < tapThreshold) {
return;
} else {
isPanning = true;
Expand Down Expand Up @@ -67,8 +64,7 @@ const DockManager = (function() {
dock.moveBy(initialOffsetLeft + deltaX);
break;

case 'mouseup':
evt.stopPropagation();
case 'touchend':
releaseEvents();

if (!isPanning) {
Expand All @@ -81,6 +77,11 @@ const DockManager = (function() {
break;

case 'contextmenu':
if (isPanning) {
evt.stopImmediatePropagation();
return;
}

if (GridManager.pageHelper.getCurrentPageNumber() > 1) {
Homescreen.setMode('edit');

Expand Down Expand Up @@ -125,14 +126,14 @@ const DockManager = (function() {

function releaseEvents() {
container.removeEventListener('contextmenu', handleEvent);
window.removeEventListener('mousemove', handleEvent);
window.removeEventListener('mouseup', handleEvent);
window.removeEventListener('touchmove', handleEvent);
window.removeEventListener('touchend', handleEvent);
}

function attachEvents() {
container.addEventListener('contextmenu', handleEvent);
window.addEventListener('mousemove', handleEvent);
window.addEventListener('mouseup', handleEvent);
window.addEventListener('touchmove', handleEvent);
window.addEventListener('touchend', handleEvent);
}

function placeAfterRemovingApp(numApps, centering) {
Expand Down Expand Up @@ -173,7 +174,7 @@ const DockManager = (function() {
*/
init: function dm_init(containerEl, page) {
container = containerEl;
container.addEventListener('mousedown', handleEvent);
container.addEventListener('touchstart', handleEvent);
dock = this.page = page;

var numIcons= dock.getNumIcons();
Expand All @@ -189,6 +190,7 @@ const DockManager = (function() {
},

onDragStop: function dm_onDragStop() {
container.addEventListener('touchstart', handleEvent);
var numApps = dock.getNumIcons();
calculateDimentions(numApps);

Expand All @@ -205,6 +207,7 @@ const DockManager = (function() {

onDragStart: function dm_onDragStart() {
releaseEvents();
container.removeEventListener('touchstart', handleEvent);
numAppsBeforeDrag = dock.getNumIcons();
},

Expand Down
70 changes: 40 additions & 30 deletions apps/homescreen/js/dragdrop.js
View file
Expand Up @@ -30,9 +30,8 @@ const DragDropManager = (function() {
*/
var disabledCheckingLimitsTimeout = null;

var draggableIcon,
previousOverlapIcon,
overlapingTimeout;
var draggableIcon, previousOverlapIcon, overlapingTimeout, overlapElem,
originElem;

var pageHelper = GridManager.pageHelper;

Expand Down Expand Up @@ -63,7 +62,7 @@ const DragDropManager = (function() {
transitioning = false;
};

function overDock(overlapElem) {
function overDock() {
if (isDockDisabled) {
if (!overlapingDock) {
// If we are coming from grid -> the drop action is disabled
Expand All @@ -79,7 +78,7 @@ const DragDropManager = (function() {
draggableIcon.addClassToDragElement('overDock');
var needsRender = false;
DockManager.page.appendIcon(draggableIcon, needsRender);
drop(overlapElem, DockManager.page);
drop(DockManager.page);
previousOverlapIcon = overlapElem;
}

Expand Down Expand Up @@ -158,7 +157,7 @@ const DragDropManager = (function() {
* Furthermore, this method is in charge of creating a new page when
* it's needed
*/
function checkLimits(overlapElem) {
function checkLimits() {
if (currentEvent.y >= limitY) {
overDock(overlapElem);
} else {
Expand All @@ -172,6 +171,7 @@ const DragDropManager = (function() {
* {Object} This is the DOMElement which was tapped and hold
*/
function onStart(elem) {
overlapElem = originElem = elem;
draggableIcon = GridManager.getIcon(elem.dataset);
draggableIcon.onDragStart(startEvent.x, startEvent.y);
if (overlapingDock) {
Expand Down Expand Up @@ -204,7 +204,7 @@ const DragDropManager = (function() {
}
};

function drop(overlapElem, page) {
function drop(page) {
var classList = overlapElem.classList;
if (classList.contains('icon')) {
var overlapIcon = GridManager.getIcon(overlapElem.dataset);
Expand All @@ -230,55 +230,65 @@ const DragDropManager = (function() {
*
* @param {Object} DOMElement behind draggable icon
*/
function move(overlapElem) {
draggableIcon.onDragMove(currentEvent.x, currentEvent.y);
function onMove(evt) {
var x = currentEvent.x = evt.touches[0].pageX;
var y = currentEvent.y = evt.touches[0].pageY;

draggableIcon.onDragMove(x, y);

var page = getPage();
if (!page.ready) {
return;
}

checkLimits(overlapElem);
if (isDisabledDrop) {
clearTimeout(overlapingTimeout);
return;
if (overlapElem.classList.contains('page')) {
// We are on the grid but not icon
overlapElem = document.elementFromPoint(x, y);
} else {
// Avoid calling document.elementFromPoint if we are over the same icon
var rectObject = overlapElem.getBoundingClientRect();
if (overlapElem.classList.contains('page') ||
x < rectObject.left || x > rectObject.right ||
y < rectObject.top || y > rectObject.bottom) {
overlapElem = document.elementFromPoint(x, y);
}
}

var classList = overlapElem.classList;
if (!classList) {
clearTimeout(overlapingTimeout);
return;
}

checkLimits(overlapElem);
if (isDisabledDrop) {
clearTimeout(overlapingTimeout);
return;
}

if (previousOverlapIcon !== overlapElem) {
clearTimeout(overlapingTimeout);
if (classList.contains('page')) {
var lastIcon = page.getLastIcon();
if (currentEvent.y > lastIcon.getTop() && draggableIcon !== lastIcon) {
if (y > lastIcon.getTop() && draggableIcon !== lastIcon) {
page.drop(draggableIcon, lastIcon);
}
} else {
overlapingTimeout = setTimeout(drop, REARRANGE_DELAY, overlapElem,
page);
overlapingTimeout = setTimeout(drop, REARRANGE_DELAY, page);
}
}

previousOverlapIcon = overlapElem;
}

function onMove(evt) {
evt.stopPropagation();
evt.preventDefault();
currentEvent.x = evt.pageX;
currentEvent.y = evt.pageY;
move(evt.target);
}

function onEnd(evt) {
evt.stopPropagation();
evt.preventDefault();
// No multi-touch
if (evt.target !== originElem)
return;

clearTimeout(overlapingTimeout);
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onEnd);
window.removeEventListener('touchmove', onMove);
window.removeEventListener('touchend', onEnd);
stop(function dg_stop() {
GridManager.onDragStop();
DockManager.onDragStop();
Expand Down Expand Up @@ -306,8 +316,8 @@ const DragDropManager = (function() {
* @param {Object} DOM event
*/
start: function ddm_start(evt, initCoords) {
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onEnd);
window.addEventListener('touchmove', onMove);
window.addEventListener('touchend', onEnd);
GridManager.onDragStart();
DockManager.onDragStart();
startEvent = initCoords;
Expand Down

0 comments on commit 8d78036

Please sign in to comment.