Changeset 27378 for trunk/src

Timestamp:

03/03/2014 05:43:33 PM (13 years ago)

Author:

nacin

Message:

Support multiple editor instances when drag-and-drop-uploading onto them.

Also reduces z-index to below the toolbar, and adds a comment.

props kovshenin.
see #19845.

Location:

trunk/src

Files:

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

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

@@ -595 +595 @@
 .edit-form-section {
         margin-bottom: 20px;
+}
+
+.wp-editor-wrap {
         position: relative;
 }
@@ -605 +608 @@
         width: 100%;
         height: 100%;
-        z-index: 250000;
+        z-index: 99998; /* under the toolbar */
         display: none;
         text-align: center;

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

@@ -2808 +2808 @@
                 template:  media.template( 'uploader-editor' ),
 
-                events: {
-                        'drop': 'drop',
-                        'dragover': 'dropzoneDragover',
-                        'dragleave': 'dropzoneDragleave'
-                },
-
                 initialize: function() {
+                        this.$document = $(document);
+                        this.dropzones = [];
                         this.files = [];
-                        this.$document = $(document);
+
+                        this.$document.on( 'drop', '.uploader-editor', _.bind( this.drop, this ) );
+                        this.$document.on( 'dragover', '.uploader-editor', _.bind( this.dropzoneDragover, this ) );
+                        this.$document.on( 'dragleave', '.uploader-editor', _.bind( this.dropzoneDragleave, this ) );
+
                         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 );
+                        var dropzone_id;
+                        for ( dropzone_id in this.dropzones ) {
+                                // Hide the dropzones only if dragging has left the screen.
+                                this.dropzones[ dropzone_id ].toggle( this.overContainer || this.overDropzone );
+                        }
+                        return this;
                 },
 
                 render: function() {
                         media.View.prototype.render.apply( this, arguments );
-                        $( '.edit-form-section' ).append( this.$el );
+                        $( '.wp-editor-wrap' ).each( _.bind( this.attach, this ) );
                         return this;
                 },
 
+                attach: function( index, editor ) {
+                        // Attach a dropzone to an editor.
+                        var dropzone = this.$el.clone();
+                        this.dropzones.push( dropzone );
+                        $( editor ).append( dropzone );
+                        return this;
+                },
+
                 drop: function( event ) {
+                        var $wrap = null;
+
                         this.files = event.originalEvent.dataTransfer.files;
                         if ( this.files.length < 1 )
                                 return;
 
-                        this.containerDragleave();
-                        this.dropzoneDragleave();
+                        this.containerDragleave( event );
+                        this.dropzoneDragleave( event );
+
+                        // Set the active editor to the drop target.
+                        $wrap = $( event.target ).parents( '.wp-editor-wrap' );
+                        if ( $wrap.length > 0 ) {
+                                window.wpActiveEditor = $wrap[0].id.slice( 3, -5 );
+                        }
 
                         if ( ! this.workflow ) {
@@ -2878 +2899 @@
                 },
 
-                dropzoneDragover: function() {
-                        this.$el.addClass( 'droppable' );
+                dropzoneDragover: function( e ) {
+                        $( e.target ).addClass( 'droppable' );
                         this.overDropzone = true;
                         _.defer( _.bind( this.refresh, this ) );
@@ -2885 +2906 @@
                 },
 
-                dropzoneDragleave: function() {
-                        this.$el.removeClass( 'droppable' );
+                dropzoneDragleave: function( e ) {
+                        $( e.target ).removeClass( 'droppable' );
                         this.overDropzone = false;
                         this.refresh();