Bring in the responsive component of MP6. See #25858.

* Makes the admin fully responsive down to 320px wide.
* Adds a touch-optimized main menu that can be opened and closed from the toolbar.
* Size and positioning adjustments to icons, buttons, and text elements for better touch usability.

A few changes since MP6:

* Removed jQuery mobile. This script was used to add swipe controls to open/close the sidebar menu. This feature was apparently buggy and due to the pending demise of jQuery mobile, it was removed.
* Removed use of Backbone.js. Adding Backbone.js to this script would add a dependency of Backbone.js for all of the admin. Additionally, it was used to add a menu item. Instead of doing that, it was added via the admin menu API. This also fixes a bad delay in the item showing in the menu.
* CSS layout is standardized. Comments have also been cleaned up.
* Jetpack and Akismet code is removed.
* RTL CSS is removed.
* JS passes hinting other than one small issue that will likely be removed when parts of the code are reviewed.

A number of areas for improvement remain; we're tracking these issues in the comments of #25858.

Props to tollmanz, tillkruess, helen, dd32, and apeatling.



git-svn-id: https://develop.svn.wordpress.org/trunk@26134 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/admin-header.php

@@ -67,6 +67,7 @@ var ajaxurl = '<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>',
 	decimalPoint = '<?php echo addslashes( $wp_locale->number_format['decimal_point'] ); ?>',
 	isRtl = <?php echo (int) is_rtl(); ?>;
 </script>
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
 <?php
 
 /**

src/wp-admin/js/common.js

@@ -530,6 +530,175 @@ stickyMenu = {
 
 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' ) )
+					return;
+				moby6.$html.removeClass( 'touch' ).trigger( 'deactivate.moby6' );
+			}
+
+			if ( window.matchMedia( '(max-width: 480px)' ).matches ) {
+				moby6.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 ) );
+
+// make Windows 8 devices playing along nicely
+if ( '-ms-user-select' in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/) ) {
+	var msViewportStyle = document.createElement( 'style' );
+	msViewportStyle.appendChild(
+		document.createTextNode( '@-ms-viewport{width:auto!important}' )
+	);
+	document.getElementsByTagName( 'head' )[0].appendChild( msViewportStyle );
+}
+
 // internal use
 $(document).bind( 'wp_CloseOnEscape', function( e, data ) {
 	if ( typeof(data.cb) != 'function' )

src/wp-includes/admin-bar.php

@@ -155,6 +155,26 @@ function wp_admin_bar_wp_menu( $wp_admin_bar ) {
 	) );
 }
 
+/**
+ * Add the sidebar toggle button.
+ *
+ * @since 3.8.0
+ *
+ * @param WP_Admin_Bar $wp_admin_bar
+ */
+function wp_admin_bar_sidebar_toggle( $wp_admin_bar ) {
+	if ( is_admin() ) {
+		$wp_admin_bar->add_menu( array(
+			'id'    => 'toggle-button',
+			'title' => '<span class="ab-icon"></span>',
+			'href'  => '#',
+			'meta'  => array(
+				'title' => __( 'Menu' ),
+			),
+		) );
+	}
+}
+
 /**
  * Add the "My Account" item.
  *

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

@@ -482,6 +482,7 @@ class WP_Admin_Bar {
 		add_action( 'admin_bar_menu', 'wp_admin_bar_my_account_item', 7 );
 
 		// Site related.
+		add_action( 'admin_bar_menu', 'wp_admin_bar_sidebar_toggle', 0 );
 		add_action( 'admin_bar_menu', 'wp_admin_bar_wp_menu', 10 );
 		add_action( 'admin_bar_menu', 'wp_admin_bar_my_sites_menu', 20 );
 		add_action( 'admin_bar_menu', 'wp_admin_bar_site_menu', 30 );