Opened 13 years ago
Closed 12 years ago
#20614 closed enhancement (fixed)
Making the menus work in Windows Phone 7, and work better in Android / iOS
Reported by: | georgestephanis | Owned by: | azaozz |
---|---|---|---|
Milestone: | 3.5 | Priority: | normal |
Severity: | normal | Version: | 3.4 |
Component: | Toolbar | Keywords: | has-patch mobile needs-testing |
Focuses: | Cc: |
Description (last modified by )
Currently, on Windows Phone 7/7.5, the Toolbar Dropdown menus are non-functional (as there is no ontouchstart functionality in the browser) and the admin flyout menus are also entirely non-functional. This translates roughly to ... there is no way to actually log out of WordPress! (as logout is in the user dropdown menu)
iOS has some built in :hover faking code, but we should also make the admin menu flyouts more accessible and usable on Android -- where you have to touch and hold to activate the flyout/dropdown, and then slide your finger off to not trigger the actual link.
Attachments (12)
Change History (57)
#2
@
13 years ago
- Keywords changed from has-patch tableteers, mobile to has-patch tableteers mobile
A little JS patch that will help the admin menu and the admin bar menus operate properly in mobile devices. This way, if it's hidden, the first click will show it, and prevent the link from going anywhere. Huzzah! 20614.1.diff
I've probably put some things in the wrong places, and I know nacin/koopersmith sounded like there was another optimization in the JS they'd like to see (koopersmith: we should bind two handlers when a menu is open. one to stop event propagation any time the #adminmenu is clicked, the other to close the menu any time the body is clicked), but I couldn't seem to wrap my head around it, so I'm tapping out to let someone else put the last bit of spit and polish on it.
#6
@
12 years ago
I have tested this on WP7 again and confirmed that it works as advertised.
This issue has been around since at least 3.3 and prevents users from logging out since "Log out" is hidden in a flyout menu (when touching "Howdy, <x>", it executes a page navigation before the flyout can appear).
#8
@
12 years ago
Imho the best way to do this is to use "states" on the links when on a mobile device. The JS would be similar to the patch above and use an additional class on the link to keep its "state". The first click (or touch, or tap) would open the submenu if any and the second will follow the link:
( if is_mobile ) $('#wpcontent').bind('click.adminbar-mobile', function(e){ var target = $( e.target ); if ( target.parent().parent().hasClass('ab-top-menu') ) { // target is top level toolbar menu item if ( target.hasClass('touched') ) { return true; // follow the link } else { target.addClass('touched'); target.parent().addClass('hover'); e.preventDefault(); } } else if ( target.hasClass('wp-menu-image') || target.hasClass('menu-top') ) { // target is top level admin menu item ... } });
Alternatively we can disable the links for top level menu items completely and make them work only as toggles for the submenus. This may be preferable on mobile devices.
Will make a full patch probably tomorrow.
#9
@
12 years ago
Azaozz -- any word on this? Bit of a time crunch here, as I understand it, if it's to get in.
#10
@
12 years ago
- Keywords 3.5-early added
- Milestone changed from Awaiting Review to Future Release
- Type changed from defect (bug) to enhancement
Will make a full patch probably tomorrow.
#11
@
12 years ago
The problem here is that iOS and (afaik) the newest Android browsers work really well without any JS. In order for us to support older/different mobile browsers we have to disable the default behavior in the browsers that work which is probably not the best thing for them, and replace it with JS.
The alternative is to try to detect which mobile browsers work or don't work but that's quite hard as there isn't a direct test for this functionality.
#14
@
12 years ago
Discussed in IRC today (https://irclogs.wordpress.org/chanlog.php?channel=wordpress-ui&day=2012-08-29&sort=asc#m54995). Azaozz said, "that needs refresh after the menu html changed".
#16
@
12 years ago
- Keywords punt added
This sounds like a punt at this point, with no activity for some time. But, if it is revived during the 3.5 beta period, it can be re-considered.
#17
@
12 years ago
Seems iOS6 changed something making this not-so-great there too. Should probably be considered for 3.5.
#18
@
12 years ago
Was working on this this afternoon, then went away for an hour before finishing, and when I returned, azaozz had beat me to it ;-). Figured I'd upload mine anyways (in 20614-alternate-3.patch), since I was almost done.
Disclaimers: All mine does is prevent the click on the main menu link, once the sub menu has expanded (and I only tested it on my iPad).
@
12 years ago
Having stopPropagation() when "touching" menu parents works well but is not ideal in case another script uses touch events in the menu or toolbar
#20
in reply to:
↑ 19
@
12 years ago
Replying to lessbloat:
Was working on this this afternoon, then went away for an hour before finishing, and when I returned, azaozz had beat me to it ;-).
Ugh, sry about that. Should have coordinated in #wordpress-dev.
Replying to georgestephanis:
Windows Phone doesn't have ontouchstart events...
Don't have one to test with. Click works so-so in iOS and Android but touchstart is a lot better. Perhaps we could detect Win phone and swap the events to "click"?
On the other hand, not sure how well we support Win phone at all. Can the admin be used from there?
#21
follow-up:
↓ 23
@
12 years ago
It can mostly, but you can't log out, as the logout link is hidden in a dropdown menu.
I'd worked with Max Cutler on the initial version of this patch and he confirmed it worked perfectly for him under WP7.
#22
@
12 years ago
In 20614-5.patch:
- Disable hoverIntent on touch screen devices (it doesn't work well there).
- Handle opening of submenus on the first touch and following the link on the second touch.
- Close any open submenus on touch anywhere else on the screen.
This is implemented separately for the admin menu and the toolbar. There is quite a bit of code duplication as we need the toolbar functionality on the front-end too. A compromise would be to handle both the admin menu and the toolbar from admin-bar.js. Could possibly separate this in another JS file, would be a bit unclear as we need to disable hoverIntent in the "standard" JS.
Tested on iPad/iOS6 and Kindle Fire. Need testing on more mobile devices incl. newer Android.
#23
in reply to:
↑ 21
@
12 years ago
Replying to georgestephanis:
Ok, will try to redo it with "click" to accommodate Win phone or detect it and swap the events for it.
#24
follow-up:
↓ 26
@
12 years ago
In 20614-6.patch:
- Changed the JS events to 'click'. Some (newer) versions of Android work only with click too.
- Added simple detection for Win phone 7-7.5 (IEMobile 7, 8, 9). Win phone 8/IEMobile10 that comes out in a few days supports the touch API.
#26
in reply to:
↑ 24
@
12 years ago
Replying to azaozz:
Chatting with @georgestephanis in #wordpress-dev, IEMobile 10 has a touch API but it's different, so extended the simple detection to catch it too.
#27
@
12 years ago
- Cc xoodrew@… added
- Keywords needs-refresh punt removed
Confirmed working on Android (phone + touchpad), iPad 2 (IOS6). Closed #22065 as fixed.
#28
@
12 years ago
Related-ish: #22064 - Unable to Read Help in Editor on iPad
EDIT: OK, related only in that it's a mobile device and can't do something :)
#30
@
12 years ago
- Resolution set to fixed
- Status changed from new to closed
Good to go. azaozz may open a new ticket for lingering iOS 6 issues.
#31
@
12 years ago
- Resolution fixed deleted
- Status changed from closed to reopened
[22262] breaks the menu flyouts on my laptop.
This is technically a touchscreen laptop, though I leave the touchscreen off most of the time.
Well, in Chrome, it's apparently smart enough to detect this, because
alert('ontouchstart' in window);
returns true.
Thus, line 198 in common.js is turning on the touch screen support incorrectly in my case.
Only happens in Chrome. Firefox isn't that bright.
#32
@
12 years ago
Ideal resolution, imho, would be for it to not swap out this fix instead of the hover support -- but do an enhancement in addition to it.
#33
@
12 years ago
For reference, this is what the modernizr tells me with regard to touch support:
#34
@
12 years ago
Argh. For reference, chrome is returning true for me for both of these as well:
alert(window.matchMedia("(pointer:coarse)").matches ); alert(window.matchMedia("(hover:0)").matches );
Dangit, chrome.
#36
@
12 years ago
Give me a chance to go all 'Fix-It Felix' this evening. If not, you can 'Wreck-It Ralph' tomorrow morning.
#37
@
12 years ago
- Keywords needs-testing added
Patch attached. Instead of the initial "This Or That" statement, the normal HoverIntent is always run, and it's just a conditional for the touch enhancements.
#38
follow-up:
↓ 39
@
12 years ago
Gah! Curse this new text editor I've been testing out. It swapped all the tabs for spaces in the patch!
/me commits ritual seppuku.
#39
in reply to:
↑ 38
@
12 years ago
Replying to georgestephanis:
Gah! Curse this new text editor I've been testing out. It swapped all the tabs for spaces in the patch!
Spaces to Tabs bundle in TextMate is a beautiful thing.
20614.7-tabs.diff converts your patch to tabs.
#41
@
12 years ago
20614-8.patch attaches temporarily the 'click' event on touch devices then the toolbar is "touched" and detaches it after the "click" disabling hoverIntent for this click. That way if the device has mouse and the click was with the mouse, that won't be used and instead hoverIntent will handle it as usual.
#42
follow-up:
↓ 43
@
12 years ago
Patch 8 fixes the left hand side menu hovering, but the expanded menus don't work properly.
When hovering over an item in the expanded menu (for example, when on the wp-admin/users.php page, the All Users/Add New/Your Profile links below the Users menu item), a single click does not work to take you to Your Profile, for example.
A second click works, but not if you unhover the link and then come back to it. So if you click, move the mouse, move the mouse back, and click again, then nothing happens. To access any menu item in that expanded menu, you have to click twice without leaving the hovered state on the item.
#43
in reply to:
↑ 42
@
12 years ago
Replying to Otto42:
Should be fixed in 20614-9.patch, could you re-test it. Also fixed some inconsistencies when the admin menu is folded.
Whoops! I forgot to use wp_is_mobile() at one place.