Changeset 20761

Timestamp:

05/10/2012 12:15:53 AM (14 years ago)

Author:

koopersmith

Message:

Theme Customizer: Add a fallback UI for browsers that do not support drag and drop upload. see #19910, #20452, #20582.

Location:

trunk/wp-includes

Files:

• class-wp-customize-control.php (modified) (1 diff)
• css/customize-controls.dev.css (modified) (1 diff)
• js/customize-controls.dev.js (modified) (2 diffs)
• js/plupload/wp-plupload.dev.js (modified) (3 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>
                 <?php
         }

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

@@ -474 +474 @@
         position: relative;
 }
+
+.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;
+}

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

@@ -138 +138 @@
                         this.success = $.proxy( this.success, this );
 
-                        this.uploader = new wp.Uploader({
+                        this.uploader = $.extend({
                                 container: this.container,
                                 browser:   this.container.find('.upload'),
                                 dropzone:  this.container.find('.upload-dropzone'),
                                 success:   this.success
-                        });
+                        }, this.uploader || {} );
+
+                        this.uploader = new wp.Uploader( this.uploader );
 
                         this.remover = this.container.find('.remove');
@@ -170 +172 @@
                         var control = this,
                                 panels;
+
+                        this.uploader = {};
+                        if ( ! wp.Uploader.dragdrop )
+                                this.uploader.browser = this.container.find( '.upload-fallback' );
 
                         api.UploadControl.prototype.ready.call( this );

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

@@ -3 +3 @@
 
 (function( exports, $ ) {
-        var Uploader, body;
-
-        body = $( document.body );
+        var Uploader;
 
         /*
@@ -76 +74 @@
 
                 this.browser.on( 'mouseenter', this.refresh );
-                body.toggleClass( 'uploader-drag-drop', this.uploader.features.dragdrop );
 
                 this.uploader.bind( 'UploadProgress', this.progress );
@@ -123 +120 @@
                 });
         };
+
+        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;