Changeset 20928

Timestamp:

05/26/2012 05:55:40 AM (13 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;