Ticket #35827: 35827.wip.diff

src/wp-admin/js/customize-controls.js

@@ -1783 +1783 @@
                         control.container.on( 'click keydown', '.remove-button', control.removeFile );
                         control.container.on( 'click keydown', '.remove-button', control.cleanupPlayer );
 
+                        // Initialize frame and dropzone.
+                        this.initFrame();
+                        this.initDropzone();
+
                         // Resize the player controls when it becomes visible (ie when section is expanded)
                         api.section( control.section() ).container
                                 .on( 'expanded', function() {
@@ -1803 +1807 @@
 
                                 // Re-render whenever the control's setting changes.
                                 control.renderContent();
+                                control.initDropzone(); // Must be refreshed whenever the presence of a placeholder may change.
                         } );
                 },
 
@@ -1824 +1829 @@
 
                         event.preventDefault();
 
-                        if ( ! this.frame ) {
-                                this.initFrame();
-                        }
-
                         this.frame.open();
                 },
 
@@ -1853 +1854 @@
                         this.frame.on( 'select', this.select );
                 },
 
+                initDropzone: function() {
+                        if ( ! this.frame ) {
+                                this.initFrame();
+                        }
+                        
+                        if ( ! this.frame.options.uploader ) {
+                                return;
+                        }
+
+                        var uploaderOptions, postID, self = this,
+                            $browser = $( '<a href="#" class="browser" />' ).hide().appendTo( 'body' ),
+                            dropzone = this.container.find( '.placeholder' );
+
+                        if ( 0 === dropzone.length ) {
+                                // There is currently no placeholder, so there will be no dropzone.
+                                $browser.remove();
+                                return;
+                        }
+
+                        uploaderOptions = _.defaults( this.frame.options.uploader || {}, {
+                                dropzone: dropzone,
+                                browser:  $browser,
+                                params:   {}
+                        });
+
+                        postId = wp.media.view.settings.post.id;
+                        if ( postId ) {
+                                uploader.params.post_id = postId;
+                        }
+                        this.dropzoneUploader = new wp.Uploader( uploaderOptions ); // @todo figure out how wp.Uploader works (this currently doesn't work beyond here)
+
+                        dropzone.on( 'dropzone:enter', _.bind( function() { 
+                                self.container.addClass( 'dropping' );
+                        }, this ) );
+                        dropzone.on( 'dropzone:leave', _.bind( function() { 
+                                self.container.removeClass( 'dropping' );
+                        }, this ) );
+
+                },
+
                 /**
                  * Callback handler for when an attachment is selected in the media modal.
                  * Gets the selected image information, and sets it within the control.
@@ -3628 +3669 @@
                         overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
                 });
 
+                // Keyboard shortcuts - esc to exit section/panel.
+                $( 'body' ).on( 'keydown', function( event ) {
+
+                        if ( 27 !== event.which ) { // esc
+                                return;
+                        }
+
+                        var foundExpandedContainer = false;
+
+                        // Check for expanded sections, return when/if found.
+                        api.section.each( function ( section ) {
+                                if ( section.expanded() ) {
+                                        section.collapse();
+                                        event.preventDefault();
+                                        foundExpandedContainer = true;
+                                }
+                        });
+
+                        if ( foundExpandedContainer ) {
+                                return;
+                        }
+
+                        // Check for expanded panels, return when/if found.
+                        api.panel.each( function ( panel ) {
+                                if ( panel.expanded() ) {
+                                        panel.collapse();
+                                        event.preventDefault();
+                                        foundExpandedContainer = true;
+                                }
+                        });
+
+                        if ( foundExpandedContainer ) {
+                                return;
+                        }
+
+                        // Otherwise, we're at the root level, so do nothing.
+                });
+
                 $( '.customize-controls-preview-toggle' ).on( 'click', function() {
                         overlay.toggleClass( 'preview-only' );
                 });