WordPress.org

Make WordPress Core

Changeset 20928


Ignore:
Timestamp:
05/26/2012 05:55:40 AM (7 years ago)
Author:
koopersmith
Message:

Theme Customizer: Fix IE8 drag/drop uploader incompatibility. see #20582, #19910.

Bind drag/drop support checks to individual plupload instances.
Add drag-over classes to wp.Uploader and corresponding styles to customize image controls.

Location:
trunk/wp-includes
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize-control.php

    r20913 r20928  
    390390            <?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
    391391        </div>
    392         <a class="button-secondary upload-fallback"><?php _e('Select File'); ?></a>
     392        <div class="upload-fallback">
     393            <span class="button-secondary"><?php _e('Select File'); ?></span>
     394        </div>
    393395        <?php
    394396    }
  • trunk/wp-includes/css/customize-controls.dev.css

    r20920 r20928  
    464464}
    465465
     466.customize-section .customize-control-upload .upload-fallback,
     467.customize-section .customize-control-image .upload-fallback {
     468    display: none;
     469}
     470
    466471.customize-section .customize-control-upload .upload-dropzone,
    467472.customize-section .customize-control-image .upload-dropzone {
     473    display: none;
    468474    padding: 15px 10px;
    469475    border: 3px dashed #dfdfdf;
     
    474480}
    475481
    476 .customize-control-image .upload-dropzone,
    477 .uploader-drag-drop .customize-control-image .upload-fallback {
    478     display: none;
    479 }
    480 
    481 .uploader-drag-drop .customize-control-image .upload-dropzone {
    482     display: block;
    483 }
     482.customize-section .customize-control-upload .upload-dropzone.supports-drag-drop,
     483.customize-section .customize-control-image .upload-dropzone.supports-drag-drop {
     484    display: block;
     485    -webkit-transition: border-color 0.1s;
     486    -moz-transition:    border-color 0.1s;
     487    -ms-transition:     border-color 0.1s;
     488    -o-transition:      border-color 0.1s;
     489    transition:         border-color 0.1s;
     490}
     491
     492.customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
     493.customize-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
     494    border-color: #83b4d8;
     495}
  • trunk/wp-includes/js/customize-controls.dev.js

    r20925 r20928  
    175175                panels;
    176176
    177             this.uploader = {};
    178             if ( ! wp.Uploader.dragdrop )
    179                 this.uploader.browser = this.container.find( '.upload-fallback' );
     177            this.uploader = {
     178                init: function( up ) {
     179                    var fallback, button;
     180
     181                    if ( up.features.dragdrop )
     182                        return;
     183
     184                    // Maintain references while wrapping the fallback button.
     185                    fallback = control.container.find( '.upload-fallback' );
     186                    button   = fallback.children().detach();
     187
     188                    this.browser.detach().empty().append( button );
     189                    fallback.append( this.browser ).show();
     190                }
     191            };
    180192
    181193            api.UploadControl.prototype.ready.call( this );
  • trunk/wp-includes/js/plupload/wp-plupload.dev.js

    r20761 r20928  
    7373        this.uploader.init();
    7474
     75        // Generate drag/drop helper classes.
     76        (function( dropzone, supported ) {
     77            var sensitivity = 50,
     78                active;
     79
     80            if ( ! dropzone )
     81                return;
     82
     83            dropzone.toggleClass( 'supports-drag-drop', !! supported );
     84
     85            if ( ! supported )
     86                return dropzone.unbind('.wp-uploader');
     87
     88            // 'dragenter' doesn't fire correctly,
     89            // simulate it with a limited 'dragover'
     90            dropzone.bind( 'dragover.wp-uploader', function(){
     91                if ( active )
     92                    return;
     93
     94                dropzone.addClass('drag-over');
     95                active = true;
     96            });
     97
     98            dropzone.bind('dragleave.wp-uploader, drop.wp-uploader', function(){
     99                active = false;
     100                dropzone.removeClass('drag-over');
     101            });
     102        }( this.dropzone, this.uploader.features.dragdrop ));
     103
    75104        this.browser.on( 'mouseenter', this.refresh );
    76105
     
    120149        });
    121150    };
    122 
    123     Uploader.dragdrop = (function() {
    124         // Thank you, Modernizr!
    125         // http://modernizr.com/
    126         var div = document.createElement('div');
    127         return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
    128     }());
    129 
    130     $( function() {
    131         if ( Uploader.dragdrop )
    132             $( document.body ).addClass('uploader-drag-drop');
    133     });
    134151
    135152    Uploader.uuid = 0;
Note: See TracChangeset for help on using the changeset viewer.