: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
* jQuery MiniColors: A tiny color picker built on jQuery
* Copyright: Cory LaViska for A Beautiful Site, LLC
* Contributions and bug reports: https://github.com/claviska/jquery-minicolors
* @license: http://opensource.org/licenses/MIT
if(jQuery) (function($) {
animationEasing: 'swing',
minicolors: function(method, data) {
$(this).each( function() {
if( data === undefined ) {
return $(this).attr('data-opacity');
$(this).each( function() {
updateFromInput($(this).attr('data-opacity', data));
// Get an RGB(A) object based on the current color/opacity
return rgbObject($(this), method === 'rgbaObject');
// Get an RGB(A) string based on the current color/opacity
return rgbString($(this), method === 'rgbaString');
// Get/set settings on the fly
if( data === undefined ) {
return $(this).data('minicolors-settings');
$(this).each( function() {
var settings = $(this).data('minicolors-settings') || {};
$(this).minicolors($.extend(true, settings, data));
// Get/set the hex color value
if( data === undefined ) {
$(this).each( function() {
updateFromInput($(this).val(data));
// Initializes the control
if( method !== 'create' ) data = method;
$(this).each( function() {
// Initialize input elements
function init(input, settings) {
var minicolors = $('<div class="minicolors" />'),
defaults = $.minicolors.defaults;
// Do nothing if already initialized
if( input.data('minicolors-initialized') ) return;
settings = $.extend(true, {}, defaults, settings);
.addClass('minicolors-theme-' + settings.theme)
.toggleClass('minicolors-with-opacity', settings.opacity)
.toggleClass('minicolors-no-data-uris', settings.dataUris !== true);
if( settings.position !== undefined ) {
$.each(settings.position.split(' '), function() {
minicolors.addClass('minicolors-position-' + this);
.addClass('minicolors-input')
.data('minicolors-initialized', false)
.data('minicolors-settings', settings)
'<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
'<div class="minicolors-slider minicolors-sprite">' +
'<div class="minicolors-picker"></div>' +
'<div class="minicolors-opacity-slider minicolors-sprite">' +
'<div class="minicolors-picker"></div>' +
'<div class="minicolors-grid minicolors-sprite">' +
'<div class="minicolors-grid-inner"></div>' +
'<div class="minicolors-picker"><div></div></div>' +
input.after('<span class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></span>');
input.next('.minicolors-swatch').on('click', function(event) {
// Prevent text selection in IE
input.parent().find('.minicolors-panel').on('selectstart', function() { return false; }).end();
if( settings.inline ) input.parent().addClass('minicolors-inline');
updateFromInput(input, false);
input.data('minicolors-initialized', true);
// Returns the input back to its original state
function destroy(input) {
var minicolors = input.parent();
// Revert the input element
.removeData('minicolors-initialized')
.removeData('minicolors-settings')
.removeClass('minicolors-input');
// Remove the wrap and destroy whatever remains
minicolors.before(input).remove();
// Shows the specified dropdown panel
var minicolors = input.parent(),
panel = minicolors.find('.minicolors-panel'),
settings = input.data('minicolors-settings');
// Do nothing if uninitialized, disabled, inline, or already open
if( !input.data('minicolors-initialized') ||
input.prop('disabled') ||
minicolors.hasClass('minicolors-inline') ||
minicolors.hasClass('minicolors-focus')
minicolors.addClass('minicolors-focus');
.fadeIn(settings.showSpeed, function() {
if( settings.show ) settings.show.call(input.get(0));
// Hides all dropdown panels
$('.minicolors-focus').each( function() {
var minicolors = $(this),
input = minicolors.find('.minicolors-input'),
panel = minicolors.find('.minicolors-panel'),
settings = input.data('minicolors-settings');
panel.fadeOut(settings.hideSpeed, function() {
if( settings.hide ) settings.hide.call(input.get(0));
minicolors.removeClass('minicolors-focus');
// Moves the selected picker
function move(target, event, animate) {
var input = target.parents('.minicolors').find('.minicolors-input'),
settings = input.data('minicolors-settings'),
picker = target.find('[class$=-picker]'),
offsetX = target.offset().left,
offsetY = target.offset().top,
x = Math.round(event.pageX - offsetX),
y = Math.round(event.pageY - offsetY),
duration = animate ? settings.animationSpeed : 0,
if( event.originalEvent.changedTouches ) {
x = event.originalEvent.changedTouches[0].pageX - offsetX;
y = event.originalEvent.changedTouches[0].pageY - offsetY;
// Constrain picker to its container
if( x > target.width() ) x = target.width();
if( y > target.height() ) y = target.height();
// Constrain color wheel values to the wheel
if( target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid') ) {
r = Math.sqrt(wx * wx + wy * wy);
phi = Math.atan2(wy, wx);
if( phi < 0 ) phi += Math.PI * 2;
x = 75 - (75 * Math.cos(phi));
y = 75 - (75 * Math.sin(phi));
if( target.is('.minicolors-grid') ) {
}, duration, settings.animationEasing, function() {
updateFromControl(input, target);
}, duration, settings.animationEasing, function() {
updateFromControl(input, target);
// Sets the input based on the color picker values
function updateFromControl(input, target) {
function getCoords(picker, container) {
if( !picker.length || !container ) return null;
left = picker.offset().left;
top = picker.offset().top;
x: left - container.offset().left + (picker.outerWidth() / 2),
y: top - container.offset().top + (picker.outerHeight() / 2)
var hue, saturation, brightness, x, y, r, phi,
opacity = input.attr('data-opacity'),
minicolors = input.parent(),
settings = input.data('minicolors-settings'),
swatch = minicolors.find('.minicolors-swatch'),
grid = minicolors.find('.minicolors-grid'),
slider = minicolors.find('.minicolors-slider'),
opacitySlider = minicolors.find('.minicolors-opacity-slider'),
gridPicker = grid.find('[class$=-picker]'),
sliderPicker = slider.find('[class$=-picker]'),
opacityPicker = opacitySlider.find('[class$=-picker]'),
gridPos = getCoords(gridPicker, grid),
sliderPos = getCoords(sliderPicker, slider),
opacityPos = getCoords(opacityPicker, opacitySlider);
if( target.is('.minicolors-grid, .minicolors-slider') ) {
switch(settings.control) {
// Calculate hue, saturation, and brightness
x = (grid.width() / 2) - gridPos.x;
y = (grid.height() / 2) - gridPos.y;
r = Math.sqrt(x * x + y * y);
if( phi < 0 ) phi += Math.PI * 2;
gridPos.x = 69 - (75 * Math.cos(phi));
gridPos.y = 69 - (75 * Math.sin(phi));
saturation = keepWithin(r / 0.75, 0, 100);
hue = keepWithin(phi * 180 / Math.PI, 0, 360);
brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
// Calculate hue, saturation, and brightness
hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));
minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);
// Calculate hue, saturation, and brightness
hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));
// Calculate hue, saturation, and brightness
hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);
saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
input.val( convertCase(hex, settings.letterCase) );
if( target.is('.minicolors-opacity-slider') ) {
opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
if( settings.opacity ) input.attr('data-opacity', opacity);
swatch.find('SPAN').css({
doChange(input, hex, opacity);
// Sets the color picker values from the input
function updateFromInput(input, preserveInputValue) {
minicolors = input.parent(),
settings = input.data('minicolors-settings'),
swatch = minicolors.find('.minicolors-swatch'),
grid = minicolors.find('.minicolors-grid'),
slider = minicolors.find('.minicolors-slider'),
opacitySlider = minicolors.find('.minicolors-opacity-slider'),
gridPicker = grid.find('[class$=-picker]'),
sliderPicker = slider.find('[class$=-picker]'),
opacityPicker = opacitySlider.find('[class$=-picker]');
// Determine hex/HSB values
hex = convertCase(parseHex(input.val(), true), settings.letterCase);
hex = convertCase(parseHex(settings.defaultValue, true), settings.letterCase);
if( !preserveInputValue ) input.val(hex);
// Determine opacity value
// Get from data-opacity attribute and keep within 0-1 range
opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
if( isNaN(opacity) ) opacity = 1;
input.attr('data-opacity', opacity);
swatch.find('SPAN').css('opacity', opacity);