wp-admin/js/color-picker.js

   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 ) );