forked from Wavyzz/dolibarr
New: Add a color picker when list of colors is fixed
This commit is contained in:
Laurent Destailleur
58
htdocs/includes/jquery/plugins/colorpicker/jquery.colorpicker.css
Executable file
58
htdocs/includes/jquery/plugins/colorpicker/jquery.colorpicker.css
Executable file
@@ -0,0 +1,58 @@
|
||||
.colorpicker-picker-span{
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
float: left;
|
||||
border: 1px solid #000;
|
||||
margin-right: 2px;
|
||||
margin-bottom: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.colorpicker-picker-info{
|
||||
padding: 0 0 2px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.colorpicker-picker-span:hover {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.colorpicker-picker-span.active {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.colorpicker-picker {
|
||||
background-color: #EEEEEE;
|
||||
padding: 5px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #CCCCCC;
|
||||
box-shadow: 2px 2px 5px #111;
|
||||
-moz-box-shadow: 2px 2px 5px #111;
|
||||
-webkit-box-shadow: 2px 2px 5px #111;
|
||||
}
|
||||
|
||||
.colorpicker-trigger {
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid #000;
|
||||
cursor: pointer;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.colorpicker-wrap {
|
||||
font-family: 'Trebuchet MS', Verdana, Arial, Geneva, sans-serif
|
||||
}
|
||||
|
||||
.colorpicker-label {
|
||||
float: left;
|
||||
margin-right: 2px;
|
||||
}
|
||||
137
htdocs/includes/jquery/plugins/colorpicker/jquery.colorpicker.js
Executable file
137
htdocs/includes/jquery/plugins/colorpicker/jquery.colorpicker.js
Executable file
@@ -0,0 +1,137 @@
|
||||
/*
|
||||
* INFORMATION
|
||||
* ---------------------------
|
||||
* Owner: jquery.webspirited.com
|
||||
* Developer: Matthew Hailwood
|
||||
* ---------------------------
|
||||
*
|
||||
* CHANGELOG:
|
||||
* ---------------------------
|
||||
* 1.1
|
||||
* Fixed bug 01
|
||||
* Fixed bug 02
|
||||
*
|
||||
* ---------------------------
|
||||
* Bug Fix Credits:
|
||||
* --
|
||||
* FIXED BY LDR
|
||||
* --
|
||||
* * Number: 01
|
||||
* * Bug: Initial color should be option "selected" from select
|
||||
* * Name: Nico <unknown>
|
||||
* --
|
||||
* * Number: 02
|
||||
* * Bug: Selects Change event should be called on color pick
|
||||
* * Name: Bob Farrell <unknown>
|
||||
*/
|
||||
(function($) {
|
||||
$.fn.extend({
|
||||
colorpicker: function(options) {
|
||||
|
||||
//Settings list and the default values
|
||||
var defaults = {
|
||||
label: '',
|
||||
size: 20,
|
||||
count: 6,
|
||||
hide: true
|
||||
};
|
||||
|
||||
var options = $.extend(defaults, options);
|
||||
var obj;
|
||||
var colors = {};
|
||||
|
||||
var wrap = $('<div class="colorpicker-wrap"></div>');
|
||||
var label = $('<div class="colorpicker-label"></div>');
|
||||
var trigger = $('<div class="colorpicker-trigger"></div>');
|
||||
var picker = $('<div style="width: ' + (options.size + 4) * options.count + 'px" class="colorpicker-picker"></div>');
|
||||
var info = $('<div class="colorpicker-picker-info"></div>');
|
||||
var clear = $('<div style="clear:both;"></div>');
|
||||
|
||||
var clickcount=0;
|
||||
|
||||
return this.each(function() {
|
||||
obj = this;
|
||||
|
||||
//build an array of colors
|
||||
$(obj).children('option').each(function(i, elm) {
|
||||
colors[i] = {};
|
||||
colors[i].color = $(elm).text();
|
||||
colors[i].value = $(elm).val();
|
||||
});
|
||||
create_wrap();
|
||||
if (options.label != '')
|
||||
create_label();
|
||||
create_trigger();
|
||||
create_picker();
|
||||
wrap.append(label);
|
||||
wrap.append(trigger);
|
||||
wrap.append(picker);
|
||||
wrap.append(clear);
|
||||
$(obj).after(wrap);
|
||||
if (options.hide)
|
||||
$(obj).css({
|
||||
position: 'absolute',
|
||||
left: -10000
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function create_wrap() {
|
||||
wrap.click(function() {
|
||||
clickcount++;
|
||||
if (clickcount % 2 == 0) { picker.fadeOut('fast'); }
|
||||
});
|
||||
wrap.mouseleave(function() {
|
||||
/* picker.fadeOut('fast'); */
|
||||
});
|
||||
}
|
||||
|
||||
function create_label() {
|
||||
label.text(options.label);
|
||||
label.click(function() {
|
||||
trigger.click()
|
||||
});
|
||||
}
|
||||
|
||||
function create_trigger() {
|
||||
trigger.click(function() {
|
||||
var offset = $(this).position();
|
||||
var top = offset.top;
|
||||
var left = offset.left + $(this).width() + 5;
|
||||
if ((left + (options.size + 4) * options.count) > $(window).width())
|
||||
{
|
||||
left = offset.left - (options.size + 4) * options.count - 15;
|
||||
}
|
||||
$(picker).css({
|
||||
'top': top,
|
||||
'left': left
|
||||
}).fadeIn('fast');
|
||||
});
|
||||
}
|
||||
|
||||
function create_picker() {
|
||||
picker.append(info);
|
||||
for (var i in colors) {
|
||||
picker.append('<span class="colorpicker-picker-span ' + (colors[i].color == $(obj).children(":selected").text() ? ' active' : '') + '" rel="' + colors[i].color + '" style="background-color: #' + colors[i].color + '; width: ' + options.size + 'px; height: ' + options.size + 'px;"></span>');
|
||||
}
|
||||
trigger.css('background-color', '#'+$(obj).children(":selected").text());
|
||||
info.text($(obj).children(":selected").text());
|
||||
picker.children(".colorpicker-picker-span").hover(function() {
|
||||
info.text($(this).attr('rel')!=''?$(this).attr('rel'):'-');
|
||||
}, function() {
|
||||
info.text(picker.children('.colorpicker-picker-span.active').attr('rel'));
|
||||
});
|
||||
picker.delegate(".colorpicker-picker-span", "click", function() {
|
||||
info.text($(this).attr('rel')!=''?$(this).attr('rel'):'-');
|
||||
$(obj).val($(this).attr('rel'));
|
||||
$(obj).change();
|
||||
picker.children('.colorpicker-picker-span.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
trigger.css('background-color', $(this).css('background-color'));
|
||||
picker.fadeOut('fast');
|
||||
});
|
||||
$(obj).after(picker);
|
||||
}
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user