Changeset 20928

Timestamp:

05/26/2012 05:55:40 AM (14 years ago)

Author:

koopersmith

Message:

Theme Customizer: Fix IE8 drag/drop uploader incompatibility. see #20582, #19910.

Bind drag/drop support checks to individual plupload instances.
Add drag-over classes to wp.Uploader and corresponding styles to customize image controls.

Location:

trunk/wp-includes

Files:

• class-wp-customize-control.php (modified) (1 diff)
• css/customize-controls.dev.css (modified) (2 diffs)
• js/customize-controls.dev.js (modified) (1 diff)
• js/plupload/wp-plupload.dev.js (modified) (2 diffs)

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

@@ -390 +390 @@
                         <?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
                 </div>
-                <a class="button-secondary upload-fallback"><?php _e('Select File'); ?></a>
+                <div class="upload-fallback">
+                        <span class="button-secondary"><?php _e('Select File'); ?></span>
+                </div>
                 <?php
         }

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

@@ -464 +464 @@
 }
 
+.customize-section .customize-control-upload .upload-fallback,
+.customize-section .customize-control-image .upload-fallback {
+        display: none;
+}
+
 .customize-section .customize-control-upload .upload-dropzone,
 .customize-section .customize-control-image .upload-dropzone {
+        display: none;
         padding: 15px 10px;
         border: 3px dashed #dfdfdf;
@@ -474 +480 @@
 }
 
-.customize-control-image .upload-dropzone,
-.uploader-drag-drop .customize-control-image .upload-fallback {
-        display: none;
-}
-
-.uploader-drag-drop .customize-control-image .upload-dropzone {
-        display: block;
-}
+.customize-section .customize-control-upload .upload-dropzone.supports-drag-drop,
+.customize-section .customize-control-image .upload-dropzone.supports-drag-drop {
+        display: block;
+        -webkit-transition: border-color 0.1s;
+        -moz-transition:    border-color 0.1s;
+        -ms-transition:     border-color 0.1s;
+        -o-transition:      border-color 0.1s;
+        transition:         border-color 0.1s;
+}
+
+.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;
+}

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

@@ -175 +175 @@
                                 panels;
 
-                        this.uploader = {};
-                        if ( ! wp.Uploader.dragdrop )
-                                this.uploader.browser = this.container.find( '.upload-fallback' );
+                        this.uploader = {
+                                init: function( up ) {
+                                        var fallback, button;
+
+                                        if ( up.features.dragdrop )
+                                                return;
+
+                                        // Maintain references while wrapping the fallback button.
+                                        fallback = control.container.find( '.upload-fallback' );
+                                        button   = fallback.children().detach();
+
+                                        this.browser.detach().empty().append( button );
+                                        fallback.append( this.browser ).show();
+                                }
+                        };
 
                         api.UploadControl.prototype.ready.call( this );

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

@@ -73 +73 @@
                 this.uploader.init();
 
+                // Generate drag/drop helper classes.
+                (function( dropzone, supported ) {
+                        var sensitivity = 50,
+                                active;
+
+                        if ( ! dropzone )
+                                return;
+
+                        dropzone.toggleClass( 'supports-drag-drop', !! supported );
+
+                        if ( ! supported )
+                                return dropzone.unbind('.wp-uploader');
+
+                        // 'dragenter' doesn't fire correctly,
+                        // simulate it with a limited 'dragover'
+                        dropzone.bind( 'dragover.wp-uploader', function(){
+                                if ( active )
+                                        return;
+
+                                dropzone.addClass('drag-over');
+                                active = true;
+                        });
+
+                        dropzone.bind('dragleave.wp-uploader, drop.wp-uploader', function(){
+                                active = false;
+                                dropzone.removeClass('drag-over');
+                        });
+                }( this.dropzone, this.uploader.features.dragdrop ));
+
                 this.browser.on( 'mouseenter', this.refresh );
 
@@ -120 +149 @@
                 });
         };
-
-        Uploader.dragdrop = (function() {
-                // Thank you, Modernizr!
-                // http://modernizr.com/
-                var div = document.createElement('div');
-                return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
-        }());
-
-        $( function() {
-                if ( Uploader.dragdrop )
-                        $( document.body ).addClass('uploader-drag-drop');
-        });
 
         Uploader.uuid = 0;