Make WordPress Core

Changeset 22262


Ignore:
Timestamp:
10/19/2012 06:31:21 PM (11 years ago)
Author:
azaozz
Message:

Make the admin menu and toolbar work well on mobile devices, props georgestephanis, see #20614

Location:
trunk
Files:
2 edited

Legend:

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

    r22249 r22262  
    196196    });
    197197
    198     $('li.wp-has-submenu', menu).hoverIntent({
    199         over: function(e){
    200             var b, h, o, f, m = $(this).find('.wp-submenu'), menutop, wintop, maxtop, top = parseInt( m.css('top'), 10 );
    201 
    202             if ( isNaN(top) || top > -5 ) // meaning the submenu is visible
    203                 return;
    204 
    205             menutop = $(this).offset().top;
    206             wintop = $(window).scrollTop();
    207             maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar
    208 
    209             b = menutop + m.height() + 1; // Bottom offset of the menu
    210             h = $('#wpwrap').height(); // Height of the entire page
    211             o = 60 + b - h;
    212             f = $(window).height() + wintop - 15; // The fold
    213 
    214             if ( f < (b - o) )
    215                 o = b - f;
    216 
    217             if ( o > maxtop )
    218                 o = maxtop;
    219 
    220             if ( o > 1 )
    221                 m.css('margin-top', '-'+o+'px');
    222             else
    223                 m.css('margin-top', '');
    224 
    225             menu.find('li.menu-top').removeClass('opensub');
    226             $(this).addClass('opensub');
    227         },
    228         out: function(){
    229             $(this).removeClass('opensub').find('.wp-submenu').css('margin-top', '');
    230         },
    231         timeout: 200,
    232         sensitivity: 7,
    233         interval: 90
    234     });
    235 
    236     menu.on('focus.adminmenu', '.wp-submenu a', function(e){
    237         $(e.target).closest('li.menu-top').addClass('opensub');
    238     }).on('blur.adminmenu', '.wp-submenu a', function(e){
    239         $(e.target).closest('li.menu-top').removeClass('opensub');
    240     });
     198    if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // touch screen device
     199        // close any open submenus when touch/click is not on the menu
     200        $(document.body).on('click.wp-mobile-hover', function(e) {
     201            if ( !$(e.target).closest('#adminmenu').length )
     202                menu.find('li.wp-has-submenu.opensub').removeClass('opensub');
     203        });
     204
     205        menu.find('li.wp-has-submenu').on('click.wp-mobile-hover', function(e) {
     206            var el = $(this);
     207
     208            if ( !el.hasClass('opensub') ) {
     209                e.preventDefault();
     210                menu.find('li.wp-has-submenu.opensub').removeClass('opensub');
     211                el.addClass('opensub');
     212            }
     213        });
     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        });
     258    }
    241259
    242260    // Move .updated and .error alert boxes. Don't move boxes designed to be inline.
  • trunk/wp-includes/js/admin-bar.js

    r22249 r22262  
    55
    66    jQuery(document).ready(function($){
    7         var refresh = function(i, el){ // force the browser to refresh the tabbing index
     7        var adminbar = $('#wpadminbar'), refresh;
     8
     9        refresh = function(i, el){ // force the browser to refresh the tabbing index
    810            var node = $(el), tab = node.attr('tabindex');
    911            if ( tab )
     
    1113        };
    1214
    13         $('#wpadminbar').removeClass('nojq').removeClass('nojs').find('li.menupop').hoverIntent({
    14             over: function(e){
    15                 $(this).addClass('hover');
    16             },
    17             out: function(e){
    18                 $(this).removeClass('hover');
    19             },
    20             timeout: 180,
    21             sensitivity: 7,
    22             interval: 100
    23         });
     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
     24            adminbar.find('li.menupop').on('click.wp-mobile-hover', function(e) {
     25                var el = $(this);
     26
     27                if ( !el.hasClass('hover') ) {
     28                    e.preventDefault();
     29                    adminbar.find('li.menupop.hover').removeClass('hover');
     30                    el.addClass('hover');
     31                }
     32            });
     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
     44            });
     45        }
    2446
    2547        $('#wp-admin-bar-get-shortlink').click(function(e){
     
    85107    (function(d, w) {
    86108        var addEvent = function( obj, type, fn ) {
    87             if (obj.addEventListener)
     109            if ( obj.addEventListener )
    88110                obj.addEventListener(type, fn, false);
    89             else if (obj.attachEvent)
     111            else if ( obj.attachEvent )
    90112                obj.attachEvent('on' + type, function() { return fn.call(obj, window.event);});
    91113        },
     
    99121        getTOID = function(el) {
    100122            var i = q.length;
    101             while( i-- )
     123            while ( i-- ) {
    102124                if ( q[i] && el == q[i][1] )
    103125                    return q[i][0];
     126            }
    104127            return false;
    105128        },
     
    111134
    112135            while ( t && t != aB && t != d ) {
    113                 if( 'LI' == t.nodeName.toUpperCase() ) {
     136                if ( 'LI' == t.nodeName.toUpperCase() ) {
    114137                    ancestors[ ancestors.length ] = t;
    115138                    id = getTOID(t);
     
    152175        removeHoverClass = function(t) {
    153176            while ( t && t != aB && t != d ) {
    154                 if( 'LI' == t.nodeName.toUpperCase() ) {
     177                if ( 'LI' == t.nodeName.toUpperCase() ) {
    155178                    (function(t) {
    156179                        var to = setTimeout(function() {
Note: See TracChangeset for help on using the changeset viewer.