Jump to content

Fieldtype ColorPicker


Soma
 Share

Recommended Posts

12 hours ago, Outcydaz said:

@krisj I've tried this solution and the colorpicker still does not work in a repeater or repeater matrix. Is there something else i'm misssing?

what errors are you getting in the JS console? I don't have time to look into it but that was what made it work for me. Probably not initialising the jQuery stuff in the right place...

Link to comment
Share on other sites

  • 4 months later...
On 07/09/2016 at 5:39 AM, Outcydaz said:

@krisj I've tried this solution and the colorpicker still does not work in a repeater or repeater matrix. Is there something else i'm misssing?

It's because the events are being triggered too early, before the Color Picker's HTML is even added to the DOM, and also the event was missing for the standard repeater (which I've added). This version of InputfieldColorPicker.js is working now. I can't confirm it works for the repeater matrix, but if the class names used in the JS code above are correct, it should just work. I also added safeguards so that multiple events are not applied to the same elements.

/**
 * An Inputfieldtype for handling Colors
 * used by the FieldtypeColorPicker/InputfieldColorPicker
 *
 * created by Philipp "Soma" Urlich
 * ColorPicker jQuery Plugin by http://www.eyecon.ro/colorpicker/
 *
 * Licensed under LGPL3 http://www.gnu.org/licenses/lgpl-3.0.txt
 *
 */

function initColorPicker() {
    $('div[id^=ColorPicker_]:not(.color-picker-init)').addClass('color-picker-init').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:not(.color-picker-init)').addClass('color-picker-init').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:not(.color-picker-init)').addClass('color-picker-init').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)');
        }
    });
}

$(function(){
    /**
     * Looks like its due to events being fired too early.
     */

    function delayedInit(event) {
        console.log(event.type);
        setTimeout(initColorPicker, 500);
        setTimeout(initColorPicker, 1000);
    }

    $(document).on('opened', '.InputfieldRepeaterItem', delayedInit);
    $(document).on('repeateradd', '.InputfieldRepeater  .InputfieldRepeaterAddLink', delayedInit);
    $(document).on('repeateradd', '.InputfieldRepeaterMatrix .InputfieldRepeaterMatrixAddLink', delayedInit);

    initColorPicker();
});

Hope that helps.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Hi Guys,

is the ColorPicker Fieldtype not working inside a repeater a known issue?

I have pretty much this setup, apart from that everything is very vanilla. Field works fine embedded inside a template, however wrapped in a repeater it's not usable inside the backend. Didn't find this issue documented anywhere. 

In this case I'm switching to predefined color schemes (via select menues) so it's not a huge deal atm, so I'm just curious.

Obviously haven't looked into the code at all, gut feeling is this is somehow a jquery selector issue...

Cheers,

Kurbel

Edited by kongondo
This is the support forum for the module
Link to comment
Share on other sites

  • 9 months later...

Thanks all for the reports and being patient. I have managed to get back to this and fix issues within Repeater and RepeaterMatrix. Also added ___markupValue() for formatted output ie in Lister.

  • Like 2
Link to comment
Share on other sites

  • 4 months later...

Hi,

There's a couple of display issues with this on the new UIkit theme. I managed to fix this by adding a css file to $config->styles (in admin.php) with the following:

.InputfieldColorPicker ul {
	margin: 0;
	padding: 0;
}

.InputfieldColorPicker ul li {
	list-style: none;
}

Cheers,

 

Chris

Link to comment
Share on other sites

  • 1 month later...
9 hours ago, cjx2240 said:

Is there a colorpicker that allows you to pick from anywhere on your page? Is such a thing even possible?

Not sure, i doubt it, but i use Colorsnapper on Mac which lets me pick colors from anywhere on the screen and then i paste the value into the colorpicker field hex

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
On 11/13/2012 at 6:37 PM, diogo said:

just an example:


<style>
body{
  background-color: <?=$page->backColor?>;
}
</style>
 

May someone could help me.

In the pw backend I have the following hierarchy:

/tools/

/tools/colorpicker/

/tools/colorpicker/maincolor1/

/tools/colorpicker/maincolor2/

/tools/colorpicker/maincolor3/

etc.

maincolor1, maincolor2, maincolor3 should only set 3 different colors for just a simple <h1>heading</h1> customized with css. My only problem is to use the right selectors in the right way so that the work probably with the module. The datepicker module itself is in the backend installed and works.

At last I am not sure if the following snippet is needed at all or only when I use an external css-stylesheet and I have not sure where I should place it:

The snippet 

<?php header("Content-type: text/css"); ?>

May someone could tell me where to put everything in the right place so that I can set the color of my three headings by the colorpicker module.

Link to comment
Share on other sites

  • 3 weeks later...

@Soma Could you may help me with your module? I created a field color1 for all my headlines (h1-h6) setting its default color to #550000. The output in the frontend shows nicely the default color I have set. If I set any other default color everything still works fine.

The problem is: If I pick with the color-picker another color (does not matter which color) just nothing happens. It still shows the default color which is set. Are there maybe any special extra settings to allow the overwrite of the default color?

Link to comment
Share on other sites

  • 3 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...