308 lines
10 KiB
JavaScript
308 lines
10 KiB
JavaScript
|
/**
|
||
|
|
* Really Simple Color Picker in jQuery
|
||
|
|
*
|
||
|
|
* Licensed under the MIT (MIT-LICENSE.txt) licenses.
|
||
|
|
*
|
||
|
|
* Copyright (c) 2008 Lakshan Perera (www.laktek.com)
|
||
|
|
* Daniel Lacy (daniellacy.com)
|
||
|
|
*
|
||
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||
|
|
* of this software and associated documentation files (the "Software"), to
|
||
|
|
* deal in the Software without restriction, including without limitation the
|
||
|
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||
|
|
* sell copies of the Software, and to permit persons to whom the Software is
|
||
|
|
* furnished to do so, subject to the following conditions:
|
||
|
|
*
|
||
|
|
* The above copyright notice and this permission notice shall be included in
|
||
|
|
* all copies or substantial portions of the Software.
|
||
|
|
*
|
||
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||
|
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||
|
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||
|
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||
|
|
* IN THE SOFTWARE.
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function ($) {
|
||
|
|
/**
|
||
|
|
* Create a couple private variables.
|
||
|
|
**/
|
||
|
|
var selectorOwner,
|
||
|
|
activePalette,
|
||
|
|
cItterate = 0,
|
||
|
|
templates = {
|
||
|
|
control : $('<div class="colorPicker-picker"> </div>'),
|
||
|
|
palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'),
|
||
|
|
swatch : $('<div class="colorPicker-swatch"> </div>'),
|
||
|
|
hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
|
||
|
|
hexField: $('<input type="text" id="colorPicker_hex" />')
|
||
|
|
},
|
||
|
|
transparent = "transparent",
|
||
|
|
lastColor;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Create our colorPicker function
|
||
|
|
**/
|
||
|
|
$.fn.colorPicker = function (options) {
|
||
|
|
return this.each(function () {
|
||
|
|
// Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise.
|
||
|
|
var element = $(this),
|
||
|
|
opts = $.extend({}, $.fn.colorPicker.defaults, options),
|
||
|
|
defaultColor = $.fn.colorPicker.toHex(
|
||
|
|
(element.val().length > 0) ? element.val() : opts.pickerDefault
|
||
|
|
),
|
||
|
|
newControl = templates.control.clone(),
|
||
|
|
newPalette = templates.palette.clone().attr('id', 'colorPicker_palette-' + cItterate),
|
||
|
|
newHexLabel = templates.hexLabel.clone(),
|
||
|
|
newHexField = templates.hexField.clone(),
|
||
|
|
paletteId = newPalette[0].id,
|
||
|
|
swatch;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Build a color palette.
|
||
|
|
**/
|
||
|
|
$.each(opts.colors, function (i) {
|
||
|
|
swatch = templates.swatch.clone();
|
||
|
|
|
||
|
|
if (opts.colors[i] === transparent) {
|
||
|
|
swatch.addClass(transparent).text('X');
|
||
|
|
|
||
|
|
$.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
|
||
|
|
|
||
|
|
} else {
|
||
|
|
swatch.css("background-color", "#" + this);
|
||
|
|
|
||
|
|
$.fn.colorPicker.bindPalette(newHexField, swatch);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
swatch.appendTo(newPalette);
|
||
|
|
});
|
||
|
|
|
||
|
|
newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
|
||
|
|
|
||
|
|
newHexField.attr({
|
||
|
|
'id' : 'colorPicker_hex-' + cItterate,
|
||
|
|
'value' : defaultColor
|
||
|
|
});
|
||
|
|
|
||
|
|
newHexField.bind("keydown", function (event) {
|
||
|
|
if (event.keyCode === 13) {
|
||
|
|
$.fn.colorPicker.changeColor($.fn.colorPicker.toHex($(this).val()));
|
||
|
|
}
|
||
|
|
if (event.keyCode === 27) {
|
||
|
|
$.fn.colorPicker.hidePalette(paletteId);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
|
||
|
|
|
||
|
|
newPalette.find('.colorPicker_hexWrap').append(newHexField);
|
||
|
|
|
||
|
|
$("body").append(newPalette);
|
||
|
|
|
||
|
|
newPalette.hide();
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Build replacement interface for original color input.
|
||
|
|
**/
|
||
|
|
newControl.css("background-color", defaultColor);
|
||
|
|
|
||
|
|
newControl.bind("click", function () {
|
||
|
|
$.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
|
||
|
|
});
|
||
|
|
|
||
|
|
element.after(newControl);
|
||
|
|
|
||
|
|
element.bind("change", function () {
|
||
|
|
element.next(".colorPicker-picker").css(
|
||
|
|
"background-color", $.fn.colorPicker.toHex($(this).val())
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Hide the original input.
|
||
|
|
element.val(defaultColor).hide();
|
||
|
|
|
||
|
|
cItterate++;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Extend colorPicker with... all our functionality.
|
||
|
|
**/
|
||
|
|
$.extend(true, $.fn.colorPicker, {
|
||
|
|
/**
|
||
|
|
* Return a Hex color, convert an RGB value and return Hex, or return false.
|
||
|
|
*
|
||
|
|
* Inspired by http://code.google.com/p/jquery-color-utils
|
||
|
|
**/
|
||
|
|
toHex : function (color) {
|
||
|
|
// If we have a standard or shorthand Hex color, return that value.
|
||
|
|
if (color.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i)) {
|
||
|
|
return (color.charAt(0) === "#") ? color : ("#" + color);
|
||
|
|
|
||
|
|
// Alternatively, check for RGB color, then convert and return it as Hex.
|
||
|
|
} else if (color.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/)) {
|
||
|
|
var c = ([parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10), parseInt(RegExp.$3, 10)]),
|
||
|
|
pad = function (str) {
|
||
|
|
if (str.length < 2) {
|
||
|
|
for (var i = 0, len = 2 - str.length; i < len; i++) {
|
||
|
|
str = '0' + str;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return str;
|
||
|
|
};
|
||
|
|
|
||
|
|
if (c.length === 3) {
|
||
|
|
var r = pad(c[0].toString(16)),
|
||
|
|
g = pad(c[1].toString(16)),
|
||
|
|
b = pad(c[2].toString(16));
|
||
|
|
|
||
|
|
return '#' + r + g + b;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Otherwise we wont do anything.
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Check whether user clicked on the selector or owner.
|
||
|
|
**/
|
||
|
|
checkMouse : function (event, paletteId) {
|
||
|
|
var selector = activePalette,
|
||
|
|
selectorParent = $(event.target).parents("#" + selector.attr('id')).length;
|
||
|
|
|
||
|
|
if (event.target === $(selector)[0] || event.target === selectorOwner || selectorParent > 0) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$.fn.colorPicker.hidePalette();
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hide the color palette modal.
|
||
|
|
**/
|
||
|
|
hidePalette : function (paletteId) {
|
||
|
|
$(document).unbind("mousedown", $.fn.colorPicker.checkMouse);
|
||
|
|
|
||
|
|
$('.colorPicker-palette').hide();
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Show the color palette modal.
|
||
|
|
**/
|
||
|
|
showPalette : function (palette) {
|
||
|
|
var hexColor = selectorOwner.prev("input").val();
|
||
|
|
|
||
|
|
palette.css({
|
||
|
|
top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
|
||
|
|
left: selectorOwner.offset().left
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#color_value").val(hexColor);
|
||
|
|
|
||
|
|
palette.show();
|
||
|
|
|
||
|
|
$(document).bind("mousedown", $.fn.colorPicker.checkMouse);
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Toggle visibility of the colorPicker palette.
|
||
|
|
**/
|
||
|
|
togglePalette : function (palette, origin) {
|
||
|
|
// selectorOwner is the clicked .colorPicker-picker.
|
||
|
|
if (origin) {
|
||
|
|
selectorOwner = origin;
|
||
|
|
}
|
||
|
|
|
||
|
|
activePalette = palette;
|
||
|
|
|
||
|
|
if (activePalette.is(':visible')) {
|
||
|
|
$.fn.colorPicker.hidePalette();
|
||
|
|
|
||
|
|
} else {
|
||
|
|
$.fn.colorPicker.showPalette(palette);
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Update the input with a newly selected color.
|
||
|
|
**/
|
||
|
|
changeColor : function (value) {
|
||
|
|
selectorOwner.css("background-color", value);
|
||
|
|
|
||
|
|
selectorOwner.prev("input").val(value).change();
|
||
|
|
|
||
|
|
$.fn.colorPicker.hidePalette();
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Bind events to the color palette swatches.
|
||
|
|
*/
|
||
|
|
bindPalette : function (paletteInput, element, color) {
|
||
|
|
color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
|
||
|
|
|
||
|
|
element.bind({
|
||
|
|
click : function (ev) {
|
||
|
|
lastColor = color;
|
||
|
|
|
||
|
|
$.fn.colorPicker.changeColor(color);
|
||
|
|
},
|
||
|
|
mouseover : function (ev) {
|
||
|
|
lastColor = paletteInput.val();
|
||
|
|
|
||
|
|
$(this).css("border-color", "#598FEF");
|
||
|
|
|
||
|
|
paletteInput.val(color);
|
||
|
|
},
|
||
|
|
mouseout : function (ev) {
|
||
|
|
$(this).css("border-color", "#000");
|
||
|
|
|
||
|
|
paletteInput.val(selectorOwner.css("background-color"));
|
||
|
|
|
||
|
|
paletteInput.val(lastColor);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Default colorPicker options.
|
||
|
|
*
|
||
|
|
* These are publibly available for global modification using a setting such as:
|
||
|
|
*
|
||
|
|
* $.fn.colorPicker.defaults.colors = ['151337', '111111']
|
||
|
|
*
|
||
|
|
* They can also be applied on a per-bound element basis like so:
|
||
|
|
*
|
||
|
|
* $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true});
|
||
|
|
* $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']});
|
||
|
|
*
|
||
|
|
**/
|
||
|
|
$.fn.colorPicker.defaults = {
|
||
|
|
// colorPicker default selected color.
|
||
|
|
pickerDefault : "FFFFFF",
|
||
|
|
|
||
|
|
// Default color set.
|
||
|
|
colors : [
|
||
|
|
'000000', '993300', '333300', '000080', '333399', '333333', '800000', 'FF6600',
|
||
|
|
'808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900',
|
||
|
|
'99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00',
|
||
|
|
'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99',
|
||
|
|
'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF'
|
||
|
|
],
|
||
|
|
|
||
|
|
// If we want to simply add more colors to the default set, use addColors.
|
||
|
|
addColors : []
|
||
|
|
};
|
||
|
|
|
||
|
|
})(jQuery);
|