WordPress.org

Make WordPress Core

Changeset 27343


Ignore:
Timestamp:
03/01/2014 09:33:36 PM (6 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/edit.css

    r27289 r27343  
    594594
    595595.edit-form-section {
    596     margin-bottom: 20px;
     596    margin-bottom: 20px;
     597    position: relative;
     598}
     599
     600.uploader-editor {
     601    background: rgba( 150, 150, 150, 0.9 );
     602    position: absolute;
     603    top: 0;
     604    left: 0;
     605    width: 100%;
     606    height: 100%;
     607    z-index: 250000;
     608    display: none;
     609    text-align: center;
     610}
     611
     612.uploader-editor-content {
     613    border: 1px dashed #fff;
     614    position: absolute;
     615    top: 10px;
     616    left: 10px;
     617    right: 10px;
     618    bottom: 10px;
     619    pointer-events: none;
     620}
     621
     622#poststuff .uploader-editor-content h3 {
     623    margin: -0.5em 0 0;
     624    position: absolute;
     625    top: 50%;
     626    left: 0;
     627    right: 0;
     628    transform: translateY( -50% );
     629    font-size: 40px;
     630    color: #fff;
     631    padding: 0;
     632    display: none;
     633    pointer-events: none;
     634}
     635
     636.uploader-editor.droppable {
     637    background: rgba( 0, 86, 132, 0.9 );
     638}
     639
     640#poststuff .uploader-editor.droppable h3 {
     641    display: block;
    597642}
    598643
  • trunk/src/wp-includes/js/media-editor.js

    r27321 r27343  
    10311031                wp.media.editor.open( editor, options );
    10321032            });
     1033
     1034            // Initialize and render the Editor drag-and-drop uploader.
     1035            new wp.media.view.EditorUploader().render();
    10331036        }
    10341037    };
  • trunk/src/wp-includes/js/media-views.js

    r27322 r27343  
    27822782            dropzone.on( 'dropzone:enter', _.bind( this.show, this ) );
    27832783            dropzone.on( 'dropzone:leave', _.bind( this.hide, this ) );
     2784
     2785            $( this.uploader ).on( 'uploader:ready', _.bind( this._ready, this ) );
     2786        },
     2787
     2788        _ready: function() {
     2789            this.controller.trigger( 'uploader:ready' );
    27842790        },
    27852791
     
    28042810                }
    28052811            });
     2812        }
     2813    });
     2814
     2815    /**
     2816     * wp.media.view.EditorUploader
     2817     *
     2818     * @constructor
     2819     * @augments wp.media.View
     2820     * @augments wp.Backbone.View
     2821     * @augments Backbone.View
     2822     */
     2823    media.view.EditorUploader = media.View.extend({
     2824        tagName:   'div',
     2825        className: 'uploader-editor',
     2826        template:  media.template( 'uploader-editor' ),
     2827
     2828        events: {
     2829            'drop': 'drop',
     2830            'dragover': 'dropzoneDragover',
     2831            'dragleave': 'dropzoneDragleave',
     2832        },
     2833
     2834        initialize: function() {
     2835            this.files = [];
     2836            this.$document = $(document);
     2837            this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
     2838            this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
     2839            return this;
     2840        },
     2841
     2842        refresh: function() {
     2843            // Hide the dropzone only if dragging has left the screen.
     2844            return this.$el.toggle( this.overContainer || this.overDropzone );
     2845        },
     2846
     2847        render: function() {
     2848            media.View.prototype.render.apply( this, arguments );
     2849            $( '.edit-form-section' ).append( this.$el );
     2850            return this;
     2851        },
     2852
     2853        drop: function( event ) {
     2854            this.files = event.originalEvent.dataTransfer.files;
     2855            if ( this.files.length < 1 )
     2856                return;
     2857
     2858            this.containerDragleave();
     2859            this.dropzoneDragleave();
     2860
     2861            if ( ! this.workflow ) {
     2862                this.workflow = wp.media.editor.open( 'content', {
     2863                    frame:    'post',
     2864                    state:    'insert',
     2865                    title:    wp.media.view.l10n.addMedia,
     2866                    multiple: true
     2867                });
     2868                this.workflow.on( 'uploader:ready', this.addFiles, this );
     2869            } else {
     2870                this.workflow.state().reset();
     2871                this.addFiles.apply( this );
     2872                this.workflow.open();
     2873            }
     2874
     2875            return false;
     2876        },
     2877
     2878        addFiles: function() {
     2879            if ( this.files.length ) {
     2880                this.workflow.uploader.uploader.uploader.addFile( _.toArray( this.files ) );
     2881                this.files = [];
     2882            }
     2883            return this;
     2884        },
     2885
     2886        containerDragover: function() {
     2887            this.overContainer = true;
     2888            this.refresh();
     2889        },
     2890
     2891        containerDragleave: function() {
     2892            this.overContainer = false;
     2893
     2894            // Throttle dragleave because it's called when bouncing from some elements to others.
     2895            _.delay( _.bind( this.refresh, this ), 50 );
     2896        },
     2897
     2898        dropzoneDragover: function() {
     2899            this.$el.addClass( 'droppable' );
     2900            this.overDropzone = true;
     2901            _.defer( _.bind( this.refresh, this ) );
     2902            return false;
     2903        },
     2904
     2905        dropzoneDragleave: function() {
     2906            this.$el.removeClass( 'droppable' );
     2907            this.overDropzone = false;
     2908            this.refresh();
    28062909        }
    28072910    });
  • trunk/src/wp-includes/js/plupload/wp-plupload.js

    r27316 r27343  
    150150                }, 0 );
    151151            });
     152
     153            $(self).trigger( 'uploader:ready' );
    152154        });
    153155
  • trunk/src/wp-includes/media-template.php

    r27316 r27343  
    4242    </script>
    4343
     44    <script type="text/html" id="tmpl-uploader-editor">
     45        <div class="uploader-editor-content">
     46            <h3><?php _e( 'Drop files to upload' ); ?></h3>
     47        </div>
     48    </script>
     49
    4450    <script type="text/html" id="tmpl-uploader-inline">
    4551        <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
Note: See TracChangeset for help on using the changeset viewer.