jQuery.fn.colourPicker = function (conf) {
// Config for plug
var config = jQuery.extend({
id: 'jquery-colour-picker', // id of colour-picker container
ico: 'ico.gif', // SRC to colour-picker icon
title: 'Pick a colour', // Default dialogue title
inputBG: true, // Whether to change the input's background to the selected colour's
speed: 500, // Speed of dialogue-animation
isSupportRGBGUI : false, // The flag about support choose RGB (CUSTOM)
// The lineQuery, only used when isSupportRGBGUI == true
parentLineQuery : '.color_status_settings_item',
openTxt: 'Open colour picker'
}, conf);
// Inverts a hex-colour
var hexInvert = function (hex) {
var r = hex.substr(0, 2);
var g = hex.substr(2, 2);
var b = hex.substr(4, 2);
return 0.212671 * r + 0.715160 * g + 0.072169 * b < 0.5 ? 'ffffff' : '000000'
};
// tdchien :: Custom function
var componentToHex = function(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
// tdchien :: Custom function
var rgbToHex = function (r, g, b) {
//return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
return "#" +
("0" + parseInt(r,10).toString(16)).slice(-2) +
("0" + parseInt(g,10).toString(16)).slice(-2) +
("0" + parseInt(b,10).toString(16)).slice(-2);
}
// tdchien :: Custom function
var hexToRgb = function(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
// Add the colour-picker dialogue if not added
var colourPicker = jQuery('#' + config.id);
if (!colourPicker.length) {
colourPicker = jQuery('
').appendTo(document.body).hide();
// Remove the colour-picker if you click outside it (on body)
jQuery(document.body).click(function(event) {
if (!(jQuery(event.target).is('#' + config.id) || jQuery(event.target).parents('#' + config.id).length)) {
colourPicker.hide(config.speed);
}
});
}
// For every select passed to the plug-in
return this.each(function () {
// Insert icon and input
var select = jQuery(this);
// tdchien :: Special treating with isSupportRGBGUI = true
//var icon = jQuery('').insertAfter(select);
//var input = jQuery('').insertAfter(select);
var rgbUIRed = null;
var rgbUIGreen = null;
var rgbUIBlue = null;
// tdchien :: Special treating with isSupportRGBGUI = true
var icon = null;
var input = null;
if (config.isSupportRGBGUI === true) {
input = jQuery('').insertAfter(select);
icon = input;
} else {
icon = jQuery('').insertAfter(select);
input = jQuery('').insertAfter(select);
}
var loc = '';
// Build a list of colours based on the colours in the select
jQuery('option', select).each(function () {
var option = jQuery(this);
var hex = option.val();
var title = option.text();
loc += '
';
});
// Remove select
select.remove();
// If user wants to, change the input's BG to reflect the newly selected colour
if (config.inputBG) {
input.change(function () {
// tdchien : Custom for RGB
//input.css({background: '#' + input.val(), color: '#' + hexInvert(input.val())});
if (config.isSupportRGBGUI) {
var hexVal = '#' + input.val();
input.css({background: hexVal, color: hexVal });
input.attr('readonly', true);
// Put value into R, G, B GUI
// '.color_status_settings_item'
var objThisLine = input.closest(config.parentLineQuery);
var rgbVal = hexToRgb(hexVal);
objThisLine.find('.select_red').val(rgbVal.r);
objThisLine.find('.select_green').val(rgbVal.g);
objThisLine.find('.select_blue').val(rgbVal.b);
} else {
input.css({background: '#' + input.val(), color: '#' + hexInvert(input.val())});
}
});
input.change();
}
// tdchien :: Add RGB GUI (Custom)
if (config.isSupportRGBGUI) {
rgbUIRed = jQuery('');
rgbUIGreen = jQuery('');
rgbUIBlue = jQuery('');
rgbUIRed.insertBefore(input);
rgbUIGreen.insertBefore(input);
rgbUIBlue.insertBefore(input);
var builderRGB = [];
for (var k = 0; k <= 255; k++) {
var line = '';
line = line.replace(/#value#/g, k);
builderRGB.push(line);
}
var strBuilderRGB = builderRGB.join('');
rgbUIRed.html(strBuilderRGB).addClass('select_red');
rgbUIGreen.html(strBuilderRGB).addClass('select_green');
rgbUIBlue.html(strBuilderRGB).addClass('select_blue');
// Add to parentLineQuery into rgbUIRed/rgbUIGreen/rgbUIBlue
rgbUIRed.attr('parent_line_query', config.parentLineQuery);
rgbUIGreen.attr('parent_line_query', config.parentLineQuery);
rgbUIBlue.attr('parent_line_query', config.parentLineQuery);
// Bind event for RGB
var changeColorRGB = function(objThis) {
// '.color_status_settings_item'
var pLineQuery = $(objThis).attr('parent_line_query');
var objThisLine = $(objThis).closest(pLineQuery);
var r = objThisLine.find('.select_red').val();
var g = objThisLine.find('.select_green').val();
var b = objThisLine.find('.select_blue').val();
var hex = rgbToHex(r, g, b);
objThisLine.find('.color_input')
.val(hex.replace('#', ''))
.css('background', hex)
.css('color', hex);
}
rgbUIRed.change(function() {
changeColorRGB(this);
});
rgbUIGreen.change(function() {
changeColorRGB(this);
});
rgbUIBlue.change(function() {
changeColorRGB(this);
});
}
// When you click the icon
icon.click(function () {
// Show the colour-picker next to the icon and fill it with the colours in the select that used to be there
var iconPos = icon.offset();
var heading = config.title ? '
' + config.title + '
' : '';
colourPicker.html(heading + '
' + loc + '
').css({
position: 'absolute',
left: iconPos.left + 'px',
top: iconPos.top + 'px'
}).show(config.speed);
// When you click a colour in the colour-picker
jQuery('a', colourPicker).click(function () {
// The hex is stored in the link's rel-attribute
var hex = jQuery(this).attr('rel');
input.val(hex);
// If user wants to, change the input's BG to reflect the newly selected colour
if (config.inputBG) {
// Apply RGB feature
//input.css({background: '#' + hex, color: '#' + hexInvert(hex)});
if (config.isSupportRGBGUI) {
input.css({background: '#' + hex, color: '#' + hex});
} else {
input.css({background: '#' + hex, color: '#' + hexInvert(hex)});
}
}
// Trigger change-event on input
input.change();
// Hide the colour-picker and return false
colourPicker.hide(config.speed);
return false;
});
return false;
});
});
};