[Summary view] [Print] [Text view]

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