WordPress.org

Make WordPress Core

Ticket #35827: 35827.wip.diff

File 35827.wip.diff, 3.5 KB (added by celloexpressions, 5 years ago)

Initial work in progress.

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

     
    17831783                        control.container.on( 'click keydown', '.remove-button', control.removeFile );
    17841784                        control.container.on( 'click keydown', '.remove-button', control.cleanupPlayer );
    17851785
     1786                        // Initialize frame and dropzone.
     1787                        this.initFrame();
     1788                        this.initDropzone();
     1789
    17861790                        // Resize the player controls when it becomes visible (ie when section is expanded)
    17871791                        api.section( control.section() ).container
    17881792                                .on( 'expanded', function() {
     
    18031807
    18041808                                // Re-render whenever the control's setting changes.
    18051809                                control.renderContent();
     1810                                control.initDropzone(); // Must be refreshed whenever the presence of a placeholder may change.
    18061811                        } );
    18071812                },
    18081813
     
    18241829
    18251830                        event.preventDefault();
    18261831
    1827                         if ( ! this.frame ) {
    1828                                 this.initFrame();
    1829                         }
    1830 
    18311832                        this.frame.open();
    18321833                },
    18331834
     
    18531854                        this.frame.on( 'select', this.select );
    18541855                },
    18551856
     1857                initDropzone: function() {
     1858                        if ( ! this.frame ) {
     1859                                this.initFrame();
     1860                        }
     1861                       
     1862                        if ( ! this.frame.options.uploader ) {
     1863                                return;
     1864                        }
     1865
     1866                        var uploaderOptions, postID, self = this,
     1867                            $browser = $( '<a href="#" class="browser" />' ).hide().appendTo( 'body' ),
     1868                            dropzone = this.container.find( '.placeholder' );
     1869
     1870                        if ( 0 === dropzone.length ) {
     1871                                // There is currently no placeholder, so there will be no dropzone.
     1872                                $browser.remove();
     1873                                return;
     1874                        }
     1875
     1876                        uploaderOptions = _.defaults( this.frame.options.uploader || {}, {
     1877                                dropzone: dropzone,
     1878                                browser:  $browser,
     1879                                params:   {}
     1880                        });
     1881
     1882                        postId = wp.media.view.settings.post.id;
     1883                        if ( postId ) {
     1884                                uploader.params.post_id = postId;
     1885                        }
     1886                        this.dropzoneUploader = new wp.Uploader( uploaderOptions ); // @todo figure out how wp.Uploader works (this currently doesn't work beyond here)
     1887
     1888                        dropzone.on( 'dropzone:enter', _.bind( function() {
     1889                                self.container.addClass( 'dropping' );
     1890                        }, this ) );
     1891                        dropzone.on( 'dropzone:leave', _.bind( function() {
     1892                                self.container.removeClass( 'dropping' );
     1893                        }, this ) );
     1894
     1895                },
     1896
    18561897                /**
    18571898                 * Callback handler for when an attachment is selected in the media modal.
    18581899                 * Gets the selected image information, and sets it within the control.
     
    36283669                        overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
    36293670                });
    36303671
     3672                // Keyboard shortcuts - esc to exit section/panel.
     3673                $( 'body' ).on( 'keydown', function( event ) {
     3674
     3675                        if ( 27 !== event.which ) { // esc
     3676                                return;
     3677                        }
     3678
     3679                        var foundExpandedContainer = false;
     3680
     3681                        // Check for expanded sections, return when/if found.
     3682                        api.section.each( function ( section ) {
     3683                                if ( section.expanded() ) {
     3684                                        section.collapse();
     3685                                        event.preventDefault();
     3686                                        foundExpandedContainer = true;
     3687                                }
     3688                        });
     3689
     3690                        if ( foundExpandedContainer ) {
     3691                                return;
     3692                        }
     3693
     3694                        // Check for expanded panels, return when/if found.
     3695                        api.panel.each( function ( panel ) {
     3696                                if ( panel.expanded() ) {
     3697                                        panel.collapse();
     3698                                        event.preventDefault();
     3699                                        foundExpandedContainer = true;
     3700                                }
     3701                        });
     3702
     3703                        if ( foundExpandedContainer ) {
     3704                                return;
     3705                        }
     3706
     3707                        // Otherwise, we're at the root level, so do nothing.
     3708                });
     3709
    36313710                $( '.customize-controls-preview-toggle' ).on( 'click', function() {
    36323711                        overlay.toggleClass( 'preview-only' );
    36333712                });