From 3b9e5468e1719620c5bf8e76c255efbb0802bc4d Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Wed, 11 Apr 2012 02:20:51 +0000 Subject: [PATCH] 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 --- wp-admin/edit-form-advanced.php | 3 + wp-admin/index.php | 3 + wp-admin/link-add.php | 3 + wp-admin/link.php | 3 + wp-admin/nav-menus.php | 3 + wp-admin/widgets.php | 8 +- .../js/jquery/jquery.ui.touch-punch.dev.js | 160 ++++++++++++++++++ .../js/jquery/jquery.ui.touch-punch.js | 11 ++ wp-includes/script-loader.php | 2 + 9 files changed, 194 insertions(+), 2 deletions(-) create mode 100644 wp-includes/js/jquery/jquery.ui.touch-punch.dev.js create mode 100644 wp-includes/js/jquery/jquery.ui.touch-punch.js 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(