| 1 |
/** |
| 2 |
* wp-color-picker-alpha |
| 3 |
* |
| 4 |
* Version 1.0 |
| 5 |
* Copyright (c) 2017 Elegant Themes. |
| 6 |
* Licensed under the GPLv2 license. |
| 7 |
* |
| 8 |
* Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker |
| 9 |
* Only run in input and is defined data alpha in true |
| 10 |
* Add custom colorpicker UI |
| 11 |
* |
| 12 |
* This is modified version made by Elegant Themes based on the work covered by |
| 13 |
* the following copyright: |
| 14 |
* |
| 15 |
* wp-color-picker-alpha Version: 1.1 |
| 16 |
* https://github.com/23r9i0/wp-color-picker-alpha |
| 17 |
* Copyright (c) 2015 Sergio P.A. (23r9i0). |
| 18 |
* Licensed under the GPLv2 license. |
| 19 |
*/ |
| 20 |
(function ($) { |
| 21 |
// Variable for some backgrounds |
| 22 |
var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg=='; |
| 23 |
// html stuff for wpColorPicker copy of the original color-picker.js |
| 24 |
var _before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>', |
| 25 |
_after = '<div class="wp-picker-holder" />', |
| 26 |
_wrap = '<div class="wp-picker-container" />', |
| 27 |
_button = '<input type="button" class="button button-small button-clear hidden" />', |
| 28 |
_wrappingLabel = '<label></label>', |
| 29 |
_wrappingLabelText = '<span class="screen-reader-text"></span>', |
| 30 |
_close_button = '<button type="button" class="button button-confirm" />', |
| 31 |
_close_button_icon = '<div style="fill: #3EF400; width: 25px; height: 25px; margin-top: -1px;"><svg viewBox="0 0 28 28" preserveAspectRatio="xMidYMid meet" shapeRendering="geometricPrecision"><g><path d="M19.203 9.21a.677.677 0 0 0-.98 0l-5.71 5.9-2.85-2.95a.675.675 0 0 0-.98 0l-1.48 1.523a.737.737 0 0 0 0 1.015l4.82 4.979a.677.677 0 0 0 .98 0l7.68-7.927a.737.737 0 0 0 0-1.015l-1.48-1.525z" fillRule="evenodd" /></g></svg></div>'; |
| 32 |
|
| 33 |
/** |
| 34 |
* Overwrite Color |
| 35 |
* for enable support rbga |
| 36 |
*/ |
| 37 |
Color.fn.toString = function () { |
| 38 |
if (this._alpha < 1) |
| 39 |
return this.toCSS('rgba', this._alpha).replace(/\s+/g, ''); |
| 40 |
|
| 41 |
var hex = parseInt(this._color, 10).toString(16); |
| 42 |
|
| 43 |
if (this.error) |
| 44 |
return ''; |
| 45 |
|
| 46 |
if (hex.length < 6) { |
| 47 |
for (var i = 6 - hex.length - 1; i >= 0; i--) { |
| 48 |
hex = '0' + hex; |
| 49 |
} |
| 50 |
} |
| 51 |
|
| 52 |
return '#' + hex; |
| 53 |
}; |
| 54 |
|
| 55 |
/** |
| 56 |
* Overwrite wpColorPicker |
| 57 |
*/ |
| 58 |
$.widget('wp.wpColorPicker', $.wp.wpColorPicker, { |
| 59 |
_create: function () { |
| 60 |
// Return early if Iris support is missing. |
| 61 |
if (!$.support.iris) { |
| 62 |
return; |
| 63 |
} |
| 64 |
|
| 65 |
var self = this, |
| 66 |
el = self.element; |
| 67 |
|
| 68 |
// Override default options with options bound to the element. |
| 69 |
$.extend(self.options, el.data()); |
| 70 |
|
| 71 |
// Create a color picker which only allows adjustments to the hue. |
| 72 |
if (self.options.type === 'hue') { |
| 73 |
return self._createHueOnly(); |
| 74 |
} |
| 75 |
|
| 76 |
// Bind the close event. |
| 77 |
self.close = $.proxy(self.close, self); |
| 78 |
|
| 79 |
self.initialValue = el.val(); |
| 80 |
|
| 81 |
// Add a CSS class to the input field. |
| 82 |
el.addClass('wp-color-picker'); |
| 83 |
|
| 84 |
/* |
| 85 |
* Check if there's already a wrapping label, e.g. in the Customizer. |
| 86 |
* If there's no label, add a default one to match the Customizer template. |
| 87 |
*/ |
| 88 |
if (!el.parent('label').length) { |
| 89 |
// Wrap the input field in the default label. |
| 90 |
el.wrap(_wrappingLabel); |
| 91 |
// Insert the default label text. |
| 92 |
self.wrappingLabelText = $(_wrappingLabelText) |
| 93 |
.insertBefore(el) |
| 94 |
.text(wpColorPickerL10n.defaultLabel); |
| 95 |
} |
| 96 |
|
| 97 |
/* |
| 98 |
* At this point, either it's the standalone version or the Customizer |
| 99 |
* one, we have a wrapping label to use as hook in the DOM, let's store it. |
| 100 |
*/ |
| 101 |
self.wrappingLabel = el.parent(); |
| 102 |
|
| 103 |
// Wrap the label in the main wrapper. |
| 104 |
self.wrappingLabel.wrap(_wrap); |
| 105 |
// Store a reference to the main wrapper. |
| 106 |
self.wrap = self.wrappingLabel.parent(); |
| 107 |
// Set up the toggle button and insert it before the wrapping label. |
| 108 |
self.toggler = $(_before) |
| 109 |
.insertBefore(self.wrappingLabel) |
| 110 |
.css({backgroundColor: self.initialValue}) |
| 111 |
.attr('title', wpColorPickerL10n.pick) |
| 112 |
.addClass('et-wp-color-result-updated'); |
| 113 |
|
| 114 |
// some strings were changed in recent colorpicker update, but we still need to use legacy strings in some places |
| 115 |
if (typeof et_pb_color_picker_strings !== 'undefined') { |
| 116 |
self.toggler.attr('data-legacy_title', et_pb_color_picker_strings.legacy_pick).attr('data-current', et_pb_color_picker_strings.legacy_current); |
| 117 |
} |
| 118 |
|
| 119 |
// Set the toggle button span element text. |
| 120 |
self.toggler.find('.wp-color-result-text').text(wpColorPickerL10n.pick); |
| 121 |
// Set up the Iris container and insert it after the wrapping label. |
| 122 |
self.pickerContainer = $(_after).insertAfter(self.wrappingLabel); |
| 123 |
// Store a reference to the Clear/Default button. |
| 124 |
self.button = $(_button); |
| 125 |
self.close_button = $(_close_button).html(_close_button_icon); |
| 126 |
|
| 127 |
if (self.options.diviColorpicker) { |
| 128 |
el.after(self.close_button); |
| 129 |
} |
| 130 |
|
| 131 |
// Set up the Clear/Default button. |
| 132 |
if (self.options.defaultColor) { |
| 133 |
self.button |
| 134 |
.addClass('wp-picker-default') |
| 135 |
.val(wpColorPickerL10n.defaultString) |
| 136 |
.attr('aria-label', wpColorPickerL10n.defaultAriaLabel); |
| 137 |
} else { |
| 138 |
self.button |
| 139 |
.addClass('wp-picker-clear') |
| 140 |
.val(wpColorPickerL10n.clear) |
| 141 |
.attr('aria-label', wpColorPickerL10n.clearAriaLabel); |
| 142 |
} |
| 143 |
|
| 144 |
// Wrap the wrapping label in its wrapper and append the Clear/Default button. |
| 145 |
self.wrappingLabel |
| 146 |
.wrap('<span class="wp-picker-input-wrap hidden" />') |
| 147 |
.after(self.button); |
| 148 |
|
| 149 |
/* |
| 150 |
* The input wrapper now contains the label+input+Clear/Default button. |
| 151 |
* Store a reference to the input wrapper: we'll use this to toggle |
| 152 |
* the controls visibility. |
| 153 |
*/ |
| 154 |
self.inputWrapper = el.closest('.wp-picker-input-wrap'); |
| 155 |
|
| 156 |
/* |
| 157 |
* CSS for support < 4.9 |
| 158 |
*/ |
| 159 |
self.toggler.css({ |
| 160 |
'height': '24px', |
| 161 |
'margin': '0 6px 6px 0', |
| 162 |
'padding': '0 0 0 30px', |
| 163 |
'font-size': '11px' |
| 164 |
}); |
| 165 |
|
| 166 |
|
| 167 |
el.iris({ |
| 168 |
target: self.pickerContainer, |
| 169 |
hide: self.options.hide, |
| 170 |
width: self.options.width, |
| 171 |
height: self.options.height, |
| 172 |
mode: self.options.mode, |
| 173 |
palettes: self.options.palettes, |
| 174 |
diviColorpicker: self.options.diviColorpicker, |
| 175 |
change: function (event, ui) { |
| 176 |
if (self.options.alpha) { |
| 177 |
self.toggler.css({ |
| 178 |
'background-image': 'url(' + image + ')', |
| 179 |
'position': 'relative' |
| 180 |
}); |
| 181 |
if (self.toggler.find('span.color-alpha').length == 0) { |
| 182 |
self.toggler.append('<span class="color-alpha" />'); |
| 183 |
} |
| 184 |
self.toggler.find('span.color-alpha').css({ |
| 185 |
'width': '100%', |
| 186 |
'height': '100%', |
| 187 |
'position': 'absolute', |
| 188 |
'top': 0, |
| 189 |
'left': 0, |
| 190 |
'border-top-left-radius': '3px', |
| 191 |
'border-bottom-left-radius': '3px', |
| 192 |
'background': ui.color.toString() |
| 193 |
}); |
| 194 |
} else { |
| 195 |
self.toggler.css({backgroundColor: ui.color.toString()}); |
| 196 |
} |
| 197 |
|
| 198 |
// check for a custom cb |
| 199 |
if ($.isFunction(self.options.change)) { |
| 200 |
self.options.change.call(this, event, ui); |
| 201 |
} |
| 202 |
} |
| 203 |
}); |
| 204 |
|
| 205 |
el.val(self.initialValue); |
| 206 |
self._addListeners(); |
| 207 |
|
| 208 |
// Force the color picker to always be closed on initial load. |
| 209 |
if (!self.options.hide) { |
| 210 |
self.toggler.click(); |
| 211 |
} |
| 212 |
}, |
| 213 |
_addListeners: function () { |
| 214 |
var self = this; |
| 215 |
|
| 216 |
// Prevent any clicks inside this widget from leaking to the top and closing it. |
| 217 |
self.wrap.on('click.wpcolorpicker', function (event) { |
| 218 |
event.stopPropagation(); |
| 219 |
return false; |
| 220 |
}); |
| 221 |
|
| 222 |
self.toggler.click(function () { |
| 223 |
if (self.toggler.hasClass('wp-picker-open')) { |
| 224 |
self.close(); |
| 225 |
} else { |
| 226 |
self.open(); |
| 227 |
} |
| 228 |
}); |
| 229 |
|
| 230 |
self.element.on('change', function (event) { |
| 231 |
// Empty or Error = clear |
| 232 |
if ($(this).val() === '' || self.element.hasClass('iris-error')) { |
| 233 |
if (self.options.alpha) { |
| 234 |
self.toggler.find('span.color-alpha').css('backgroundColor', ''); |
| 235 |
} else { |
| 236 |
self.toggler.css('backgroundColor', ''); |
| 237 |
} |
| 238 |
|
| 239 |
// fire clear callback if we have one |
| 240 |
if ($.isFunction(self.options.clear)) |
| 241 |
self.options.clear.call(this, event); |
| 242 |
} |
| 243 |
}); |
| 244 |
|
| 245 |
self.button.on('click', function (event) { |
| 246 |
if ($(this).hasClass('wp-picker-clear')) { |
| 247 |
self.element.val(''); |
| 248 |
if (self.options.alpha) { |
| 249 |
self.toggler.find('span.color-alpha').css('backgroundColor', ''); |
| 250 |
} else { |
| 251 |
self.toggler.css('backgroundColor', ''); |
| 252 |
} |
| 253 |
|
| 254 |
if ($.isFunction(self.options.clear)) |
| 255 |
self.options.clear.call(this, event); |
| 256 |
|
| 257 |
} else if ($(this).hasClass('wp-picker-default')) { |
| 258 |
self.element.val(self.options.defaultColor).change(); |
| 259 |
} |
| 260 |
}); |
| 261 |
|
| 262 |
self.close_button.click(function (event) { |
| 263 |
event.preventDefault(); |
| 264 |
self.close(); |
| 265 |
}); |
| 266 |
}, |
| 267 |
}); |
| 268 |
|
| 269 |
/** |
| 270 |
* Overwrite iris |
| 271 |
*/ |
| 272 |
$.widget('a8c.iris', $.a8c.iris, { |
| 273 |
_create: function () { |
| 274 |
this._super(); |
| 275 |
|
| 276 |
// Global option for check is mode rbga is enabled |
| 277 |
this.options.alpha = this.element.data('alpha') || false; |
| 278 |
|
| 279 |
// Is not input disabled |
| 280 |
if (!this.element.is(':input')) { |
| 281 |
this.options.alpha = false; |
| 282 |
} |
| 283 |
|
| 284 |
if (typeof this.options.alpha !== 'undefined' && this.options.alpha) { |
| 285 |
var self = this, |
| 286 |
el = self.element, |
| 287 |
_html = '<div class="iris-strip iris-slider iris-alpha-slider"><div class="iris-slider-offset iris-slider-offset-alpha"></div></div>', |
| 288 |
aContainer = $(_html).appendTo(self.picker.find('.iris-picker-inner')), |
| 289 |
aSlider = aContainer.find('.iris-slider-offset-alpha'), |
| 290 |
controls = { |
| 291 |
aContainer: aContainer, |
| 292 |
aSlider: aSlider |
| 293 |
}; |
| 294 |
|
| 295 |
// Set default width for input reset |
| 296 |
self.options.defaultWidth = el.width(); |
| 297 |
|
| 298 |
// Update width for input |
| 299 |
if (self._color._alpha < 1 || self._color.toString().indexOf('rgb') != 1) { |
| 300 |
el.width(parseInt(self.options.defaultWidth + 100)); |
| 301 |
} |
| 302 |
|
| 303 |
// Push new controls |
| 304 |
$.each(controls, function (k, v) { |
| 305 |
self.controls[k] = v; |
| 306 |
}); |
| 307 |
|
| 308 |
// Change size strip and add margin for sliders |
| 309 |
self.controls.square.css({'margin-right': '0'}); |
| 310 |
var emptyWidth = (self.picker.width() - self.controls.square.width() - 20), |
| 311 |
stripsMargin = emptyWidth / 6, |
| 312 |
stripsWidth = (emptyWidth / 2) - stripsMargin; |
| 313 |
|
| 314 |
$.each(['aContainer', 'strip'], function (k, v) { |
| 315 |
self.controls[v].width(stripsWidth).css({'margin-left': stripsMargin + 'px'}); |
| 316 |
}); |
| 317 |
|
| 318 |
// Add new slider |
| 319 |
self._initControls(); |
| 320 |
|
| 321 |
// For updated widget |
| 322 |
// 1326 |
| 323 |
//self._change(); |
| 324 |
} |
| 325 |
}, |
| 326 |
_initControls: function () { |
| 327 |
this._super(); |
| 328 |
|
| 329 |
if (this.options.alpha) { |
| 330 |
var self = this, |
| 331 |
controls = self.controls; |
| 332 |
|
| 333 |
controls.aSlider.slider({ |
| 334 |
orientation: 'vertical', |
| 335 |
min: 0, |
| 336 |
max: 100, |
| 337 |
step: 1, |
| 338 |
value: parseInt(self._color._alpha * 100), |
| 339 |
slide: function (event, ui) { |
| 340 |
// Update alpha value |
| 341 |
self._color._alpha = parseFloat(ui.value / 100); |
| 342 |
self._change.apply(self, arguments); |
| 343 |
} |
| 344 |
}); |
| 345 |
} |
| 346 |
}, |
| 347 |
_change: function () { |
| 348 |
this._super(); |
| 349 |
var self = this, |
| 350 |
el = self.element; |
| 351 |
|
| 352 |
if (this.options.alpha) { |
| 353 |
var controls = self.controls, |
| 354 |
alpha = parseInt(self._color._alpha * 100), |
| 355 |
color = self._color.toRgb(), |
| 356 |
gradient = [ |
| 357 |
'rgb(' + color.r + ',' + color.g + ',' + color.b + ') 0%', |
| 358 |
'rgba(' + color.r + ',' + color.g + ',' + color.b + ', 0) 100%' |
| 359 |
], |
| 360 |
defaultWidth = self.options.defaultWidth, |
| 361 |
target = self.picker.closest('.wp-picker-container').find('.wp-color-result'); |
| 362 |
|
| 363 |
// Generate background slider alpha, only for CSS3 old browser fuck!! :) |
| 364 |
controls.aContainer.css({'background': 'linear-gradient(to bottom, ' + gradient.join(', ') + '), url(' + image + ')'}); |
| 365 |
|
| 366 |
if (target.hasClass('wp-picker-open')) { |
| 367 |
// Update alpha value |
| 368 |
controls.aSlider.slider('value', alpha); |
| 369 |
|
| 370 |
/** |
| 371 |
* Disabled change opacity in default slider Saturation ( only is alpha enabled ) |
| 372 |
* and change input width for view all value |
| 373 |
*/ |
| 374 |
if (self._color._alpha < 1) { |
| 375 |
var style = controls.strip.attr('style').replace(/rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g, 'rgb($1$3$5)'); |
| 376 |
|
| 377 |
controls.strip.attr('style', style); |
| 378 |
|
| 379 |
el.width(parseInt(defaultWidth + 100)); |
| 380 |
} else { |
| 381 |
el.width(defaultWidth); |
| 382 |
} |
| 383 |
} |
| 384 |
} |
| 385 |
|
| 386 |
var reset = el.data('reset-alpha') || false; |
| 387 |
if (reset) { |
| 388 |
self.picker.find('.iris-palette-container').on('click.palette', '.iris-palette', function () { |
| 389 |
self._color._alpha = 1; |
| 390 |
self.active = 'external'; |
| 391 |
self._change(); |
| 392 |
}); |
| 393 |
} |
| 394 |
}, |
| 395 |
_addInputListeners: function (input) { |
| 396 |
var self = this, |
| 397 |
debounceTimeout = 700, // originally set to 100, but some user perceive it as "jumps to random colors at third digit" |
| 398 |
callback = function (event) { |
| 399 |
var color = new Color(input.val()), |
| 400 |
val = input.val(); |
| 401 |
|
| 402 |
input.removeClass('iris-error'); |
| 403 |
// we gave a bad color |
| 404 |
if (color.error) { |
| 405 |
// don't error on an empty input |
| 406 |
if (val !== '') { |
| 407 |
input.addClass('iris-error'); |
| 408 |
} |
| 409 |
} else { |
| 410 |
if (color.toString() !== self._color.toString()) { |
| 411 |
// let's not do this on keyup for hex shortcodes |
| 412 |
if (!(event.type === 'keyup' && val.match(/^[0-9a-fA-F]{3}$/))) { |
| 413 |
self._setOption('color', color.toString()); |
| 414 |
} |
| 415 |
} |
| 416 |
} |
| 417 |
}; |
| 418 |
|
| 419 |
input.on('change', callback).on('keyup', self._debounce(callback, debounceTimeout)); |
| 420 |
|
| 421 |
// If we initialized hidden, show on first focus. The rest is up to you. |
| 422 |
if (self.options.hide) { |
| 423 |
input.one('focus', function () { |
| 424 |
self.show(); |
| 425 |
}); |
| 426 |
} |
| 427 |
}, |
| 428 |
_dimensions: function (reset) { |
| 429 |
// whatever size |
| 430 |
var self = this, |
| 431 |
opts = self.options, |
| 432 |
controls = self.controls, |
| 433 |
square = controls.square, |
| 434 |
strip = self.picker.find('.iris-strip'), |
| 435 |
squareWidth = '77.5%', |
| 436 |
stripWidth = '12%', |
| 437 |
totalPadding = 20, |
| 438 |
innerWidth = opts.border ? opts.width - totalPadding : opts.width, |
| 439 |
controlsHeight, |
| 440 |
paletteCount = $.isArray(opts.palettes) ? opts.palettes.length : self._palettes.length, |
| 441 |
paletteMargin, paletteWidth, paletteContainerWidth; |
| 442 |
|
| 443 |
if (reset) { |
| 444 |
square.css('width', ''); |
| 445 |
strip.css('width', ''); |
| 446 |
self.picker.css({width: '', height: ''}); |
| 447 |
} |
| 448 |
|
| 449 |
squareWidth = innerWidth * (parseFloat(squareWidth) / 100); |
| 450 |
stripWidth = innerWidth * (parseFloat(stripWidth) / 100); |
| 451 |
controlsHeight = opts.border ? squareWidth + totalPadding : squareWidth; |
| 452 |
|
| 453 |
if (opts.diviColorpicker) { |
| 454 |
square.width(opts.width).height(opts.height); |
| 455 |
controlsHeight = opts.height; |
| 456 |
} else { |
| 457 |
square.width(squareWidth).height(squareWidth); |
| 458 |
} |
| 459 |
|
| 460 |
strip.height(squareWidth).width(stripWidth); |
| 461 |
self.picker.css({width: opts.width, height: controlsHeight}); |
| 462 |
|
| 463 |
if (!opts.palettes) { |
| 464 |
return self.picker.css('paddingBottom', ''); |
| 465 |
} |
| 466 |
|
| 467 |
// single margin at 2% |
| 468 |
paletteMargin = squareWidth * 2 / 100; |
| 469 |
paletteContainerWidth = squareWidth - ((paletteCount - 1) * paletteMargin); |
| 470 |
paletteWidth = paletteContainerWidth / paletteCount; |
| 471 |
self.picker.find('.iris-palette').each(function (i) { |
| 472 |
var margin = i === 0 ? 0 : paletteMargin; |
| 473 |
$(this).css({ |
| 474 |
width: paletteWidth, |
| 475 |
height: paletteWidth, |
| 476 |
marginLeft: margin |
| 477 |
}); |
| 478 |
}); |
| 479 |
self.picker.css('paddingBottom', paletteWidth + paletteMargin); |
| 480 |
strip.height(paletteWidth + paletteMargin + squareWidth); |
| 481 |
} |
| 482 |
}); |
| 483 |
}(jQuery)); |
| 484 |
|
