Make WordPress Core

Changeset 22636


Ignore:
Timestamp:
11/17/2012 08:14:17 PM (11 years ago)
Author:
azaozz
Message:

Make the admin menu and toolbar work well on mobile devices (take 2), props georgestephanis, fixes #20614, fixes #22382

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/js/common.js

    r22459 r22636  
    161161
    162162$(document).ready( function() {
    163     var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'),
     163    var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'), mobileEvent,
    164164        pageInput = $('input.current-page'), currentPage = pageInput.val();
    165165
     
    197197
    198198    if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // touch screen device
     199        // iOS Safari works with touchstart, the rest work with click
     200        mobileEvent = /Mobile\/.+Safari/.test(navigator.userAgent) ? 'touchstart' : 'click';
     201
    199202        // close any open submenus when touch/click is not on the menu
    200         $(document.body).on('click.wp-mobile-hover', function(e) {
     203        $(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) {
    201204            if ( !$(e.target).closest('#adminmenu').length )
    202205                menu.find('li.wp-has-submenu.opensub').removeClass('opensub');
    203206        });
    204207
    205         menu.find('li.wp-has-submenu').on('click.wp-mobile-hover', function(e) {
    206             var el = $(this);
    207 
    208             if ( !el.hasClass('opensub') ) {
     208        menu.find('a.wp-has-submenu').on( mobileEvent+'.wp-mobile-hover', function(e) {
     209            var el = $(this), parent = el.parent();
     210
     211            // Show the sub instead of following the link if:
     212            //  - the submenu is not open
     213            //  - the submenu is not shown inline or the menu is not folded
     214            if ( !parent.hasClass('opensub') && ( !parent.hasClass('wp-menu-open') || parent.width() < 40 ) ) {
    209215                e.preventDefault();
    210                 menu.find('li.wp-has-submenu.opensub').removeClass('opensub');
    211                 el.addClass('opensub');
     216                menu.find('li.opensub').removeClass('opensub');
     217                parent.addClass('opensub');
    212218            }
    213219        });
    214     } else {
    215         menu.find('li.wp-has-submenu').hoverIntent({
    216             over: function(e){
    217                 var b, h, o, f, m = $(this).find('.wp-submenu'), menutop, wintop, maxtop, top = parseInt( m.css('top'), 10 );
    218 
    219                 if ( isNaN(top) || top > -5 ) // meaning the submenu is visible
    220                     return;
    221 
    222                 menutop = $(this).offset().top;
    223                 wintop = $(window).scrollTop();
    224                 maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar
    225 
    226                 b = menutop + m.height() + 1; // Bottom offset of the menu
    227                 h = $('#wpwrap').height(); // Height of the entire page
    228                 o = 60 + b - h;
    229                 f = $(window).height() + wintop - 15; // The fold
    230 
    231                 if ( f < (b - o) )
    232                     o = b - f;
    233 
    234                 if ( o > maxtop )
    235                     o = maxtop;
    236 
    237                 if ( o > 1 )
    238                     m.css('margin-top', '-'+o+'px');
    239                 else
    240                     m.css('margin-top', '');
    241 
    242                 menu.find('li.menu-top').removeClass('opensub');
    243                 $(this).addClass('opensub');
    244             },
    245             out: function(){
    246                 $(this).removeClass('opensub').find('.wp-submenu').css('margin-top', '');
    247             },
    248             timeout: 200,
    249             sensitivity: 7,
    250             interval: 90
    251         });
    252 
    253         menu.on('focus.adminmenu', '.wp-submenu a', function(e){
    254             $(e.target).closest('li.menu-top').addClass('opensub');
    255         }).on('blur.adminmenu', '.wp-submenu a', function(e){
    256             $(e.target).closest('li.menu-top').removeClass('opensub');
    257         });
    258220    }
     221
     222    menu.find('li.wp-has-submenu').hoverIntent({
     223        over: function(e){
     224            var b, h, o, f, m = $(this).find('.wp-submenu'), menutop, wintop, maxtop, top = parseInt( m.css('top'), 10 );
     225
     226            if ( isNaN(top) || top > -5 ) // meaning the submenu is visible
     227                return;
     228
     229            menutop = $(this).offset().top;
     230            wintop = $(window).scrollTop();
     231            maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar
     232
     233            b = menutop + m.height() + 1; // Bottom offset of the menu
     234            h = $('#wpwrap').height(); // Height of the entire page
     235            o = 60 + b - h;
     236            f = $(window).height() + wintop - 15; // The fold
     237
     238            if ( f < (b - o) )
     239                o = b - f;
     240
     241            if ( o > maxtop )
     242                o = maxtop;
     243
     244            if ( o > 1 )
     245                m.css('margin-top', '-'+o+'px');
     246            else
     247                m.css('margin-top', '');
     248
     249            menu.find('li.menu-top').removeClass('opensub');
     250            $(this).addClass('opensub');
     251        },
     252        out: function(){
     253            $(this).removeClass('opensub').find('.wp-submenu').css('margin-top', '');
     254        },
     255        timeout: 200,
     256        sensitivity: 7,
     257        interval: 90
     258    });
     259
     260    menu.on('focus.adminmenu', '.wp-submenu a', function(e){
     261        $(e.target).closest('li.menu-top').addClass('opensub');
     262    }).on('blur.adminmenu', '.wp-submenu a', function(e){
     263        $(e.target).closest('li.menu-top').removeClass('opensub');
     264    });
    259265
    260266    // Move .updated and .error alert boxes. Don't move boxes designed to be inline.
  • trunk/wp-includes/js/admin-bar.js

    r22634 r22636  
    55
    66    jQuery(document).ready(function($){
    7         var adminbar = $('#wpadminbar'), refresh;
     7        var adminbar = $('#wpadminbar'), refresh, touchOpen, touchClose, disableHoverIntent = false;
    88
    99        refresh = function(i, el){ // force the browser to refresh the tabbing index
     
    1313        };
    1414
    15         adminbar.removeClass('nojq').removeClass('nojs');
    16 
    17         if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // touch screen device
    18             // close any open drop-downs when the click/touch is not on the toolbar
    19             $(document.body).on('click.wp-mobile-hover', function(e) {
    20                 if ( !$(e.target).closest('#wpadminbar').length )
    21                     adminbar.find('li.menupop.hover').removeClass('hover');
    22             });
    23 
     15        touchOpen = function(unbind) {
    2416            adminbar.find('li.menupop').on('click.wp-mobile-hover', function(e) {
    2517                var el = $(this);
     
    3022                    el.addClass('hover');
    3123                }
     24
     25                if ( unbind ) {
     26                    $('li.menupop').off('click.wp-mobile-hover');
     27                    disableHoverIntent = false;
     28                }
    3229            });
    33         } else {
    34             adminbar.find('li.menupop').hoverIntent({
    35                 over: function(e){
    36                     $(this).addClass('hover');
    37                 },
    38                 out: function(e){
    39                     $(this).removeClass('hover');
    40                 },
    41                 timeout: 180,
    42                 sensitivity: 7,
    43                 interval: 100
     30        };
     31
     32        touchClose = function() {
     33            var mobileEvent = /Mobile\/.+Safari/.test(navigator.userAgent) ? 'touchstart' : 'click';
     34            // close any open drop-downs when the click/touch is not on the toolbar
     35            $(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) {
     36                if ( !$(e.target).closest('#wpadminbar').length )
     37                    adminbar.find('li.menupop.hover').removeClass('hover');
    4438            });
     39        };
     40
     41        adminbar.removeClass('nojq').removeClass('nojs');
     42
     43        if ( 'ontouchstart' in window ) {
     44            adminbar.on('touchstart', function(){
     45                touchOpen(true);
     46                disableHoverIntent = true;
     47            });
     48            touchClose();
     49        } else if ( /IEMobile\/[1-9]/.test(navigator.userAgent) ) {
     50            touchOpen();
     51            touchClose();
    4552        }
     53
     54        adminbar.find('li.menupop').hoverIntent({
     55            over: function(e){
     56                if ( disableHoverIntent )
     57                    return;
     58
     59                $(this).addClass('hover');
     60            },
     61            out: function(e){
     62                if ( disableHoverIntent )
     63                    return;
     64
     65                $(this).removeClass('hover');
     66            },
     67            timeout: 180,
     68            sensitivity: 7,
     69            interval: 100
     70        });
    4671
    4772        $('#wp-admin-bar-get-shortlink').click(function(e){
Note: See TracChangeset for help on using the changeset viewer.