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

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

View File

@ -612,6 +612,12 @@ span.wp-media-buttons-icon:before {
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 {
border: 1px dashed #fff;
position: absolute;
@ -619,11 +625,9 @@ span.wp-media-buttons-icon:before {
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;
@ -635,7 +639,6 @@ span.wp-media-buttons-icon:before {
color: #fff;
padding: 0;
display: none;
pointer-events: none;
}
.uploader-editor.droppable {

View File

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