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:
parent
28b34b3811
commit
53c76ed168
@ -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 {
|
||||
|
@ -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 );
|
||||
}
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user