Field type: Color picker?

[ian-cox]

I built this for the Kirby1 panel based on jQuery MiniColors and it worked really well. I'm not sure how to implement it into Kirby2 yet but I think other people would enjoy having a color picker field too.

http://labs.abeautifulsite.net/jquery-minicolors/ https://github.com/claviska/jquery-miniColors/

[bastianallgeier]

That looks really cool! The field system has changed for Kirby 2. It's now based on Angular directives which makes it a lot more powerful. I still need to add a couple things to the API and document it but afterwards you should be able to port this rather quickly.

[malvese]

More useful to me would be a similar color picker with only a set of specific colors. Editors could then be confident they use the right colors, for example the ones from their company's style guide. A simple select could work, but displaying a color patch with the right color would help editors a lot more than a color name or a hexadecimal color code.

[ian-cox]

@malvese Yeah, that is certainly a valid use case. When I built the original, it was to be used by either me or another designer so I wasn't worried about locking it down to a pre-selected color palette.

I don't think it would be too hard to build what you're talking about though. I just made a little radio button color picker: http://jsfiddle.net/iancox/wwg3jLvo/

I'll let you know if I end up implementing something like this for the Kirby 2 panel.

Ian

[xypaul]

:+1: a color picker would be truly awesome

[vicegold]

:+1: Would love to see that as well!

[ian-cox]

Good news, finally built the color picker for Kirby 2! https://github.com/ian-cox/Kirby-Color-Picker

[skifreak]

Looks fantastic!!

On Thu, Feb 19, 2015 at 4:10 PM, Ian Cox notifications@github.com wrote:

Good news, finally built the color picker for Kirby 2! https://github.com/ian-cox/Kirby-Color-Picker

[image: color-picker] https://cloud.githubusercontent.com/assets/4325127/6277766/9867c910-b85f-11e4-885c-b67b387552cb.gif

— Reply to this email directly or view it on GitHub https://github.com/getkirby/panel/issues/64#issuecomment-75158885.

♟ josephthomascontemporary.com ✔ ✘ standard-quality.biz ✿ ⚑ popvlvs.com ✚

[bastianallgeier]

So cool!!! Awesome job :)

[crispconcepts]

@ian-cox It's quite ironic that as I was coming up with a solution for this, you were releasing yours (after I had last checked this issue, before you had posted).

http://getkirby.com/forum/general/20150218/custom-panel-field-color-picker-issue/#20150220142823

I'll be comparing your solution to spectrum.js implementation I went with. From the animation above though it looks like it's HEX only (no RGBA) and doesn't support predefined color palettes (which would be a time saver when you're trying to keep your color scheme consistent).

[ian-cox]

@ljacobs-sml I'd love to see what you came up with!

I would like to add RGBA functionality as well as the option to specify a default color in the blueprint. MiniColor has this functionality built it, it's just a matter of making those options available to Kirby.

I'd like to make a predefined palette based picker as a separate form element because I think the plugin structure and use cases are very different. The palete picker would be based on the radio button field type while my current picker is based on a simple text field. Something like what I showed earlier: http://jsfiddle.net/iancox/wwg3jLvo/

I'm also going to move some of these ideas into the issues section of the color plugin.

Feel free to fork and submit pull requests!

[crispconcepts]

@ian-cox here is a fork that supports spectrum.js. The only issue I have is that I need to initialize it on the field after the field has been created and the only way I've been able to do that is by adding it directly into script into the field. I did however modify the spectrum.js default settings to what I wanted, rather than overriding them in this spot (increasing the length of the script and redundancy since the settings are always identical).

Perhaps someone wiser than I knows how to properly initialize the element.

https://github.com/ljacobs-sml/Kirby-Color-Picker

[ian-cox]

Yes, someone wiser than I was also required to initialize my plugin.

Maybe @bastianallgeier has a better way of doing this?

I didn't write this but I have a general understanding of whats going on. There's a hook that fires after the Panel's DOM elements are loaded.

$(app.main).on('view:load', function ()

Here's my sample below:

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

        if (app && typeof app == 'object') {
            $(app.main).on('view:load', function () {

                var $colorpicker = $('.colorpicker');

                if ($colorpicker.length) {
                    $colorpicker.minicolors();
                }

            });
        }

    });
} (jQuery));

[crispconcepts]

That same solution works here as well simply changing the trigger from "minicolors()" to "spectrum()". Thanks for the heads up. I didn't think to look in the minicolors.js to see how your project was achieving this.. I just thought it was magic. :8ball:

[benseitz]

:+1: Would love the additional default color feature :)