Skip to content

Commit d63dd29

Browse files
jamesshorejamesshore
committed
Started moving duplicate event handler code into DomElement
1 parent ab08674 commit d63dd29

3 files changed

Lines changed: 36 additions & 39 deletions

File tree

‎src/client/client.js‎

Lines changed: 15 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -31,36 +31,25 @@ window.wwp = window.wwp || {};
3131
event.preventDefault();
3232
});
3333

34-
domElement.onMouseDown(function(event) {
34+
domElement.onMouseDown(function(relativeOffset, event) {
3535
event.preventDefault();
36-
startDrag(event.pageX, event.pageY);
36+
startDrag(relativeOffset);
3737
});
3838

39-
domElement.onMouseMove(function(event) {
40-
continueDrag(event.pageX, event.pageY);
41-
});
42-
43-
domElement.onMouseLeave(function(event) {
44-
endDrag();
45-
});
39+
domElement.onMouseMove(continueDrag);
40+
domElement.onMouseLeave(endDrag);
41+
domElement.onMouseUp(endDrag);
4642

47-
domElement.onMouseUp(function(event) {
48-
endDrag();
49-
});
50-
51-
domElement.onTouchStart(function(event) {
43+
domElement.onTouchStart(function(relativeOffset, event) {
5244
event.preventDefault();
53-
var originalEvent = event.originalEvent;
5445

46+
var originalEvent = event.originalEvent;
5547
if (originalEvent.touches.length !== 1) {
5648
start = null;
5749
return;
5850
}
5951

60-
var pageX = originalEvent.touches[0].pageX;
61-
var pageY = originalEvent.touches[0].pageY;
62-
63-
startDrag(pageX, pageY);
52+
startDrag(relativeOffset);
6453
});
6554

6655
domElement.onTouchMove(function(event) {
@@ -69,27 +58,22 @@ window.wwp = window.wwp || {};
6958
var pageX = originalEvent.touches[0].pageX;
7059
var pageY = originalEvent.touches[0].pageY;
7160

72-
continueDrag(pageX, pageY);
61+
var offset = domElement.relativeOffset(pageX, pageY);
62+
continueDrag(offset);
7363
});
7464

75-
domElement.onTouchEnd(function(event) {
76-
endDrag();
77-
});
78-
79-
domElement.onTouchCancel(function(event) {
80-
endDrag();
81-
});
65+
domElement.onTouchEnd(endDrag);
66+
domElement.onTouchCancel(endDrag);
8267
}
8368

84-
function startDrag(pageX, pageY) {
85-
var offset = domElement.relativeOffset(pageX, pageY);
69+
function startDrag(offset) {
8670
start = offset;
8771
}
8872

89-
function continueDrag(pageX, pageY) {
73+
function continueDrag(relativeOffset) {
9074
if (start === null) return;
9175

92-
var end = domElement.relativeOffset(pageX, pageY);
76+
var end = relativeOffset;
9377
drawLine(start.x, start.y, end.x, end.y);
9478
start = end;
9579
}

‎src/client/dom_element.js‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,19 @@ window.wwp = window.wwp || {};
1111
};
1212

1313
DomElement.prototype.onMouseDown = function(callback) {
14-
this.element.mousedown(callback);
14+
var self = this;
15+
this.element.mousedown(function(event) {
16+
var offset = self.relativeOffset(event.pageX, event.pageY);
17+
callback(offset, event);
18+
});
1519
};
1620

1721
DomElement.prototype.onMouseMove = function(callback) {
18-
this.element.mousemove(callback);
22+
var self = this;
23+
this.element.mousemove(function(event) {
24+
var offset = self.relativeOffset(event.pageX, event.pageY);
25+
callback(offset);
26+
});
1927
};
2028

2129
DomElement.prototype.onMouseLeave = function(callback) {
@@ -27,7 +35,15 @@ window.wwp = window.wwp || {};
2735
};
2836

2937
DomElement.prototype.onTouchStart = function(callback) {
30-
this.element.on("touchstart", callback);
38+
var self = this;
39+
this.element.on("touchstart", function(event) {
40+
var originalEvent = event.originalEvent;
41+
var pageX = originalEvent.touches[0].pageX;
42+
var pageY = originalEvent.touches[0].pageY;
43+
44+
var offset = self.relativeOffset(pageX, pageY);
45+
callback(offset, event);
46+
});
3147
};
3248

3349
DomElement.prototype.onTouchMove = function(callback) {

‎todo.txt‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ WeeWikiPaint
33
Minimum Marketable Features:
44
* single-user painting on home page
55
- collaborative painting
6+
- support more browsers (Android, IE10?)
67
- wiki-fy the pages
78
- more complex painting?
89
- more collaborative features?
@@ -12,19 +13,15 @@ User Stories:
1213
- Deploy (including smoke test to ensure that div is in home page)
1314

1415
Engineering Tasks:
15-
- BEFORE NEXT EPISODE:
16-
Danny Jones reports that WWP doesn't work on IE10 when using touchpad.
17-
1816
- Simplifying and improving the code
1917
- Modify Lint settings for client global variables (off-camera)
2018
- click tracking needs to account for margin, border, and padding
2119
- figure out how to factor out common setup code
2220
- test that em is converted px
2321

2422
To Do on current task:
25-
- Should DomElement's event handlers provide relativeX and relativeY rather than pageX and pageY?
23+
- Continue to eliminate event handler duplication in client.js and move it into dom_element.js
2624

27-
- Create the DOM Element instance at the top of _client_test.js
2825
- Take over more functions from client.js and _client_test.js
2926
- Move all uses of JQuery into this abstraction so it is isolated in one place
3027
- DomElement constructor should expect raw DOM element, not JQuery element

0 commit comments

Comments
 (0)