Changeset 27464

Timestamp:

03/08/2014 01:34:04 AM (13 years ago)

Author:

azaozz

Message:

Limit the drag/drop upload only to newer browsers (IE10+), add a fullscreen dropzone in DFW mode, props kovshenin, see #19845

Location:

trunk/src

Files:

• wp-admin/css/edit.css (modified) (3 diffs)
• wp-includes/js/media-views.js (modified) (4 diffs)

trunk/src/wp-admin/css/edit.css

@@ -613 +613 @@
 }
 
+.wp-fullscreen-wrap .uploader-editor {
+        background: rgba( 0, 86, 132, 0.9 );
+        position: fixed;
+        z-index: 100050; /* above the editor toolbar */
+}
+
 .uploader-editor-content {
         border: 1px dashed #fff;
@@ -620 +626 @@
         right: 10px;
         bottom: 10px;
-        pointer-events: none;
 }
 
 #poststuff .uploader-editor-content h3 {
-        margin: -0.5em 0 0;
         position: absolute;
         top: 50%;
@@ -636 +640 @@
         padding: 0;
         display: none;
-        pointer-events: none;
 }
 

trunk/src/wp-includes/js/media-views.js

@@ -3424 +3424 @@
 
                 initialize: function() {
+                        this.initialized = false;
+
+                        // Bail if UA does not support drag'n'drop or File API.
+                        if ( ! this.browserSupport() ) {
+                                return this;
+                        }
+
                         this.$document = $(document);
                         this.dropzones = [];
@@ -3435 +3442 @@
                         this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
 
+                        this.initialized = true;
                         return this;
                 },
 
-                refresh: function() {
+                browserSupport: function() {
+                        var supports = false, div = document.createElement('div');
+
+                        supports = ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div );
+                        supports = supports && !! ( window.File && window.FileList && window.FileReader );
+                        return supports;
+                },
+
+                refresh: function( e ) {
                         var dropzone_id;
                         for ( dropzone_id in this.dropzones ) {
@@ -3444 +3460 @@
                                 this.dropzones[ dropzone_id ].toggle( this.overContainer || this.overDropzone );
                         }
+
+                        if ( ! _.isUndefined( e ) ) {
+                                $( e.target ).closest( '.uploader-editor' ).toggleClass( 'droppable', this.overDropzone );
+                        }
+
                         return this;
                 },
 
                 render: function() {
+                        if ( ! this.initialized ) {
+                                return this;
+                        }
+
                         media.View.prototype.render.apply( this, arguments );
                         $( '.wp-editor-wrap' ).each( _.bind( this.attach, this ) );
@@ -3515 +3540 @@
 
                 dropzoneDragover: function( e ) {
-                        $( e.target ).addClass( 'droppable' );
                         this.overDropzone = true;
-                        _.defer( _.bind( this.refresh, this ) );
+                        this.refresh( e );
                         return false;
                 },
 
                 dropzoneDragleave: function( e ) {
-                        $( e.target ).removeClass( 'droppable' );
                         this.overDropzone = false;
-                        this.refresh();
+                        _.delay( _.bind( this.refresh, this, e ), 50 );
                 }
         });