added sort UI, not yet connected to state...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ext-lib/jquery.ui.touch.js

@@ -0,0 +1,209 @@
+/**
+* jQuery.UI.iPad plugin
+* Copyright (c) 2010 Stephen von Takach
+* licensed under MIT.
+* Date: 27/8/2010
+*
+* Project Home: 
+* http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
+*
+* Modified: 19/01/2012 
+* Organized as a proper plugin and added addTouch()
+*/
+
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // Node/CommonJS
+        module.exports = factory(require('jquery'));
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
+	
+	var lastTap = null;				// Holds last tapped element (so we can compare for double tap)
+	var tapValid = false;			// Are we still in the .6 second window where a double tap can occur
+	var tapTimeout = null;			// The timeout reference
+	var rightClickPending = false;	// Is a right click still feasible
+	var rightClickEvent = null;		// the original event
+	var holdTimeout = null;			// timeout reference
+	var cancelMouseUp = false;		// prevents a click from occuring as we want the context menu
+
+	function cancelTap() {
+		tapValid = false;
+	};
+	
+	function cancelHold() {
+		if (rightClickPending) {
+			window.clearTimeout(holdTimeout);
+			rightClickPending = false;
+			rightClickEvent = null;
+		}
+	};
+
+	function startHold(event) {
+		if (rightClickPending)
+			return;
+
+		rightClickPending = true; // We could be performing a right click
+		rightClickEvent = (event.changedTouches)[0];
+		holdTimeout = window.setTimeout(doRightClick, 800);
+	};
+
+	function doRightClick() {
+		rightClickPending = false;
+
+		// We need to mouse up (as we were down)
+		var first = rightClickEvent,
+			simulatedEvent = document.createEvent("MouseEvent");
+		simulatedEvent.initMouseEvent("mouseup", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
+				false, false, false, false, 0, null);
+		first.target.dispatchEvent(simulatedEvent);
+
+		// Emulate a right click
+		simulatedEvent = document.createEvent("MouseEvent");
+		simulatedEvent.initMouseEvent("mousedown", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
+				false, false, false, false, 2, null);
+		first.target.dispatchEvent(simulatedEvent);
+
+		// Show a context menu
+		simulatedEvent = document.createEvent("MouseEvent");
+		simulatedEvent.initMouseEvent("contextmenu", true, true, window, 1, first.screenX + 50, first.screenY + 5, first.clientX + 50, first.clientY + 5,
+	                                  false, false, false, false, 2, null);
+		first.target.dispatchEvent(simulatedEvent);
+
+		// Note: I don't mouse up the right click here however feel free to add if required
+		cancelMouseUp = true;
+		rightClickEvent = null; // Release memory
+	};
+
+	// mouse over event then mouse down
+	function iPadTouchStart(event) {
+		var touches = event.changedTouches,
+			first = touches[0],
+			type = "mouseover",
+			simulatedEvent = document.createEvent("MouseEvent");
+
+		// Mouse over first - I have live events attached on mouse over
+		simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
+	                            false, false, false, false, 0, null);
+		first.target.dispatchEvent(simulatedEvent);
+
+		type = "mousedown";
+		simulatedEvent = document.createEvent("MouseEvent");
+
+		simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
+	                            false, false, false, false, 0, null);
+		first.target.dispatchEvent(simulatedEvent);
+
+
+		if (!tapValid) {
+			lastTap = first.target;
+			tapValid = true;
+			tapTimeout = window.setTimeout(cancelTap, 600);
+			startHold(event);
+		}
+		else {
+			window.clearTimeout(tapTimeout);
+
+			// If a double tap is still a possibility and the elements are the same then perform a double click
+			if (first.target == lastTap) {
+				lastTap = null;
+				tapValid = false;
+
+				type = "click";
+				simulatedEvent = document.createEvent("MouseEvent");
+
+				simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
+	                         	false, false, false, false, 0/*left*/, null);
+				first.target.dispatchEvent(simulatedEvent);
+
+				type = "dblclick";
+				simulatedEvent = document.createEvent("MouseEvent");
+
+				simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
+	                         	false, false, false, false, 0/*left*/, null);
+				first.target.dispatchEvent(simulatedEvent);
+			}
+			else {
+				lastTap = first.target;
+				tapValid = true;
+				tapTimeout = window.setTimeout(cancelTap, 600);
+				startHold(event);
+			}
+		}
+	};
+
+	function iPadTouchHandler(event) {
+		var type = "",
+			button = 0; /*left*/
+
+		if (event.touches.length > 1)
+			return;
+
+		switch (event.type) {
+			case "touchstart":
+				if ($(event.changedTouches[0].target).is("select")) {
+					return;
+				}
+				iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/
+				event.preventDefault();
+				return false;
+				break;
+
+			case "touchmove":
+				cancelHold();
+				type = "mousemove";
+				event.preventDefault();
+				break;
+
+			case "touchend":
+				if (cancelMouseUp) {
+					cancelMouseUp = false;
+					event.preventDefault();
+					return false;
+				}
+				cancelHold();
+				type = "mouseup";
+				break;
+
+			default:
+				return;
+		}
+
+		var touches = event.changedTouches,
+			first = touches[0],
+			simulatedEvent = document.createEvent("MouseEvent");
+
+		simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
+	                            false, false, false, false, button, null);
+
+		first.target.dispatchEvent(simulatedEvent);
+
+		if (type == "mouseup" && tapValid && first.target == lastTap) {	// This actually emulates the ipads default behaviour (which we prevented)
+			simulatedEvent = document.createEvent("MouseEvent");		// This check avoids click being emulated on a double tap
+
+			simulatedEvent.initMouseEvent("click", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
+	                            false, false, false, false, button, null);
+
+			first.target.dispatchEvent(simulatedEvent);
+		}
+	};
+	
+	var touchAvailable = ("ontouchend" in document);
+
+	$.fn.addTouch = function() {
+	    if (touchAvailable) {
+            this.each(function(i,el){
+                el.addEventListener("touchstart", iPadTouchHandler, false);
+                el.addEventListener("touchmove", iPadTouchHandler, false);
+                el.addEventListener("touchend", iPadTouchHandler, false);
+                el.addEventListener("touchcancel", iPadTouchHandler, false);
+            });
+	    }
+	};
+
+}));

