Multiple Color Pickers

[Mexicoder]

I'm trying to use multiple custom field color pickers in one module.
The first one seems to be rendering fine but the others after are not.
Any suggestion as to how to accomplish this?

[jamesvidler]

I was able to reproduce this using the following steps:

1. Have a content definition with more than one Color picker (no tabs in the form either) and initialize an instance of that within Shared Content.
2. If you then navigate to that list and create a New item, the fields work
3. If you are on the details of an item with more than one color field and you do a browser Refresh (F5) then I was able to reproduce the issue you are seeing. This can also be reproduced by copying the URL to the details of the content item and loading it in another browser

Seems like there's a race condition happening here.

[jamesvidler]

Upon further review, this is the error that is occurring:

Uncaught TypeError: Unable to process binding "colorpicker: function(){return { value:value,format:format} }"
Message: $(...).colorpicker is not a function
    at init (23131.js:1225)
    at js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1
    at Object.ignore (js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1)
    at js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1
    at Object.arrayForEach (js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1)
    at a (js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1)
    at l (js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1)
    at Object.h.applyBindings (js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1)
    at js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1
    at js?v=cJ31949xg7yi5PQRHCL-6TNLvGUSo1V2EBw33Fvo-_w1:1

I think we can solve this by replacing the code for the ko.bindingHandlers.colorpicker with this:

ko.bindingHandlers.colorpicker = {
        init: function (element, valueAccessor) {

            var params = ko.unwrap(valueAccessor());

            function intializeColorPicker() {
                if($.colorpicker && $.isFunction($.colorpicker)) {
                    $(element).colorpicker({
                        color: params.value(),
                        format: params.format
                    }).on('changeColor', function (e) {
                        var value = $(element).colorpicker('getValue');
                        params.value(value);
                    });
                    clearInterval(initializeInterval);
                }
            }

            var initializeInterval = setInterval(intializeColorPicker, 300);

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                if (initializeInterval) {
                    clearInterval(initializeInterval);
                }
            })
           
        }
    };

I tested this and it resolves the issue. I'll do a pull request to update our example. This is also a bit of a workaround, as our platform should handle this case better - I'm creating a bug for this in our platform.

[jamesvidler]

I just updated the file https://github.com/agility/CustomFields/blob/master/colorpicker/js/colorpicker-init.js which should be all you need to replace the contents of the script you are using.

Let me know if it works for you!

[Mexicoder]

Awesome this worked for me.
So when you say "our platform should handle this case better" do you mean the Agility platform?

[jamesvidler]

Yes, I do. This looks to be a bug in how we handle duplicate dependencies in custom fields when the web app starts.