compatibility with Repeater and Repeater Matrix

[krisj]

very quick and dirty hack, but seems to work. Not sure if it would cause any other issues.

function SetUpCPicker(){
$('div[id^=ColorPicker_]').each(function(){
var $colorpicker = $(this);

    $colorpicker.ColorPicker({
        color: $(this).data('color').toString(),
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            $colorpicker.css('backgroundColor', '#' + hex);
            $colorpicker.css('background-image', 'none');
            $colorpicker.next('input').val(hex).trigger('change');
        }
    });

});

$('a.ColorPickerReset').on('click',function(e){
    e.preventDefault();
    var color = $(this).data('default') && $(this).data('default') != 'transp' ? '#' + $(this).data('default').toString() : 'transparent';
    $(this).parent().find('input').val($(this).data('default')).trigger('change');
    $(this).parent().find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('default').toString());
    $(this).parent().find('div[id^=ColorPicker_]')
        .css('backgroundColor', color)
        .css('background-image', 'none')
        .attr('data-color', $(this).data('default').toString());
    if(color == 'transparent') {
        var modurl = $(this).data('modurl');
        $(this).parent().find('div[id^=ColorPicker_]')
            .css('background-image', 'url(' + modurl + 'transparent.gif)');
    }
});

/* additions (swatches) by @Rayden */
$('div.ColorPickerSwatch').on('click',function(e){
    e.preventDefault();
    var color = $(this).data('color') && $(this).data('color') != 'transp' ? '#' + $(this).data('color').toString() : 'transparent';
    $(this).closest('.ui-widget-content, .InputfieldContent').find('input').val($(this).data('color')).trigger('change');
    $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('color').toString());
    $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
        .css('backgroundColor', color)
        .css('background-image', 'none')
        .attr('data-color', $(this).data('color').toString());
    if(color == 'transparent') {
        var modurl = $(this).closest('.ui-widget-content, .InputfieldContent').find('.ColorPickerReset').data('modurl');
        $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
            .css('background-image', 'url(' + modurl + 'transparent.gif)');
    }
});

};
$(document).ready(function() {
SetUpCPicker();
$(document).on('repeateradd', '.InputfieldRepeaterMatrix .InputfieldRepeaterMatrixAddLink', SetUpCPicker);
$(document).on('opened', '.InputfieldRepeaterItem', SetUpCPicker);
});

[Notanotherdotcom]

I've got to say, it didn't feel dirty to me :)

Had to change the last bit to add "reloaded" as well, so that looks like this in my version:

$(document)
.on('repeateradd', '.InputfieldRepeaterMatrix .InputfieldRepeaterMatrixAddLink', SetUpCPicker)
.on('opened', '.InputfieldRepeaterItem', SetUpCPicker)
.on('reloaded', '.InputfieldRepeater', SetUpCPicker);

@somatonic these updates to indeed make this work for 3.x up to the most recent dev version if you get a chance to confirm?

[posixpascal]

Oh, didn't saw this issue before submitting my pull request. Can you check my pull request here and approve it? #9

Also is opened required? I thought reloaded already handles this as well.
I also made sure colorpickers are not initialized twice.

@somatonic – Can we merge this PR (maybe with the additional code from @Notanotherdotcom?). Otherwise ColorPicker won't work for Repeater/Repeatermatrix.

[somatonic]

Thx, this has been updated.