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