X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/61343b82c4f0da4c68e4c6373daafff4a81efdd1..caeaf8dc94b5e3f75dc98ec92dc7b76049cdddb6:/wp-admin/js/color-picker.js

diff --git a/wp-admin/js/color-picker.js b/wp-admin/js/color-picker.js
index d5647547..03cc1782 100644
--- a/wp-admin/js/color-picker.js
+++ b/wp-admin/js/color-picker.js
@@ -1,132 +1,157 @@
+/* global wpColorPickerL10n */
 ( function( $, undef ){
 
-	// html stuff
-	var _before = '<a tabindex="0" class="wp-color-result" />',
+	var ColorPicker,
+		// html stuff
+		_before = '<a tabindex="0" class="wp-color-result" />',
 		_after = '<div class="wp-picker-holder" />',
 		_wrap = '<div class="wp-picker-container" />',
 		_button = '<input type="button" class="button button-small hidden" />';
 
 	// jQuery UI Widget constructor
-	var ColorPicker = {
+	ColorPicker = {
 		options: {
 			defaultColor: false,
 			change: false,
 			clear: false,
 			hide: true,
-			palettes: true
+			palettes: true,
+			width: 255,
+			mode: 'hsv'
 		},
 		_create: function() {
 			// bail early for unsupported Iris.
-			if ( ! $.support.iris )
+			if ( ! $.support.iris ) {
 				return;
-			var self = this;
-			var el = self.element;
+			}
+
+			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
 			el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
 			self.wrap = el.parent();
-			self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( "title", wpColorPickerL10n.pick ).attr( "data-current", wpColorPickerL10n.current );
+			self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
 			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,
-				hide: true,
-				width: 255,
-				mode: 'hsv',
+				hide: self.options.hide,
+				width: self.options.width,
+				mode: self.options.mode,
 				palettes: self.options.palettes,
 				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' ).focus();
+			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 )
-				return this.element.iris( "option", "color" );
+			if ( newColor === undef ) {
+				return this.element.iris( 'option', 'color' );
+			}
 
-			this.element.iris( "option", "color", newColor );
+			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;
 		}
-	}
+	};
 
 	$.widget( 'wp.wpColorPicker', ColorPicker );
-}( jQuery ) );
\ No newline at end of file
+}( jQuery ) );