From 64504388680fb2cab8d5b8d93dcc3081ada49230 Mon Sep 17 00:00:00 2001
From: Max Pozdeev <maxpozdeev@gmail.com>
Date: Tue, 29 Sep 2020 14:36:14 +0300
Subject: [PATCH] * fix the sorting by drag-n-drop in mobile theme

---
 src/content/themes/default/index.php         |   3 +
 src/content/themes/default/mobile.css        |   2 +
 src/content/themes/default/style.css         |   2 +-
 src/includes/jquery/jquery.ui.touch-punch.js | 225 +++++++++++++++++++
 src/includes/mytinytodo.js                   |  22 +-
 5 files changed, 249 insertions(+), 5 deletions(-)
 create mode 100644 src/includes/jquery/jquery.ui.touch-punch.js

diff --git a/src/content/themes/default/index.php b/src/content/themes/default/index.php
index f1555e5..2dfa2ab 100644
--- a/src/content/themes/default/index.php
+++ b/src/content/themes/default/index.php
@@ -21,6 +21,9 @@
 <script type="text/javascript" src="<?php mttinfo('includes_url'); ?>jquery/jquery-ui-1.12.1.min.js"></script>
 <script type="text/javascript" src="<?php mttinfo('includes_url'); ?>mytinytodo.js?v=<?php mttinfo('version'); ?>"></script>
 <script type="text/javascript" src="<?php mttinfo('includes_url'); ?>mytinytodo_ajax_storage.js?v=<?php mttinfo('version'); ?>"></script>
