Make DFW usable on touch devices: change the toolbar to two rows and keep it and borders visible. See #26907

Built from https://develop.svn.wordpress.org/trunk@27806


git-svn-id: http://core.svn.wordpress.org/trunk@27640 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/wp-fullscreen.js

@@ -92,14 +92,16 @@
 	 *
 	 * Toggle the CSS class to show/hide the toolbar, borders and statusbar.
 	 */
-	toggleUI = api.toggleUI = function( hide ) {
+	toggleUI = api.toggleUI = function( show ) {
 		clearTimeout( uiTimer );
 
-		if ( ! $body.hasClass('wp-dfw-show-ui') ) {
+		if ( ! $body.hasClass('wp-dfw-show-ui') || show === 'show' ) {
 			$body.addClass('wp-dfw-show-ui');
+		} else if ( show !== 'autohide' ) {
+			$body.removeClass('wp-dfw-show-ui');
 		}
 
-		if ( hide === 'hide' ) {
+		if ( show === 'autohide' ) {
 			uiTimer = setTimeout( _hideUI, 2000 );
 		}
 	};
@@ -305,8 +307,17 @@
 	api.dfwWidth = function( pixels, total ) {
 		var width;
 
+		if ( pixels && pixels.toString().indexOf('%') !== -1 ) {
+			s.$editorContainer.css( 'width', pixels );
+
+			if ( s.$dfwTitle ) {
+				s.$dfwTitle.css( 'width', pixels );
+			}
+			return;
+		}
+
 		if ( ! pixels ) {
-			// reset to theme width
+			// Reset to theme width
 			width = $('#wp-fullscreen-body').data('theme-width') || 800;
 			s.$editorContainer.width( width );
 
@@ -365,7 +376,7 @@
 		$('#wpadminbar').hide();
 
 		// Show the UI for 2 sec. when opening
-		toggleUI('hide');
+		toggleUI('autohide');
 
 		api.bind_resize();
 
@@ -373,7 +384,11 @@
 			s.editor.execCommand( 'wpFullScreenOn' );
 		}
 
-		api.dfwWidth( $( '#wp-fullscreen-body' ).data('dfw-width') || 800, true );
+		if ( 'ontouchstart' in window ) {
+			api.dfwWidth( '90%' );
+		} else {
+			api.dfwWidth( $( '#wp-fullscreen-body' ).data('dfw-width') || 800, true );
+		}
 
 		// scroll to top so the user is not disoriented
 		scrollTo(0, 0);
@@ -498,10 +513,14 @@
 				}
 			});
 
+			if ( 'ontouchstart' in window ) {
+				$body.addClass('wp-dfw-touch');
+			}
+
 			toolbar.on( 'mouseenter', function() {
 				toggleUI('show');
 			}).on( 'mouseleave', function() {
-				toggleUI('hide');
+				toggleUI('autohide');
 			});
 
 			// Bind buttons