touch support + context menu: (fixes #27) and relates to #35

css/menu.css

@@ -3,6 +3,7 @@
 	z-index: 1;
 	border: 1px solid #666;
 	background-color: #fff;	
+	box-shadow: 0 0 2px 1px #666;
 }
 
 #menu button {
@@ -11,7 +12,9 @@
 	border: none;
 	margin: 0;
 	padding: 3px 6px;
-	width: 120px;
+	font-size: 15px;
+	width: 130px;
+	text-align: left;
 }
 
 #menu button:hover {

css/style.css

@@ -11,7 +11,12 @@ html, body {
 	margin: 0;
 	overflow: hidden;
 	height: 100%;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	background-color: #eed;
+	-webkit-user-select: none; /* no magnifier on hold */
+}
+
+[contenteditable] { /* allow for editable items */
+	-webkit-user-select: auto;
 }
 
 ul {
@@ -21,17 +26,17 @@ ul {
 }
 
 #port {
-	background-color: #eed;
 	overflow: hidden;
 	font-size: 15px;
 }
 
 #throbber {
+	position: absolute;
+	top: 50px;
+	left: -60px;
 	width: 50px;
 	height: 50px;
 	background-image: url(throbber.gif);
-	position: fixed;
-	top: 20px;
 }
 
 #throbber:not(.visible) {

index.html

@@ -16,7 +16,6 @@
 		<ul id="port">
 			<div id="tip">Press ‘Tab’ to Insert Child, ‘Enter’ to Insert Sibling Node. For more tips/news, follow <a href="https://twitter.com/my_mind_app" target="_blank">@my_mind_app</a>.</div>
 		</ul>
-		<div id="throbber"></div>
 
 		<div class="ui">
 			<h3>My Mind</h3>
@@ -79,6 +78,8 @@ <h3>My Mind</h3>
 			<a id="github" target="_blank" href="https://github.com/ondras/my-mind" title="GitHub project page"><img src="github.png" alt="GitHub project page" /></a>
 			<button id="toggle" title="Toggle UI"></button>
 			<button data-command="Help" title="Help"><img src="icons/help.png" alt="Help" /></button>
+
+			<div id="throbber"></div>
 		</div>
 
 
@@ -189,6 +190,10 @@ <h3>Help</h3>
 			<span></span>
 			<button data-command="Edit"></button>
 			<button data-command="Value"></button>
+			<span></span>
+			<button data-command="Undo"></button>
+			<button data-command="Redo"></button>
+			<button data-command="Center"></button>
 		</div>
 
 		<script>
@@ -202,8 +207,8 @@ <h3>Help</h3>
 
 		<script>
 			window.onload = function() {
-			MM.App.init();
-			MM.App.io.restore();
+				MM.App.init();
+				MM.App.io.restore();
 			}
 		</script>
 <!--

my-mind.js

@@ -329,7 +329,6 @@ MM.Item = function() {
 	this._dom.node.appendChild(this._dom.content);
 	/* toggle+children are appended when children exist */
 
-	this._dom.toggle.addEventListener("touchstart", this);
 	this._dom.toggle.addEventListener("click", this);
 }
 
