WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
Built from https://develop.svn.wordpress.org/trunk@26402


git-svn-id: http://core.svn.wordpress.org/trunk@26302 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2013-11-26 08:57:10 +00:00
parent 73f42e01a2
commit b8984636c2
18 changed files with 244 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wp-admin/css/color-schemes/_admin.scss
View File

@ -384,11 +384,11 @@ ul#adminmenu > li.current > a.current:after {
/* Responsive Component */
div#moby6-toggle a:before {
div#wp-responsive-toggle a:before {
color: $menu-icon;
}
.moby6-open div#moby6-toggle a {
.wp-responsive-open div#wp-responsive-toggle a {
// ToDo: make inset border
border-color: transparent;
background: $menu-highlight-background;

4
wp-admin/css/color-schemes/blue/colors.css
View File

@ -252,10 +252,10 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
box-shadow: 0 0 0 1px white, 0 0 0 2px #096484; }
/* Responsive Component */
div#moby6-toggle a:before {
div#wp-responsive-toggle a:before {
color: #e5f8ff; }
.moby6-open div#moby6-toggle a {
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #096484; }

2
wp-admin/css/color-schemes/blue/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/color-schemes/light/colors.css
View File

@ -252,10 +252,10 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
box-shadow: 0 0 0 1px white, 0 0 0 2px #04a4cc; }
/* Responsive Component */
div#moby6-toggle a:before {
div#wp-responsive-toggle a:before {
color: #999999; }
.moby6-open div#moby6-toggle a {
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #888888; }

2
wp-admin/css/color-schemes/light/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/color-schemes/midnight/colors.css
View File

@ -252,10 +252,10 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
box-shadow: 0 0 0 1px white, 0 0 0 2px #e14d43; }
/* Responsive Component */
div#moby6-toggle a:before {
div#wp-responsive-toggle a:before {
color: #f1f2f3; }
.moby6-open div#moby6-toggle a {
.wp-responsive-open div#wp-responsive-toggle a {
border-color: transparent;
background: #e14d43; }

2
wp-admin/css/color-schemes/midnight/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

22
wp-admin/css/wp-admin-rtl.css
View File

@ -10600,7 +10600,7 @@ div#widgets-right .widgets-sortables {
margin: 16px 0 0;
}
li#wp-admin-bar-toggle-button {
li#wp-admin-bar-menu-toggle {
display: none;
}
@ -11098,7 +11098,7 @@ li#wp-admin-bar-toggle-button {
}
/* Sidebar Toggle */
#moby6-toggle {
#wp-responsive-toggle {
position: fixed;
top: 5px;
right: 4px;
@ -11113,16 +11113,16 @@ li#wp-admin-bar-toggle-button {
margin-top: -2px;
}
.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 {
left: -190px;
}
.auto-fold .moby6-open #adminmenuback,
.auto-fold .moby6-open #adminmenuwrap {
.auto-fold .wp-responsive-open #adminmenuback,
.auto-fold .wp-responsive-open #adminmenuwrap {
right: 0;
}
@ -12138,7 +12138,7 @@ li#wp-admin-bar-toggle-button {
}
@media screen and ( max-width: 782px ) {
#wpadminbar #wp-admin-bar-toggle-button a {
#wpadminbar #wp-admin-bar-menu-toggle a {
display: block;
padding: 0;
overflow: hidden;
@ -12150,15 +12150,15 @@ li#wp-admin-bar-toggle-button {
margin-right: -1px;
}
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;
float: right;
@ -12193,7 +12193,7 @@ li#wp-admin-bar-toggle-button {
top: 46px;
}
#moby6-overlay {
#wp-responsive-overlay {
position: fixed;
top: 0;
right: 0;

2
wp-admin/css/wp-admin-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

22
wp-admin/css/wp-admin.css
View File

