Changeset 27343

Timestamp:

03/01/2014 09:33:36 PM (11 years ago)

Author:

nacin

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/edit.css (modified) (1 diff)
• wp-includes/js/media-editor.js (modified) (1 diff)
• wp-includes/js/media-views.js (modified) (2 diffs)
• wp-includes/js/plupload/wp-plupload.js (modified) (1 diff)
• wp-includes/media-template.php (modified) (1 diff)

trunk/src/wp-admin/css/edit.css

@@ -594 +594 @@
 
 .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;
 }
 

trunk/src/wp-includes/js/media-editor.js

@@ -1031 +1031 @@
                 wp.media.editor.open( editor, options );
             });
+
+            // Initialize and render the Editor drag-and-drop uploader.
+            new wp.media.view.EditorUploader().render();
         }
     };

trunk/src/wp-includes/js/media-views.js

@@ -2782 +2782 @@
             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' );
         },
 
@@ -2804 +2810 @@
                 }
             });
+        }
+    });
+
+    /**
+     * 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();
         }
     });

trunk/src/wp-includes/js/plupload/wp-plupload.js

@@ -150 +150 @@
                 }, 0 );
             });
+
+            $(self).trigger( 'uploader:ready' );
         });
 

trunk/src/wp-includes/media-template.php

@@ -42 +42 @@
     </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'; #>