WordPress.org

Make WordPress Core

Ticket #19845: 19845.diff

File 19845.diff, 5.8 KB (added by kovshenin, 6 years ago)
  • src/wp-includes/js/media-editor.js

     
    10741074
    10751075                                wp.media.editor.open( editor, options );
    10761076                        });
     1077
     1078                        // Initialize and render the Editor drag-and-drop uploader.
     1079                        new wp.media.view.EditorUploader().render();
    10771080                }
    10781081        };
    10791082
  • src/wp-includes/js/media-views.js

     
    27932793                        dropzone = this.uploader.dropzone;
    27942794                        dropzone.on( 'dropzone:enter', _.bind( this.show, this ) );
    27952795                        dropzone.on( 'dropzone:leave', _.bind( this.hide, this ) );
     2796
     2797                        $( this.uploader ).on( 'uploader:ready', _.bind( this._ready, this ) );
    27962798                },
    27972799
     2800                _ready: function() {
     2801                        this.controller.trigger( 'uploader:ready' );
     2802                },
     2803
    27982804                show: function() {
    27992805                        var $el = this.$el.show();
    28002806
     
    28192825        });
    28202826
    28212827        /**
     2828         * wp.media.view.EditorUploader
     2829         *
     2830         * @constructor
     2831         * @augments wp.media.View
     2832         * @augments wp.Backbone.View
     2833         * @augments Backbone.View
     2834         */
     2835        media.view.EditorUploader = media.View.extend({
     2836                tagName:   'div',
     2837                className: 'uploader-editor',
     2838                template:  media.template( 'uploader-editor' ),
     2839
     2840                events: {
     2841                        'drop': 'drop',
     2842                        'dragover': 'dropzoneDragover',
     2843                        'dragleave': 'dropzoneDragleave',
     2844                },
     2845
     2846                initialize: function() {
     2847                        this.files = [];
     2848                        this.$document = $(document);
     2849                        this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
     2850                        this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
     2851                        return this;
     2852                },
     2853
     2854                refresh: function() {
     2855                        // Hide the dropzone only if dragging has left the screen.
     2856                        return this.$el.toggle( this.overContainer || this.overDropzone );
     2857                },
     2858
     2859                render: function() {
     2860                        media.View.prototype.render.apply( this, arguments );
     2861                        $( '.edit-form-section' ).append( this.$el );
     2862                        return this;
     2863                },
     2864
     2865                drop: function( event ) {
     2866                        this.files = event.originalEvent.dataTransfer.files;
     2867                        if ( this.files.length < 1 )
     2868                                return;
     2869
     2870                        this.containerDragleave();
     2871                        this.dropzoneDragleave();
     2872
     2873                        if ( ! this.workflow ) {
     2874                                this.workflow = wp.media.editor.open( 'content', {
     2875                                        frame:    'post',
     2876                                        state:    'insert',
     2877                                        title:    wp.media.view.l10n.addMedia,
     2878                                        multiple: true
     2879                                });
     2880                                this.workflow.on( 'uploader:ready', this.addFiles, this );
     2881                        } else {
     2882                                this.workflow.state().reset();
     2883                                this.addFiles.apply( this );
     2884                                this.workflow.open();
     2885                        }
     2886
     2887                        return false;
     2888                },
     2889
     2890                addFiles: function() {
     2891                        if ( this.files.length ) {
     2892                                this.workflow.uploader.uploader.uploader.addFile( _.toArray( this.files ) );
     2893                                this.files = [];
     2894                        }
     2895                        return this;
     2896                },
     2897
     2898                containerDragover: function() {
     2899                        this.overContainer = true;
     2900                        this.refresh();
     2901                },
     2902
     2903                containerDragleave: function() {
     2904                        this.overContainer = false;
     2905
     2906                        // Throttle dragleave because it's called when bouncing from some elements to others.
     2907                        _.delay( _.bind( this.refresh, this ), 50 );
     2908                },
     2909
     2910                dropzoneDragover: function() {
     2911                        this.$el.addClass( 'droppable' );
     2912                        this.overDropzone = true;
     2913                        _.defer( _.bind( this.refresh, this ) );
     2914                        return false;
     2915                },
     2916
     2917                dropzoneDragleave: function() {
     2918                        this.$el.removeClass( 'droppable' );
     2919                        this.overDropzone = false;
     2920                        this.refresh();
     2921                }
     2922        });
     2923
     2924        /**
    28222925         * wp.media.view.UploaderInline
    28232926         *
    28242927         * @constructor
  • src/wp-admin/css/edit.css

     
    593593}
    594594
    595595.edit-form-section {
    596         margin-bottom: 20px;
     596        margin-bottom: 20px;
     597        position: relative;
    597598}
    598599
     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;
     642}
     643
    599644/* TinyMCE */
    600645#mce_fullscreen_container {
    601         background: #fff;
    602 }
     646        background: #fff;}
    603647
    604648/*------------------------------------------------------------------------------
    605649  11.1 - Custom Fields
  • src/wp-includes/js/plupload/wp-plupload.js

     
    149149                                        dropzone.trigger('dropzone:leave').removeClass('drag-over');
    150150                                }, 0 );
    151151                        });
     152
     153                        $(self).trigger( 'uploader:ready' );
    152154                });
    153155
    154156                this.uploader.init();
  • src/wp-includes/media-template.php

     
    4141                </div>
    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'; #>
    4652                <div class="uploader-inline-content {{ messageClass }}">