[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

title

Body

[close]

/wp-admin/js/ -> color-picker.js (source)

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


Generated: Sat Nov 23 20:47:33 2019 Cross-referenced by PHPXref 0.7