scratchfoundation/scratchjr
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratchjr.git synced 2025-02-26 22:45:13 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

utils/Events.js module

Browse source
This commit is contained in:
Tim Mickel 2016-01-13 17:27:56 -05:00
parent aeb536dbc7
commit 8174793126
1 changed files with 231 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

206
src/utils/Events.js
View file

@ -2,35 +2,35 @@
the caller should define the window event and call startDrag with the appropiate values the caller should define the window event and call startDrag with the appropiate values
*/ */
Events = function () {}; import {gn, scaleMultiplier, isTablet} from './lib';
Events.dragged = false; export let dragged = false;
Events.dragthumbnail = undefined; export let dragthumbnail = undefined;
Events.dragmousex = 0; export let dragmousex = 0;
Events.dragmousey = 0; export let dragmousey = 0;
Events.timeoutEvent = undefined; export let timeoutEvent = undefined;
Events.initialPt; export let dragcanvas = undefined;
Events.dragcanvas = undefined; export let dragDiv = undefined;
Events.dragDiv = undefined; let fcnstart = undefined;
Events.fcnstart = undefined; let fcnend = undefined;
Events.fcnend = undefined; let updatefcn = undefined;
Events.updatefcn = undefined; let fcnclick = undefined;
Events.fcnclick = undefined; export let mouseDownTime = 0;
Events.mouseDownTime = 0; export let scaleStartsAt = 1;
Events.scaleStartsAt = 1; let delta = 10;
Events.delta = 10; export let pinchcenter = {
Events.pinchcenter = {
x: 0, x: 0,
y: 0, y: 0,
distance: 0 distance: 0
}; };
Events.lastZoomScale = 1; let lastZoomScale = 1;
export default class Events {
// Instead of popping the dragging block, etc to the outer-most frame, // Instead of popping the dragging block, etc to the outer-most frame,
// which causes delays while the content is reflowed, we create a // which causes delays while the content is reflowed, we create a
// small drag div that is a parent of frame that the dragging block // small drag div that is a parent of frame that the dragging block
// can be a child of. This improves dragging performance. // can be a child of. This improves dragging performance.
Events.init = function () { static init () {
var dragDiv = document.createElement('div'); var dragDiv = document.createElement('div');
dragDiv.id = 'dragDiv'; dragDiv.id = 'dragDiv';
dragDiv.style.position = 'absolute'; dragDiv.style.position = 'absolute';
@ -39,26 +39,25 @@ Events.init = function () {
dragDiv.style.zIndex = 7001; // slightly higher than ScratchJr.dragginLayer dragDiv.style.zIndex = 7001; // slightly higher than ScratchJr.dragginLayer
var frameDiv = gn('frame'); var frameDiv = gn('frame');
frameDiv.appendChild(dragDiv); frameDiv.appendChild(dragDiv);
Events.dragDiv = dragDiv; dragDiv = dragDiv;
}; }
Events.startDrag = function (e, c, atstart, atend, atdrag, atclick, athold) { static startDrag (e, c, atstart, atend, atdrag, atclick, athold) {
Events.dragged = false; dragged = false;
var pt = Events.getTargetPoint(e); var pt = Events.getTargetPoint(e);
Events.dragmousex = pt.x; dragmousex = pt.x;
Events.dragmousey = pt.y; dragmousey = pt.y;
Events.initialPt = pt; mouseDownTime = (new Date() - 0);
Events.mouseDownTime = (new Date() - 0); dragthumbnail = c;
Events.dragthumbnail = c; fcnstart = atstart;
Events.fcnstart = atstart; fcnend = atend;
Events.fcnend = atend; fcnclick = atclick;
Events.fcnclick = atclick;
if (athold) { if (athold) {
Events.holdit(c, athold); Events.holdit(c, athold);
} }
Events.updatefcn = atdrag; updatefcn = atdrag;
if (isTablet) { // startDrag event setting if (isTablet) { // startDrag event setting
Events.delta = 10 * scaleMultiplier; delta = 10 * scaleMultiplier;
window.ontouchmove = function (evt) { window.ontouchmove = function (evt) {
Events.mouseMove(evt); Events.mouseMove(evt);
}; };
@ -72,7 +71,7 @@ Events.startDrag = function (e, c, atstart, atend, atdrag, atclick, athold) {
Events.mouseUp(evt); Events.mouseUp(evt);
}; };
} else { } else {
Events.delta = 7; delta = 7;
window.onmousemove = function (evt) { window.onmousemove = function (evt) {
Events.mouseMove(evt); Events.mouseMove(evt);
}; };
@ -80,76 +79,76 @@ Events.startDrag = function (e, c, atstart, atend, atdrag, atclick, athold) {
Events.mouseUp(evt); Events.mouseUp(evt);
}; };
} }
}; }
Events.holdit = function (c, fcn) { static holdit (c, fcn) {
var repeat = function () { var repeat = function () {
Events.clearEvents(); Events.clearEvents();
fcn(Events.dragthumbnail); fcn(dragthumbnail);
Events.clearDragAndDrop(); Events.clearDragAndDrop();
}; };
Events.timeoutEvent = setTimeout(repeat, 500); timeoutEvent = setTimeout(repeat, 500);
}; }
Events.clearDragAndDrop = function () { static clearDragAndDrop () {
Events.timeoutEvent = undefined; timeoutEvent = undefined;
Events.dragcanvas = undefined; dragcanvas = undefined;
Events.dragged = false; dragged = false;
Events.dragthumbnail = undefined; dragthumbnail = undefined;
Events.fcnstart = undefined; fcnstart = undefined;
Events.fcnend = undefined; fcnend = undefined;
Events.updatefcn = undefined; updatefcn = undefined;
Events.fcnclick = undefined; fcnclick = undefined;
}; }
Events.mouseMove = function (e) { static mouseMove (e) {
// be forgiving about the click // be forgiving about the click
var pt = Events.getTargetPoint(e); var pt = Events.getTargetPoint(e);
if (!Events.dragged && (Events.distance(Events.dragmousex - pt.x, Events.dragmousey - pt.y) < Events.delta)) { if (!dragged && (Events.distance(dragmousex - pt.x, dragmousey - pt.y) < delta)) {
return; return;
} }
if (Events.timeoutEvent) { if (timeoutEvent) {
clearTimeout(Events.timeoutEvent); clearTimeout(timeoutEvent);
} }
Events.timeoutEvent = undefined; timeoutEvent = undefined;
if (!Events.dragged) { if (!dragged) {
Events.fcnstart(e); fcnstart(e);
} }
Events.dragged = true; dragged = true;
if (Events.updatefcn) { if (updatefcn) {
Events.updatefcn(e, Events.dragcanvas); updatefcn(e, dragcanvas);
}
dragmousex = pt.x;
dragmousey = pt.y;
} }
Events.dragmousex = pt.x;
Events.dragmousey = pt.y;
};
Events.distance = function (dx, dy) { static distance (dx, dy) {
return Math.round(Math.sqrt((dx * dx) + (dy * dy))); return Math.round(Math.sqrt((dx * dx) + (dy * dy)));
};
Events.mouseUp = function (e) {
if (Events.timeoutEvent) {
clearTimeout(Events.timeoutEvent);
} }
Events.timeoutEvent = undefined;
static mouseUp (e) {
if (timeoutEvent) {
clearTimeout(timeoutEvent);
}
timeoutEvent = undefined;
Events.clearEvents(); Events.clearEvents();
if (!Events.dragged) { if (!dragged) {
Events.itIsAClick(e); Events.itIsAClick(e);
} else { } else {
Events.performMouseUpAction(e); Events.performMouseUpAction(e);
} }
Events.clearDragAndDrop(); Events.clearDragAndDrop();
};
Events.cancelAll = function () {
if (Events.timeoutEvent) {
clearTimeout(Events.timeoutEvent);
} }
Events.timeoutEvent = undefined;
Events.clearEvents();
};
Events.clearEvents = function () { static cancelAll () {
if (timeoutEvent) {
clearTimeout(timeoutEvent);
}
timeoutEvent = undefined;
Events.clearEvents();
}
static clearEvents () {
if (isTablet) { // clearEvents if (isTablet) { // clearEvents
window.ontouchmove = undefined; window.ontouchmove = undefined;
window.ontouchend = undefined; window.ontouchend = undefined;
@ -159,21 +158,21 @@ Events.clearEvents = function () {
}; };
window.onmouseup = undefined; window.onmouseup = undefined;
} }
};
Events.performMouseUpAction = function (e) {
if (Events.fcnend) {
Events.fcnend(e, Events.dragcanvas);
} }
};
Events.itIsAClick = function (e) { static performMouseUpAction (e) {
if (Events.fcnclick) { if (fcnend) {
Events.fcnclick(e, Events.dragthumbnail); fcnend(e, dragcanvas);
}
} }
};
Events.moveThumbnail = function (el, dx, dy) { static itIsAClick (e) {
if (fcnclick) {
fcnclick(e, dragthumbnail);
}
}
static moveThumbnail (el, dx, dy) {
if (!el) { if (!el) {
return; return;
} }
@ -181,9 +180,9 @@ Events.moveThumbnail = function (el, dx, dy) {
el.left += dx; el.left += dx;
el.style.top = el.top + 'px'; el.style.top = el.top + 'px';
el.style.left = el.left + 'px'; el.style.left = el.left + 'px';
}; }
Events.move3D = function (el, dx, dy) { static move3D (el, dx, dy) {
if (!el) { if (!el) {
return; return;
} }
@ -191,7 +190,7 @@ Events.move3D = function (el, dx, dy) {
el.top = dy + mtx.m42; el.top = dy + mtx.m42;
el.left = dx + mtx.m41; el.left = dx + mtx.m41;
el.style.webkitTransform = 'translate3d(' + el.left + 'px,' + el.top + 'px, 0)'; el.style.webkitTransform = 'translate3d(' + el.left + 'px,' + el.top + 'px, 0)';
}; }
/* /*
@ -199,7 +198,7 @@ Events.move3D = function (el, dx, dy) {
.m42 – corresponds to the ‘y’ value of a WebKitCSSMatrix .m42 – corresponds to the ‘y’ value of a WebKitCSSMatrix
*/ */
Events.getTargetPoint = function (e) { static getTargetPoint (e) {
if (isTablet) { if (isTablet) {
if (e.touches && (e.touches.length > 0)) { if (e.touches && (e.touches.length > 0)) {
return { return {
@ -217,9 +216,9 @@ Events.getTargetPoint = function (e) {
x: e.clientX, x: e.clientX,
y: e.clientY y: e.clientY
}; };
}; }
Events.updatePinchCenter = function (e) { static updatePinchCenter (e) {
if (e.touches.length != 2) { if (e.touches.length != 2) {
return; return;
} }
@ -230,22 +229,23 @@ Events.updatePinchCenter = function (e) {
var cx = x1 + (x2 - x1) / 2, var cx = x1 + (x2 - x1) / 2,
cy = y1 + (y2 - y1) / 2; cy = y1 + (y2 - y1) / 2;
var d = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); var d = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
Events.pinchcenter = { pinchcenter = {
x: cx, x: cx,
y: cy, y: cy,
distance: d distance: d
}; };
}; }
Events.zoomScale = function (e) { static zoomScale (e) {
if (e.touches.length !== 2) { if (e.touches.length !== 2) {
return Events.lastZoomScale; return lastZoomScale;
} }
var x1 = e.touches[0].clientX, var x1 = e.touches[0].clientX,
y1 = e.touches[0].clientY; y1 = e.touches[0].clientY;
var x2 = e.touches[1].clientX, var x2 = e.touches[1].clientX,
y2 = e.touches[1].clientY; y2 = e.touches[1].clientY;
var d = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); var d = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
Events.lastZoomScale = d / Events.pinchcenter.distance; lastZoomScale = d / pinchcenter.distance;
return Events.lastZoomScale; return lastZoomScale;
}; }
}