Add the jQuery UI Touch Punch plugin to handle dragging on mobile devices, props georgestephanis, see #20014

git-svn-id: https://develop.svn.wordpress.org/trunk@20433 602fd350-edb4-49c9-b593-d223f7449a82

9 files changed, 194 insertions, 2 deletions

diff --git a/wp-admin/edit-form-advanced.php b/wp-admin/edit-form-advanced.php
index 23e785758b..c811336d6a 100644
--- a/wp-admin/edit-form-advanced.php
+++ b/wp-admin/edit-form-advanced.php
@@ -12,6 +12,9 @@ if ( !defined('ABSPATH') )
 
 wp_enqueue_script('post');
 
+if ( wp_is_mobile() )
+	wp_enqueue_script( 'jquery-touch-punch' );
+
 if ( post_type_supports($post_type, 'editor') || post_type_supports($post_type, 'thumbnail') ) {
 	add_thickbox();
 	wp_enqueue_script('media-upload');
diff --git a/wp-admin/index.php b/wp-admin/index.php
index 41b0e830e6..6b83f2a97b 100644
--- a/wp-admin/index.php
+++ b/wp-admin/index.php
@@ -19,6 +19,9 @@ wp_enqueue_script( 'plugin-install' );
 wp_enqueue_script( 'media-upload' );
 add_thickbox();
 
+if ( wp_is_mobile() )
+	wp_enqueue_script( 'jquery-touch-punch' );
+
 $title = __('Dashboard');
 $parent_file = 'index.php';
 
diff --git a/wp-admin/link-add.php b/wp-admin/link-add.php
index 737dc91387..2abd79952f 100644
--- a/wp-admin/link-add.php
+++ b/wp-admin/link-add.php
@@ -23,6 +23,9 @@ wp_reset_vars(array('action', 'cat_id', 'linkurl', 'name', 'image',
 wp_enqueue_script('link');
 wp_enqueue_script('xfn');
 
+if ( wp_is_mobile() )
+	wp_enqueue_script( 'jquery-touch-punch' );
+
 $link = get_default_link_to_edit();
 include('./edit-link-form.php');
 
diff --git a/wp-admin/link.php b/wp-admin/link.php
index 15ca9889f8..9e2d6a86a6 100644
--- a/wp-admin/link.php
+++ b/wp-admin/link.php
@@ -99,6 +99,9 @@ switch ($action) {
 		wp_enqueue_script('link');
 		wp_enqueue_script('xfn');
 
+		if ( wp_is_mobile() )
+			wp_enqueue_script( 'jquery-touch-punch' );
+
 		$parent_file = 'link-manager.php';
 		$submenu_file = 'link-manager.php';
 		$title = __('Edit Link');
diff --git a/wp-admin/nav-menus.php b/wp-admin/nav-menus.php
index e62333ae8d..6b4b032389 100644
--- a/wp-admin/nav-menus.php
+++ b/wp-admin/nav-menus.php
@@ -35,6 +35,9 @@ wp_enqueue_script( 'common' );
 wp_enqueue_script( 'wp-lists' );
 wp_enqueue_script( 'postbox' );
 
+if ( wp_is_mobile() )
+	wp_enqueue_script( 'jquery-touch-punch' );
+
 // Container for any messages displayed to the user
 $messages = array();
 
diff --git a/wp-admin/widgets.php b/wp-admin/widgets.php
index 6c05e53303..9df98fbe29 100644
--- a/wp-admin/widgets.php
+++ b/wp-admin/widgets.php
@@ -25,11 +25,15 @@ function wp_widgets_access_body_class($classes) {
 	return "$classes widgets_access ";
 }
 
-if ( 'on' == $widgets_access )
+if ( 'on' == $widgets_access ) {
 	add_filter( 'admin_body_class', 'wp_widgets_access_body_class' );
-else
+} else {
 	wp_enqueue_script('admin-widgets');
 
+	if ( wp_is_mobile() )
+		wp_enqueue_script( 'jquery-touch-punch' );
+}
+
 do_action( 'sidebar_admin_setup' );
 
 $title = __( 'Widgets' );
diff --git a/wp-includes/js/jquery/jquery.ui.touch-punch.dev.js b/wp-includes/js/jquery/jquery.ui.touch-punch.dev.js
new file mode 100644
index 0000000000..29be2cbc32
--- /dev/null
+++ b/wp-includes/js/jquery/jquery.ui.touch-punch.dev.js
@@ -0,0 +1,160 @@
+/*!
+ * jQuery UI Touch Punch 0.2.2
+ *
+ * Copyright 2011, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * 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,
+      touchHandled;
+
+  /**
+   * 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);
+  }
+
+  /**
+   * 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;
+    }
+
+    // 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');
+  };
+
+  /**
+   * Handle the jQuery UI widget's touchmove events
+   * @param {Object} event The document's touchmove event
+   */
+  mouseProto._touchMove = function (event) {
+
+    // 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) {
+
+    // 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'))
+      .bind('touchmove', $.proxy(self, '_touchMove'))
+      .bind('touchend', $.proxy(self, '_touchEnd'));
+
+    // Call the original $.ui.mouse init method
+    _mouseInit.call(self);
+  };
+
+})(jQuery);
diff --git a/wp-includes/js/jquery/jquery.ui.touch-punch.js b/wp-includes/js/jquery/jquery.ui.touch-punch.js
new file mode 100644
index 0000000000..bfbd04db8d
--- /dev/null
+++ b/wp-includes/js/jquery/jquery.ui.touch-punch.js
@@ -0,0 +1,11 @@
+/*
+ * jQuery UI Touch Punch 0.2.2
+ *
+ * Copyright 2011, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  jquery.ui.mouse.js
+ */
+(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);
diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php
index 6b5a615da0..f44307761f 100644
--- a/wp-includes/script-loader.php
+++ b/wp-includes/script-loader.php
@@ -157,6 +157,7 @@ function wp_default_scripts( &$scripts ) {
 	// deprecated, not used in core, most functionality is included in jQuery 1.3
 	$scripts->add( 'jquery-form', "/wp-includes/js/jquery/jquery.form$suffix.js", array('jquery'), '2.73', 1 );
 
+	// jQuery plugins
 	$scripts->add( 'jquery-color', "/wp-includes/js/jquery/jquery.color$suffix.js", array('jquery'), '2.0-4561m', 1 );
 	$scripts->add( 'suggest', "/wp-includes/js/jquery/suggest$suffix.js", array('jquery'), '1.1-20110113', 1 );
 	$scripts->add( 'schedule', '/wp-includes/js/jquery/jquery.schedule.js', array('jquery'), '20m', 1 );
@@ -165,6 +166,7 @@ function wp_default_scripts( &$scripts ) {
 	$scripts->add( 'jquery-hotkeys', "/wp-includes/js/jquery/jquery.hotkeys$suffix.js", array('jquery'), '0.0.2m', 1 );
 	$scripts->add( 'jquery-table-hotkeys', "/wp-includes/js/jquery/jquery.table-hotkeys$suffix.js", array('jquery', 'jquery-hotkeys'), false, 1 );
 	$scripts->add( 'jquery-postmessage', "/wp-includes/js/jquery/jquery.postmessage$suffix.js", array('jquery'), '0.5', 1 );
+	$scripts->add( 'jquery-touch-punch', "/wp-includes/js/jquery/jquery.ui.touch-punch$suffix.js", array('jquery-ui-widget', 'jquery-ui-mouse'), '0.2.2', 1 );
 
 	$scripts->add( 'thickbox', "/wp-includes/js/thickbox/thickbox.js", array('jquery'), '3.1-20111117', 1 );
 	$scripts->localize( 'thickbox', 'thickboxL10n', array(