wp-admin/js/color-picker.js

   1 /* global wpColorPickerL10n */
   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                         }
  25
  26                         var self = this,
  27                                 el = self.element;
  28
  29                         $.extend( self.options, el.data() );
  30
  31                         // keep close bound so it can be attached to a body listener
  32                         self.close = $.proxy( self.close, self );
  33
  34                         self.initialValue = el.val();
  35
  36                         // Set up HTML structure, hide things
  37                         el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
  38                         self.wrap = el.parent();
  39                         self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
  40                         self.pickerContainer = $( _after ).insertAfter( el );
  41                         self.button = $( _button );
  42
  43                         if ( self.options.defaultColor ) {
  44                                 self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
  45                         } else {
  46                                 self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
  47                         }
  48
  49                         el.wrap( '<span class="wp-picker-input-wrap" />' ).after(self.button);
  50
  51                         el.iris( {
  52                                 target: self.pickerContainer,
  53                                 hide: true,
  54                                 width: 255,
  55                                 mode: 'hsv',
  56                                 palettes: self.options.palettes,
  57                                 change: function( event, ui ) {
  58                                         self.toggler.css( { backgroundColor: ui.color.toString() } );
  59                                         // check for a custom cb
  60                                         if ( $.isFunction( self.options.change ) ) {
  61                                                 self.options.change.call( this, event, ui );
  62                                         }
  63                                 }
  64                         } );
  65
  66                         el.val( self.initialValue );
  67                         self._addListeners();
  68                         if ( ! self.options.hide ) {
  69                                 self.toggler.click();
  70                         }
  71                 },
  72                 _addListeners: function() {
  73                         var self = this;
  74
  75                         // prevent any clicks inside this widget from leaking to the top and closing it
  76                         self.wrap.on( 'click.wpcolorpicker', function( event ) {
  77                                 event.stopPropagation();
  78                         });
  79
  80                         self.toggler.click( function(){
  81                                 if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
  82                                         self.close();
  83                                 } else {
  84                                         self.open();
  85                                 }
  86                         });
  87
  88                         self.element.change( function( event ) {
  89                                 var me = $( this ),
  90                                         val = me.val();
  91                                 // Empty = clear
  92                                 if ( val === '' || val === '#' ) {
  93                                         self.toggler.css( 'backgroundColor', '' );
  94                                         // fire clear callback if we have one
  95                                         if ( $.isFunction( self.options.clear ) ) {
  96                                                 self.options.clear.call( this, event );
  97                                         }
  98                                 }
  99                         });
 100
 101                         // open a keyboard-focused closed picker with space or enter
 102                         self.toggler.on( 'keyup', function( event ) {
 103                                 if ( event.keyCode === 13 || event.keyCode === 32 ) {
 104                                         event.preventDefault();
 105                                         self.toggler.trigger( 'click' ).next().focus();
 106                                 }
 107                         });
 108
 109                         self.button.click( function( event ) {
 110                                 var me = $( this );
 111                                 if ( me.hasClass( 'wp-picker-clear' ) ) {
 112                                         self.element.val( '' );
 113                                         self.toggler.css( 'backgroundColor', '' );
 114                                         if ( $.isFunction( self.options.clear ) ) {
 115                                                 self.options.clear.call( this, event );
 116                                         }
 117                                 } else if ( me.hasClass( 'wp-picker-default' ) ) {
 118                                         self.element.val( self.options.defaultColor ).change();
 119                                 }
 120                         });
 121                 },
 122                 open: function() {
 123                         this.element.show().iris( 'toggle' ).focus();
 124                         this.button.removeClass( 'hidden' );
 125                         this.toggler.addClass( 'wp-picker-open' );
 126                         $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
 127                 },
 128                 close: function() {
 129                         this.element.hide().iris( 'toggle' );
 130                         this.button.addClass( 'hidden' );
 131                         this.toggler.removeClass( 'wp-picker-open' );
 132                         $( 'body' ).off( 'click.wpcolorpicker', this.close );
 133                 },
 134                 // $("#input").wpColorPicker('color') returns the current color
 135                 // $("#input").wpColorPicker('color', '#bada55') to set
 136                 color: function( newColor ) {
 137                         if ( newColor === undef ) {
 138                                 return this.element.iris( 'option', 'color' );
 139                         }
 140
 141                         this.element.iris( 'option', 'color', newColor );
 142                 },
 143                 //$("#input").wpColorPicker('defaultColor') returns the current default color
 144                 //$("#input").wpColorPicker('defaultColor', newDefaultColor) to set
 145                 defaultColor: function( newDefaultColor ) {
 146                         if ( newDefaultColor === undef ) {
 147                                 return this.options.defaultColor;
 148                         }
 149
 150                         this.options.defaultColor = newDefaultColor;
 151                 }
 152         };
 153
 154         $.widget( 'wp.wpColorPicker', ColorPicker );
 155 }( jQuery ) );