Make WordPress Core

Changeset 27378


Ignore:
Timestamp:
03/03/2014 05:43:33 PM (11 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/edit.css

    r27343 r27378  
    595595.edit-form-section {
    596596    margin-bottom: 20px;
     597}
     598
     599.wp-editor-wrap {
    597600    position: relative;
    598601}
     
    605608    width: 100%;
    606609    height: 100%;
    607     z-index: 250000;
     610    z-index: 99998; /* under the toolbar */
    608611    display: none;
    609612    text-align: center;
  • trunk/src/wp-includes/js/media-views.js

    r27363 r27378  
    28082808        template:  media.template( 'uploader-editor' ),
    28092809
    2810         events: {
    2811             'drop': 'drop',
    2812             'dragover': 'dropzoneDragover',
    2813             'dragleave': 'dropzoneDragleave'
    2814         },
    2815 
    28162810        initialize: function() {
     2811            this.$document = $(document);
     2812            this.dropzones = [];
    28172813            this.files = [];
    2818             this.$document = $(document);
     2814
     2815            this.$document.on( 'drop', '.uploader-editor', _.bind( this.drop, this ) );
     2816            this.$document.on( 'dragover', '.uploader-editor', _.bind( this.dropzoneDragover, this ) );
     2817            this.$document.on( 'dragleave', '.uploader-editor', _.bind( this.dropzoneDragleave, this ) );
     2818
    28192819            this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
    28202820            this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
     2821
    28212822            return this;
    28222823        },
    28232824
    28242825        refresh: function() {
    2825             // Hide the dropzone only if dragging has left the screen.
    2826             return this.$el.toggle( this.overContainer || this.overDropzone );
     2826            var dropzone_id;
     2827            for ( dropzone_id in this.dropzones ) {
     2828                // Hide the dropzones only if dragging has left the screen.
     2829                this.dropzones[ dropzone_id ].toggle( this.overContainer || this.overDropzone );
     2830            }
     2831            return this;
    28272832        },
    28282833
    28292834        render: function() {
    28302835            media.View.prototype.render.apply( this, arguments );
    2831             $( '.edit-form-section' ).append( this.$el );
     2836            $( '.wp-editor-wrap' ).each( _.bind( this.attach, this ) );
    28322837            return this;
    28332838        },
    28342839
     2840        attach: function( index, editor ) {
     2841            // Attach a dropzone to an editor.
     2842            var dropzone = this.$el.clone();
     2843            this.dropzones.push( dropzone );
     2844            $( editor ).append( dropzone );
     2845            return this;
     2846        },
     2847
    28352848        drop: function( event ) {
     2849            var $wrap = null;
     2850
    28362851            this.files = event.originalEvent.dataTransfer.files;
    28372852            if ( this.files.length < 1 )
    28382853                return;
    28392854
    2840             this.containerDragleave();
    2841             this.dropzoneDragleave();
     2855            this.containerDragleave( event );
     2856            this.dropzoneDragleave( event );
     2857
     2858            // Set the active editor to the drop target.
     2859            $wrap = $( event.target ).parents( '.wp-editor-wrap' );
     2860            if ( $wrap.length > 0 ) {
     2861                window.wpActiveEditor = $wrap[0].id.slice( 3, -5 );
     2862            }
    28422863
    28432864            if ( ! this.workflow ) {
     
    28782899        },
    28792900
    2880         dropzoneDragover: function() {
    2881             this.$el.addClass( 'droppable' );
     2901        dropzoneDragover: function( e ) {
     2902            $( e.target ).addClass( 'droppable' );
    28822903            this.overDropzone = true;
    28832904            _.defer( _.bind( this.refresh, this ) );
     
    28852906        },
    28862907
    2887         dropzoneDragleave: function() {
    2888             this.$el.removeClass( 'droppable' );
     2908        dropzoneDragleave: function( e ) {
     2909            $( e.target ).removeClass( 'droppable' );
    28892910            this.overDropzone = false;
    28902911            this.refresh();
Note: See TracChangeset for help on using the changeset viewer.