mirror of
https://github.com/scratchfoundation/scratchjr.git
synced 2024-11-28 18:15:37 -05:00
utils/Events.js module
This commit is contained in:
Tim Mickel
parent
aeb536dbc7
commit
8174793126
1 changed files with 231 additions and 231 deletions
|
|
@ -2,250 +2,250 @@
|
||||||
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;
|
||||||
|
|
||||||
// Instead of popping the dragging block, etc to the outer-most frame,
|
export default class Events {
|
||||||
// which causes delays while the content is reflowed, we create a
|
// Instead of popping the dragging block, etc to the outer-most frame,
|
||||||
// small drag div that is a parent of frame that the dragging block
|
// which causes delays while the content is reflowed, we create a
|
||||||
// can be a child of. This improves dragging performance.
|
// small drag div that is a parent of frame that the dragging block
|
||||||
Events.init = function () {
|
// can be a child of. This improves dragging performance.
|
||||||
var dragDiv = document.createElement('div');
|
static init () {
|
||||||
dragDiv.id = 'dragDiv';
|
var dragDiv = document.createElement('div');
|
||||||
dragDiv.style.position = 'absolute';
|
dragDiv.id = 'dragDiv';
|
||||||
dragDiv.style.width = '0px'; // size doesn't matter since children float
|
dragDiv.style.position = 'absolute';
|
||||||
dragDiv.style.height = '0px';
|
dragDiv.style.width = '0px'; // size doesn't matter since children float
|
||||||
dragDiv.style.zIndex = 7001; // slightly higher than ScratchJr.dragginLayer
|
dragDiv.style.height = '0px';
|
||||||
var frameDiv = gn('frame');
|
dragDiv.style.zIndex = 7001; // slightly higher than ScratchJr.dragginLayer
|
||||||
frameDiv.appendChild(dragDiv);
|
var frameDiv = gn('frame');
|
||||||
Events.dragDiv = dragDiv;
|
frameDiv.appendChild(dragDiv);
|
||||||
};
|
dragDiv = dragDiv;
|
||||||
Events.startDrag = function (e, c, atstart, atend, atdrag, atclick, athold) {
|
|
||||||
Events.dragged = false;
|
|
||||||
var pt = Events.getTargetPoint(e);
|
|
||||||
Events.dragmousex = pt.x;
|
|
||||||
Events.dragmousey = pt.y;
|
|
||||||
Events.initialPt = pt;
|
|
||||||
Events.mouseDownTime = (new Date() - 0);
|
|
||||||
Events.dragthumbnail = c;
|
|
||||||
Events.fcnstart = atstart;
|
|
||||||
Events.fcnend = atend;
|
|
||||||
Events.fcnclick = atclick;
|
|
||||||
|
|
||||||
if (athold) {
|
|
||||||
Events.holdit(c, athold);
|
|
||||||
}
|
}
|
||||||
Events.updatefcn = atdrag;
|
static startDrag (e, c, atstart, atend, atdrag, atclick, athold) {
|
||||||
if (isTablet) { // startDrag event setting
|
dragged = false;
|
||||||
Events.delta = 10 * scaleMultiplier;
|
var pt = Events.getTargetPoint(e);
|
||||||
window.ontouchmove = function (evt) {
|
dragmousex = pt.x;
|
||||||
Events.mouseMove(evt);
|
dragmousey = pt.y;
|
||||||
};
|
mouseDownTime = (new Date() - 0);
|
||||||
window.ontouchend = function (evt) {
|
dragthumbnail = c;
|
||||||
Events.mouseUp(evt);
|
fcnstart = atstart;
|
||||||
};
|
fcnend = atend;
|
||||||
window.ontouchleave = function (evt) {
|
fcnclick = atclick;
|
||||||
Events.mouseUp(evt);
|
|
||||||
};
|
|
||||||
window.ontouchcancel = function (evt) {
|
|
||||||
Events.mouseUp(evt);
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
Events.delta = 7;
|
|
||||||
window.onmousemove = function (evt) {
|
|
||||||
Events.mouseMove(evt);
|
|
||||||
};
|
|
||||||
window.onmouseup = function (evt) {
|
|
||||||
Events.mouseUp(evt);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.holdit = function (c, fcn) {
|
if (athold) {
|
||||||
var repeat = function () {
|
Events.holdit(c, athold);
|
||||||
Events.clearEvents();
|
}
|
||||||
fcn(Events.dragthumbnail);
|
updatefcn = atdrag;
|
||||||
Events.clearDragAndDrop();
|
if (isTablet) { // startDrag event setting
|
||||||
};
|
delta = 10 * scaleMultiplier;
|
||||||
Events.timeoutEvent = setTimeout(repeat, 500);
|
window.ontouchmove = function (evt) {
|
||||||
};
|
Events.mouseMove(evt);
|
||||||
|
|
||||||
Events.clearDragAndDrop = function () {
|
|
||||||
Events.timeoutEvent = undefined;
|
|
||||||
Events.dragcanvas = undefined;
|
|
||||||
Events.dragged = false;
|
|
||||||
Events.dragthumbnail = undefined;
|
|
||||||
Events.fcnstart = undefined;
|
|
||||||
Events.fcnend = undefined;
|
|
||||||
Events.updatefcn = undefined;
|
|
||||||
Events.fcnclick = undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.mouseMove = function (e) {
|
|
||||||
// be forgiving about the click
|
|
||||||
var pt = Events.getTargetPoint(e);
|
|
||||||
if (!Events.dragged && (Events.distance(Events.dragmousex - pt.x, Events.dragmousey - pt.y) < Events.delta)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (Events.timeoutEvent) {
|
|
||||||
clearTimeout(Events.timeoutEvent);
|
|
||||||
}
|
|
||||||
Events.timeoutEvent = undefined;
|
|
||||||
if (!Events.dragged) {
|
|
||||||
Events.fcnstart(e);
|
|
||||||
}
|
|
||||||
Events.dragged = true;
|
|
||||||
if (Events.updatefcn) {
|
|
||||||
Events.updatefcn(e, Events.dragcanvas);
|
|
||||||
}
|
|
||||||
Events.dragmousex = pt.x;
|
|
||||||
Events.dragmousey = pt.y;
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.distance = function (dx, dy) {
|
|
||||||
return Math.round(Math.sqrt((dx * dx) + (dy * dy)));
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.mouseUp = function (e) {
|
|
||||||
if (Events.timeoutEvent) {
|
|
||||||
clearTimeout(Events.timeoutEvent);
|
|
||||||
}
|
|
||||||
Events.timeoutEvent = undefined;
|
|
||||||
Events.clearEvents();
|
|
||||||
if (!Events.dragged) {
|
|
||||||
Events.itIsAClick(e);
|
|
||||||
} else {
|
|
||||||
Events.performMouseUpAction(e);
|
|
||||||
}
|
|
||||||
Events.clearDragAndDrop();
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.cancelAll = function () {
|
|
||||||
if (Events.timeoutEvent) {
|
|
||||||
clearTimeout(Events.timeoutEvent);
|
|
||||||
}
|
|
||||||
Events.timeoutEvent = undefined;
|
|
||||||
Events.clearEvents();
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.clearEvents = function () {
|
|
||||||
if (isTablet) { // clearEvents
|
|
||||||
window.ontouchmove = undefined;
|
|
||||||
window.ontouchend = undefined;
|
|
||||||
} else {
|
|
||||||
window.onmousemove = function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
window.onmouseup = undefined;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.performMouseUpAction = function (e) {
|
|
||||||
if (Events.fcnend) {
|
|
||||||
Events.fcnend(e, Events.dragcanvas);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.itIsAClick = function (e) {
|
|
||||||
if (Events.fcnclick) {
|
|
||||||
Events.fcnclick(e, Events.dragthumbnail);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.moveThumbnail = function (el, dx, dy) {
|
|
||||||
if (!el) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
el.top += dy;
|
|
||||||
el.left += dx;
|
|
||||||
el.style.top = el.top + 'px';
|
|
||||||
el.style.left = el.left + 'px';
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.move3D = function (el, dx, dy) {
|
|
||||||
if (!el) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var mtx = new WebKitCSSMatrix(window.getComputedStyle(el).webkitTransform);
|
|
||||||
el.top = dy + mtx.m42;
|
|
||||||
el.left = dx + mtx.m41;
|
|
||||||
el.style.webkitTransform = 'translate3d(' + el.left + 'px,' + el.top + 'px, 0)';
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
.m41 – corresponds to the ‘x’ value of a WebKitCSSMatrix
|
|
||||||
.m42 – corresponds to the ‘y’ value of a WebKitCSSMatrix
|
|
||||||
*/
|
|
||||||
|
|
||||||
Events.getTargetPoint = function (e) {
|
|
||||||
if (isTablet) {
|
|
||||||
if (e.touches && (e.touches.length > 0)) {
|
|
||||||
return {
|
|
||||||
x: e.touches[0].pageX,
|
|
||||||
y: e.touches[0].pageY
|
|
||||||
};
|
};
|
||||||
} else if (e.changedTouches) {
|
window.ontouchend = function (evt) {
|
||||||
return {
|
Events.mouseUp(evt);
|
||||||
x: e.changedTouches[0].pageX,
|
};
|
||||||
y: e.changedTouches[0].pageY
|
window.ontouchleave = function (evt) {
|
||||||
|
Events.mouseUp(evt);
|
||||||
|
};
|
||||||
|
window.ontouchcancel = function (evt) {
|
||||||
|
Events.mouseUp(evt);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
delta = 7;
|
||||||
|
window.onmousemove = function (evt) {
|
||||||
|
Events.mouseMove(evt);
|
||||||
|
};
|
||||||
|
window.onmouseup = function (evt) {
|
||||||
|
Events.mouseUp(evt);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
|
||||||
x: e.clientX,
|
|
||||||
y: e.clientY
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.updatePinchCenter = function (e) {
|
static holdit (c, fcn) {
|
||||||
if (e.touches.length != 2) {
|
var repeat = function () {
|
||||||
return;
|
Events.clearEvents();
|
||||||
|
fcn(dragthumbnail);
|
||||||
|
Events.clearDragAndDrop();
|
||||||
|
};
|
||||||
|
timeoutEvent = setTimeout(repeat, 500);
|
||||||
}
|
}
|
||||||
var x1 = e.touches[0].clientX,
|
|
||||||
y1 = e.touches[0].clientY;
|
|
||||||
var x2 = e.touches[1].clientX,
|
|
||||||
y2 = e.touches[1].clientY;
|
|
||||||
var cx = x1 + (x2 - x1) / 2,
|
|
||||||
cy = y1 + (y2 - y1) / 2;
|
|
||||||
var d = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
|
|
||||||
Events.pinchcenter = {
|
|
||||||
x: cx,
|
|
||||||
y: cy,
|
|
||||||
distance: d
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
Events.zoomScale = function (e) {
|
static clearDragAndDrop () {
|
||||||
if (e.touches.length !== 2) {
|
timeoutEvent = undefined;
|
||||||
return Events.lastZoomScale;
|
dragcanvas = undefined;
|
||||||
|
dragged = false;
|
||||||
|
dragthumbnail = undefined;
|
||||||
|
fcnstart = undefined;
|
||||||
|
fcnend = undefined;
|
||||||
|
updatefcn = undefined;
|
||||||
|
fcnclick = undefined;
|
||||||
}
|
}
|
||||||
var x1 = e.touches[0].clientX,
|
|
||||||
y1 = e.touches[0].clientY;
|
static mouseMove (e) {
|
||||||
var x2 = e.touches[1].clientX,
|
// be forgiving about the click
|
||||||
y2 = e.touches[1].clientY;
|
var pt = Events.getTargetPoint(e);
|
||||||
var d = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
|
if (!dragged && (Events.distance(dragmousex - pt.x, dragmousey - pt.y) < delta)) {
|
||||||
Events.lastZoomScale = d / Events.pinchcenter.distance;
|
return;
|
||||||
return Events.lastZoomScale;
|
}
|
||||||
};
|
if (timeoutEvent) {
|
||||||
|
clearTimeout(timeoutEvent);
|
||||||
|
}
|
||||||
|
timeoutEvent = undefined;
|
||||||
|
if (!dragged) {
|
||||||
|
fcnstart(e);
|
||||||
|
}
|
||||||
|
dragged = true;
|
||||||
|
if (updatefcn) {
|
||||||
|
updatefcn(e, dragcanvas);
|
||||||
|
}
|
||||||
|
dragmousex = pt.x;
|
||||||
|
dragmousey = pt.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
static distance (dx, dy) {
|
||||||
|
return Math.round(Math.sqrt((dx * dx) + (dy * dy)));
|
||||||
|
}
|
||||||
|
|
||||||
|
static mouseUp (e) {
|
||||||
|
if (timeoutEvent) {
|
||||||
|
clearTimeout(timeoutEvent);
|
||||||
|
}
|
||||||
|
timeoutEvent = undefined;
|
||||||
|
Events.clearEvents();
|
||||||
|
if (!dragged) {
|
||||||
|
Events.itIsAClick(e);
|
||||||
|
} else {
|
||||||
|
Events.performMouseUpAction(e);
|
||||||
|
}
|
||||||
|
Events.clearDragAndDrop();
|
||||||
|
}
|
||||||
|
|
||||||
|
static cancelAll () {
|
||||||
|
if (timeoutEvent) {
|
||||||
|
clearTimeout(timeoutEvent);
|
||||||
|
}
|
||||||
|
timeoutEvent = undefined;
|
||||||
|
Events.clearEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
static clearEvents () {
|
||||||
|
if (isTablet) { // clearEvents
|
||||||
|
window.ontouchmove = undefined;
|
||||||
|
window.ontouchend = undefined;
|
||||||
|
} else {
|
||||||
|
window.onmousemove = function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
window.onmouseup = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static performMouseUpAction (e) {
|
||||||
|
if (fcnend) {
|
||||||
|
fcnend(e, dragcanvas);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static itIsAClick (e) {
|
||||||
|
if (fcnclick) {
|
||||||
|
fcnclick(e, dragthumbnail);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static moveThumbnail (el, dx, dy) {
|
||||||
|
if (!el) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
el.top += dy;
|
||||||
|
el.left += dx;
|
||||||
|
el.style.top = el.top + 'px';
|
||||||
|
el.style.left = el.left + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
static move3D (el, dx, dy) {
|
||||||
|
if (!el) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var mtx = new WebKitCSSMatrix(window.getComputedStyle(el).webkitTransform);
|
||||||
|
el.top = dy + mtx.m42;
|
||||||
|
el.left = dx + mtx.m41;
|
||||||
|
el.style.webkitTransform = 'translate3d(' + el.left + 'px,' + el.top + 'px, 0)';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
.m41 – corresponds to the ‘x’ value of a WebKitCSSMatrix
|
||||||
|
.m42 – corresponds to the ‘y’ value of a WebKitCSSMatrix
|
||||||
|
*/
|
||||||
|
|
||||||
|
static getTargetPoint (e) {
|
||||||
|
if (isTablet) {
|
||||||
|
if (e.touches && (e.touches.length > 0)) {
|
||||||
|
return {
|
||||||
|
x: e.touches[0].pageX,
|
||||||
|
y: e.touches[0].pageY
|
||||||
|
};
|
||||||
|
} else if (e.changedTouches) {
|
||||||
|
return {
|
||||||
|
x: e.changedTouches[0].pageX,
|
||||||
|
y: e.changedTouches[0].pageY
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
x: e.clientX,
|
||||||
|
y: e.clientY
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static updatePinchCenter (e) {
|
||||||
|
if (e.touches.length != 2) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var x1 = e.touches[0].clientX,
|
||||||
|
y1 = e.touches[0].clientY;
|
||||||
|
var x2 = e.touches[1].clientX,
|
||||||
|
y2 = e.touches[1].clientY;
|
||||||
|
var cx = x1 + (x2 - x1) / 2,
|
||||||
|
cy = y1 + (y2 - y1) / 2;
|
||||||
|
var d = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
|
||||||
|
pinchcenter = {
|
||||||
|
x: cx,
|
||||||
|
y: cy,
|
||||||
|
distance: d
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static zoomScale (e) {
|
||||||
|
if (e.touches.length !== 2) {
|
||||||
|
return lastZoomScale;
|
||||||
|
}
|
||||||
|
var x1 = e.touches[0].clientX,
|
||||||
|
y1 = e.touches[0].clientY;
|
||||||
|
var x2 = e.touches[1].clientX,
|
||||||
|
y2 = e.touches[1].clientY;
|
||||||
|
var d = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
|
||||||
|
lastZoomScale = d / pinchcenter.distance;
|
||||||
|
return lastZoomScale;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue