Jump to content

Fieldtype ColorPicker


Soma
 Share

Recommended Posts

@Soma: I'm having issues storing 000000 (i.e. black) as default value. Any idea if this is something specific to my case or actual issue?

000000 is converted to 0 (and in page edit nothing shows up), "000000" to "00000 and black to #black. In page edit this works just fine, but default value for some reason won't work. Actually at some point (not sure if this is consistent behavior, as I haven't yet had time to debug properly) 000000 was stored in database, but when fetched in field settings it was suddenly converted to 0.

Could be even core bug, but since typical (page edit) text inputs have no problems with values like this, I'm not entirely sure where to start.. :)

Link to comment
Share on other sites

  • 3 weeks later...

I'm not seeing this behavior with Text/Textarea fields. Just tried in a few spots. Any other factors you can think of?

No. to be more clear it happens with all textfields in settings of fields or modules. Except title, names or labels.

I enter for example 000 and get 0 after saving.

Ok happens also for labels but only on alternative language. I have multilanguage installed, but otherwise I have no idea, nothing else I can think of. And it also happens to others as reported multiple times.

Link to comment
Share on other sites

Sorry, I thought we were talking page fields here. If limited to the fields in template/field (or module) settings, then I know what the issue is. It's the encode/decode process, which attempts to detect and enforce numeric types and empty values. Best way to bypass that is to put something non-numeric in there. For instance, for a color value something like #000 rather than 000 would likely resolve it. Though I may also be able to have it skip over digit strings that start with a zero and have no decimal.

  • Like 1
Link to comment
Share on other sites

offtopic

@Soma, break compatibility would make your color picker better.

Now your field always need some extra logic. You can't just output $page->color, because of the max length of 6 characters.

example: "<div style='color: #{$page->color};'>"; can render to <div style='color: #transp;'>

I do love this field, but the extra logic sucks.

Please break the backward compatibility.

  • Like 2
Link to comment
Share on other sites

I must say that I agree with both views here; what Martijn described is definitely a nuisance and I really wouldn't mind if Soma decided to change it, but it also feels that it's just wrong (and inconsistent) to have fields behave in different way when used in module settings context  :)

  • Like 1
Link to comment
Share on other sites

I see and kinda agree. But maybe rather add formatting to the field than change current 6 chars. Remember you could do that yourself with formatValue hook or property instead of local tpl logic.

Link to comment
Share on other sites

I just committed suic.. ehrm an update to ColorPicker. ;)

  • As of 2.0.0 you can enable output formatting of the field in the details settings. When enabled it will format value directly from AADDEE to "#AADDEE" and "transp" to "transparent".

So you can now simply write:

echo "background-color: " . $page->color;

// outputs
// background-color: #AEADEA
  • added converting "0" settings to "000000", just in case ;)
This update should be save to update and backward compatible, but as always you should first test on a development server if you have a chance. In case something went wrong just ask here in the forums and I'm sure it will be solved within short time.
 
Thanks
  • Like 6
Link to comment
Share on other sites

  • 3 months later...

Hello Soma,
thank you for this useful module. I like it very much and use it in a few projects.
 

I think I found a little bug.
Line 65 in FieldtypeColorPicker.module says

if($value == "0") $value = "00000";

One 0 is missing, so it outputs #00000 in case of black. Most Browsers ignore that, I think, instead of interpreting it as black.

Greetings :)

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

Great module, how ever it bugs with Reno theme, requires following:

.colorpicker input {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: #898989 !important;
    padding: 0 !important;
}

Because (/wire/modules/AdminTheme/AdminThemeReno/styles/classic.css):

input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]), textarea {
    background: none repeat scroll 0 0 #eaf0f2;
    border-color: #aec5cd #c7d7dd #c7d7dd;
    border-style: solid;
    border-width: 1px;
    color: #2f4248;
    line-height: 1.3em;
    padding: 0.4em;
}

So either Reno could strict it's styling rules, or module should add !importants, i'd go with first one :)

Cheers

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 3 months later...

Cool module, thanks!

I am currently creating an easy portfolio for creatives based on PW.

With this function I can share it easily with friends to customize their own.

When It's finished Ill share it over here.

Link to comment
Share on other sites

  • 3 months later...

hey,

i get a fatal error using this plugin with processwire 2.6.1

any ideas?

Fatal error: Call to a member function set() on a non-object in /(...)/site/modules/somatonic-ColorPicker-3a00070/FieldtypeColorPicker.module on line 46

line 46 is:

$inputField->set('default', $field->default);
$inputField->set('swatch', $field->swatch);
Link to comment
Share on other sites

Maybe you can give more information where this error happens? I just installed and tested it on a 2.6.18 and works fine.

Note: BTW you shouldn't install a module with the folder name you get from github: somatonic-ColorPicker-3198273192 ....

It's always best to install through ModulesManager or through core Modules New with Classname. "FieldtypeColorPicker"

Link to comment
Share on other sites

  • 1 month later...
  • 3 months later...

Just had to do a quick head scratch to get the colour picker to work inside PW 3.12 Repeater and Repeater Matrix.

If anyone is looking for a very quick and dirty hack, that seems to work. Not sure if it would cause any other issues.

This is InputfieldFontIconPicker.js

 
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);
});
 
I posted this to github as well...
  • Like 2
Link to comment
Share on other sites

  • 5 months later...
On 3/21/2016 at 2:56 PM, krisj said:

Just had to do a quick head scratch to get the colour picker to work inside PW 3.12 Repeater and Repeater Matrix.

If anyone is looking for a very quick and dirty hack, that seems to work. Not sure if it would cause any other issues.

This is InputfieldFontIconPicker.js

 

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);
});
 
I posted this to github as well...

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

Link to comment
Share on other sites

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