@ -10600,7 +10600,7 @@ div#widgets-right .widgets-sortables {
margin: 16px 0 0;
}
li#wp-admin-bar-toggle-button {
li#wp-admin-bar-menu-toggle {
display: none;
}
@ -11098,7 +11098,7 @@ li#wp-admin-bar-toggle-button {
}
/* Sidebar Toggle */
#moby6-toggle {
#wp-responsive-toggle {
position: fixed;
top: 5px;
left: 4px;
@ -11113,16 +11113,16 @@ li#wp-admin-bar-toggle-button {
margin-top: -2px;
}
.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;
}
@ -12138,7 +12138,7 @@ li#wp-admin-bar-toggle-button {
}
@media screen and ( max-width: 782px ) {
#wpadminbar #wp-admin-bar-toggle-button a {
#wpadminbar #wp-admin-bar-menu-toggle a {
display: block;
padding: 0;
overflow: hidden;
@ -12150,15 +12150,15 @@ li#wp-admin-bar-toggle-button {
margin-left: -1px;
}
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;
float: left;
@ -12193,7 +12193,7 @@ li#wp-admin-bar-toggle-button {
top: 46px;
}
#moby6-overlay {
#wp-responsive-overlay {
position: fixed;
top: 0;
left: 0;

2
wp-admin/css/wp-admin.min.css vendored
View File

File diff suppressed because one or more lines are too long

430
wp-admin/js/common.js
View File

@ -1,6 +1,6 @@
/* 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
adminMenu = {
@ -217,13 +217,22 @@ $(document).ready( function() {
// 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:
// - the submenu is not open
// - the submenu is not shown inline or the menu is not folded
@ -447,248 +456,211 @@ $(document).ready( function() {
})();
});
stickyMenu = {
active: false,
// Fire a custom jQuery event at the end of window resize
( function() {
var timeout;
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();
},
function triggerEvent() {
$(document).trigger( 'wp-window-resized' );
}
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;
}
},
function fireOnce() {
window.clearTimeout( timeout );
timeout = window.setTimeout( triggerEvent, 200 );
}
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;
}
},
$(window).on( 'resize.wp-fire-once', fireOnce );
}());
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' );
$(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;
}
} 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;
}
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' ) )
return;
moby6.$html.addClass( 'touch' ).trigger( 'activate.moby6' );
} else {
if ( ! moby6.$html.hasClass( 'touch' ) )
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.removeClass( 'touch' ).trigger( 'deactivate.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' );
}
if ( window.matchMedia( '(max-width: 480px)' ).matches ) {
moby6.enableOverlay();
$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 {
moby6.disableOverlay();
if ( wpResponsiveActive ) {
$document.trigger( 'wp-responsive-deactivate' );
wpResponsiveActive = false;
}
}
}, 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' );
if ( width <= 480 ) {
this.enableOverlay();
} else {
this.disableOverlay();
}
this.searchBoxClone.show();
}
},
},
restorePostSearch: function() {
if ( this.searchBox !== undefined ) {
this.searchBox.show();
if ( this.searchBoxClone !== undefined )
this.searchBoxClone.hide();
}
}
};
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();
});
}
// Fire moby6.init when document is ready
$( document ).ready( $.proxy( moby6.init, moby6 ) );
$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
(function(){
@ -712,4 +684,4 @@ $(document).bind( 'wp_CloseOnEscape', function( e, data ) {
return true;
});
})(jQuery);
}( jQuery, window ));

2
wp-admin/js/common.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/admin-bar.php
View File

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

2
wp-includes/css/admin-bar-rtl.css
View File

@ -945,7 +945,7 @@
position: absolute;
}
#moby6-overlay {
#wp-responsive-overlay {
position: fixed;
top: 0;
right: 0;

2
wp-includes/css/admin-bar-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/css/admin-bar.css
View File

@ -945,7 +945,7 @@
position: absolute;
}
#moby6-overlay {
#wp-responsive-overlay {
position: fixed;
top: 0;
left: 0;

2
wp-includes/css/admin-bar.min.css vendored
View File

File diff suppressed because one or more lines are too long