[Summary view] [Print] [Text view]

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