Changeset 26402

Timestamp:

11/26/2013 08:56:11 AM (13 years ago)

Author:

azaozz

Message:

Clean up the sticky menu and responsive tweaks JS:

• More descriptive names.
• Share cached jQuery elements.
• Fix re-enabling of touch events on the admin menu.
• Fix disabling/enabling of UI Sortable.

Props tollmanz, props sanchothefat, see #26086, fixes #26088.

Location:

trunk/src

Files:

• wp-admin/css/color-schemes/_admin.scss (modified) (1 diff)
• wp-admin/css/wp-admin.css (modified) (6 diffs)
• wp-admin/js/common.js (modified) (4 diffs)
• wp-includes/admin-bar.php (modified) (1 diff)
• wp-includes/css/admin-bar.css (modified) (1 diff)

trunk/src/wp-admin/css/color-schemes/_admin.scss

@@ -385 +385 @@
 /* Responsive Component */
 
-div#moby6-toggle a:before {
-        color: $menu-icon;
-}
-
-.moby6-open div#moby6-toggle a {
+div#wp-responsive-toggle a:before {
+        color: $menu-icon;
+}
+
+.wp-responsive-open div#wp-responsive-toggle a {
         // ToDo: make inset border
         border-color: transparent;

trunk/src/wp-admin/css/wp-admin.css

@@ -10601 +10601 @@
 }
 
-li#wp-admin-bar-toggle-button {
+li#wp-admin-bar-menu-toggle {
         display: none;
 }
@@ -11099 +11099 @@
 
         /*  Sidebar Toggle */
-        #moby6-toggle {
+        #wp-responsive-toggle {
                 position: fixed;
                 top: 5px;
@@ -11114 +11114 @@
         }
 
-        .moby6-open #wpadminbar #wp-admin-bar-toggle-button a {
+        .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
                 background: #000;
         }
 
-        .moby6-open #wpbody {
+        .wp-responsive-open #wpbody {
                 right: -190px;
         }
 
-        .auto-fold .moby6-open #adminmenuback,
-        .auto-fold .moby6-open #adminmenuwrap {
+        .auto-fold .wp-responsive-open #adminmenuback,
+        .auto-fold .wp-responsive-open #adminmenuwrap {
                 left: 0;
         }
@@ -12139 +12139 @@
 
 @media screen and ( max-width: 782px ) {
-        #wpadminbar #wp-admin-bar-toggle-button a {
+        #wpadminbar #wp-admin-bar-menu-toggle a {
                 display: block;
                 padding: 0;
@@ -12151 +12151 @@
         }
 
-        li#wp-admin-bar-toggle-button {
+        li#wp-admin-bar-menu-toggle {
                 display: block;
         }
 
-        #wpadminbar #wp-admin-bar-toggle-button a:hover {
+        #wpadminbar #wp-admin-bar-menu-toggle a:hover {
                 border: 1px solid transparent;
         }
 
-        #wpadminbar #wp-admin-bar-toggle-button .ab-icon:before {
+        #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
                 content: '\f228';
                 display: inline-block;
@@ -12194 +12194 @@
         }
         
-        #moby6-overlay {
+        #wp-responsive-overlay {
                 position: fixed;
                 top: 0;

trunk/src/wp-admin/js/common.js

@@ -1 +1 @@
 /* global setUserSetting, ajaxurl, commonL10n, alert, confirm, toggleWithKeyboard, pagenow */
