Add the ability to drag and drop files directly onto the editor.
The file will then begin to upload and the media manager will open. props kovshenin. see #19845. git-svn-id: https://develop.svn.wordpress.org/trunk@27343 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
34cdf7f7e1
commit
2b03ef73ae
|
@ -593,7 +593,52 @@ span.wp-media-buttons-icon:before {
|
|||
}
|
||||
|
||||
.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 */
|
||||
|
|
|
@ -1030,6 +1030,9 @@
|
|||
|
||||
wp.media.editor.open( editor, options );
|
||||
});
|
||||
|
||||
// Initialize and render the Editor drag-and-drop uploader.
|
||||
new wp.media.view.EditorUploader().render();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -2781,6 +2781,12 @@
|
|||
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() {
|
||||
|
@ -2806,6 +2812,103 @@
|
|||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 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
|
||||
*
|
||||
|
|
|
@ -149,6 +149,8 @@ window.wp = window.wp || {};
|
|||
dropzone.trigger('dropzone:leave').removeClass('drag-over');
|
||||
}, 0 );
|
||||
});
|
||||
|
||||
$(self).trigger( 'uploader:ready' );
|
||||
});
|
||||
|
||||
this.uploader.init();
|
||||
|
|
|
@ -41,6 +41,12 @@ function wp_print_media_templates() {
|
|||
</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 }}">
|
||||
|
|
Loading…
Reference in New Issue