[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-admin/js/color-picker.js
   3   */
   4  
   5  ( function( $, undef ) {
   6  
   7      var ColorPicker,
   8          _before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',
   9          _after = '<div class="wp-picker-holder" />',
  10          _wrap = '<div class="wp-picker-container" />',
  11          _button = '<input type="button" class="button button-small" />',
  12          _wrappingLabel = '<label></label>',
  13          _wrappingLabelText = '<span class="screen-reader-text"></span>',
  14          __ = wp.i18n.__;
  15  
  16      /**
  17       * Creates a jQuery UI color picker that is used in the theme customizer.
  18       *
  19       * @class $.widget.wp.wpColorPicker
  20       *
  21       * @since 3.5.0
  22       */
  23      ColorPicker = /** @lends $.widget.wp.wpColorPicker.prototype */{
  24          options: {
  25              defaultColor: false,
  26              change: false,
  27              clear: false,
  28              hide: true,
  29              palettes: true,
  30              width: 255,
  31              mode: 'hsv',
  32              type: 'full',
  33              slider: 'horizontal'
  34          },
  35          /**
  36           * Creates a color picker that only allows you to adjust the hue.
  37           *
  38           * @since 3.5.0
  39           * @access private
  40           *
  41           * @return {void}
  42           */
  43          _createHueOnly: function() {
  44              var self = this,
  45                  el = self.element,
  46                  color;
  47  
  48              el.hide();
  49  
  50              // Set the saturation to the maximum level.
  51              color = 'hsl(' + el.val() + ', 100, 50)';
  52  
  53              // Create an instance of the color picker, using the hsl mode.
  54              el.iris( {
  55                  mode: 'hsl',
  56                  type: 'hue',
  57                  hide: false,
  58                  color: color,
  59                  /**
  60                   * Handles the onChange event if one has been defined in the options.
  61                   *
  62                   * @ignore
  63                   *
  64                   * @param {Event} event    The event that's being called.
  65                   * @param {HTMLElement} ui The HTMLElement containing the color picker.
  66                   *
  67                   * @return {void}
  68                   */
  69                  change: function( event, ui ) {
  70                      if ( typeof self.options.change === 'function' ) {
  71                          self.options.change.call( this, event, ui );
  72                      }
  73                  },
  74                  width: self.options.width,
  75                  slider: self.options.slider
  76              } );
  77          },
  78          /**
  79           * Creates the color picker, sets default values, css classes and wraps it all in HTML.
  80           *
  81           * @since 3.5.0
  82           * @access private
  83           *
  84           * @return {void}
  85           */
  86          _create: function() {
  87              // Return early if Iris support is missing.
  88              if ( ! $.support.iris ) {
  89                  return;
  90              }
  91  
  92              var self = this,
  93                  el = self.element;
  94  
  95              // Override default options with options bound to the element.
  96              $.extend( self.options, el.data() );
  97  
  98              // Create a color picker which only allows adjustments to the hue.
  99              if ( self.options.type === 'hue' ) {
 100                  return self._createHueOnly();
 101              }
 102  
 103              // Bind the close event.
 104              self.close = self.close.bind( self );
 105  
 106              self.initialValue = el.val();
 107  
 108              // Add a CSS class to the input field.
 109              el.addClass( 'wp-color-picker' );
 110  
 111              /*
 112               * Check if there's already a wrapping label, e.g. in the Customizer.
 113               * If there's no label, add a default one to match the Customizer template.
 114               */
 115              if ( ! el.parent( 'label' ).length ) {
 116                  // Wrap the input field in the default label.
 117                  el.wrap( _wrappingLabel );
 118                  // Insert the default label text.
 119                  self.wrappingLabelText = $( _wrappingLabelText )
 120                      .insertBefore( el )
 121                      .text( __( 'Color value' ) );
 122              }
 123  
 124              /*
 125               * At this point, either it's the standalone version or the Customizer
 126               * one, we have a wrapping label to use as hook in the DOM, let's store it.
 127               */
 128              self.wrappingLabel = el.parent();
 129  
 130              // Wrap the label in the main wrapper.
 131              self.wrappingLabel.wrap( _wrap );
 132              // Store a reference to the main wrapper.
 133              self.wrap = self.wrappingLabel.parent();
 134              // Set up the toggle button and insert it before the wrapping label.
 135              self.toggler = $( _before )
 136                  .insertBefore( self.wrappingLabel )
 137                  .css( { backgroundColor: self.initialValue } );
 138              // Set the toggle button span element text.
 139              self.toggler.find( '.wp-color-result-text' ).text( __( 'Select Color' ) );
 140              // Set up the Iris container and insert it after the wrapping label.
 141              self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );
 142              // Store a reference to the Clear/Default button.
 143              self.button = $( _button );
 144  
 145              // Set up the Clear/Default button.
 146              if ( self.options.defaultColor ) {
 147                  self.button
 148                      .addClass( 'wp-picker-default' )
 149                      .val( __( 'Default' ) )
 150                      .attr( 'aria-label', __( 'Select default color' ) );
 151              } else {
 152                  self.button
 153                      .addClass( 'wp-picker-clear' )
 154                      .val( __( 'Clear' ) )
 155                      .attr( 'aria-label', __( 'Clear color' ) );
 156              }
 157  
 158              // Wrap the wrapping label in its wrapper and append the Clear/Default button.
 159              self.wrappingLabel
 160                  .wrap( '<span class="wp-picker-input-wrap hidden" />' )
 161                  .after( self.button );
 162  
 163              /*
 164               * The input wrapper now contains the label+input+Clear/Default button.
 165               * Store a reference to the input wrapper: we'll use this to toggle
 166               * the controls visibility.
 167               */
 168              self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
 169  
 170              el.iris( {
 171                  target: self.pickerContainer,
 172                  hide: self.options.hide,
 173                  width: self.options.width,
 174                  mode: self.options.mode,
 175                  palettes: self.options.palettes,
 176                  /**
 177                   * Handles the onChange event if one has been defined in the options and additionally
 178                   * sets the background color for the toggler element.
 179                   *
 180                   * @since 3.5.0
 181                   *
 182                   * @ignore
 183                   *
 184                   * @param {Event} event    The event that's being called.
 185                   * @param {HTMLElement} ui The HTMLElement containing the color picker.
 186                   *
 187                   * @return {void}
 188                   */
 189                  change: function( event, ui ) {
 190                      self.toggler.css( { backgroundColor: ui.color.toString() } );
 191  
 192                      if ( typeof self.options.change === 'function' ) {
 193                          self.options.change.call( this, event, ui );
 194                      }
 195                  }
 196              } );
 197  
 198              el.val( self.initialValue );
 199              self._addListeners();
 200  
 201              // Force the color picker to always be closed on initial load.
 202              if ( ! self.options.hide ) {
 203                  self.toggler.click();
 204              }
 205          },
 206          /**
 207           * Binds event listeners to the color picker.
 208           *
 209           * @since 3.5.0
 210           * @access private
 211           *
 212           * @return {void}
 213           */
 214          _addListeners: function() {
 215              var self = this;
 216  
 217              /**
 218               * Prevent any clicks inside this widget from leaking to the top and closing it.
 219               *
 220               * @since 3.5.0
 221               *
 222               * @param {Event} event The event that's being called.
 223               *
 224               * @return {void}
 225               */
 226              self.wrap.on( 'click.wpcolorpicker', function( event ) {
 227                  event.stopPropagation();
 228              });
 229  
 230              /**
 231               * Open or close the color picker depending on the class.
 232               *
 233               * @since 3.5.0
 234               */
 235              self.toggler.on( 'click', function(){
 236                  if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
 237                      self.close();
 238                  } else {
 239                      self.open();
 240                  }
 241              });
 242  
 243              /**
 244               * Checks if value is empty when changing the color in the color picker.
 245               * If so, the background color is cleared.
 246               *
 247               * @since 3.5.0
 248               *
 249               * @param {Event} event The event that's being called.
 250               *
 251               * @return {void}
 252               */
 253              self.element.on( 'change', function( event ) {
 254                  var me = $( this ),
 255                      val = me.val();
 256  
 257                  if ( val === '' || val === '#' ) {
 258                      self.toggler.css( 'backgroundColor', '' );
 259                      // Fire clear callback if we have one.
 260                      if ( typeof self.options.clear === 'function' ) {
 261                          self.options.clear.call( this, event );
 262                      }
 263                  }
 264              });
 265  
 266              /**
 267               * Enables the user to either clear the color in the color picker or revert back to the default color.
 268               *
 269               * @since 3.5.0
 270               *
 271               * @param {Event} event The event that's being called.
 272               *
 273               * @return {void}
 274               */
 275              self.button.on( 'click', function( event ) {
 276                  var me = $( this );
 277                  if ( me.hasClass( 'wp-picker-clear' ) ) {
 278                      self.element.val( '' );
 279                      self.toggler.css( 'backgroundColor', '' );
 280                      if ( typeof self.options.clear === 'function' ) {
 281                          self.options.clear.call( this, event );
 282                      }
 283                  } else if ( me.hasClass( 'wp-picker-default' ) ) {
 284                      self.element.val( self.options.defaultColor ).change();
 285                  }
 286              });
 287          },
 288          /**
 289           * Opens the color picker dialog.
 290           *
 291           * @since 3.5.0
 292           *
 293           * @return {void}
 294           */
 295          open: function() {
 296              this.element.iris( 'toggle' );
 297              this.inputWrapper.removeClass( 'hidden' );
 298              this.wrap.addClass( 'wp-picker-active' );
 299              this.toggler
 300                  .addClass( 'wp-picker-open' )
 301                  .attr( 'aria-expanded', 'true' );
 302              $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
 303          },
 304          /**
 305           * Closes the color picker dialog.
 306           *
 307           * @since 3.5.0
 308           *
 309           * @return {void}
 310           */
 311          close: function() {
 312              this.element.iris( 'toggle' );
 313              this.inputWrapper.addClass( 'hidden' );
 314              this.wrap.removeClass( 'wp-picker-active' );
 315              this.toggler
 316                  .removeClass( 'wp-picker-open' )
 317                  .attr( 'aria-expanded', 'false' );
 318              $( 'body' ).off( 'click.wpcolorpicker', this.close );
 319          },
 320          /**
 321           * Returns the iris object if no new color is provided. If a new color is provided, it sets the new color.
 322           *
 323           * @param newColor {string|*} The new color to use. Can be undefined.
 324           *
 325           * @since 3.5.0
 326           *
 327           * @return {string} The element's color.
 328           */
 329          color: function( newColor ) {
 330              if ( newColor === undef ) {
 331                  return this.element.iris( 'option', 'color' );
 332              }
 333              this.element.iris( 'option', 'color', newColor );
 334          },
 335          /**
 336           * Returns the iris object if no new default color is provided.
 337           * If a new default color is provided, it sets the new default color.
 338           *
 339           * @param newDefaultColor {string|*} The new default color to use. Can be undefined.
 340           *
 341           * @since 3.5.0
 342           *
 343           * @return {boolean|string} The element's color.
 344           */
 345          defaultColor: function( newDefaultColor ) {
 346              if ( newDefaultColor === undef ) {
 347                  return this.options.defaultColor;
 348              }
 349  
 350              this.options.defaultColor = newDefaultColor;
 351          }
 352      };
 353  
 354      // Register the color picker as a widget.
 355      $.widget( 'wp.wpColorPicker', ColorPicker );
 356  }( jQuery ) );