-var showNotice, adminMenu, columns, validateForm, screenMeta, stickyMenu;
-(function($){
+var showNotice, adminMenu, columns, validateForm, screenMeta;
+( function( $, window, undefined ) {
 // Removed in 3.3.
 // (perhaps) needed for back-compat
@@ -218 +218 @@
                 // close any open submenus when touch/click is not on the menu
                 $(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) {
-                        if ( !$(e.target).closest('#adminmenu').length )
+                        if ( menu.data('wp-responsive') ) {
+                                return;
+                        }
+
+                        if ( ! $(e.target).closest('#adminmenu').length ) {
                                 menu.find('li.wp-has-submenu.opensub').removeClass('opensub');
+                        }
                 });
 
                 menu.find('a.wp-has-submenu').on( mobileEvent+'.wp-mobile-hover', function(e) {
                         var el = $(this), parent = el.parent();
+
+                        if ( menu.data('wp-responsive') ) {
+                                return;
+                        }
 
                         // Show the sub instead of following the link if:
@@ -448 +457 @@
 });
 
-stickyMenu = {
-        active: false,
-
-        init: function () {
-                this.$window = $( window );
-                this.$body = $( document.body );
-                this.$adminMenuWrap = $( '#adminmenuwrap' );
-                this.$collapseMenu = $( '#collapse-menu' );
-                this.bodyMinWidth = parseInt( this.$body.css( 'min-width' ), 10 );
-                this.enable();
-        },
-
-        enable: function () {
-                if ( ! this.active ) {
-                        this.$window.on( 'resize.stickyMenu scroll.stickyMenu', this.debounce(
-                                $.proxy( this.update, this ), 200
-                        ) );
-                        this.$collapseMenu.on( 'click.stickyMenu', $.proxy( this.update, this ) );
-                        this.update();
-                        this.active = true;
-                }
-        },
-
-        disable: function () {
-                if ( this.active ) {
-                        this.$window.off( 'resize.stickyMenu scroll.stickyMenu' );
-                        this.$collapseMenu.off( 'click.stickyMenu' );
-                        this.$body.removeClass( 'sticky-menu' );
-                        this.active = false;
-                }
-        },
-
-        update: function () {
-                // Make the admin menu sticky if both of the following:
-                // 1. The viewport is taller than the admin menu
-                // 2. The viewport is wider than the min-width of the <body>
-                if ( this.$window.height() > this.$adminMenuWrap.height() + 32 && this.$window.width() > this.bodyMinWidth) {
-                        if ( ! this.$body.hasClass( 'sticky-menu' ) ) {
-                                this.$body.addClass( 'sticky-menu' );
-                        }
-                } else {
-                        if ( this.$body.hasClass( 'sticky-menu' ) ) {
-                                this.$body.removeClass( 'sticky-menu' );
-                        }
-                }
-        },
-
-        // Borrowed from Underscore.js
-        debounce: function( func, wait, immediate ) {
-                var timeout, args, context, timestamp, result;
-                return function() {
-                        var later, callNow;
-                        context = this;
-                        args = arguments;
-                        timestamp = new Date().getTime();
-                        later = function() {
-                                var last = new Date().getTime() - timestamp;
-                                if ( last < wait ) {
-                                        timeout = setTimeout( later, wait - last );
-                                } else {
-                                        timeout = null;
-                                        if ( ! immediate ) {
-                                                result = func.apply( context, args );
-                                                context = args = null;
-                                        }
+// Fire a custom jQuery event at the end of window resize
+( function() {
+        var timeout;
+
+        function triggerEvent() {
+                $(document).trigger( 'wp-window-resized' );
+        }
+
+        function fireOnce() {
+                window.clearTimeout( timeout );
+                timeout = window.setTimeout( triggerEvent, 200 );
+        }
+
+        $(window).on( 'resize.wp-fire-once', fireOnce );
+}());
+
+$(document).ready( function() {
+        var $document = $( document ),
+                $window = $( window ),
+                $body = $( document.body ),
+                $adminMenuWrap = $( '#adminmenuwrap' ),
+                $collapseMenu = $( '#collapse-menu' ),
+                $wpwrap = $( '#wpwrap' ),
+                $adminmenu = $( '#adminmenu' ),
+                $overlay = $( '#wp-responsive-overlay' ),
+                $toolbar = $( '#wp-toolbar' ),
+                $toolbarPopups = $toolbar.find( 'a[aria-haspopup="true"]' ),
+                $sortables = $('.meta-box-sortables'),
+                stickyMenuActive = false,
+                wpResponsiveActive = false;
+
+        window.stickyMenu = {
+                enable: function() {
+                        if ( ! stickyMenuActive ) {
+                                $document.on( 'wp-window-resized.sticky-menu', $.proxy( this.update, this ) );
+                                $collapseMenu.on( 'click.sticky-menu', $.proxy( this.update, this ) );
+                                this.update();
+                                stickyMenuActive = true;
+                        }
+                },
+
+                disable: function() {
+                        if ( stickyMenuActive ) {
+                                $window.off( 'resize.sticky-menu' );
+                                $collapseMenu.off( 'click.sticky-menu' );
+                                $body.removeClass( 'sticky-menu' );
+                                stickyMenuActive = false;
+                        }
+                },
+
+                update: function() {
+                        // Make the admin menu sticky if the viewport is taller than it
+                        if ( $window.height() > $adminMenuWrap.height() + 32 ) {
+                                if ( ! $body.hasClass( 'sticky-menu' ) ) {
+                                        $body.addClass( 'sticky-menu' );
                                 }
-                        };
-                        callNow = immediate && !timeout;
-                        if ( ! timeout ) {
-                                timeout = setTimeout( later, wait );
-                        }
-                        if ( callNow ) {
-                                result = func.apply( context, args );
-                                context = args = null;
-                        }
-
-                        return result;
-                };
-        }
-};
-
-stickyMenu.init();
-
-var moby6 = {
-
-        init: function() {
-                // cached selectors
-                this.$html = $( document.documentElement );
-                this.$body = $( document.body );
-                this.$wpwrap = $( '#wpwrap' );
-                this.$wpbody = $( '#wpbody' );
-                this.$adminmenu = $( '#adminmenu' );
-                this.$overlay = $( '#moby6-overlay' );
-                this.$toolbar = $( '#wp-toolbar' );
-                this.$toolbarPopups = this.$toolbar.find( 'a[aria-haspopup="true"]' );
-
-                // Modify functionality based on custom activate/deactivate event
-                this.$html
-                        .on( 'activate.moby6', function() { moby6.activate(); } )
-                        .on( 'deactivate.moby6', function() { moby6.deactivate(); } );
-
-                // Toggle sidebar when toggle is clicked
-                $( '#wp-admin-bar-toggle-button' ).on( 'click', function(evt) {
-                        evt.preventDefault();
-                        moby6.$wpwrap.toggleClass( 'moby6-open' );
-                } );
-
-                // Trigger custom events based on active media query.
-                this.matchMedia();
-                $( window ).on( 'resize', $.proxy( this.matchMedia, this ) );
-        },
-
-        activate: function() {
-
-                window.stickymenu && window.stickymenu.disable();
-
-                if ( ! moby6.$body.hasClass( 'auto-fold' ) )
-                        moby6.$body.addClass( 'auto-fold' );
-
-                this.modifySidebarEvents();
-                this.disableDraggables();
-                this.movePostSearch();
-
-        },
-
-        deactivate: function() {
-
-                window.stickymenu && window.stickymenu.enable();
-
-                this.enableDraggables();
-                this.removeHamburgerButton();
-                this.restorePostSearch();
-
-        },
-
-        matchMedia: function() {
-                clearTimeout( this.resizeTimeout );
-                this.resizeTimeout = setTimeout( function() {
-
-                        if ( ! window.matchMedia )
-                                return;
-
-                        if ( window.matchMedia( '(max-width: 782px)' ).matches ) {
-                                if ( moby6.$html.hasClass( 'touch' ) )
+                        } else {
+                                if ( $body.hasClass( 'sticky-menu' ) ) {
+                                        $body.removeClass( 'sticky-menu' );
+                                }
+                        }
+                }
+        };
+
+        window.wpResponsive = {
+                init: function() {
+                        var self = this,
+                                scrollStart = 0;
+
+                        // Modify functionality based on custom activate/deactivate event
+                        $document.on( 'wp-responsive-activate.wp-responsive', function() {
+                                self.activate();
+                        }).on( 'wp-responsive-deactivate.wp-responsive', function() {
+                                self.deactivate();
+                        });
+
+                        // Toggle sidebar when toggle is clicked
+                        $( '#wp-admin-bar-menu-toggle' ).on( 'click.wp-responsive', function( event ) {
+                                event.preventDefault();
+                                $wpwrap.toggleClass( 'wp-responsive-open' );
+                        } );
+
+                        // Add menu events
+                        $adminmenu.on( 'touchstart.wp-responsive', 'li.wp-has-submenu > a', function() {
+                                scrollStart = $window.scrollTop();
+                        }).on( 'touchend.wp-responsive', 'li.wp-has-submenu > a', function( event ) {
+                                if ( ! $adminmenu.data('wp-responsive') || $window.scrollTop() !== scrollStart ) {
                                         return;
-                                moby6.$html.addClass( 'touch' ).trigger( 'activate.moby6' );
+                                }
+
+                                $( this ).find( 'li.wp-has-submenu' ).removeClass( 'selected' );
+                                $( this ).parent( 'li' ).addClass( 'selected' );
+                                event.preventDefault();
+                        });
+
+                        self.trigger();
+                        $document.on( 'wp-window-resized.wp-responsive', $.proxy( this.trigger, this ) );
+                },
+
+                activate: function() {
+                        window.stickyMenu.disable();
+
+                        if ( ! $body.hasClass( 'auto-fold' ) ) {
+                                $body.addClass( 'auto-fold' );
+                        }
+
+                        $adminmenu.data( 'wp-responsive', 1 );
+                        this.disableSortables();
+                        this.movePostSearch();
+                },
+
+                deactivate: function() {
+                        window.stickyMenu.enable();
+                        $adminmenu.removeData('wp-responsive');
+                        this.enableSortables();
+                        this.restorePostSearch();
+                },
+
+                trigger: function() {
+                        var width = navigator.userAgent.indexOf('AppleWebKit/') > -1 ? $window.width() : window.innerWidth;
+
+                        if ( width <= 782 ) {
+                                if ( ! wpResponsiveActive ) {
+                                        $document.trigger( 'wp-responsive-activate' );
+                                        wpResponsiveActive = true;
+                                }
                         } else {
-                                if ( ! moby6.$html.hasClass( 'touch' ) )
-                                        return;
-                                moby6.$html.removeClass( 'touch' ).trigger( 'deactivate.moby6' );
-                        }
-
-                        if ( window.matchMedia( '(max-width: 480px)' ).matches ) {
-                                moby6.enableOverlay();
+                                if ( wpResponsiveActive ) {
+                                        $document.trigger( 'wp-responsive-deactivate' );
+                                        wpResponsiveActive = false;
+                                }
+                        }
+
+                        if ( width <= 480 ) {
+                                this.enableOverlay();
                         } else {
-                                moby6.disableOverlay();
-                        }
-
-                }, 150 );
-        },
-
-        enableOverlay: function() {
-                if ( this.$overlay.length === 0 ) {
-                        this.$overlay = $( '<div id="moby6-overlay"></div>' )
-                                .insertAfter( '#wpcontent' )
-                                .hide()
-                                .on( 'click.moby6', function() {
-                                        moby6.$toolbar.find( '.menupop.hover' ).removeClass( 'hover' );
-                                        $( this ).hide();
-                                });
-                }
-                this.$toolbarPopups.on( 'click.moby6', function() {
-                        moby6.$overlay.show();
-                });
-        },
-
-        disableOverlay: function() {
-                this.$toolbarPopups.off( 'click.moby6' );
-                this.$overlay.hide();
-        },
-
-        modifySidebarEvents: function() {
-                this.$body.off( '.wp-mobile-hover' );
-                this.$adminmenu.find( 'a.wp-has-submenu' ).off( '.wp-mobile-hover' );
-
-                var scrollStart = 0;
-                this.$adminmenu.on( 'touchstart.moby6', 'li.wp-has-submenu > a', function() {
-                        scrollStart = $( window ).scrollTop();
-                });
-
-                this.$adminmenu.on( 'touchend.moby6', 'li.wp-has-submenu > a', function( e ) {
-                        e.preventDefault();
-
-                        if ( $( window ).scrollTop() !== scrollStart )
-                                return false;
-
-                        $( this ).find( 'li.wp-has-submenu' ).removeClass( 'selected' );
-                        $( this ).parent( 'li' ).addClass( 'selected' );
-                });
-        },
-
-        disableDraggables: function() {
-                this.$wpbody
-                        .find( '.hndle' )
-                        .removeClass( 'hndle' )
-                        .addClass( 'hndle-disabled' );
-        },
-
-        enableDraggables: function() {
-                this.$wpbody
-                        .find( '.hndle-disabled' )
-                        .removeClass( 'hndle-disabled' )
-                        .addClass( 'hndle' );
-        },
-
-        removeHamburgerButton: function() {
-                if ( this.hamburgerButtonView !== undefined )
-                        this.hamburgerButtonView.destroy();
-        },
-
-        movePostSearch: function() {
-                this.searchBox = this.$wpbody.find( 'p.search-box' );
-                if ( this.searchBox.length ) {
-                        this.searchBox.hide();
-                        if ( this.searchBoxClone === undefined ) {
-                                this.searchBoxClone = this.searchBox.first().clone().insertAfter( 'div.tablenav.bottom' );
-                        }
-                        this.searchBoxClone.show();
-                }
-        },
-
-        restorePostSearch: function() {
-                if ( this.searchBox !== undefined ) {
-                        this.searchBox.show();
-                        if ( this.searchBoxClone !== undefined )
-                                this.searchBoxClone.hide();
-                }
-        }
-};
-
-// Fire moby6.init when document is ready
-$( document ).ready( $.proxy( moby6.init, moby6 ) );
+                                this.disableOverlay();
+                        }
+                },
+
+                enableOverlay: function() {
+                        if ( $overlay.length === 0 ) {
+                                $overlay = $( '<div id="wp-responsive-overlay"></div>' )
+                                        .insertAfter( '#wpcontent' )
+                                        .hide()
+                                        .on( 'click.wp-responsive', function() {
+                                                $toolbar.find( '.menupop.hover' ).removeClass( 'hover' );
+                                                $( this ).hide();
+                                        });
+                        }
+
+                        $toolbarPopups.on( 'click.wp-responsive', function() {
+                                $overlay.show();
+                        });
+                },
+
+                disableOverlay: function() {
+                        $toolbarPopups.off( 'click.wp-responsive' );
+                        $overlay.hide();
+                },
+
+                disableSortables: function() {
+                        if ( $sortables.length ) {
+                                try {
+                                        $sortables.sortable('disable');
+                                } catch(e) {}
+                        }
+                },
+
+                enableSortables: function() {
+                        if ( $sortables.length ) {
+                                try {
+                                        $sortables.sortable('enable');
+                                } catch(e) {}
+                        }
+                },
+
+                movePostSearch: function() {
+                        this.searchBox = $( 'p.search-box' );
+
+                        if ( this.searchBox.length ) {
+                                this.searchBox.hide();
+
+                                if ( this.searchBoxClone === undefined ) {
+                                        this.searchBoxClone = this.searchBox.first().clone().insertAfter( 'div.tablenav.bottom' );
+                                }
+
+                                this.searchBoxClone.show();
+                        }
+                },
+
+                restorePostSearch: function() {
+                        if ( this.searchBox !== undefined ) {
+                                this.searchBox.show();
+
+                                if ( this.searchBoxClone !== undefined ) {
+                                        this.searchBoxClone.hide();
+                                }
+                        }
+                }
+        };
+
+        window.stickyMenu.enable();
+        window.wpResponsive.init();
+});
 
 // make Windows 8 devices playing along nicely
@@ -713 +685 @@
 });
 
-})(jQuery);
+}( jQuery, window ));

trunk/src/wp-includes/admin-bar.php

@@ -166 +166 @@
         if ( is_admin() ) {
                 $wp_admin_bar->add_menu( array(
-                        'id'    => 'toggle-button',
+                        'id'    => 'menu-toggle',
                         'title' => '<span class="ab-icon"></span>',
                         'href'  => '#',

trunk/src/wp-includes/css/admin-bar.css

@@ -946 +946 @@
         }
         
-        #moby6-overlay {
+        #wp-responsive-overlay {
                 position: fixed;
                 top: 0;