%STARTSECTION{"code"}%
%JQREQUIRE{"farbtastic"}%
%ADDTOZONE{"script" requires="JQUERYPLUGIN::FARBTASTIC" text="<script type='text/javascript'>
var clearList = function() { $('#colorlist').val(''); };
$(function() {
// Function to check if selected color is in list and if not, adds it
var checkColor = function(theColor) {
var oldList = $('#colorlist').val();
var addComma = '';
if (oldList != '') { var addComma = ', '; }
if (oldList.indexOf(theColor) == '-1'){
var newList = oldList + addComma + theColor;
$('#colorlist').val(newList);
}
}
// Captures selections in farbtastic color selector
$('#colorpicker').on('mouseup', function() {
checkColor($('input#color').val());
});
// Simply selects content of color list field when clicked
$('#colorlist')
.focus(function () { $(this).select(); } )
.mouseup(function (e) {e.preventDefault();
});
// Adds instructions to the color field
$('input#color').val('Click to select colors')
});
</script>"
}%
<input type="text" id="color" name="color" value="#9eeefa" class="jqFarbtastic" /> *Your color list:* <input type='text' id='colorlist' size='70' readonly='readonly' title='Click to select color list'> <input type='button' onclick='clearList();' value=' Clear list '>
%ENDSECTION{"code"}%