WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#20014 closed enhancement (fixed)

Possibly add support for dragging of meta boxes to touch-based interfaces

Reported by: georgestephanis Owned by: ryan
Milestone: 3.4 Priority: normal
Severity: normal Version: 3.3.1
Component: UI Keywords: tableteers commit has-patch
Focuses: Cc:

Description

In the desktop version of WordPress a user has the ability to move metaboxes around to customize their interface. However, touch-and-drag support is not as intuitive on a tablet. There are possible work-arounds that need to be explored. Alternately, there is the possibility of pre-determining the number of columns and not support drag-and-drop.

Attachments (8)

20014.diff (6.6 KB) - added by georgestephanis 2 years ago.
First try, works perfectly on my iPad, document.ontouchstart doesn't even set the cookie on the Fire, and works-ish on my Android Phone, just the drag animation is a bit choppy.
20014.domain-fixed.diff (6.6 KB) - added by georgestephanis 2 years ago.
20014-vars.php.patch (935 bytes) - added by azaozz 2 years ago.
20014-touch-punch.patch (8.9 KB) - added by azaozz 2 years ago.
20014-wp_is_mobile.patch (874 bytes) - added by azaozz 2 years ago.
20014.media-new.2.patch (542 bytes) - added by SergeyBiryukov 2 years ago.
20014.patch (688 bytes) - added by azaozz 2 years ago.
20014.2.diff (1.5 KB) - added by nacin 2 years ago.

Download all attachments as: .zip

Change History (40)

comment:1 nacin2 years ago

  • Component changed from General to UI
  • Milestone changed from Awaiting Review to 3.4
  • Type changed from defect (bug) to enhancement

comment:2 thezman842 years ago

  • Cc thezman84 added

Just making a note so that it doesn't get forgotten..

Drag and drop is not absolutely necessary for the rest of the admin, but it is key in at least 2 places:

  • Appearance
    • Widgets
    • Menus

comment:3 georgestephanis2 years ago

Just for reference, http://stackoverflow.com/questions/3026915/how-can-i-make-a-jquery-ui-draggable-div-draggable-for-touchscreen seems to indicate that making it touch friendly is rather simple. No idea as to the accuracy.

comment:4 georgestephanis2 years ago

Pursuant to the discussion with Azaozz and Nacin on 2/18 in #wordpress-ui here's my quick draft on a cookie-based detection of touch interfaces ...

`

function wp_check_for_touch_ui(){

if( isset( $_COOKIEwp_ui_touch? ) && ( 'true' == $_COOKIEwp_ui_touch? ) ) return;
?>
<script>

document.ontouchstart = function(){

var d = new Date();
d.setTime( d.getTime() + ( 60 * 60 * 24 * 7 * 2 * 1000 ) );
expires = d.toGMTString();
document.cookie = "wp_ui_touch=true" +

"; expires=" + expires +
"; path=<?php echo SITECOOKIEPATH; ?>" +
"; domain=<?php echo COOKIE_DOMAIN; ?>";

}

</script>
<?php

}

add_action( 'login_footer', 'wp_check_for_touch_ui' );
optionally, as it should always catch on the login page ...
this will catch future touch events if they somehow make it past the login page without touching ...
add_action( 'admin_footer', 'wp_check_for_touch_ui' );

`

It'll normally trigger on the login page, setting the cookie to be tested against either directly or via a function or whatever y'all think is best, for including the additional JS and such to make drag/drop and other features work on touch-based interfaces.

Last edited 2 years ago by georgestephanis (previous) (diff)

georgestephanis2 years ago

First try, works perfectly on my iPad, document.ontouchstart doesn't even set the cookie on the Fire, and works-ish on my Android Phone, just the drag animation is a bit choppy.

comment:5 georgestephanis2 years ago

Please note that the JS I used as jquery.touch-mouse.js was taken directly from a stackoverflow posting, so we'll likely need to verify the source's licensing or just rewrite it before it's actually used.

comment:6 georgestephanis2 years ago

Also, a bit more information surfacing about the Kindle Fire's touch responsiveness in the stock browser ...

http://www.mobileread.com/forums/showpost.php?s=b734ee7252e204ce2b069c052c56d446&p=1944703&postcount=10

comment:7 DrewAPicture2 years ago

  • Cc xoodrew@… added

comment:8 georgestephanis2 years ago

Minor tweak, added a toggle to the domain= parameter for the cookie so that it's not used if the cookiedomain is false. This seemed to be preventing the cookie from being stored on the Kindle Fire.

azaozz2 years ago

comment:9 azaozz2 years ago

20014-vars.php.patch updates the $is_iphone global to include (nearly?) all modern mobile devices that have web browsers. Really really wanted to rename it to $is_mobile but we agreed not to add any new globals :)

comment:10 azaozz2 years ago

Looking through 20014.domain-fixed.diff, jquery.touch-mouse.js has to be loaded after ui.mouse.js as it overloads some of the methods there. Also seems we can use the updated (in 20014-vars.php.patch) $is_iphone to output it as it won't affect anything if the browser doesn't support touch. Detecting touch support from JS and storing a cookie is clever but not sure we need the extra code (although it detects it more precisely).

Last edited 2 years ago by azaozz (previous) (diff)

azaozz2 years ago

comment:11 azaozz2 years ago

20014-touch-punch.patch adds the original jQuery UI Touch Punch plugin (with proper license, etc.) including the minified JS file.

