Changeset 27464

Timestamp:

03/08/2014 01:34:04 AM (11 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 );
         }
     });