@@ -658,7 +657,6 @@ MM.Item.prototype.handleEvent = function(e) {
 			MM.Command.Finish.execute();
 		break;
 
-		case "touchstart":
 		case "click":
 			if (this._collapsed) { this.expand(); } else { this.collapse(); }
 			MM.App.select(this);
@@ -1376,7 +1374,6 @@ MM.Menu = {
 	init: function(port) {
 		this._port = port;
 		this._dom.node = document.querySelector("#menu");
-		this._port.appendChild(this._dom.node);
 		var buttons = this._dom.node.querySelectorAll("[data-command]");
 		[].slice.call(buttons).forEach(function(button) {
 			button.innerHTML = MM.Command[button.getAttribute("data-command")].label;
@@ -4278,13 +4275,15 @@ MM.UI.Backend.GDrive._loadDone = function(data) {
 	MM.UI.Backend._loadDone.call(this, json);
 }
 MM.Mouse = {
+	TOUCH_DELAY: 500,
 	_port: null,
 	_cursor: [0, 0],
 	_pos: [0, 0], /* ghost pos */
 	_mode: "",
 	_item: null,
 	_ghost: null,
-	_oldDragState: null
+	_oldDragState: null,
+	_touchTimeout: null
 }
 
 MM.Mouse.init = function(port) {
@@ -4311,36 +4310,47 @@ MM.Mouse.handleEvent = function(e) {
 		break;
 
 		case "contextmenu":
+			this._endDrag();
+
 			var item = MM.App.map.getItemFor(e.target);
-			if (item) {
-				e.preventDefault();
-				MM.App.select(item);
-				MM.Menu.open(e.clientX, e.clientY);
-			}
+			if (item) {	MM.App.select(item); }
+
+			e.preventDefault();
+			MM.Menu.open(e.clientX, e.clientY);
 		break;
-		
+
 		case "touchstart":
 			if (e.touches.length > 1) { return; }
 			e.clientX = e.touches[0].clientX;
 			e.clientY = e.touches[0].clientY;
 		case "mousedown":
 			var item = MM.App.map.getItemFor(e.target);
-			if (item == MM.App.current && MM.App.editing) { return; }
 
+			if (e.type == "touchstart") { /* context menu here, after we have the item */
+				this._touchTimeout = setTimeout(function() { 
+					item && MM.App.select(item);
+					MM.Menu.open(e.clientX, e.clientY);
+				}, this.TOUCH_DELAY);
+			}
+
+			if (item == MM.App.current && MM.App.editing) { return; }
 			document.activeElement && document.activeElement.blur();
 			this._startDrag(e, item);
 		break;
 
 		case "touchmove":
+			if (e.touches.length > 1) { return; }
 			e.clientX = e.touches[0].clientX;
 			e.clientY = e.touches[0].clientY;
+			clearTimeout(this._touchTimeout);
 		case "mousemove":
 			this._processDrag(e);
 		break;
 
 		case "touchend":
+			clearTimeout(this._touchTimeout);
 		case "mouseup":
-			this._endDrag(e);
+			this._endDrag();
 		break;
 
 		case "wheel":
@@ -4400,7 +4410,7 @@ MM.Mouse._processDrag = function(e) {
 	}
 }
 
-MM.Mouse._endDrag = function(e) {
+MM.Mouse._endDrag = function() {
 	this._port.style.cursor = "";
 	this._port.removeEventListener("mousemove", this);
 	this._port.removeEventListener("mouseup", this);

src/item.js

@@ -41,7 +41,6 @@ MM.Item = function() {
 	this._dom.node.appendChild(this._dom.content);
 	/* toggle+children are appended when children exist */
 
-	this._dom.toggle.addEventListener("touchstart", this);
 	this._dom.toggle.addEventListener("click", this);
 }
 
@@ -370,7 +369,6 @@ MM.Item.prototype.handleEvent = function(e) {
 			MM.Command.Finish.execute();
 		break;
 
-		case "touchstart":
 		case "click":
 			if (this._collapsed) { this.expand(); } else { this.collapse(); }
 			MM.App.select(this);

src/menu.js

@@ -43,7 +43,6 @@ MM.Menu = {
 	init: function(port) {
 		this._port = port;
 		this._dom.node = document.querySelector("#menu");
-		this._port.appendChild(this._dom.node);
 		var buttons = this._dom.node.querySelectorAll("[data-command]");
 		[].slice.call(buttons).forEach(function(button) {
 			button.innerHTML = MM.Command[button.getAttribute("data-command")].label;

src/mouse.js

@@ -1,11 +1,13 @@
 MM.Mouse = {
+	TOUCH_DELAY: 500,
 	_port: null,
 	_cursor: [0, 0],
 	_pos: [0, 0], /* ghost pos */
 	_mode: "",
 	_item: null,
 	_ghost: null,
-	_oldDragState: null
+	_oldDragState: null,
+	_touchTimeout: null
 }
 
 MM.Mouse.init = function(port) {
@@ -32,36 +34,47 @@ MM.Mouse.handleEvent = function(e) {
 		break;
 
 		case "contextmenu":
+			this._endDrag();
+
 			var item = MM.App.map.getItemFor(e.target);
-			if (item) {
-				e.preventDefault();
-				MM.App.select(item);
-				MM.Menu.open(e.clientX, e.clientY);
-			}
+			if (item) {	MM.App.select(item); }
+
+			e.preventDefault();
+			MM.Menu.open(e.clientX, e.clientY);
 		break;
-		
+
 		case "touchstart":
 			if (e.touches.length > 1) { return; }
 			e.clientX = e.touches[0].clientX;
 			e.clientY = e.touches[0].clientY;
 		case "mousedown":
 			var item = MM.App.map.getItemFor(e.target);
-			if (item == MM.App.current && MM.App.editing) { return; }
 
+			if (e.type == "touchstart") { /* context menu here, after we have the item */
+				this._touchTimeout = setTimeout(function() { 
+					item && MM.App.select(item);
+					MM.Menu.open(e.clientX, e.clientY);
+				}, this.TOUCH_DELAY);
+			}
+
+			if (item == MM.App.current && MM.App.editing) { return; }
 			document.activeElement && document.activeElement.blur();
 			this._startDrag(e, item);
 		break;
 
 		case "touchmove":
+			if (e.touches.length > 1) { return; }
 			e.clientX = e.touches[0].clientX;
 			e.clientY = e.touches[0].clientY;
+			clearTimeout(this._touchTimeout);
 		case "mousemove":
 			this._processDrag(e);
 		break;
 
 		case "touchend":
+			clearTimeout(this._touchTimeout);
 		case "mouseup":
-			this._endDrag(e);
+			this._endDrag();
 		break;
 
 		case "wheel":
@@ -121,7 +134,7 @@ MM.Mouse._processDrag = function(e) {
 	}
 }
 
-MM.Mouse._endDrag = function(e) {
+MM.Mouse._endDrag = function() {
 	this._port.style.cursor = "";
 	this._port.removeEventListener("mousemove", this);
 	this._port.removeEventListener("mouseup", this);