WordPress.org

Make WordPress Core

Ticket #25539: 25539.diff

File 25539.diff, 5.4 KB (added by mattwiebe, 6 years ago)
  • wp-admin/js/color-picker.js

     
    1 /* global wpColorPickerL10n:true */
     1/* global wpColorPickerL10n:false */
    22( function( $, undef ){
    33
    44        var ColorPicker,
     
    1919                },
    2020                _create: function() {
    2121                        // bail early for unsupported Iris.
    22                         if ( ! $.support.iris )
     22                        if ( ! $.support.iris ) {
    2323                                return;
     24                        }
     25
    2426                        var self = this,
    2527                                el = self.element;
    2628
    2729                        $.extend( self.options, el.data() );
    2830
     31                        // keep close bound so it can be attached to a body listener
     32                        self.close = $.proxy( self.close, self );
     33
    2934                        self.initialValue = el.val();
    3035
    3136                        // Set up HTML structure, hide things
     
    3540                        self.pickerContainer = $( _after ).insertAfter( el );
    3641                        self.button = $( _button );
    3742
    38                         if ( self.options.defaultColor )
     43                        if ( self.options.defaultColor ) {
    3944                                self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
    40                         else
     45                        } else {
    4146                                self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
     47                        }
    4248
    43                         el.wrap('<span class="wp-picker-input-wrap" />').after(self.button);
     49                        el.wrap( '<span class="wp-picker-input-wrap" />' ).after(self.button);
    4450
    4551                        el.iris( {
    4652                                target: self.pickerContainer,
     
    5157                                change: function( event, ui ) {
    5258                                        self.toggler.css( { backgroundColor: ui.color.toString() } );
    5359                                        // check for a custom cb
    54                                         if ( $.isFunction( self.options.change ) )
     60                                        if ( $.isFunction( self.options.change ) ) {
    5561                                                self.options.change.call( this, event, ui );
     62                                        }
    5663                                }
    5764                        } );
     65
    5866                        el.val( self.initialValue );
    5967                        self._addListeners();
    60                         if ( ! self.options.hide )
     68                        if ( ! self.options.hide ) {
    6169                                self.toggler.click();
     70                        }
    6271                },
    6372                _addListeners: function() {
    6473                        var self = this;
    6574
    66                         self.toggler.click( function( event ){
     75                        // prevent any clicks inside this widget from leaking to the top and closing it
     76                        self.wrap.on( 'click.wpcolorpicker', function( event ) {
    6777                                event.stopPropagation();
    68                                 self.element.toggle().iris( 'toggle' );
    69                                 self.button.toggleClass('hidden');
    70                                 self.toggler.toggleClass( 'wp-picker-open' );
     78                        });
    7179
    72                                 // close picker when you click outside it
    73                                 if ( self.toggler.hasClass( 'wp-picker-open' ) )
    74                                         $( 'body' ).on( 'click', { wrap: self.wrap, toggler: self.toggler }, self._bodyListener );
    75                                 else
    76                                         $( 'body' ).off( 'click', self._bodyListener );
     80                        self.toggler.click( function(){
     81                                if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
     82                                        self.close();
     83                                } else {
     84                                        self.open();
     85
     86                                }
    7787                        });
    7888
    79                         self.element.change(function( event ) {
    80                                 var me = $(this),
     89                        self.element.change( function( event ) {
     90                                var me = $( this ),
    8191                                        val = me.val();
    8292                                // Empty = clear
    8393                                if ( val === '' || val === '#' ) {
    84                                         self.toggler.css('backgroundColor', '');
     94                                        self.toggler.css( 'backgroundColor', '' );
    8595                                        // fire clear callback if we have one
    86                                         if ( $.isFunction( self.options.clear ) )
     96                                        if ( $.isFunction( self.options.clear ) ) {
    8797                                                self.options.clear.call( this, event );
     98                                        }
    8899                                }
    89100                        });
    90101
    91102                        // open a keyboard-focused closed picker with space or enter
    92                         self.toggler.on('keyup', function( e ) {
    93                                 if ( e.keyCode === 13 || e.keyCode === 32 ) {
    94                                         e.preventDefault();
    95                                         self.toggler.trigger('click').next().focus();
     103                        self.toggler.on( 'keyup', function( event ) {
     104                                if ( event.keyCode === 13 || event.keyCode === 32 ) {
     105                                        event.preventDefault();
     106                                        self.toggler.trigger( 'click' ).next().focus();
    96107                                }
    97108                        });
    98109
    99110                        self.button.click( function( event ) {
    100                                 var me = $(this);
     111                                var me = $( this );
    101112                                if ( me.hasClass( 'wp-picker-clear' ) ) {
    102113                                        self.element.val( '' );
    103                                         self.toggler.css('backgroundColor', '');
    104                                         if ( $.isFunction( self.options.clear ) )
     114                                        self.toggler.css( 'backgroundColor', '' );
     115                                        if ( $.isFunction( self.options.clear ) ) {
    105116                                                self.options.clear.call( this, event );
     117                                        }
    106118                                } else if ( me.hasClass( 'wp-picker-default' ) ) {
    107119                                        self.element.val( self.options.defaultColor ).change();
    108120                                }
    109121                        });
    110122                },
    111                 _bodyListener: function( event ) {
    112                         if ( ! event.data.wrap.find( event.target ).length )
    113                                         event.data.toggler.click();
     123                open: function() {
     124                        this.element.show().iris( 'toggle' );
     125                        this.button.removeClass( 'hidden' );
     126                        this.toggler.addClass( 'wp-picker-open' );
     127                        $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
    114128                },
     129                close: function() {
     130                        this.element.hide().iris( 'toggle' );
     131                        this.button.addClass( 'hidden' );
     132                        this.toggler.removeClass( 'wp-picker-open' );
     133                        $( 'body' ).off( 'click.wpcolorpicker', this.close );
     134                },
    115135                // $("#input").wpColorPicker('color') returns the current color
    116136                // $("#input").wpColorPicker('color', '#bada55') to set
    117137                color: function( newColor ) {
    118                         if ( newColor === undef )
     138                        if ( newColor === undef ) {
    119139                                return this.element.iris( 'option', 'color' );
     140                        }
    120141
    121142                        this.element.iris( 'option', 'color', newColor );
    122143                },
    123144                //$("#input").wpColorPicker('defaultColor') returns the current default color
    124145                //$("#input").wpColorPicker('defaultColor', newDefaultColor) to set
    125146                defaultColor: function( newDefaultColor ) {
    126                         if ( newDefaultColor === undef )
     147                        if ( newDefaultColor === undef ) {
    127148                                return this.options.defaultColor;
     149                        }
    128150
    129151                        this.options.defaultColor = newDefaultColor;
    130152                }