Theme Customizer: Fix scrolling on iOS and Kindle Fire. props azaozz, helenyhou. fixes #20805.

Also fixes uploader UIs on iOS and Kindle Fire by improving wp.Uploader.
Adds mobile viewport specifications.
Moves scrollbar back to fixed positioning.


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

wp-admin/css/customize-controls.dev.css

@@ -402,10 +402,6 @@ body {
 	text-align: right;
 }
 
-.customize-section .customize-control-image .actions a {
-	display: block;
-}
-
 .customize-section .customize-control-image .library ul {
 	border-bottom: 1px solid #dfdfdf;
 	float: left;
@@ -456,7 +452,7 @@ body {
 
 .customize-section .customize-control-image .library .thumbnail img {
 	display: block;
-	max-width: 220px;
+	max-width: 90%;
 	max-height: 80px;
 
 	margin: 5px auto;
@@ -479,6 +475,7 @@ body {
 	text-align: center;
 	color: #777;
 	position: relative;
+	cursor: default;
 }
 
 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop,
@@ -491,7 +488,29 @@ body {
 	transition:         border-color 0.1s;
 }
 
+.customize-section .customize-control-upload .library ul li,
+.customize-section .customize-control-image .library ul li {
+	cursor: pointer;
+}
+
 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
 	border-color: #83b4d8;
 }
+
+/**
+ * iOS can't scroll iframes,
+ * instead it expands the iframe size to match the size of the content
+ */
+.ios .wp-full-overlay {
+	position: relative;
+}
+
+.ios #customize-preview {
+	position: relative;
+}
+
+.ios #customize-controls .wp-full-overlay-sidebar-content {
+	-webkit-overflow-scrolling: touch;
+}
+

wp-admin/css/wp-admin-rtl.dev.css

