New: Add a color picker when list of colors is fixed
This commit is contained in:
Laurent Destailleur
parent
159d6418d5
commit
d45e608c33
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);
|
||||||
Loading…
Reference in New Issue
Block a user