+<?php if(Config::get('mobile')): ?>
+<script type="text/javascript" src="<?php mttinfo('includes_url'); ?>jquery/jquery.ui.touch-punch.js"></script>
+<?php endif; ?>
 
 <script type="text/javascript">
 $().ready(function(){
diff --git a/src/content/themes/default/mobile.css b/src/content/themes/default/mobile.css
index a3ea1f5..052bb80 100644
--- a/src/content/themes/default/mobile.css
+++ b/src/content/themes/default/mobile.css
@@ -45,6 +45,8 @@ body[dir="rtl"] .task-note-block { border-left:none; border-right:1px solid #777
 /*#tasklist li.clicked.task-has-note .task-toggle { background-position:-48px 0; } */
 #tasklist li.clicked.doubleclicked.task-has-note .task-note-block { display:none; }
 .task-toggle { display:none; }
+#tasklist .mtt-task-placeholder { line-height:1rem; padding-top:0.6rem; padding-bottom:0.6rem; }
+#tasklist .ui-sortable-helper { box-shadow:0px 0px 3px #333; }
 
 #page_taskedit { max-width:99.5%; border:none; position:static; padding:0; }
 #page_taskedit .form-table { width:100%; }
diff --git a/src/content/themes/default/style.css b/src/content/themes/default/style.css
index cb63d79..622af02 100644
--- a/src/content/themes/default/style.css
+++ b/src/content/themes/default/style.css
@@ -206,7 +206,7 @@ li.task-completed .task-title a { color:#777777; }
 #tasklist li.task-completed  { opacity:0.6; filter:alpha(opacity=60); }
 #tasklist li.task-completed:hover { opacity:1.0; filter:alpha(opacity=100); }
 #tasklist li.not-in-tagpreview  { opacity:0.1; filter: alpha(opacity=10); }
-#tasklist li.mtt-task-placeholder {
+#tasklist .mtt-task-placeholder {
  min-height:0px; padding:0px; height:18px; line-height:18px;
  background-color:#ddd; border:1px solid #aaa;
  border-radius:5px;
diff --git a/src/includes/jquery/jquery.ui.touch-punch.js b/src/includes/jquery/jquery.ui.touch-punch.js
new file mode 100644
index 0000000..9f4a8e2
--- /dev/null
+++ b/src/includes/jquery/jquery.ui.touch-punch.js
@@ -0,0 +1,225 @@
+/*!
+ * jQuery UI Touch Punch 0.2.3
+ *
+ * Copyright 2011–2014, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * 
+ * Modified by Max Pozdeev in 2020
+ * - Added delay before mousedown dispatch
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  jquery.ui.mouse.js
+ */
+(function ($) {
+
+  // Detect touch support
+  $.support.touch = 'ontouchend' in document;
+
+  // Ignore browsers without touch support
+  if (!$.support.touch) {
+    return;
+  }
+
+  var mouseProto = $.ui.mouse.prototype,
+      _mouseInit = mouseProto._mouseInit,
+      _mouseDestroy = mouseProto._mouseDestroy,
+      touchHandled;
+	  
+  var delay = 500,
+      delayTimer,
+      delayStarted = false,
+      delayFinished = false;
+
+  /**
+   * Simulate a mouse event based on a corresponding touch event
+   * @param {Object} event A touch event
+   * @param {String} simulatedType The corresponding mouse event
+   */
+  function simulateMouseEvent (event, simulatedType) {
+
+    // Ignore multi-touch events
+    if (event.originalEvent.touches.length > 1) {
+      return;
+    }
+
+    event.preventDefault();
+
+    var touch = event.originalEvent.changedTouches[0],
+        simulatedEvent = document.createEvent('MouseEvents');
+    
+    // Initialize the simulated mouse event using the touch event's coordinates
+    simulatedEvent.initMouseEvent(
+      simulatedType,    // type
+      true,             // bubbles                    
+      true,             // cancelable                 
+      window,           // view                       
+      1,                // detail                     
+      touch.screenX,    // screenX                    
+      touch.screenY,    // screenY                    
+      touch.clientX,    // clientX                    
+      touch.clientY,    // clientY                    
+      false,            // ctrlKey                    
+      false,            // altKey                     
+      false,            // shiftKey                   
+      false,            // metaKey                    
+      0,                // button                     
+      null              // relatedTarget              
+    );
+
+    // Dispatch the simulated event to the target element
+    event.target.dispatchEvent(simulatedEvent);
+  }
+  
+  function startDelayTimer (event) {
+	  
+	clearTimeout(delayTimer);
+	
+    delayTimer = setTimeout(function() {
+		
+		var self = this;
+			
+		delayFinished = true;
+		
+		// Set the flag to prevent other widgets from inheriting the touch event
+		touchHandled = true;
+
+		// Track movement to determine if interaction was a click
+		self._touchMoved = false;
+
+		// Simulate the mouseover event
+		simulateMouseEvent(event, 'mouseover');
+
+		// Simulate the mousemove event
+		simulateMouseEvent(event, 'mousemove');
+
+		// Simulate the mousedown event
+		simulateMouseEvent(event, 'mousedown');
+		
+	}, delay);
+	
+	delayStarted = true;
+	delayFinished = false;
+  }
+
+  /**
+   * Handle the jQuery UI widget's touchstart events
+   * @param {Object} event The widget element's touchstart event
+   */
+  mouseProto._touchStart = function (event) {
+
+    var self = this;
+
+    // Ignore the event if another widget is already being handled
+    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
+      return;
+    }
+	
+	if (!delayStarted) {
+		startDelayTimer.call(self, event);
+	}
+
+  };
+
+  /**
+   * Handle the jQuery UI widget's touchmove events
+   * @param {Object} event The document's touchmove event
+   */
+  mouseProto._touchMove = function (event) {
+
+	//
+	if (!delayFinished) {
+		delayStarted = false;
+		clearTimeout(delayTimer);
+		return;
+	}
+
+    // Ignore event if not handled
+    if (!touchHandled) {
+      return;
+    }
+
+    // Interaction was not a click
+    this._touchMoved = true;
+
+    // Simulate the mousemove event
+    simulateMouseEvent(event, 'mousemove');
+  };
+
+  /**
+   * Handle the jQuery UI widget's touchend events
+   * @param {Object} event The document's touchend event
+   */
+  mouseProto._touchEnd = function (event) {
+
+	//
+	if (delayStarted) {
+		clearTimeout(delayTimer);
+		delayStarted = false;
+	}
+
+    // Ignore event if not handled
+    if (!touchHandled) {
+      return;
+    }
+
+    // Simulate the mouseup event
+    simulateMouseEvent(event, 'mouseup');
+
+    // Simulate the mouseout event
+    simulateMouseEvent(event, 'mouseout');
+
+    // If the touch interaction did not move, it should trigger a click
+    if (!this._touchMoved) {
+
+      // Simulate the click event
+      simulateMouseEvent(event, 'click');
+    }
+
+    // Unset the flag to allow other widgets to inherit the touch event
+    touchHandled = false;
+  };
+
+  /**
+   * A duck punch of the $.ui.mouse _mouseInit method to support touch events.
+   * This method extends the widget with bound touch event handlers that
+   * translate touch events to mouse events and pass them to the widget's
+   * original mouse event handling methods.
+   */
+  mouseProto._mouseInit = function () {
+    
+    var self = this;
+
+    // Delegate the touch handlers to the widget's element
+    self.element.bind({
+      touchstart: $.proxy(self, '_touchStart'),
+      touchmove: $.proxy(self, '_touchMove'),
+      touchend: $.proxy(self, '_touchEnd')
+    });
+
+    // Call the original $.ui.mouse init method
+    _mouseInit.call(self);
+  };
+
+  /**
+   * Remove the touch event handlers
+   */
+  mouseProto._mouseDestroy = function () {
+    
+    var self = this;
+
+    // Delegate the touch handlers to the widget's element
+    self.element.unbind({
+      touchstart: $.proxy(self, '_touchStart'),
+      touchmove: $.proxy(self, '_touchMove'),
+      touchend: $.proxy(self, '_touchEnd')
+    });
+
+    // Call the original $.ui.mouse destroy method
+    _mouseDestroy.call(self);
+	
+	//
+	clearTimeout(delayTimer);
+  };
+
+})(jQuery);
\ No newline at end of file
diff --git a/src/includes/mytinytodo.js b/src/includes/mytinytodo.js
index 9d41c17..b3b9fa9 100644
--- a/src/includes/mytinytodo.js
+++ b/src/includes/mytinytodo.js
@@ -457,7 +457,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
 			return false;
 		});
 
-		if(this.options.tagPreview) {
+		if (this.options.tagPreview && !this.options.touchDevice) {
 			$('#tasklist').on('mouseover mouseout', '.tag', function(event){
 				var cl = 'tag-id-' + $(this).attr('tagid');
 				var sel = (event.metaKey || event.ctrlKey) ? 'li.'+cl : 'li:not(.'+cl+')';
@@ -472,10 +472,24 @@ var mytinytodo = window.mytinytodo = _mtt = {
 		}
 
 		$("#tasklist").sortable({
-				items:'> :not(.task-completed)', cancel:'span,input,a,textarea',
-		 		delay:150, start:sortStart, update:orderChanged, 
-				placeholder:'mtt-task-placeholder'
+				items: '> :not(.task-completed)',
+				cancel: 'span,input,a,textarea',
+		 		delay: 150,
+				start: sortStart,
+				update: orderChanged, 
+				placeholder: 'mtt-task-placeholder',
+				cursor: 'grabbing'
 		});
+		
+		if (options.touchDevice) {
+			$("#tasklist").disableSelection();
+			$("#tasklist").sortable('option', { 
+				axis: 'y',
+				delay: 0,
+				cancel: 'input',
+				distance: 0
+			});
+		}
 
 		$("#lists ul").sortable({delay:150, update:listOrderChanged}); 
 		this.applySingletab();