Changeset 21014

Timestamp:

06/06/2012 09:45:17 PM (12 years ago)

Author:

koopersmith

Message:

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.

Location:

trunk

Files:

• wp-admin/css/customize-controls.dev.css (modified) (4 diffs)
• wp-admin/css/wp-admin-rtl.dev.css (modified) (2 diffs)
• wp-admin/css/wp-admin.dev.css (modified) (4 diffs)
• wp-admin/customize.php (modified) (4 diffs)
• wp-admin/includes/class-wp-theme-install-list-table.php (modified) (1 diff)
• wp-admin/js/customize-controls.dev.js (modified) (5 diffs)
• wp-admin/js/theme.dev.js (modified) (1 diff)
• wp-includes/class-wp-customize-control.php (modified) (3 diffs)
• wp-includes/js/customize-loader.dev.js (modified) (1 diff)
• wp-includes/js/plupload/wp-plupload.dev.js (modified) (5 diffs)
• wp-includes/media.php (modified) (3 diffs)
• wp-includes/theme.php (modified) (1 diff)

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

@@ -403 +403 @@
 }
 
-.customize-section .customize-control-image .actions a {
-    display: block;
-}
-
 .customize-section .customize-control-image .library ul {
     border-bottom: 1px solid #dfdfdf;
@@ -457 +453 @@
 .customize-section .customize-control-image .library .thumbnail img {
     display: block;
-    max-width: 220px;
+    max-width: 90%;
     max-height: 80px;
 
@@ -480 +476 @@
     color: #777;
     position: relative;
+    cursor: default;
 }
 
@@ -492 +489 @@
 }
 
+.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;
+}
+

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

@@ -1567 +1567 @@
   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 );
@@ -1588 +1579 @@
     left: 0;
     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;
 }
 

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

@@ -5256 +5256 @@
     top: 0;
     bottom: 0;
-    left: 300px;
+    left: 0;
     right: 0;
     height: 100%;
     min-width: 0;
-}
-
-.wp-full-overlay.collapsed {
-    left: 0 !important;
 }
 
@@ -5271 +5267 @@
     box-sizing:         border-box;
 
-    position: absolute;
+    position: fixed;
     width: 300px;
     height: 100%;
     top: 0;
     bottom: 0;
-    right: 100%;
+    left: 0;
     padding: 0;
     margin: 0;
@@ -5287 +5283 @@
 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
     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;
 }
 
@@ -5405 +5414 @@
 .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;

trunk/wp-admin/customize.php

@@ -35 +35 @@
 _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
@@ -42 +55 @@
 ?>
 </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() ); ?>
@@ -141 +155 @@
             'fallback'      => $fallback_url,
         ),
+        'browser'  => array(
+            'mobile' => wp_is_mobile(),
+            'ios'    => $is_ios,
+        ),
         'settings' => array(),
         'controls' => array(),
@@ -161 +179 @@
         var _wpCustomizeSettings = <?php echo json_encode( $settings ); ?>;
     </script>
+</div>
 </body>
 </html>

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

@@ -251 +251 @@
     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">

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

@@ -149 +149 @@
             }, 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 );
 
@@ -160 +167 @@
             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 ) {
@@ -183 +185 @@
                     var fallback, button;
 
-                    if ( up.features.dragdrop )
+                    if ( this.supports.dragdrop )
                         return;
 
@@ -567 +569 @@
 
         var body = $( document.body ),
+            overlay = body.children('.wp-full-overlay'),
             query, previewer, parent;
 
@@ -703 +706 @@
 
         $('.collapse-sidebar').click( function( event ) {
-            body.toggleClass( 'collapsed' );
+            overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
             event.preventDefault();
         });

trunk/wp-admin/js/theme.dev.js

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

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

@@ -332 +332 @@
 
         ?>
-        <label class="customize-image-picker">
+        <div class="customize-image-picker">
             <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
 
@@ -367 +367 @@
                 <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
             </div>
-        </label>
+        </div>
         <?php
     }
@@ -383 +383 @@
 
     public function tab_upload_new() {
-        ?>
-        <div class="upload-dropzone">
-            <?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
-        </div>
-        <div class="upload-fallback">
-            <span class="button-secondary"><?php _e('Select File'); ?></span>
-        </div>
-        <?php
+        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>.'); ?>
+            </div>
+            <div class="upload-fallback">
+                <span class="button-secondary"><?php _e('Select File'); ?></span>
+            </div>
+            <?php
+        }
     }
 

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

@@ -67 +67 @@
             if ( this.active )
                 return;
+
+            // Load the full page on mobile devices.
+            if ( Loader.settings.browser.mobile )
+                return window.location = src;
 
             this.active = true;

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

@@ -4 +4 @@
 (function( exports, $ ) {
     var Uploader;
+
+    if ( typeof _wpPluploadSettings === 'undefined' )
+        return;
 
     /*
@@ -28 +31 @@
             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.
 
@@ -69 +81 @@
         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.
@@ -100 +112 @@
                 dropzone.removeClass('drag-over');
             });
-        }( this.dropzone, this.uploader.features.dragdrop ));
+        }( this.dropzone, this.supports.dragdrop ));
 
         this.browser.on( 'mouseenter', this.refresh );
@@ -148 +160 @@
             up.start();
         });
+
+        this.init();
     };
+
+    // Adds the 'defaults' and 'browser' properties.
+    $.extend( Uploader, _wpPluploadSettings );
 
     Uploader.uuid = 0;

trunk/wp-includes/media.php

@@ -1468 +1468 @@
     $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.
@@ -1481 +1481 @@
     );
 
-    $settings = apply_filters( 'plupload_default_settings', $settings );
+    $defaults = apply_filters( 'plupload_default_settings', $defaults );
 
     $params = array(
@@ -1489 +1489 @@
     $params = apply_filters( 'plupload_default_params', $params );
     $params['_wpnonce'] = wp_create_nonce( 'media-form' );
-    $settings['multipart_params'] = $params;
-
-    $script = 'var wpPluploadDefaults = ' . json_encode( $settings ) . ';';
+    $defaults['multipart_params'] = $params;
+
+    $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' );

trunk/wp-includes/theme.php

@@ -1606 +1606 @@
     $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,
     );