Skip to content

Commit 7bb8865

Browse files
ondrasondras
committed
touch improvements
1 parent 930ac94 commit 7bb8865

8 files changed

+72
-13
lines changed

‎css/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ html, body {
1111
margin: 0;
1212
overflow: hidden;
1313
height: 100%;
14+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1415
}
1516

1617
ul {

‎index.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<html>
33
<head>
44
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width" />
5+
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
66
<title>My Mind</title>
77
<link rel="icon" href="favicon.ico" />
88
<script src="my-mind.js"></script>
9-
<xscript src="https://cdn.firebase.com/v0/firebase.js"></script>
10-
<xscript src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
9+
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
10+
<script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
1111
<link rel="stylesheet" href="css/font.css" />
1212
<link rel="stylesheet" href="css/style.css" />
1313
<link rel="stylesheet" href="css/print.css" media="print" />
@@ -201,8 +201,10 @@ <h3>Help</h3>
201201
</script>
202202

203203
<script>
204+
window.onload = function() {
204205
MM.App.init();
205206
MM.App.io.restore();
207+
}
206208
</script>
207209
<!--
208210
TODO:

‎my-mind.js

+33-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
/* My Mind web app: all source files combined. */
2+
if (!Function.prototype.bind) {
3+
Function.prototype.bind = function(thisObj) {
4+
var fn = this;
5+
var args = Array.prototype.slice.call(arguments, 1);
6+
return function() {
7+
return fn.apply(thisObj, args.concat(Array.prototype.slice.call(arguments)));
8+
}
9+
}
10+
};
11+
212
var MM = {
313
_subscribers: {},
414

@@ -319,6 +329,7 @@ MM.Item = function() {
319329
this._dom.node.appendChild(this._dom.content);
320330
/* toggle+children are appended when children exist */
321331

332+
this._dom.toggle.addEventListener("touchstart", this);
322333
this._dom.toggle.addEventListener("click", this);
323334
}
324335

@@ -647,6 +658,7 @@ MM.Item.prototype.handleEvent = function(e) {
647658
MM.Command.Finish.execute();
648659
break;
649660

661+
case "touchstart":
650662
case "click":
651663
if (this._collapsed) { this.expand(); } else { this.collapse(); }
652664
MM.App.select(this);
@@ -2923,7 +2935,7 @@ MM.Backend.WebDAV._request = function(method, url, data) {
29232935
function(xhr) { promise.fulfill(xhr.responseText); },
29242936
function(xhr) { promise.reject(new Error("HTTP/" + xhr.status + "\n\n" + xhr.responseText)); }
29252937
);
2926-
2938+
29272939
return promise;
29282940
}
29292941
MM.Backend.Image = Object.create(MM.Backend, {
@@ -3673,7 +3685,7 @@ MM.UI.IO.prototype.handleEvent = function(e) {
36733685

36743686
MM.UI.IO.prototype._syncBackend = function() {
36753687
var all = this._node.querySelectorAll("div[id]");
3676-
[].concat.apply([], all).forEach(function(node) { node.style.display = "none"; });
3688+
[].slice.apply(all).forEach(function(node) { node.style.display = "none"; });
36773689

36783690
this._node.querySelector("#" + this._backend.value).style.display = "";
36793691

@@ -4277,6 +4289,7 @@ MM.Mouse = {
42774289

42784290
MM.Mouse.init = function(port) {
42794291
this._port = port;
4292+
this._port.addEventListener("touchstart", this);
42804293
this._port.addEventListener("mousedown", this);
42814294
this._port.addEventListener("click", this);
42824295
this._port.addEventListener("dblclick", this);
@@ -4306,6 +4319,10 @@ MM.Mouse.handleEvent = function(e) {
43064319
}
43074320
break;
43084321

4322+
case "touchstart":
4323+
if (e.touches.length > 1) { return; }
4324+
e.clientX = e.touches[0].clientX;
4325+
e.clientY = e.touches[0].clientY;
43094326
case "mousedown":
43104327
var item = MM.App.map.getItemFor(e.target);
43114328
if (item == MM.App.current && MM.App.editing) { return; }
@@ -4314,10 +4331,14 @@ MM.Mouse.handleEvent = function(e) {
43144331
this._startDrag(e, item);
43154332
break;
43164333

4334+
case "touchmove":
4335+
e.clientX = e.touches[0].clientX;
4336+
e.clientY = e.touches[0].clientY;
43174337
case "mousemove":
43184338
this._processDrag(e);
43194339
break;
43204340

4341+
case "touchend":
43214342
case "mouseup":
43224343
this._endDrag(e);
43234344
break;
@@ -4333,9 +4354,15 @@ MM.Mouse.handleEvent = function(e) {
43334354
}
43344355

43354356
MM.Mouse._startDrag = function(e, item) {
4336-
e.preventDefault(); /* no selections allowed */
4337-
this._port.addEventListener("mousemove", this);
4338-
this._port.addEventListener("mouseup", this);
4357+
4358+
if (e.type == "mousedown") {
4359+
e.preventDefault(); /* no selections allowed. only for mouse; preventing touchstart would prevent Safari from emulating clicks */
4360+
this._port.addEventListener("mousemove", this);
4361+
this._port.addEventListener("mouseup", this);
4362+
} else {
4363+
this._port.addEventListener("touchmove", this);
4364+
this._port.addEventListener("touchend", this);
4365+
}
43394366

43404367
this._cursor[0] = e.clientX;
43414368
this._cursor[1] = e.clientY;
@@ -4350,6 +4377,7 @@ MM.Mouse._startDrag = function(e, item) {
43504377
}
43514378

43524379
MM.Mouse._processDrag = function(e) {
4380+
e.preventDefault();
43534381
var dx = e.clientX - this._cursor[0];
43544382
var dy = e.clientY - this._cursor[1];
43554383
this._cursor[0] = e.clientX;

‎src/backend.webdav.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,6 @@ MM.Backend.WebDAV._request = function(method, url, data) {
2222
function(xhr) { promise.fulfill(xhr.responseText); },
2323
function(xhr) { promise.reject(new Error("HTTP/" + xhr.status + "\n\n" + xhr.responseText)); }
2424
);
25-
25+
2626
return promise;
2727
}

‎src/item.js

+2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ MM.Item = function() {
4141
this._dom.node.appendChild(this._dom.content);
4242
/* toggle+children are appended when children exist */
4343

44+
this._dom.toggle.addEventListener("touchstart", this);
4445
this._dom.toggle.addEventListener("click", this);
4546
}
4647

@@ -369,6 +370,7 @@ MM.Item.prototype.handleEvent = function(e) {
369370
MM.Command.Finish.execute();
370371
break;
371372

373+
case "touchstart":
372374
case "click":
373375
if (this._collapsed) { this.expand(); } else { this.collapse(); }
374376
MM.App.select(this);

‎src/mm.js

+10
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
if (!Function.prototype.bind) {
2+
Function.prototype.bind = function(thisObj) {
3+
var fn = this;
4+
var args = Array.prototype.slice.call(arguments, 1);
5+
return function() {
6+
return fn.apply(thisObj, args.concat(Array.prototype.slice.call(arguments)));
7+
}
8+
}
9+
};
10+
111
var MM = {
212
_subscribers: {},
313

‎src/mouse.js

+19-3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ MM.Mouse = {
1010

1111
MM.Mouse.init = function(port) {
1212
this._port = port;
13+
this._port.addEventListener("touchstart", this);
1314
this._port.addEventListener("mousedown", this);
1415
this._port.addEventListener("click", this);
1516
this._port.addEventListener("dblclick", this);
@@ -39,6 +40,10 @@ MM.Mouse.handleEvent = function(e) {
3940
}
4041
break;
4142

43+
case "touchstart":
44+
if (e.touches.length > 1) { return; }
45+
e.clientX = e.touches[0].clientX;
46+
e.clientY = e.touches[0].clientY;
4247
case "mousedown":
4348
var item = MM.App.map.getItemFor(e.target);
4449
if (item == MM.App.current && MM.App.editing) { return; }
@@ -47,10 +52,14 @@ MM.Mouse.handleEvent = function(e) {
4752
this._startDrag(e, item);
4853
break;
4954

55+
case "touchmove":
56+
e.clientX = e.touches[0].clientX;
57+
e.clientY = e.touches[0].clientY;
5058
case "mousemove":
5159
this._processDrag(e);
5260
break;
5361

62+
case "touchend":
5463
case "mouseup":
5564
this._endDrag(e);
5665
break;
@@ -66,9 +75,15 @@ MM.Mouse.handleEvent = function(e) {
6675
}
6776

6877
MM.Mouse._startDrag = function(e, item) {
69-
e.preventDefault(); /* no selections allowed */
70-
this._port.addEventListener("mousemove", this);
71-
this._port.addEventListener("mouseup", this);
78+
79+
if (e.type == "mousedown") {
80+
e.preventDefault(); /* no selections allowed. only for mouse; preventing touchstart would prevent Safari from emulating clicks */
81+
this._port.addEventListener("mousemove", this);
82+
this._port.addEventListener("mouseup", this);
83+
} else {
84+
this._port.addEventListener("touchmove", this);
85+
this._port.addEventListener("touchend", this);
86+
}
7287

7388
this._cursor[0] = e.clientX;
7489
this._cursor[1] = e.clientY;
@@ -83,6 +98,7 @@ MM.Mouse._startDrag = function(e, item) {
8398
}
8499

85100
MM.Mouse._processDrag = function(e) {
101+
e.preventDefault();
86102
var dx = e.clientX - this._cursor[0];
87103
var dy = e.clientY - this._cursor[1];
88104
this._cursor[0] = e.clientX;

‎src/ui.io.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ MM.UI.IO.prototype.handleEvent = function(e) {
109109

110110
MM.UI.IO.prototype._syncBackend = function() {
111111
var all = this._node.querySelectorAll("div[id]");
112-
[].concat.apply([], all).forEach(function(node) { node.style.display = "none"; });
112+
[].slice.apply(all).forEach(function(node) { node.style.display = "none"; });
113113

114114
this._node.querySelector("#" + this._backend.value).style.display = "";
115115

0 commit comments

Comments
 (0)