If we are going with touch support detection from JS, perhaps we should use the same code as in the plugin, i.e. if ( 'ontouchend' in document ).

The JS from https://core.trac.wordpress.org/ticket/20014#comment:4 would run (and sets a cookie) on every touch everywhere, not needed. Also there's a wpCookies group of functions that can be used instead or repeating the same code.

Last edited 2 years ago by azaozz (previous) (diff)

comment:12 nacin2 years ago

  • Keywords commit has-patch added; needs-patch removed

comment:13 azaozz2 years ago

Related: #19673

comment:14 markoheijnen2 years ago

  • Cc marko@… added

Understand that there shouldn't be more globals but its weird that $is_iphone does more then that.

Why not using $current_web_browser. And add the functionality to that. Sounds a way better solution to me.

comment:15 nacin2 years ago

I thought I commented here, but how about we introduce $is_mobile but force a reference, $is_iphone &= $is_mobile;.

I would rather us come up with a new way to handle this, but I am not a fan of any of the single variable, class, or function approaches proposed.

comment:16 follow-up: markoheijnen2 years ago

That was my first thing what came up in my mind. But azaozz saying that there was agreed to not create new globals and I can fully understand that.

But why create new globals for it when there is $current_web_browser. I rather have one global that knows everything about the browser then several globals that knows something about the browser. I think we should create some kind of API how we really want it then create globals that plugin can use and can't be removed that easily.

comment:17 azaozz2 years ago

Replying to nacin:

I thought I commented here, but how about we introduce $is_mobile but force a reference, $is_iphone &= $is_mobile;.

Sounds good.

I would rather us come up with a new way to handle this, but I am not a fan of any of the single variable, class, or function approaches proposed.

Yes, agreed. Would need something "cleverer" :) Did some thinking/testing about this for 2.3 but not that happy with it #18893.

Version 0, edited 2 years ago by azaozz (next)

comment:18 in reply to: ↑ 16 azaozz2 years ago

Replying to markoheijnen:

I rather have one global that knows everything about the browser then several globals that knows something about the browser.

Right, instead of a global there can be a static inside a function, similar to how $current_user works at the moment:

function wp_current_browser() {
  static $current_browser = null;

  if ( $current_browser !== null )
    return $current_browser;

  $current_browser = array(...);

  $current_browser = apply_filters('wp_current_browser', $current_browser);
  return $current_browser;
}

Still not sure that's the best way to do it though.

Last edited 2 years ago by azaozz (previous) (diff)

azaozz2 years ago

comment:19 azaozz2 years ago

20014-wp_is_mobile.patch is same as 20014-vars.php.patch but wraps the test in a function and doesn't touch the existing globals.

comment:20 azaozz2 years ago

In [20417]:

Introduce wp_is_mobile() and use it instead of $is_iphone global, see #20014

comment:21 SergeyBiryukov2 years ago

Seeing an error after [20417]:

Fatal error: Call to undefined function wp_is_mobile() in wp-admin/media-new.php on line 9

The original check was added in [19335].

Seems the check can be removed, since that file is not included from anywhere, and nothing is included before those lines.

comment:22 azaozz2 years ago

In [20420]:

Move the wp_is_mobile() check after the admin bootstrap in media-new.php, props SergeyBiryukov, see #20014

comment:23 azaozz2 years ago

In [20433]:

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

comment:24 ryan2 years ago

  • Resolution set to fixed
  • Status changed from new to closed

comment:25 nacin2 years ago

In [20599]:

Remove touch-punch.dev.js, as .js is appropriate for an external, unmodified script. see #20014.

comment:26 follow-up: azaozz2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Apparently Kindle Fire can have several different UA strings, and in "silk mode" it pretends to be "Macintosh; U; Intel Mac OS X 10_6_3...", not a mobile device. The tests in wp_is_mobile() need to catch that.

azaozz2 years ago

comment:27 in reply to: ↑ 26 nacin2 years ago

Replying to azaozz:

Apparently Kindle Fire can have several different UA strings, and in "silk mode" it pretends to be "Macintosh; U; Intel Mac OS X 10_6_3...", not a mobile device. The tests in wp_is_mobile() need to catch that.

Can we have the complete versions of the UA strings you have seen?

There should be unit tests here.

comment:28 georgestephanis2 years ago

Here's the UA string:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_3; en-us; Silk/1.1.0-80) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16 Silk-Accelerated=true

found on http://www.labnol.org/software/kindle-user-agent-string/20378/

comment:29 georgestephanis2 years ago

Scratch that. http://munday.ws/2011/12/kindle-fire-useragent-wtf/ -- unless they turn on Desktop mode, it should always have Mobile in there.

nacin2 years ago

comment:30 nacin2 years ago

Per IRC discussion with azaozz and georgestephanis, 20014.2.diff seems to be the route we want to take.

If Amazon releases a Silk browser for the desktop, we will need to come up with a way to avoid mixing it up with Silk mobile operating under desktop mode.

comment:31 azaozz2 years ago

20014.2.diff looks good, +1 to go in.

comment:32 ryan2 years ago

  • Owner set to ryan
  • Resolution set to fixed
  • Status changed from reopened to closed

In [20990]:

Update Fire browser detection. Handle silke mode. Props azaozz, nacin, georgestephanis. fixes #20014

Note: See TracTickets for help on using tickets.