mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-23 01:27:36 +01:00
Color Picker: Close color picker when clicking outside of them and when opening another one.
props mattwiebe. fixes #25539. Built from https://develop.svn.wordpress.org/trunk@28239 git-svn-id: http://core.svn.wordpress.org/trunk@28067 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Dominik Schilling
parent
c7adbde777
commit
e6644720f9
@ -1,4 +1,4 @@
|
||||
/* global wpColorPickerL10n:true */
|
||||
/* global wpColorPickerL10n */
|
||||
( function( $, undef ){
|
||||
|
||||
var ColorPicker,
|
||||
@ -19,13 +19,18 @@
|
||||
},
|
||||
_create: function() {
|
||||
// bail early for unsupported Iris.
|
||||
if ( ! $.support.iris )
|
||||
if ( ! $.support.iris ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var self = this,
|
||||
el = self.element;
|
||||
|
||||
$.extend( self.options, el.data() );
|
||||
|
||||
// keep close bound so it can be attached to a body listener
|
||||
self.close = $.proxy( self.close, self );
|
||||
|
||||
self.initialValue = el.val();
|
||||
|
||||
// Set up HTML structure, hide things
|
||||
@ -35,12 +40,13 @@
|
||||
self.pickerContainer = $( _after ).insertAfter( el );
|
||||
self.button = $( _button );
|
||||
|
||||
if ( self.options.defaultColor )
|
||||
if ( self.options.defaultColor ) {
|
||||
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
|
||||
else
|
||||
} else {
|
||||
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
|
||||
}
|
||||
|
||||
el.wrap('<span class="wp-picker-input-wrap" />').after(self.button);
|
||||
el.wrap( '<span class="wp-picker-input-wrap" />' ).after(self.button);
|
||||
|
||||
el.iris( {
|
||||
target: self.pickerContainer,
|
||||
@ -51,80 +57,95 @@
|
||||
change: function( event, ui ) {
|
||||
self.toggler.css( { backgroundColor: ui.color.toString() } );
|
||||
// check for a custom cb
|
||||
if ( $.isFunction( self.options.change ) )
|
||||
if ( $.isFunction( self.options.change ) ) {
|
||||
self.options.change.call( this, event, ui );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
el.val( self.initialValue );
|
||||
self._addListeners();
|
||||
if ( ! self.options.hide )
|
||||
if ( ! self.options.hide ) {
|
||||
self.toggler.click();
|
||||
}
|
||||
},
|
||||
_addListeners: function() {
|
||||
var self = this;
|
||||
|
||||
self.toggler.click( function( event ){
|
||||
// prevent any clicks inside this widget from leaking to the top and closing it
|
||||
self.wrap.on( 'click.wpcolorpicker', function( event ) {
|
||||
event.stopPropagation();
|
||||
self.element.toggle().iris( 'toggle' );
|
||||
self.button.toggleClass('hidden');
|
||||
self.toggler.toggleClass( 'wp-picker-open' );
|
||||
|
||||
// close picker when you click outside it
|
||||
if ( self.toggler.hasClass( 'wp-picker-open' ) )
|
||||
$( 'body' ).on( 'click', { wrap: self.wrap, toggler: self.toggler }, self._bodyListener );
|
||||
else
|
||||
$( 'body' ).off( 'click', self._bodyListener );
|
||||
});
|
||||
|
||||
self.element.change(function( event ) {
|
||||
var me = $(this),
|
||||
self.toggler.click( function(){
|
||||
if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
|
||||
self.close();
|
||||
} else {
|
||||
self.open();
|
||||
}
|
||||
});
|
||||
|
||||
self.element.change( function( event ) {
|
||||
var me = $( this ),
|
||||
val = me.val();
|
||||
// Empty = clear
|
||||
if ( val === '' || val === '#' ) {
|
||||
self.toggler.css('backgroundColor', '');
|
||||
self.toggler.css( 'backgroundColor', '' );
|
||||
// fire clear callback if we have one
|
||||
if ( $.isFunction( self.options.clear ) )
|
||||
if ( $.isFunction( self.options.clear ) ) {
|
||||
self.options.clear.call( this, event );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// open a keyboard-focused closed picker with space or enter
|
||||
self.toggler.on('keyup', function( e ) {
|
||||
if ( e.keyCode === 13 || e.keyCode === 32 ) {
|
||||
e.preventDefault();
|
||||
self.toggler.trigger('click').next().focus();
|
||||
self.toggler.on( 'keyup', function( event ) {
|
||||
if ( event.keyCode === 13 || event.keyCode === 32 ) {
|
||||
event.preventDefault();
|
||||
self.toggler.trigger( 'click' ).next().focus();
|
||||
}
|
||||
});
|
||||
|
||||
self.button.click( function( event ) {
|
||||
var me = $(this);
|
||||
var me = $( this );
|
||||
if ( me.hasClass( 'wp-picker-clear' ) ) {
|
||||
self.element.val( '' );
|
||||
self.toggler.css('backgroundColor', '');
|
||||
if ( $.isFunction( self.options.clear ) )
|
||||
self.toggler.css( 'backgroundColor', '' );
|
||||
if ( $.isFunction( self.options.clear ) ) {
|
||||
self.options.clear.call( this, event );
|
||||
}
|
||||
} else if ( me.hasClass( 'wp-picker-default' ) ) {
|
||||
self.element.val( self.options.defaultColor ).change();
|
||||
}
|
||||
});
|
||||
},
|
||||
_bodyListener: function( event ) {
|
||||
if ( ! event.data.wrap.find( event.target ).length )
|
||||
event.data.toggler.click();
|
||||
open: function() {
|
||||
this.element.show().iris( 'toggle' );
|
||||
this.button.removeClass( 'hidden' );
|
||||
this.toggler.addClass( 'wp-picker-open' );
|
||||
$( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
|
||||
},
|
||||
close: function() {
|
||||
this.element.hide().iris( 'toggle' );
|
||||
this.button.addClass( 'hidden' );
|
||||
this.toggler.removeClass( 'wp-picker-open' );
|
||||
$( 'body' ).off( 'click.wpcolorpicker', this.close );
|
||||
},
|
||||
// $("#input").wpColorPicker('color') returns the current color
|
||||
// $("#input").wpColorPicker('color', '#bada55') to set
|
||||
color: function( newColor ) {
|
||||
if ( newColor === undef )
|
||||
if ( newColor === undef ) {
|
||||
return this.element.iris( 'option', 'color' );
|
||||
}
|
||||
|
||||
this.element.iris( 'option', 'color', newColor );
|
||||
},
|
||||
//$("#input").wpColorPicker('defaultColor') returns the current default color
|
||||
//$("#input").wpColorPicker('defaultColor', newDefaultColor) to set
|
||||
defaultColor: function( newDefaultColor ) {
|
||||
if ( newDefaultColor === undef )
|
||||
if ( newDefaultColor === undef ) {
|
||||
return this.options.defaultColor;
|
||||
}
|
||||
|
||||
this.options.defaultColor = newDefaultColor;
|
||||
}
|
||||
|
||||
2
wp-admin/js/color-picker.min.js
vendored
2
wp-admin/js/color-picker.min.js
vendored
@ -1 +1 @@
|
||||
!function(a,b){var c,d='<a tabindex="0" class="wp-color-result" />',e='<div class="wp-picker-holder" />',f='<div class="wp-picker-container" />',g='<input type="button" class="button button-small hidden" />';c={options:{defaultColor:!1,change:!1,clear:!1,hide:!0,palettes:!0},_create:function(){if(a.support.iris){var b=this,c=b.element;a.extend(b.options,c.data()),b.initialValue=c.val(),c.addClass("wp-color-picker").hide().wrap(f),b.wrap=c.parent(),b.toggler=a(d).insertBefore(c).css({backgroundColor:b.initialValue}).attr("title",wpColorPickerL10n.pick).attr("data-current",wpColorPickerL10n.current),b.pickerContainer=a(e).insertAfter(c),b.button=a(g),b.options.defaultColor?b.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString):b.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),c.wrap('<span class="wp-picker-input-wrap" />').after(b.button),c.iris({target:b.pickerContainer,hide:!0,width:255,mode:"hsv",palettes:b.options.palettes,change:function(c,d){b.toggler.css({backgroundColor:d.color.toString()}),a.isFunction(b.options.change)&&b.options.change.call(this,c,d)}}),c.val(b.initialValue),b._addListeners(),b.options.hide||b.toggler.click()}},_addListeners:function(){var b=this;b.toggler.click(function(c){c.stopPropagation(),b.element.toggle().iris("toggle"),b.button.toggleClass("hidden"),b.toggler.toggleClass("wp-picker-open"),b.toggler.hasClass("wp-picker-open")?a("body").on("click",{wrap:b.wrap,toggler:b.toggler},b._bodyListener):a("body").off("click",b._bodyListener)}),b.element.change(function(c){var d=a(this),e=d.val();(""===e||"#"===e)&&(b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c))}),b.toggler.on("keyup",function(a){(13===a.keyCode||32===a.keyCode)&&(a.preventDefault(),b.toggler.trigger("click").next().focus())}),b.button.click(function(c){var d=a(this);d.hasClass("wp-picker-clear")?(b.element.val(""),b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c)):d.hasClass("wp-picker-default")&&b.element.val(b.options.defaultColor).change()})},_bodyListener:function(a){a.data.wrap.find(a.target).length||a.data.toggler.click()},color:function(a){return a===b?this.element.iris("option","color"):void this.element.iris("option","color",a)},defaultColor:function(a){return a===b?this.options.defaultColor:void(this.options.defaultColor=a)}},a.widget("wp.wpColorPicker",c)}(jQuery);
|
||||
!function(a,b){var c,d='<a tabindex="0" class="wp-color-result" />',e='<div class="wp-picker-holder" />',f='<div class="wp-picker-container" />',g='<input type="button" class="button button-small hidden" />';c={options:{defaultColor:!1,change:!1,clear:!1,hide:!0,palettes:!0},_create:function(){if(a.support.iris){var b=this,c=b.element;a.extend(b.options,c.data()),b.close=a.proxy(b.close,b),b.initialValue=c.val(),c.addClass("wp-color-picker").hide().wrap(f),b.wrap=c.parent(),b.toggler=a(d).insertBefore(c).css({backgroundColor:b.initialValue}).attr("title",wpColorPickerL10n.pick).attr("data-current",wpColorPickerL10n.current),b.pickerContainer=a(e).insertAfter(c),b.button=a(g),b.options.defaultColor?b.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString):b.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),c.wrap('<span class="wp-picker-input-wrap" />').after(b.button),c.iris({target:b.pickerContainer,hide:!0,width:255,mode:"hsv",palettes:b.options.palettes,change:function(c,d){b.toggler.css({backgroundColor:d.color.toString()}),a.isFunction(b.options.change)&&b.options.change.call(this,c,d)}}),c.val(b.initialValue),b._addListeners(),b.options.hide||b.toggler.click()}},_addListeners:function(){var b=this;b.wrap.on("click.wpcolorpicker",function(a){a.stopPropagation()}),b.toggler.click(function(){b.toggler.hasClass("wp-picker-open")?b.close():b.open()}),b.element.change(function(c){var d=a(this),e=d.val();(""===e||"#"===e)&&(b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c))}),b.toggler.on("keyup",function(a){(13===a.keyCode||32===a.keyCode)&&(a.preventDefault(),b.toggler.trigger("click").next().focus())}),b.button.click(function(c){var d=a(this);d.hasClass("wp-picker-clear")?(b.element.val(""),b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c)):d.hasClass("wp-picker-default")&&b.element.val(b.options.defaultColor).change()})},open:function(){this.element.show().iris("toggle"),this.button.removeClass("hidden"),this.toggler.addClass("wp-picker-open"),a("body").trigger("click.wpcolorpicker").on("click.wpcolorpicker",this.close)},close:function(){this.element.hide().iris("toggle"),this.button.addClass("hidden"),this.toggler.removeClass("wp-picker-open"),a("body").off("click.wpcolorpicker",this.close)},color:function(a){return a===b?this.element.iris("option","color"):void this.element.iris("option","color",a)},defaultColor:function(a){return a===b?this.options.defaultColor:void(this.options.defaultColor=a)}},a.widget("wp.wpColorPicker",c)}(jQuery);
|
||||
Loading…
Reference in New Issue
Block a user