Ticket #19845: 19845.diff

src/wp-includes/js/media-editor.js

@@ -1074 +1074 @@
 
                                 wp.media.editor.open( editor, options );
                         });
+
+                        // Initialize and render the Editor drag-and-drop uploader.
+                        new wp.media.view.EditorUploader().render();
                 }
         };
 

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

@@ -2793 +2793 @@
                         dropzone = this.uploader.dropzone;
                         dropzone.on( 'dropzone:enter', _.bind( this.show, this ) );
                         dropzone.on( 'dropzone:leave', _.bind( this.hide, this ) );
+
+                        $( this.uploader ).on( 'uploader:ready', _.bind( this._ready, this ) );
                 },
 
+                _ready: function() {
+                        this.controller.trigger( 'uploader:ready' );
+                },
+
                 show: function() {
                         var $el = this.$el.show();
 
@@ -2819 +2825 @@
         });
 
         /**
+         * wp.media.view.EditorUploader
+         *
+         * @constructor
+         * @augments wp.media.View
+         * @augments wp.Backbone.View
+         * @augments Backbone.View
+         */
+        media.view.EditorUploader = media.View.extend({
+                tagName:   'div',
+                className: 'uploader-editor',
+                template:  media.template( 'uploader-editor' ),
+
+                events: {
+                        'drop': 'drop',
+                        'dragover': 'dropzoneDragover',
+                        'dragleave': 'dropzoneDragleave',
+                },
+
+                initialize: function() {
+                        this.files = [];
+                        this.$document = $(document);
+                        this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
+                        this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
+                        return this;
+                },
+
+                refresh: function() {
+                        // Hide the dropzone only if dragging has left the screen.
+                        return this.$el.toggle( this.overContainer || this.overDropzone );
+                },
+
+                render: function() {
+                        media.View.prototype.render.apply( this, arguments );
+                        $( '.edit-form-section' ).append( this.$el );
+                        return this;
+                },
+
+                drop: function( event ) {
+                        this.files = event.originalEvent.dataTransfer.files;
+                        if ( this.files.length < 1 )
+                                return;
+
+                        this.containerDragleave();
+                        this.dropzoneDragleave();
+
+                        if ( ! this.workflow ) {
+                                this.workflow = wp.media.editor.open( 'content', {
+                                        frame:    'post',
+                                        state:    'insert',
+                                        title:    wp.media.view.l10n.addMedia,
+                                        multiple: true
+                                });
+                                this.workflow.on( 'uploader:ready', this.addFiles, this );
+                        } else {
+                                this.workflow.state().reset();
+                                this.addFiles.apply( this );
+                                this.workflow.open();
+                        }
+
+                        return false;
+                },
+
+                addFiles: function() {
+                        if ( this.files.length ) {
+                                this.workflow.uploader.uploader.uploader.addFile( _.toArray( this.files ) );
+                                this.files = [];
+                        }
+                        return this;
+                },
+
+                containerDragover: function() {
+                        this.overContainer = true;
+                        this.refresh();
+                },
+
+                containerDragleave: function() {
+                        this.overContainer = false;
+
+                        // Throttle dragleave because it's called when bouncing from some elements to others.
+                        _.delay( _.bind( this.refresh, this ), 50 );
+                },
+
+                dropzoneDragover: function() {
+                        this.$el.addClass( 'droppable' );
+                        this.overDropzone = true;
+                        _.defer( _.bind( this.refresh, this ) );
+                        return false;
+                },
+
+                dropzoneDragleave: function() {
+                        this.$el.removeClass( 'droppable' );
+                        this.overDropzone = false;
+                        this.refresh();
+                }
+        });
+
+        /**
          * wp.media.view.UploaderInline
          *
          * @constructor

src/wp-admin/css/edit.css

@@ -593 +593 @@
 }
 
 .edit-form-section {
-        margin-bottom: 20px;
+        margin-bottom: 20px;
+        position: relative;
 }
 
+.uploader-editor {
+        background: rgba( 150, 150, 150, 0.9 );
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 250000;
+        display: none;
+        text-align: center;
+}
+
+.uploader-editor-content {
+        border: 1px dashed #fff;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        right: 10px;
+        bottom: 10px;
+        pointer-events: none;
+}
+
+#poststuff .uploader-editor-content h3 {
+        margin: -0.5em 0 0;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        transform: translateY( -50% );
+        font-size: 40px;
+        color: #fff;
+        padding: 0;
+        display: none;
+        pointer-events: none;
+}
+
+.uploader-editor.droppable {
+        background: rgba( 0, 86, 132, 0.9 );
+}
+
+#poststuff .uploader-editor.droppable h3 {
+        display: block;
+}
+
 /* TinyMCE */
 #mce_fullscreen_container {
-        background: #fff;
-}
+        background: #fff;}
 
 /*------------------------------------------------------------------------------
   11.1 - Custom Fields

src/wp-includes/js/plupload/wp-plupload.js

@@ -149 +149 @@
                                         dropzone.trigger('dropzone:leave').removeClass('drag-over');
                                 }, 0 );
                         });
+
+                        $(self).trigger( 'uploader:ready' );
                 });
 
                 this.uploader.init();

src/wp-includes/media-template.php

@@ -41 +41 @@
                 </div>
         </script>
 
+        <script type="text/html" id="tmpl-uploader-editor">
+                <div class="uploader-editor-content">
+                        <h3><?php _e( 'Drop files to upload' ); ?></h3>
+                </div>
+        </script>
+
         <script type="text/html" id="tmpl-uploader-inline">
                 <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
                 <div class="uploader-inline-content {{ messageClass }}">