@@ -1566,19 +1566,10 @@ table .column-rating {
 /*------------------------------------------------------------------------------
   26.0 - Full Overlay w/ Sidebar
 ------------------------------------------------------------------------------*/
-.wp-full-overlay {
-	left: 0;
-	right: 300px;
-}
-
-.wp-full-overlay.collapsed {
-	right: 0 !important;
-}
-
 .wp-full-overlay .wp-full-overlay-sidebar {
 	margin: 0;
-	left: 100%;
-	right: auto;
+	left: auto;
+	right: 0;
 	border-right: 0;
 	border-left: 1px solid rgba( 0, 0, 0, 0.2 );
 }
@@ -1589,6 +1580,21 @@ table .column-rating {
 	box-shadow: inset 5px 0 4px -4px rgba(0, 0, 0, 0.1);
 }
 
+.wp-full-overlay.collapsed,
+.wp-full-overlay.expanded .wp-full-overlay-sidebar {
+	margin-right: 0 !important;
+}
+
+.wp-full-overlay.expanded {
+	margin-right: 300px;
+	margin-left: 0;
+}
+
+.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
+	margin-right: -300px;
+	margin-left: 0;
+}
+
 /* Collapse Button */
 .wp-full-overlay .collapse-sidebar {
 	right: 0;

wp-admin/css/wp-admin.dev.css

@@ -5255,27 +5255,23 @@ body.full-overlay-active {
 	overflow: visible;
 	top: 0;
 	bottom: 0;
-	left: 300px;
+	left: 0;
 	right: 0;
 	height: 100%;
 	min-width: 0;
 }
 
-.wp-full-overlay.collapsed {
-	left: 0 !important;
-}
-
 .wp-full-overlay-sidebar {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing:    border-box;
 	box-sizing:         border-box;
 
-	position: absolute;
+	position: fixed;
 	width: 300px;
 	height: 100%;
 	top: 0;
 	bottom: 0;
-	right: 100%;
+	left: 0;
 	padding: 0;
 	margin: 0;
 	z-index: 10;
@@ -5288,6 +5284,19 @@ body.full-overlay-active {
 	overflow: visible;
 }
 
+.wp-full-overlay.collapsed,
+.wp-full-overlay.expanded .wp-full-overlay-sidebar {
+	margin-left: 0 !important;
+}
+
+.wp-full-overlay.expanded {
+	margin-left: 300px;
+}
+
+.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
+	margin-left: -300px;
+}
+
 .wp-full-overlay-sidebar:after {
 	content: '';
 	display: block;
@@ -5404,11 +5413,11 @@ body.full-overlay-active {
 .wp-full-overlay-sidebar,
 .wp-full-overlay .collapse-sidebar,
 .wp-full-overlay-main {
-	-webkit-transition-property: left, right, top, bottom, width;
-	-moz-transition-property:    left, right, top, bottom, width;
-	-ms-transition-property:     left, right, top, bottom, width;
-	-o-transition-property:      left, right, top, bottom, width;
-	transition-property:         left, right, top, bottom, width;
+	-webkit-transition-property: left, right, top, bottom, width, margin;
+	-moz-transition-property:    left, right, top, bottom, width, margin;
+	-ms-transition-property:     left, right, top, bottom, width, margin;
+	-o-transition-property:      left, right, top, bottom, width, margin;
+	transition-property:         left, right, top, bottom, width, margin;
 
 	-webkit-transition-duration: 0.2s;
 	-moz-transition-duration:    0.2s;

wp-admin/customize.php

@@ -34,6 +34,19 @@ do_action( 'customize_controls_enqueue_scripts' );
 wp_user_settings();
 _wp_admin_html_begin();
 
+$body_class = '';
+
+if ( wp_is_mobile() ) :
+	$body_class .= ' mobile';
+
+	?><meta name="viewport" id="viewport-meta" content="width=device-width, initial-scale=0.8, minimum-scale=0.5, maximum-scale=1.2"><?php
+endif;
+
+$is_ios = wp_is_mobile() && preg_match( '/iPad|iPod|iPhone/', $_SERVER['HTTP_USER_AGENT'] );
+
+if ( $is_ios )
+	$body_class .= ' ios';
+
 $admin_title = sprintf( __( '%1$s &#8212; WordPress' ), strip_tags( sprintf( __( 'Customize %s' ), $wp_customize->theme()->display('Name') ) ) );
 ?><title><?php echo $admin_title; ?></title><?php
 
@@ -41,7 +54,8 @@ do_action( 'customize_controls_print_styles' );
 do_action( 'customize_controls_print_scripts' );
 ?>
 </head>
-<body class="wp-full-overlay">
+<body class="<?php echo esc_attr( $body_class ); ?>">
+<div class="wp-full-overlay expanded">
 	<form id="customize-controls" class="wrap wp-full-overlay-sidebar">
 		<?php wp_nonce_field( 'customize_controls-' . $wp_customize->get_stylesheet() ); ?>
 		<div id="customize-header-actions" class="wp-full-overlay-header">
@@ -140,6 +154,10 @@ do_action( 'customize_controls_print_scripts' );
 			'isCrossDomain' => $cross_domain,
 			'fallback'      => $fallback_url,
 		),
+		'browser'  => array(
+			'mobile' => wp_is_mobile(),
+			'ios'    => $is_ios,
+		),
 		'settings' => array(),
 		'controls' => array(),
 	);
@@ -160,5 +178,6 @@ do_action( 'customize_controls_print_scripts' );
 	<script type="text/javascript">
 		var _wpCustomizeSettings = <?php echo json_encode( $settings ); ?>;
 	</script>
+</div>
 </body>
 </html>

wp-admin/includes/class-wp-theme-install-list-table.php

@@ -250,7 +250,7 @@ class WP_Theme_Install_List_Table extends WP_Themes_List_Table {
 	 */
 	function theme_installer() {
 		?>
-		<div id="theme-installer" class="wp-full-overlay">
+		<div id="theme-installer" class="wp-full-overlay expanded">
 			<div class="wp-full-overlay-sidebar">
 				<div class="wp-full-overlay-header">
 					<a href="#" class="close-full-overlay"><?php _e( '&larr; Close' ); ?></a>

wp-admin/js/customize-controls.dev.js

@@ -148,6 +148,13 @@
 				success:   this.success
 			}, this.uploader || {} );
 
+			if ( this.uploader.supported ) {
+				if ( control.params.context )
+					control.uploader.param( 'post_data[context]', this.params.context );
+
+				control.uploader.param( 'post_data[theme]', api.settings.theme.stylesheet );
+			}
+
 			this.uploader = new wp.Uploader( this.uploader );
 
 			this.remover = this.container.find('.remove');
@@ -159,11 +166,6 @@
 			this.removerVisibility = $.proxy( this.removerVisibility, this );
 			this.setting.bind( this.removerVisibility );
 			this.removerVisibility( this.setting.get() );
-
-			if ( this.params.context )
-				control.uploader.param( 'post_data[context]', this.params.context );
-
-			control.uploader.param( 'post_data[theme]', api.settings.theme.stylesheet );
 		},
 		success: function( attachment ) {
 			this.setting.set( attachment.url );
@@ -182,7 +184,7 @@
 				init: function( up ) {
 					var fallback, button;
 
-					if ( up.features.dragdrop )
+					if ( this.supports.dragdrop )
 						return;
 
 					// Maintain references while wrapping the fallback button.
@@ -566,6 +568,7 @@
 			return window.location = api.settings.url.fallback;
 
 		var body = $( document.body ),
+			overlay = body.children('.wp-full-overlay'),
 			query, previewer, parent;
 
 		// Prevent the form from saving when enter is pressed.
@@ -702,7 +705,7 @@
 		});
 
 		$('.collapse-sidebar').click( function( event ) {
-			body.toggleClass( 'collapsed' );
+			overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
 			event.preventDefault();
 		});
 

wp-admin/js/theme.dev.js

@@ -41,7 +41,7 @@ jQuery( function($) {
 	});
 
 	preview.on( 'click', '.collapse-sidebar', function( event ) {
-		preview.toggleClass('collapsed');
+		preview.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
 		event.preventDefault();
 	});
 

wp-includes/class-wp-customize-control.php

@@ -331,7 +331,7 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 			$src = call_user_func( $this->get_url, $src );
 
 		?>
-		<label class="customize-image-picker">
+		<div class="customize-image-picker">
 			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
 
 			<div class="customize-control-content">
@@ -366,7 +366,7 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 			<div class="actions">
 				<a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
 			</div>
-		</label>
+		</div>
 		<?php
 	}
 
