wp-admin/js/color-picker.js

   1 ( function( $, undef ){
   2
   3         // html stuff
   4         var _before = '<a tabindex="0" class="wp-color-result" />',
   5                 _after = '<div class="wp-picker-holder" />',
   6                 _wrap = '<div class="wp-picker-container" />',
   7                 _button = '<input type="button" class="button button-small hidden" />';
   8
   9         // jQuery UI Widget constructor
  10         var ColorPicker = {
  11                 options: {
  12                         defaultColor: false,
  13                         change: false,
  14                         clear: false,
  15                         hide: true,
  16                         palettes: true
  17                 },
  18                 _create: function() {
  19                         // bail early for IE < 8
  20                         if ( $.browser.msie && parseInt( $.browser.version, 10 ) < 8 )
  21                                 return;
  22                         var self = this;
  23                         var el = self.element;
  24                         $.extend( self.options, el.data() );
  25
  26                         self.initialValue = el.val();
  27
  28                         // Set up HTML structure, hide things
  29                         el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
  30                         self.wrap = el.parent();
  31                         self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( "title", wpColorPickerL10n.pick ).attr( "data-current", wpColorPickerL10n.current );
  32                         self.pickerContainer = $( _after ).insertAfter( el );
  33                         self.button = $( _button );
  34
  35                         if ( self.options.defaultColor )
  36                                 self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
  37                         else
  38                                 self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
  39
  40                         el.wrap('<span class="wp-picker-input-wrap" />').after(self.button);
  41
  42                         el.iris( {
  43                                 target: self.pickerContainer,
  44                                 hide: true,
  45                                 width: 255,
  46                                 mode: 'hsv',
  47                                 palettes: self.options.palettes,
  48                                 change: function( event, ui ) {
  49                                         self.toggler.css( { backgroundColor: ui.color.toString() } );
  50                                         // check for a custom cb
  51                                         if ( $.isFunction( self.options.change ) )
  52                                                 self.options.change.call( this, event, ui );
  53                                 }
  54                         } );
  55                         el.val( self.initialValue );
  56                         self._addListeners();
  57                         if ( ! self.options.hide )
  58                                 self.toggler.click();
  59                 },
  60                 _addListeners: function() {
  61                         var self = this;
  62
  63                         self.toggler.click( function( event ){
  64                                 event.stopPropagation();
  65                                 self.element.toggle().iris( 'toggle' );
  66                                 self.button.toggleClass('hidden');
  67                                 self.toggler.toggleClass( 'wp-picker-open' );
  68
  69                                 // close picker when you click outside it
  70                                 if ( self.toggler.hasClass( 'wp-picker-open' ) )
  71                                         $( "body" ).on( 'click', { wrap: self.wrap, toggler: self.toggler }, self._bodyListener );
  72                                 else
  73                                         $( "body" ).off( 'click', self._bodyListener );
  74                         });
  75
  76                         self.element.change(function( event ) {
  77                                 var me = $(this),
  78                                         val = me.val();
  79                                 // Empty = clear
  80                                 if ( val === '' || val === '#' ) {
  81                                         self.toggler.css('backgroundColor', '');
  82                                         // fire clear callback if we have one
  83                                         if ( $.isFunction( self.options.clear ) )
  84                                                 self.options.clear.call( this, event );
  85                                 }
  86                         });
  87
  88                         // open a keyboard-focused closed picker with space or enter
  89                         self.toggler.on('keyup', function( e ) {
  90                                 if ( e.keyCode === 13 || e.keyCode === 32 ) {
  91                                         e.preventDefault();
  92                                         self.toggler.trigger('click').next().focus();
  93                                 }
  94                         });
  95
  96                         self.button.click( function( event ) {
  97                                 var me = $(this);
  98                                 if ( me.hasClass( 'wp-picker-clear' ) ) {
  99                                         self.element.val( '' );
 100                                         self.toggler.css('backgroundColor', '');
 101                                         if ( $.isFunction( self.options.clear ) )
 102                                                 self.options.clear.call( this, event );
 103                                 } else if ( me.hasClass( 'wp-picker-default' ) ) {
 104                                         self.element.val( self.options.defaultColor ).change();
 105                                 }
 106                         });
 107                 },
 108                 _bodyListener: function( event ) {
 109                         if ( ! event.data.wrap.find( event.target ).length )
 110                                         event.data.toggler.click();
 111                 },
 112                 // $("#input").wpColorPicker('color') returns the current color
 113                 // $("#input").wpColorPicker('color', '#bada55') to set
 114                 color: function( newColor ) {
 115                         if ( newColor === undef )
 116                                 return this.element.iris( "option", "color" );
 117
 118                         this.element.iris( "option", "color", newColor );
 119                 },
 120                 //$("#input").wpColorPicker('defaultColor') returns the current default color
 121                 //$("#input").wpColorPicker('defaultColor', newDefaultColor) to set
 122                 defaultColor: function( newDefaultColor ) {
 123                         if ( newDefaultColor === undef )
 124                                 return this.options.defaultColor;
 125
 126                         this.options.defaultColor = newDefaultColor;
 127                 }
 128         }
 129
 130         $.widget( 'wp.wpColorPicker', ColorPicker );
 131 }( jQuery ) );