WordPress.org

Make WordPress Core

Changeset 28239


Ignore:
Timestamp:
05/02/2014 11:17:13 AM (6 years ago)
Author:
ocean90
Message:

Color Picker: Close color picker when clicking outside of them and when opening another one.

props mattwiebe.
fixes #25539.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/color-picker.js

    r26074 r28239  
    1 /* global wpColorPickerL10n:true */
     1/* global wpColorPickerL10n */
    22( function( $, undef ){
    33
     
    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() );
     30
     31            // keep close bound so it can be attached to a body listener
     32            self.close = $.proxy( self.close, self );
    2833
    2934            self.initialValue = el.val();
     
    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( {
     
    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' );
    71 
    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 );
    7778            });
    7879
    79             self.element.change(function( event ) {
    80                 var me = $(this),
     80            self.toggler.click( function(){
     81                if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
     82                    self.close();
     83                } else {
     84                    self.open();
     85                }
     86            });
     87
     88            self.element.change( function( event ) {
     89                var me = $( this ),
    8190                    val = me.val();
    8291                // Empty = clear
    8392                if ( val === '' || val === '#' ) {
    84                     self.toggler.css('backgroundColor', '');
     93                    self.toggler.css( 'backgroundColor', '' );
    8594                    // fire clear callback if we have one
    86                     if ( $.isFunction( self.options.clear ) )
     95                    if ( $.isFunction( self.options.clear ) ) {
    8796                        self.options.clear.call( this, event );
     97                    }
    8898                }
    8999            });
    90100
    91101            // 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();
     102            self.toggler.on( 'keyup', function( event ) {
     103                if ( event.keyCode === 13 || event.keyCode === 32 ) {
     104                    event.preventDefault();
     105                    self.toggler.trigger( 'click' ).next().focus();
    96106                }
    97107            });
    98108
    99109            self.button.click( function( event ) {
    100                 var me = $(this);
     110                var me = $( this );
    101111                if ( me.hasClass( 'wp-picker-clear' ) ) {
    102112                    self.element.val( '' );
    103                     self.toggler.css('backgroundColor', '');
    104                     if ( $.isFunction( self.options.clear ) )
     113                    self.toggler.css( 'backgroundColor', '' );
     114                    if ( $.isFunction( self.options.clear ) ) {
    105115                        self.options.clear.call( this, event );
     116                    }
    106117                } else if ( me.hasClass( 'wp-picker-default' ) ) {
    107118                    self.element.val( self.options.defaultColor ).change();
     
    109120            });
    110121        },
    111         _bodyListener: function( event ) {
    112             if ( ! event.data.wrap.find( event.target ).length )
    113                     event.data.toggler.click();
     122        open: function() {
     123            this.element.show().iris( 'toggle' );
     124            this.button.removeClass( 'hidden' );
     125            this.toggler.addClass( 'wp-picker-open' );
     126            $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
     127        },
     128        close: function() {
     129            this.element.hide().iris( 'toggle' );
     130            this.button.addClass( 'hidden' );
     131            this.toggler.removeClass( 'wp-picker-open' );
     132            $( 'body' ).off( 'click.wpcolorpicker', this.close );
    114133        },
    115134        // $("#input").wpColorPicker('color') returns the current color
    116135        // $("#input").wpColorPicker('color', '#bada55') to set
    117136        color: function( newColor ) {
    118             if ( newColor === undef )
     137            if ( newColor === undef ) {
    119138                return this.element.iris( 'option', 'color' );
     139            }
    120140
    121141            this.element.iris( 'option', 'color', newColor );
     
    124144        //$("#input").wpColorPicker('defaultColor', newDefaultColor) to set
    125145        defaultColor: function( newDefaultColor ) {
    126             if ( newDefaultColor === undef )
     146            if ( newDefaultColor === undef ) {
    127147                return this.options.defaultColor;
     148            }
    128149
    129150            this.options.defaultColor = newDefaultColor;
Note: See TracChangeset for help on using the changeset viewer.