@@ -382,6 +382,11 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 	}
 
 	public function tab_upload_new() {
+		if ( ! _device_can_upload() ) {
+			?>
+			<p><?php _e('The web browser on your device cannot be used to upload files. You may be able to use the <a href="http://wordpress.org/extend/mobile/">native app for your device</a> instead.'); ?></p>
+			<?php
+		} else {
 			?>
 			<div class="upload-dropzone">
 				<?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
@@ -391,6 +396,7 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 			</div>
 			<?php
 		}
+	}
 
 	public function tab_uploaded() {
 		?>

wp-includes/js/customize-loader.dev.js

@@ -67,6 +67,10 @@ if ( typeof wp === 'undefined' )
 			if ( this.active )
 				return;
 
+			// Load the full page on mobile devices.
+			if ( Loader.settings.browser.mobile )
+				return window.location = src;
+
 			this.active = true;
 			this.body.addClass('customize-loading');
 

wp-includes/js/plupload/wp-plupload.dev.js

@@ -4,6 +4,9 @@ if ( typeof wp === 'undefined' )
 (function( exports, $ ) {
 	var Uploader;
 
+	if ( typeof _wpPluploadSettings === 'undefined' )
+		return;
+
 	/*
 	 * An object that helps create a WordPress uploader using plupload.
 	 *
@@ -27,8 +30,17 @@ if ( typeof wp === 'undefined' )
 			},
 			key;
 
+		this.supports = {
+			upload: Uploader.browser.supported
+		};
+
+		this.supported = this.supports.upload;
+
+		if ( ! this.supported )
+			return;
+
 		// Use deep extend to ensure that multipart_params and other objects are cloned.
-		this.plupload = $.extend( true, { multipart_params: {} }, wpPluploadDefaults );
+		this.plupload = $.extend( true, { multipart_params: {} }, Uploader.defaults );
 		this.container = document.body; // Set default container.
 
 		// Extend the instance with options
@@ -68,10 +80,10 @@ if ( typeof wp === 'undefined' )
 		this.param( this.params || {} );
 		delete this.params;
 
-		this.uploader.bind( 'Init', this.init );
-
 		this.uploader.init();
 
+		this.supports.dragdrop = this.uploader.features.dragdrop && ! Uploader.browser.mobile;
+
 		// Generate drag/drop helper classes.
 		(function( dropzone, supported ) {
 			var sensitivity = 50,
@@ -99,7 +111,7 @@ if ( typeof wp === 'undefined' )
 				active = false;
 				dropzone.removeClass('drag-over');
 			});
-		}( this.dropzone, this.uploader.features.dragdrop ));
+		}( this.dropzone, this.supports.dragdrop ));
 
 		this.browser.on( 'mouseenter', this.refresh );
 
@@ -147,8 +159,13 @@ if ( typeof wp === 'undefined' )
 			up.refresh();
 			up.start();
 		});
+
+		this.init();
 	};
 
+	// Adds the 'defaults' and 'browser' properties.
+	$.extend( Uploader, _wpPluploadSettings );
+
 	Uploader.uuid = 0;
 
 	Uploader.errorMap = {

wp-includes/media.php

@@ -1467,7 +1467,7 @@ function wp_plupload_default_settings() {
 
 	$max_upload_size = wp_max_upload_size();
 
-	$settings = array(
+	$defaults = array(
 		'runtimes'            => 'html5,silverlight,flash,html4',
 		'file_data_name'      => 'async-upload', // key passed to $_FILE.
 		'multiple_queues'     => true,
@@ -1480,7 +1480,7 @@ function wp_plupload_default_settings() {
 		'urlstream_upload'    => true,
 	);
 
-	$settings = apply_filters( 'plupload_default_settings', $settings );
+	$defaults = apply_filters( 'plupload_default_settings', $defaults );
 
 	$params = array(
 		'action' => 'upload-attachment',
@@ -1488,9 +1488,17 @@ function wp_plupload_default_settings() {
 
 	$params = apply_filters( 'plupload_default_params', $params );
 	$params['_wpnonce'] = wp_create_nonce( 'media-form' );
-	$settings['multipart_params'] = $params;
+	$defaults['multipart_params'] = $params;
 
-	$script = 'var wpPluploadDefaults = ' . json_encode( $settings ) . ';';
+	$settings = array(
+		'defaults' => $defaults,
+		'browser'  => array(
+			'mobile'    => wp_is_mobile(),
+			'supported' => _device_can_upload(),
+		),
+	);
+
+	$script = 'var _wpPluploadSettings = ' . json_encode( $settings ) . ';';
 
 	$data = $wp_scripts->get_data( 'wp-plupload', 'data' );
 	if ( $data )

wp-includes/theme.php

@@ -1605,9 +1605,15 @@ function _wp_customize_loader_settings() {
 	$home_origin  = parse_url( home_url() );
 	$cross_domain = ( strtolower( $admin_origin[ 'host' ] ) != strtolower( $home_origin[ 'host' ] ) );
 
+	$browser = array(
+		'mobile' => wp_is_mobile(),
+		'ios'    => wp_is_mobile() && preg_match( '/iPad|iPod|iPhone/', $_SERVER['HTTP_USER_AGENT'] ),
+	);
+
 	$settings = array(
 		'url'           => esc_url( admin_url( 'customize.php' ) ),
 		'isCrossDomain' => $cross_domain,
+		'browser'       => $browser,
 	);
 
 	$script = 'var _wpCustomizeLoaderSettings = ' . json_encode( $settings ) . ';';