Module Fieldtype ColorPicker

[krisj]

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...

[Outcydaz]

I do not see any errors in the console. 

 

[CaelanStewart]

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.

[Kurbel]

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 March 3, 2017 by kongondo
This is the support forum for the module

[adrian]

I haven't tested, but maybe this helps: https://github.com/somatonic/ColorPicker/issues/7

[Soma]

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.

[nbcommunication]

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

[cjx2240]

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

[Macrura]

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

[psy]

10 hours ago, cjx2240 said:

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

I find the Chrome/FF extension: http://www.colorzilla.com/ very useful

[stanoliver]

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.

[stanoliver]

@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?

[stanoliver]

@Soma Just wanna let you know that no help needed anymore because it probably was a wrong right management between admin role and another custom role I have. Everything seems to work fine.

[thausmann]

I created a Pull Request with two fixes. 

• Fixed a bug that formatted Hexcodes starting with 0E to 000000 (Issue #12)
• Added CSS to distinguish fields with no value (red strike through)

[MarkE]

HI @Soma. Is this module being maintained? I have a reported warning (PHP8.1):

PHP Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in .../modules/FieldtypeColorPicker/InputfieldColorPicker.module:65