Problem/Motivation

Using several form element "coloriswidget" in a custom form, with each fields having their own different settings (swatches, cancel button etc...), every Coloris instance use the settings from the latest field of the form.

Steps to reproduce

Create a custom form using multiple "coloriswidget" fields with their own settings different, display the custom form and see that all coloris fields using the same settings as the latest field of the form.

Proposed resolution

I managed to make it work by adding, in the javascript file, an extra addEventListener 'onclick' on each coloris instance to recreate the coloris Object using the correct settings :

 el.addEventListener('click', e => {
        Coloris(settings);
});

Coloris(settings);

I think it is related to that comment on Coloris library page : https://github.com/mdbassit/Coloris?tab=readme-ov-file#simulating-multip...

Apparently reacreating the instance on click on the textfield is taking in account the correct settings.

Remaining tasks

Check the proposed solution and test it in different usage contexts.

Issue fork coloris-3478644

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

grumpy74 created an issue. See original summary.

grumpydev74’s picture

Issue summary: View changes

grumpydev74’s picture

Issue summary: View changes
grumpydev74’s picture

Status: Active » Needs review
svenryen’s picture

Status: Needs review » Fixed
Issue tags: -JavaScript +JavaScript

Looks good, thanks for contributing!

svenryen’s picture

Issue tags: -JavaScript +JavaScript

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.