CODEWITHSUNDEEP
javascriptjquerycolors
artist learning to code
artist learning to code

Reputation: 310

Multiple colorpicker in same page

I am creating an options dashboard for my wordpress theme and I managed to work almost everything but here's the thing: I added a colorpicker and worked super! If you click in the input field, a colorpicker will pop up so you can choose a color (or write the HEX instead) then if you click outside the colorpicker, it disappears.

But if I add a second one, the first input pops the colorpicker and takes the color value to BOTH inputs and after clicking outside the pop it won't disappear. Then if I click on the second input the colorpicker won't pop.

On other scenario, if I click first the second one, the colorpicker will pop but any of the inputs will take the value.

My code is this:

HTML and PHP:

case 'colorpicker':
?>

<div class="options_input options_text color-picker">

<input class="pickcolor" name="<?php echo $value['id']; ?>"
id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>"
value="<?php if ( get_option( $value['id'] ) != "") { 
echo stripslashes(get_option( $value['id'])  ); } else { echo $value['std']; } ?>" />

            <div id="colorpicker"></div>
</div>

<?php
break;

My js:

jQuery(document).ready(function($) {
$('#colorpicker').hide();
$('#colorpicker').farbtastic('.pickcolor');

$('#color').click(function() {
    $('#colorpicker').fadeIn();
});

$(document).mousedown(function() {
    $('#colorpicker').each(function() {
        var display = $(this).css('display');
        if ( display == 'block' )
            $(this).fadeOut();
    });
});

});

jQuery(document).ready(function($) {

$('.pickcolor').click( function(e) {
colorPicker = jQuery(this).next('div');
input = jQuery(this).prev('input');
$(colorPicker).farbtastic(input);
colorPicker.show();
e.preventDefault();
$(document).mousedown( function() {
    $(colorPicker).hide();
});
});

});

Can anyone help me tweak the js to make it work with multiple twin fields?

Upvotes: 1

Views: 2610

Answers (2)

Leslie
Leslie

Reputation: 11

Need some trick, but possible.

        $('div.colorpicker-component').colorpicker();

        var ColorPickedDom = null;
        $(document).ready(function () {

            // add new
            $("body div#colorpicker_wrapper").on('click', 'div.colorpicker-component i.add_new_picker', function() {
                var UploadTemplate = $('div#colorpicker_control_template').html();
                $('div#colorpicker_wrapper').append(UploadTemplate);
            });

            // remove clicked
            $("body div#colorpicker_wrapper").on('click', 'div.colorpicker-component i.remove_picker', function() {
                $(this).parent().closest('div.colorpicker-component').remove();
            });

            // the trick
            $('div#colorpicker_wrapper').on('click', 'div.colorpicker-component span.color_picker_trick', function(e) {
                ColorPickedDom = $(this).parent();
                $(ColorPickedDom).colorpicker('show');
            });

        });
span.color_picker_trick {
    background-color: rgba(255, 0, 0, 0);
    opacity: 0;
    position: absolute;
    width: 26px;
    height: 30px;
    cursor: pointer;
}
    <div id="colorpicker_control_template" style="display: none">
        <div class="input-append color colorpicker-component" data-color="rgba(255,146,180,1)" data-color-format="rgba">
            <input type="text" class="input-medium" value="rgba(255,146,180,1)" readonly="">
            <span class="color_picker_trick">a</span><span class="add-on"><i style="background-color: rgba(255,146,180,1);"></i></span>
            <i class="btn add_new_picker" type="button" title="Add one more colorpicker">Add new</i>
            <i class="btn remove_picker" type="button" title="Remove this colorpicker">Remove</i>
        </div>
    </div>

    <div id="colorpicker_wrapper">
        <div class="input-append color colorpicker-component" data-color="rgba(255,146,180,1)" data-color-format="rgba">
            <input type="text" class="input-medium" value="rgba(255,146,180,1)" readonly="">
            <span class="color_picker_trick">a</span><span class="add-on"><i style="background-color: rgba(255,146,180,1);"></i></span>
            <i class="btn add_new_picker" type="button" title="Add one more colorpicker">Add new</i>
        </div>
    </div>

Working demo: https://codepen.io/cosmiclaca/pen/jOyvRKO

Upvotes: 0

ryanjhilton
ryanjhilton

Reputation: 31

Not sure if this is still relevant or not... But I found this demo on HTMLDrive to do the trick.

Basically, it's already built into the farbtastic plugin... It just needs to be set up correctly, then you simply assign the picker to the required text box on some action.

var farbPicker = $.farbtastic('#colorpicker');

$('.tbColourPicker').each(function ()
{
    farbPicker.linkTo(this);
})

$('.showColourPanel').click(function ()
{
     var targetObject = input you want to edit;
     farbPicker.linkTo(targetObject);
});

The only thing you'll need to watch for is having default colour values in the text boxes before editing with the picker.

Upvotes: 1

Related Questions