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