<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[20433] trunk: Add the jQuery UI Touch Punch plugin to handle dragging on mobile devices, props georgestephanis, see #20014</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg > ul, #logmsg > ol { margin-left: 0; margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/20433">20433</a></dd>
<dt>Author</dt> <dd>azaozz</dd>
<dt>Date</dt> <dd>2012-04-11 02:20:51 +0000 (Wed, 11 Apr 2012)</dd>
</dl>
<h3>Log Message</h3>
<pre>Add the jQuery UI Touch Punch plugin to handle dragging on mobile devices, props georgestephanis, see <a href="http://core.trac.wordpress.org/ticket/20014">#20014</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmineditformadvancedphp">trunk/wp-admin/edit-form-advanced.php</a></li>
<li><a href="#trunkwpadminindexphp">trunk/wp-admin/index.php</a></li>
<li><a href="#trunkwpadminlinkaddphp">trunk/wp-admin/link-add.php</a></li>
<li><a href="#trunkwpadminlinkphp">trunk/wp-admin/link.php</a></li>
<li><a href="#trunkwpadminnavmenusphp">trunk/wp-admin/nav-menus.php</a></li>
<li><a href="#trunkwpadminwidgetsphp">trunk/wp-admin/widgets.php</a></li>
<li><a href="#trunkwpincludesscriptloaderphp">trunk/wp-includes/script-loader.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkwpincludesjsjqueryjqueryuitouchpunchdevjs">trunk/wp-includes/js/jquery/jquery.ui.touch-punch.dev.js</a></li>
<li><a href="#trunkwpincludesjsjqueryjqueryuitouchpunchjs">trunk/wp-includes/js/jquery/jquery.ui.touch-punch.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmineditformadvancedphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/edit-form-advanced.php (20432 => 20433)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/edit-form-advanced.php 2012-04-11 01:58:23 UTC (rev 20432)
+++ trunk/wp-admin/edit-form-advanced.php 2012-04-11 02:20:51 UTC (rev 20433)
</span><span class="lines">@@ -12,6 +12,9 @@
</span><span class="cx">
</span><span class="cx"> wp_enqueue_script('post');
</span><span class="cx">
</span><ins>+if ( wp_is_mobile() )
+ wp_enqueue_script( 'jquery-touch-punch' );
+
</ins><span class="cx"> if ( post_type_supports($post_type, 'editor') || post_type_supports($post_type, 'thumbnail') ) {
</span><span class="cx"> add_thickbox();
</span><span class="cx"> wp_enqueue_script('media-upload');
</span></span></pre></div>
<a id="trunkwpadminindexphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/index.php (20432 => 20433)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/index.php 2012-04-11 01:58:23 UTC (rev 20432)
+++ trunk/wp-admin/index.php 2012-04-11 02:20:51 UTC (rev 20433)
</span><span class="lines">@@ -19,6 +19,9 @@
</span><span class="cx"> wp_enqueue_script( 'media-upload' );
</span><span class="cx"> add_thickbox();
</span><span class="cx">
</span><ins>+if ( wp_is_mobile() )
+ wp_enqueue_script( 'jquery-touch-punch' );
+
</ins><span class="cx"> $title = __('Dashboard');
</span><span class="cx"> $parent_file = 'index.php';
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpadminlinkaddphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/link-add.php (20432 => 20433)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/link-add.php 2012-04-11 01:58:23 UTC (rev 20432)
+++ trunk/wp-admin/link-add.php 2012-04-11 02:20:51 UTC (rev 20433)
</span><span class="lines">@@ -23,6 +23,9 @@
</span><span class="cx"> wp_enqueue_script('link');
</span><span class="cx"> wp_enqueue_script('xfn');
</span><span class="cx">
</span><ins>+if ( wp_is_mobile() )
+ wp_enqueue_script( 'jquery-touch-punch' );
+
</ins><span class="cx"> $link = get_default_link_to_edit();
</span><span class="cx"> include('./edit-link-form.php');
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpadminlinkphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/link.php (20432 => 20433)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/link.php 2012-04-11 01:58:23 UTC (rev 20432)
+++ trunk/wp-admin/link.php 2012-04-11 02:20:51 UTC (rev 20433)
</span><span class="lines">@@ -99,6 +99,9 @@
</span><span class="cx"> wp_enqueue_script('link');
</span><span class="cx"> wp_enqueue_script('xfn');
</span><span class="cx">
</span><ins>+ if ( wp_is_mobile() )
+ wp_enqueue_script( 'jquery-touch-punch' );
+
</ins><span class="cx"> $parent_file = 'link-manager.php';
</span><span class="cx"> $submenu_file = 'link-manager.php';
</span><span class="cx"> $title = __('Edit Link');
</span></span></pre></div>
<a id="trunkwpadminnavmenusphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/nav-menus.php (20432 => 20433)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/nav-menus.php 2012-04-11 01:58:23 UTC (rev 20432)
+++ trunk/wp-admin/nav-menus.php 2012-04-11 02:20:51 UTC (rev 20433)
</span><span class="lines">@@ -35,6 +35,9 @@
</span><span class="cx"> wp_enqueue_script( 'wp-lists' );
</span><span class="cx"> wp_enqueue_script( 'postbox' );
</span><span class="cx">
</span><ins>+if ( wp_is_mobile() )
+ wp_enqueue_script( 'jquery-touch-punch' );
+
</ins><span class="cx"> // Container for any messages displayed to the user
</span><span class="cx"> $messages = array();
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpadminwidgetsphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/widgets.php (20432 => 20433)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/widgets.php 2012-04-11 01:58:23 UTC (rev 20432)
+++ trunk/wp-admin/widgets.php 2012-04-11 02:20:51 UTC (rev 20433)
</span><span class="lines">@@ -25,11 +25,15 @@
</span><span class="cx"> return "$classes widgets_access ";
</span><span class="cx"> }
</span><span class="cx">
</span><del>-if ( 'on' == $widgets_access )
</del><ins>+if ( 'on' == $widgets_access ) {
</ins><span class="cx"> add_filter( 'admin_body_class', 'wp_widgets_access_body_class' );
</span><del>-else
</del><ins>+} else {
</ins><span class="cx"> wp_enqueue_script('admin-widgets');
</span><span class="cx">
</span><ins>+ if ( wp_is_mobile() )
+ wp_enqueue_script( 'jquery-touch-punch' );
+}
+
</ins><span class="cx"> do_action( 'sidebar_admin_setup' );
</span><span class="cx">
</span><span class="cx"> $title = __( 'Widgets' );
</span></span></pre></div>
<a id="trunkwpincludesjsjqueryjqueryuitouchpunchdevjs"></a>
<div class="addfile"><h4>Added: trunk/wp-includes/js/jquery/jquery.ui.touch-punch.dev.js (0 => 20433)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/jquery/jquery.ui.touch-punch.dev.js (rev 0)
+++ trunk/wp-includes/js/jquery/jquery.ui.touch-punch.dev.js 2012-04-11 02:20:51 UTC (rev 20433)
</span><span class="lines">@@ -0,0 +1,160 @@
</span><ins>+/*!
+ * 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);
</ins><span class="cx">Property changes on: trunk/wp-includes/js/jquery/jquery.ui.touch-punch.dev.js
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkwpincludesjsjqueryjqueryuitouchpunchjs"></a>
<div class="addfile"><h4>Added: trunk/wp-includes/js/jquery/jquery.ui.touch-punch.js (0 => 20433)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/jquery/jquery.ui.touch-punch.js (rev 0)
+++ trunk/wp-includes/js/jquery/jquery.ui.touch-punch.js 2012-04-11 02:20:51 UTC (rev 20433)
</span><span class="lines">@@ -0,0 +1,11 @@
</span><ins>+/*
+ * 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,"_tou
chStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);
</ins><span class="cx">Property changes on: trunk/wp-includes/js/jquery/jquery.ui.touch-punch.js
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkwpincludesscriptloaderphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/script-loader.php (20432 => 20433)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/script-loader.php 2012-04-11 01:58:23 UTC (rev 20432)
+++ trunk/wp-includes/script-loader.php 2012-04-11 02:20:51 UTC (rev 20433)
</span><span class="lines">@@ -157,6 +157,7 @@
</span><span class="cx"> // deprecated, not used in core, most functionality is included in jQuery 1.3
</span><span class="cx"> $scripts->add( 'jquery-form', "/wp-includes/js/jquery/jquery.form$suffix.js", array('jquery'), '2.73', 1 );
</span><span class="cx">
</span><ins>+ // jQuery plugins
</ins><span class="cx"> $scripts->add( 'jquery-color', "/wp-includes/js/jquery/jquery.color$suffix.js", array('jquery'), '2.0-4561m', 1 );
</span><span class="cx"> $scripts->add( 'suggest', "/wp-includes/js/jquery/suggest$suffix.js", array('jquery'), '1.1-20110113', 1 );
</span><span class="cx"> $scripts->add( 'schedule', '/wp-includes/js/jquery/jquery.schedule.js', array('jquery'), '20m', 1 );
</span><span class="lines">@@ -165,6 +166,7 @@
</span><span class="cx"> $scripts->add( 'jquery-hotkeys', "/wp-includes/js/jquery/jquery.hotkeys$suffix.js", array('jquery'), '0.0.2m', 1 );
</span><span class="cx"> $scripts->add( 'jquery-table-hotkeys', "/wp-includes/js/jquery/jquery.table-hotkeys$suffix.js", array('jquery', 'jquery-hotkeys'), false, 1 );
</span><span class="cx"> $scripts->add( 'jquery-postmessage', "/wp-includes/js/jquery/jquery.postmessage$suffix.js", array('jquery'), '0.5', 1 );
</span><ins>+ $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 );
</ins><span class="cx">
</span><span class="cx"> $scripts->add( 'thickbox', "/wp-includes/js/thickbox/thickbox.js", array('jquery'), '3.1-20111117', 1 );
</span><span class="cx"> $scripts->localize( 'thickbox', 'thickboxL10n', array(
</span></span></pre>
</div>
</div>
</body>
</html>