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