| 1 |
/** |
| 2 |
* Alpha Color Picker JS |
| 3 |
* |
| 4 |
* This file includes several helper functions and the core control JS. |
| 5 |
*/ |
| 6 |
|
| 7 |
/** |
| 8 |
* Override the stock color.js toString() method to add support for |
| 9 |
* outputting RGBa or Hex. |
| 10 |
*/ |
| 11 |
Color.prototype.toString = function( flag ) { |
| 12 |
|
| 13 |
// If our no-alpha flag has been passed in, output RGBa value with 100% opacity. |
| 14 |
// This is used to set the background color on the opacity slider during color changes. |
| 15 |
if ( 'no-alpha' == flag ) { |
| 16 |
return this.toCSS( 'rgba', '1' ).replace( /\s+/g, '' ); |
| 17 |
} |
| 18 |
|
| 19 |
// If we have a proper opacity value, output RGBa. |
| 20 |
if ( 1 > this._alpha ) { |
| 21 |
return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' ); |
| 22 |
} |
| 23 |
|
| 24 |
// Proceed with stock color.js hex output. |
| 25 |
var hex = parseInt( this._color, 10 ).toString( 16 ); |
| 26 |
if ( this.error ) { |
| 27 |
return ''; } |
| 28 |
if ( hex.length < 6 ) { |
| 29 |
for ( var i = 6 - hex.length - 1; i >= 0; i-- ) { |
| 30 |
hex = '0' + hex; |
| 31 |
} |
| 32 |
} |
| 33 |
|
| 34 |
return '#' + hex; |
| 35 |
}; |
| 36 |
|
| 37 |
/** |
| 38 |
* Given an RGBa, RGB, or hex color value, return the alpha channel value. |
| 39 |
*/ |
| 40 |
function acp_get_alpha_value_from_color( value ) { |
| 41 |
var alphaVal; |
| 42 |
|
| 43 |
// Remove all spaces from the passed in value to help our RGBa regex. |
| 44 |
value = value.replace( / /g, '' ); |
| 45 |
|
| 46 |
if ( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ ) ) { |
| 47 |
alphaVal = parseFloat( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ )[1] ).toFixed( 2 ) * 100; |
| 48 |
alphaVal = parseInt( alphaVal ); |
| 49 |
} else { |
| 50 |
alphaVal = 100; |
| 51 |
} |
| 52 |
|
| 53 |
return alphaVal; |
| 54 |
} |
| 55 |
|
| 56 |
/** |
| 57 |
* Force update the alpha value of the color picker object and maybe the alpha slider. |
| 58 |
*/ |
| 59 |
function acp_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, update_slider ) { |
| 60 |
var iris, colorPicker, color; |
| 61 |
|
| 62 |
iris = $control.data( 'a8cIris' ); |
| 63 |
colorPicker = $control.data( 'wpWpColorPicker' ); |
| 64 |
|
| 65 |
// Set the alpha value on the Iris object. |
| 66 |
iris._color._alpha = alpha; |
| 67 |
|
| 68 |
// Store the new color value. |
| 69 |
color = iris._color.toString(); |
| 70 |
|
| 71 |
// Set the value of the input. |
| 72 |
$control.val( color ); |
| 73 |
|
| 74 |
// Update the background color of the color picker. |
| 75 |
colorPicker.toggler.css( |
| 76 |
{ |
| 77 |
'background-color': color |
| 78 |
} |
| 79 |
); |
| 80 |
|
| 81 |
// Maybe update the alpha slider itself. |
| 82 |
if ( update_slider ) { |
| 83 |
acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ); |
| 84 |
} |
| 85 |
|
| 86 |
// Update the color value of the color picker object. |
| 87 |
$control.wpColorPicker( 'color', color ); |
| 88 |
} |
| 89 |
|
| 90 |
/** |
| 91 |
* Update the slider handle position and label. |
| 92 |
*/ |
| 93 |
function acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ) { |
| 94 |
$alphaSlider.slider( 'value', alpha ); |
| 95 |
$alphaSlider.find( '.ui-slider-handle' ).text( alpha.toString() ); |
| 96 |
} |
| 97 |
|
| 98 |
/** |
| 99 |
* Initialization trigger. |
| 100 |
*/ |
| 101 |
jQuery( document ).ready( |
| 102 |
function( $ ) { |
| 103 |
|
| 104 |
// Loop over each control and transform it into our color picker. |
| 105 |
$( '.betterdocs-alpha-color-control' ).each( |
| 106 |
function() { |
| 107 |
|
| 108 |
// Scope the vars. |
| 109 |
var $control, startingColor, paletteInput, showOpacity, defaultColor, palette, |
| 110 |
colorPickerOptions, $container, $alphaSlider, alphaVal, sliderOptions; |
| 111 |
|
| 112 |
// Store the control instance. |
| 113 |
$control = $( this ); |
| 114 |
|
| 115 |
// Get a clean starting value for the option. |
| 116 |
startingColor = $control.val().replace( /\s+/g, '' ); |
| 117 |
|
| 118 |
// Get some data off the control. |
| 119 |
paletteInput = $control.attr( 'data-palette' ); |
| 120 |
showOpacity = $control.attr( 'data-show-opacity' ); |
| 121 |
defaultColor = $control.attr( 'data-default-color' ); |
| 122 |
|
| 123 |
// Process the palette. |
| 124 |
if ( paletteInput.indexOf( '|' ) !== -1 ) { |
| 125 |
palette = paletteInput.split( '|' ); |
| 126 |
} else if ( 'false' == paletteInput ) { |
| 127 |
palette = false; |
| 128 |
} else { |
| 129 |
palette = true; |
| 130 |
} |
| 131 |
|
| 132 |
// Set up the options that we'll pass to wpColorPicker(). |
| 133 |
colorPickerOptions = { |
| 134 |
change: function( event, ui ) { |
| 135 |
var key, value, alpha, $transparency; |
| 136 |
|
| 137 |
key = $control.attr( 'data-customize-setting-link' ); |
| 138 |
value = $control.wpColorPicker( 'color' ); |
| 139 |
|
| 140 |
// Set the opacity value on the slider handle when the default color button is clicked. |
| 141 |
if ( defaultColor == value ) { |
| 142 |
alpha = acp_get_alpha_value_from_color( value ); |
| 143 |
$alphaSlider.find( '.ui-slider-handle' ).text( alpha ); |
| 144 |
} |
| 145 |
|
| 146 |
// Send ajax request to wp.customize to trigger the Save action. |
| 147 |
wp.customize( |
| 148 |
key, function( obj ) { |
| 149 |
obj.set( value ); |
| 150 |
} |
| 151 |
); |
| 152 |
|
| 153 |
$transparency = $container.find( '.transparency' ); |
| 154 |
|
| 155 |
// Always show the background color of the opacity slider at 100% opacity. |
| 156 |
$transparency.css( 'background-color', ui.color.toString( 'no-alpha' ) ); |
| 157 |
}, |
| 158 |
palettes: palette // Use the passed in palette. |
| 159 |
}; |
| 160 |
|
| 161 |
// Create the colorpicker. |
| 162 |
$control.wpColorPicker( colorPickerOptions ); |
| 163 |
|
| 164 |
$container = $control.parents( '.wp-picker-container:first' ); |
| 165 |
|
| 166 |
// Insert our opacity slider. |
| 167 |
$( |
| 168 |
'<div class="alpha-color-picker-container">' + |
| 169 |
'<div class="min-click-zone click-zone"></div>' + |
| 170 |
'<div class="max-click-zone click-zone"></div>' + |
| 171 |
'<div class="alpha-slider"></div>' + |
| 172 |
'<div class="transparency"></div>' + |
| 173 |
'</div>' |
| 174 |
).appendTo( $container.find( '.wp-picker-holder' ) ); |
| 175 |
|
| 176 |
$alphaSlider = $container.find( '.alpha-slider' ); |
| 177 |
|
| 178 |
// If starting value is in format RGBa, grab the alpha channel. |
| 179 |
alphaVal = acp_get_alpha_value_from_color( startingColor ); |
| 180 |
|
| 181 |
// Set up jQuery UI slider() options. |
| 182 |
sliderOptions = { |
| 183 |
create: function( event, ui ) { |
| 184 |
var value = $( this ).slider( 'value' ); |
| 185 |
|
| 186 |
// Set up initial values. |
| 187 |
$( this ).find( '.ui-slider-handle' ).text( value ); |
| 188 |
$( this ).siblings( '.transparency ' ).css( 'background-color', startingColor ); |
| 189 |
}, |
| 190 |
value: alphaVal, |
| 191 |
range: 'max', |
| 192 |
step: 1, |
| 193 |
min: 0, |
| 194 |
max: 100, |
| 195 |
animate: 300 |
| 196 |
}; |
| 197 |
|
| 198 |
// Initialize jQuery UI slider with our options. |
| 199 |
$alphaSlider.slider( sliderOptions ); |
| 200 |
|
| 201 |
// Maybe show the opacity on the handle. |
| 202 |
if ( 'true' == showOpacity ) { |
| 203 |
$alphaSlider.find( '.ui-slider-handle' ).addClass( 'show-opacity' ); |
| 204 |
} |
| 205 |
|
| 206 |
// Bind event handlers for the click zones. |
| 207 |
$container.find( '.min-click-zone' ).on( |
| 208 |
'click', function() { |
| 209 |
acp_update_alpha_value_on_color_control( 0, $control, $alphaSlider, true ); |
| 210 |
} |
| 211 |
); |
| 212 |
$container.find( '.max-click-zone' ).on( |
| 213 |
'click', function() { |
| 214 |
acp_update_alpha_value_on_color_control( 100, $control, $alphaSlider, true ); |
| 215 |
} |
| 216 |
); |
| 217 |
|
| 218 |
// Bind event handler for clicking on a palette color. |
| 219 |
$container.find( '.iris-palette' ).on( |
| 220 |
'click', function() { |
| 221 |
var color, alpha; |
| 222 |
|
| 223 |
color = $( this ).css( 'background-color' ); |
| 224 |
alpha = acp_get_alpha_value_from_color( color ); |
| 225 |
|
| 226 |
acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ); |
| 227 |
|
| 228 |
// Sometimes Iris doesn't set a perfect background-color on the palette, |
| 229 |
// for example rgba(20, 80, 100, 0.3) becomes rgba(20, 80, 100, 0.298039). |
| 230 |
// To compensante for this we round the opacity value on RGBa colors here |
| 231 |
// and save it a second time to the color picker object. |
| 232 |
if ( alpha != 100 ) { |
| 233 |
color = color.replace( /[^,]+(?=\))/, ( alpha / 100 ).toFixed( 2 ) ); |
| 234 |
} |
| 235 |
|
| 236 |
$control.wpColorPicker( 'color', color ); |
| 237 |
} |
| 238 |
); |
| 239 |
|
| 240 |
// Bind event handler for clicking on the 'Clear' button. |
| 241 |
$container.find( '.button.wp-picker-clear' ).on( |
| 242 |
'click', function() { |
| 243 |
var key = $control.attr( 'data-customize-setting-link' ); |
| 244 |
|
| 245 |
// The #fff color is delibrate here. This sets the color picker to white instead of the |
| 246 |
// defult black, which puts the color picker in a better place to visually represent empty. |
| 247 |
$control.wpColorPicker( 'color', '' ); |
| 248 |
|
| 249 |
// Set the actual option value to empty string. |
| 250 |
wp.customize( |
| 251 |
key, function( obj ) { |
| 252 |
obj.set( '' ); |
| 253 |
} |
| 254 |
); |
| 255 |
|
| 256 |
acp_update_alpha_value_on_alpha_slider( 100, $alphaSlider ); |
| 257 |
} |
| 258 |
); |
| 259 |
|
| 260 |
// Bind event handler for clicking on the 'Default' button. |
| 261 |
$container.find( '.button.wp-picker-default' ).on( |
| 262 |
'click', function() { |
| 263 |
var alpha = acp_get_alpha_value_from_color( defaultColor ); |
| 264 |
|
| 265 |
acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ); |
| 266 |
} |
| 267 |
); |
| 268 |
|
| 269 |
// Bind event handler for typing or pasting into the input. |
| 270 |
$control.on( |
| 271 |
'input', function() { |
| 272 |
var value = $( this ).val(); |
| 273 |
var alpha = acp_get_alpha_value_from_color( value ); |
| 274 |
|
| 275 |
acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ); |
| 276 |
} |
| 277 |
); |
| 278 |
|
| 279 |
// Update all the things when the slider is interacted with. |
| 280 |
$alphaSlider.slider().on( |
| 281 |
'slide', function( event, ui ) { |
| 282 |
var alpha = parseFloat( ui.value ) / 100.0; |
| 283 |
|
| 284 |
acp_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, false ); |
| 285 |
|
| 286 |
// Change value shown on slider handle. |
| 287 |
$( this ).find( '.ui-slider-handle' ).text( ui.value ); |
| 288 |
} |
| 289 |
); |
| 290 |
|
| 291 |
} |
| 292 |
); |
| 293 |
} |
| 294 |
); |
