sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Limit the drag/drop upload only to newer browsers (IE10+), add a fullscreen dropzone in DFW mode, props kovshenin, see #19845

Browse Source 
git-svn-id: https://develop.svn.wordpress.org/trunk@27464 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2014-03-08 01:34:04 +00:00
parent 28b34b3811
commit 53c76ed168
2 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-admin/css/edit.css
View File

@ -612,6 +612,12 @@ span.wp-media-buttons-icon:before {
text-align: center; text-align: center;
} }
.wp-fullscreen-wrap .uploader-editor {
background: rgba( 0, 86, 132, 0.9 );
position: fixed;
z-index: 100050; /* above the editor toolbar */
}
.uploader-editor-content { .uploader-editor-content {
border: 1px dashed #fff; border: 1px dashed #fff;
position: absolute; position: absolute;
@ -619,11 +625,9 @@ span.wp-media-buttons-icon:before {
left: 10px; left: 10px;
right: 10px; right: 10px;
bottom: 10px; bottom: 10px;
pointer-events: none;
} }
#poststuff .uploader-editor-content h3 { #poststuff .uploader-editor-content h3 {
margin: -0.5em 0 0;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
@ -635,7 +639,6 @@ span.wp-media-buttons-icon:before {
color: #fff; color: #fff;
padding: 0; padding: 0;
display: none; display: none;
pointer-events: none;
} }
.uploader-editor.droppable { .uploader-editor.droppable {

33
src/wp-includes/js/media-views.js
View File

@ -3423,6 +3423,13 @@
template: media.template( 'uploader-editor' ), template: media.template( 'uploader-editor' ),
initialize: function() { 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.$document = $(document);
this.dropzones = []; this.dropzones = [];
this.files = []; this.files = [];
@ -3434,19 +3441,37 @@
this.$document.on( 'dragover', _.bind( this.containerDragover, this ) ); this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) ); this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
this.initialized = true;
return this; 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; var dropzone_id;
for ( dropzone_id in this.dropzones ) { for ( dropzone_id in this.dropzones ) {
// Hide the dropzones only if dragging has left the screen. // Hide the dropzones only if dragging has left the screen.
this.dropzones[ dropzone_id ].toggle( this.overContainer || this.overDropzone ); this.dropzones[ dropzone_id ].toggle( this.overContainer || this.overDropzone );
} }
if ( ! _.isUndefined( e ) ) {
$( e.target ).closest( '.uploader-editor' ).toggleClass( 'droppable', this.overDropzone );
}
return this; return this;
}, },
render: function() { render: function() {
if ( ! this.initialized ) {
return this;
}
media.View.prototype.render.apply( this, arguments ); media.View.prototype.render.apply( this, arguments );
$( '.wp-editor-wrap' ).each( _.bind( this.attach, this ) ); $( '.wp-editor-wrap' ).each( _.bind( this.attach, this ) );
return this; return this;
@ -3514,16 +3539,14 @@
}, },
dropzoneDragover: function( e ) { dropzoneDragover: function( e ) {
$( e.target ).addClass( 'droppable' );
this.overDropzone = true; this.overDropzone = true;
_.defer( _.bind( this.refresh, this ) ); this.refresh( e );
return false; return false;
}, },
dropzoneDragleave: function( e ) { dropzoneDragleave: function( e ) {
$( e.target ).removeClass( 'droppable' );
this.overDropzone = false; this.overDropzone = false;
this.refresh(); _.delay( _.bind( this.refresh, this, e ), 50 );
} }
}); });