![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Changeset 41264
- Timestamp:
- 08/18/2017 01:09:45 PM (9 years ago)
- File:
-
- 1 edited
-
trunk/src/wp-admin/js/color-picker.js (modified) (18 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/js/color-picker.js
r38931 r41264 3 3 4 4 var ColorPicker, 5 // html stuff6 5 _before = '<a tabindex="0" class="wp-color-result" />', 7 6 _after = '<div class="wp-picker-holder" />', … … 9 8 _button = '<input type="button" class="button button-small hidden" />'; 10 9 11 // jQuery UI Widget constructor 10 /** 11 * @summary Creates a jQuery UI color picker. 12 * 13 * Creates a jQuery UI color picker that is used in the theme customizer. 14 * 15 * @since 3.5.0 16 */ 12 17 ColorPicker = { 13 18 options: { … … 22 27 slider: 'horizontal' 23 28 }, 29 /** 30 * @summary Creates a color picker that only allows you to adjust the hue. 31 * 32 * @since 3.5.0 33 * 34 * @access private 35 * 36 * @returns {void} 37 */ 24 38 _createHueOnly: function() { 25 39 var self = this, … … 27 41 color; 28 42 29 // hide input30 43 el.hide(); 31 // max saturated color for hue to be obvious 44 45 // Set the saturation to the maximum level. 32 46 color = 'hsl(' + el.val() + ', 100, 50)'; 33 47 48 // Create an instance of the color picker, using the hsl mode. 34 49 el.iris( { 35 50 mode: 'hsl', … … 37 52 hide: false, 38 53 color: color, 54 /** 55 * @summary Handles the onChange event if one has been defined in the options. 56 * 57 * @param {Event} event The event that's being called. 58 * @param {HTMLElement} ui The HTMLElement containing the color picker. 59 * 60 * @returns {void} 61 */ 39 62 change: function( event, ui ) { 40 63 if ( $.isFunction( self.options.change ) ) { … … 46 69 } ); 47 70 }, 71 /** 72 * @summary Creates the color picker. 73 * 74 * Creates the color picker, sets default values, css classes and wraps it all in HTML. 75 * 76 * @since 3.5.0 77 * 78 * @access private 79 * 80 * @returns {void} 81 */ 48 82 _create: function() { 49 // bail early for unsupported Iris.83 // Return early if Iris support is missing. 50 84 if ( ! $.support.iris ) { 51 85 return; … … 55 89 el = self.element; 56 90 91 // Override default options with options bound to the element. 57 92 $.extend( self.options, el.data() ); 58 93 59 // hue-only gets created differently94 // Create a color picker which only allows adjustments to the hue. 60 95 if ( self.options.type === 'hue' ) { 61 96 return self._createHueOnly(); 62 97 } 63 98 64 // keep close bound so it can be attached to a body listener99 // Bind the close event. 65 100 self.close = $.proxy( self.close, self ); 66 101 67 102 self.initialValue = el.val(); 68 103 69 // Set up HTML structure , hide things104 // Set up HTML structure and hide the color picker. 70 105 el.addClass( 'wp-color-picker' ).hide().wrap( _wrap ); 71 106 self.wrap = el.parent(); … … 80 115 } 81 116 82 el.wrap( '<span class="wp-picker-input-wrap" />' ).after( self.button);117 el.wrap( '<span class="wp-picker-input-wrap" />' ).after( self.button ); 83 118 84 119 el.iris( { … … 88 123 mode: self.options.mode, 89 124 palettes: self.options.palettes, 125 /** 126 * @summary Handles the onChange event if one has been defined in the options. 127 * 128 * Handles the onChange event if one has been defined in the options and additionally 129 * sets the background color for the toggler element. 130 * 131 * @since 3.5.0 132 * 133 * @param {Event} event The event that's being called. 134 * @param {HTMLElement} ui The HTMLElement containing the color picker. 135 * 136 * @returns {void} 137 */ 90 138 change: function( event, ui ) { 91 139 self.toggler.css( { backgroundColor: ui.color.toString() } ); 92 // check for a custom cb 140 93 141 if ( $.isFunction( self.options.change ) ) { 94 142 self.options.change.call( this, event, ui ); … … 99 147 el.val( self.initialValue ); 100 148 self._addListeners(); 149 150 // Force the color picker to always be closed on initial load. 101 151 if ( ! self.options.hide ) { 102 152 self.toggler.click(); 103 153 } 104 154 }, 155 /** 156 * @summary Binds event listeners to the color picker. 157 * 158 * @since 3.5.0 159 * 160 * @access private 161 * 162 * @returns {void} 163 */ 105 164 _addListeners: function() { 106 165 var self = this; 107 166 108 // prevent any clicks inside this widget from leaking to the top and closing it 167 /** 168 * @summary Prevent any clicks inside this widget from leaking to the top and closing it. 169 * 170 * @since 3.5.0 171 * 172 * @param {Event} event The event that's being called. 173 * 174 * @returs {void} 175 */ 109 176 self.wrap.on( 'click.wpcolorpicker', function( event ) { 110 177 event.stopPropagation(); 111 178 }); 112 179 180 /** 181 * @summary Open or close the color picker depending on the class. 182 * 183 * @since 3.5 184 */ 113 185 self.toggler.click( function(){ 114 186 if ( self.toggler.hasClass( 'wp-picker-open' ) ) { … … 119 191 }); 120 192 193 /** 194 * @summary Checks if value is empty when changing the color in the color picker. 195 * 196 * Checks if value is empty when changing the color in the color picker. 197 * If so, the background color is cleared. 198 * 199 * @since 3.5.0 200 * 201 * @param {Event} event The event that's being called. 202 * 203 * @returns {void} 204 */ 121 205 self.element.change( function( event ) { 122 206 var me = $( this ), 123 207 val = me.val(); 124 // Empty = clear 208 125 209 if ( val === '' || val === '#' ) { 126 210 self.toggler.css( 'backgroundColor', '' ); 127 // fire clear callback if we have one211 // Fire clear callback if we have one. 128 212 if ( $.isFunction( self.options.clear ) ) { 129 213 self.options.clear.call( this, event ); … … 132 216 }); 133 217 134 // open a keyboard-focused closed picker with space or enter 218 /** 219 * @summary Enables the user to open the color picker with their keyboard. 220 * 221 * Enables the user to open the color picker with their keyboard. 222 * This is possible by using the space or enter key. 223 * 224 * @since 3.5.0 225 * 226 * @param {Event} event The event that's being called. 227 * 228 * @returns {void} 229 */ 135 230 self.toggler.on( 'keyup', function( event ) { 136 231 if ( event.keyCode === 13 || event.keyCode === 32 ) { … … 140 235 }); 141 236 237 /** 238 * @summary Enables the user to clear or revert the color in the color picker. 239 * 240 * Enables the user to either clear the color in the color picker or revert back to the default color. 241 * 242 * @since 3.5.0 243 * 244 * @param {Event} event The event that's being called. 245 * 246 * @returns {void} 247 */ 142 248 self.button.click( function( event ) { 143 249 var me = $( this ); … … 153 259 }); 154 260 }, 261 /** 262 * @summary Opens the color picker dialog. 263 * 264 * @since 3.5.0 265 * 266 * @returns {void} 267 */ 155 268 open: function() { 156 269 this.element.show().iris( 'toggle' ).focus(); … … 160 273 $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close ); 161 274 }, 275 /** 276 * @summary Closes the color picker dialog. 277 * 278 * @since 3.5.0 279 * 280 * @returns {void} 281 */ 162 282 close: function() { 163 283 this.element.hide().iris( 'toggle' ); … … 167 287 $( 'body' ).off( 'click.wpcolorpicker', this.close ); 168 288 }, 169 // $("#input").wpColorPicker('color') returns the current color 170 // $("#input").wpColorPicker('color', '#bada55') to set 289 /** 290 * @summary Returns iris object or sets new color. 291 * 292 * Returns the iris object if no new color is provided. If a new color is provided, it sets the new color. 293 * 294 * @param newColor {string|*} The new color to use. Can be undefined. 295 * 296 * @since 3.5.0 297 * 298 * @returns {string} The element's color 299 */ 171 300 color: function( newColor ) { 172 301 if ( newColor === undef ) { … … 175 304 this.element.iris( 'option', 'color', newColor ); 176 305 }, 177 //$("#input").wpColorPicker('defaultColor') returns the current default color 178 //$("#input").wpColorPicker('defaultColor', newDefaultColor) to set 306 /** 307 * @summary Returns iris object or sets new default color. 308 * 309 * Returns the iris object if no new default color is provided. 310 * If a new default color is provided, it sets the new default color. 311 * 312 * @param newDefaultColor {string|*} The new default color to use. Can be undefined. 313 * 314 * @since 3.5.0 315 * 316 * @returns {boolean|string} The element's color. 317 */ 179 318 defaultColor: function( newDefaultColor ) { 180 319 if ( newDefaultColor === undef ) { … … 186 325 }; 187 326 327 // Register the color picker as a widget. 188 328 $.widget( 'wp.wpColorPicker', ColorPicker ); 189 329 }( jQuery ) );
Note:
See TracChangeset
for help on using the changeset viewer.