index.html

@@ -7,6 +7,8 @@
 </style>
 
 <script src="ext-lib/jquery.js"></script>
+<script src="ext-lib/jquery-ui.min.js"></script>
+<script src="ext-lib/jquery.ui.touch.js"></script>
 <script src="ext-lib/showdown.min.js"></script>
 
 <script src="ext-lib/FileSaver.js"></script>
@@ -37,6 +39,15 @@ var reload = () => {
 }
 
 var update_editor = function(){
+	$('.sortable')
+		.sortable({
+			handle: ".sort-handle",
+			placeholder: "sort-placeholder",
+			forcePlaceholderSize: true,
+			axis: 'y',
+		})
+		.addTouch()
+
 	// XXX make this update on enter...
 	// XXX account for title of edited page...
 	$('.title')

wiki.js

@@ -717,6 +717,19 @@ var data = {
 			+'.item:hover .button {\n'
 			+'  display: inline-block;\n'
 			+'}\n'
+			+'\n'
+			+'.sort-handle {\n'
+			+'  opacity: 0.1;\n'
+			+'  padding-left: 5px;\n'
+			+'  padding-right: 5px;\n'
+			+'  cursor: pointer;\n'
+			+'}\n'
+			+'.item:hover .sort-handle {\n'
+			+'  opacity: 0.3;\n'
+			+'}\n'
+			+'.sort-placeholder {\n'
+			+'  display: block;\n'
+			+'}\n'
 			+'',
 	},
 	'System/settings': {
@@ -782,8 +795,10 @@ var data = {
 	'Templates/tree': {
 		//text: '<macro src="../**"> [@source(./path)]<br> </macro>\n'
 		text: ''
+			+'<div class="sortable">'
 				+'<macro src="../*">'
 					+'<div class="item">'
+						+'<span class="sort-handle">&#x2630;</span> \n'
 						+'<a href="#@source(./path)">@source(./title)</a>'
 						+'<span class="separator"/>\n'
 						+'<a class="button" href="#@source(./path)/delete">&times;</a>'
@@ -795,6 +810,7 @@ var data = {
 							+'/>'
 					+'</div>'
 				+'</macro>\n'
+			+'</div>'
 	},
 	'Templates/_raw': {
 		text: '@source(..)',
@@ -895,7 +911,6 @@ var data = {
 			+'\n',
 	},
 
-
 	// XXX experimental...
 	// XXX need sorting...
 	'Templates/todo': {
@@ -909,9 +924,11 @@ var data = {
 				+'</span>'
 			+'</div>'
 			+'<br>'
+			+'<div class="sortable">'
 				+'<macro src="../*">'
 					+'<div class="item">'
 						+'<div>'
+							+'<span class="sort-handle">&#x2630;</span> \n'
 							+'<input type="checkbox"/>'
 							+'<include '
 									+'class="raw" '
@@ -931,6 +948,7 @@ var data = {
 						+'</div>'
 					+'</div>'
 				+'</macro>'
+			+'</div>'
 			+'\n',
 	},
 	'Templates/outline': {
@@ -945,9 +963,11 @@ var data = {
 			+'</div>'
 			//+'<br>'
 			//*/
+			+'<div class="sortable">'
 				+'<macro src="../*">'
 					+'<div class="item">'
 						+'<div>'
+							+'<span class="sort-handle">&#x2630;</span> \n'
 							+'<include '
 									+'class="raw" '
 									+'contenteditable tabindex="0" '
@@ -966,6 +986,7 @@ var data = {
 						+'</div>'
 					+'</div>'
 				+'</macro>'
+			+'</div>'
 			+'\n',
 	},
 }