Use in vanilla JS app

[melloware]

@blutorange Do you have instructions on how to use this version with Vanilla JS? The reason I ask is I am working on a PF component and I need the ability to control when "init" is called like you did here so it's not on DOMReady.

Any advice would be appreciated.

[blutorange]

Hmm, well it should work the same way as described in https://github.com/mdbassit/Coloris, since our task is only to add TS and NPM support. Correct me if I'm wrong, but as I understand it, mdbassit/Coloris also initializes the colorpicker automatically when the script is included.

What we did add is that this only applies when the script is loaded in a browser enviroment. When it is loaded via a module system, it only makes the exports available without initializing anything (as modules should not have side effects).

We could change this, so that it never does any automatic initialization, but I'm reluctant to do so since (a) that breaks things for existing users and (b) would be different to how mdbassit/Coloris behaves.

If possible, you could use modules for your component and then bundle it, then no automatic initialization should happen. If you don't bundle it, then in theory you should be able to just use the script from mdbassit/Coloris, but that does some automatic initialization as well. Which might be OK if you don't have any elements with data-coloris, and use Coloris(...) to initialize each element manually.

If that doesn't work, the only other way I can think of right now is (other than creating multiple bundles - ugh), would be to check for some browser global (e.g. window.Coloris.skipAutoInit) and skip initialization when set to true.

[melloware]

Let me try again I think I tried it before and it failed but let me play around with it today. Because I have another bug we might need to fix in this version only if mdbassit doesn't agree with the issue.

[melloware]

When I try and load it. I get this error.

It doesn't like this line...

  // Init the color picker when the DOM is ready
  return Coloris;

[blutorange]

Well return Coloris is inside a function. There's also a return one level above. But this too should be wrapped in the UMD/ESM wrapper, when we build the final code.

But this might be a bundle-specific issue, e.g. if it's stripping the UMD wrapper from the code. How do you bundle/include the colorpicker code, is this on a public git repo?

[melloware]

I am not bundling I am just replacing the 0-jquery.colorpicker.js with coloris.js. So in PF world is just JS. Regular Coloris works doing this but I would like to use this version because we already have the code to allow controlling when init() is called and I need that for PF.

I basically need Coloris in the global scope or window.Coloris or something to let me get to the Coloris object?

[blutorange]

The coloris.js file is pretty much the original with the least amount of changes to make it work with modules and bundlers.

That file is not meant to be used on its own, it's wrapped in the umd-wrapper.js and esm-wrapper.js. If you include the .js file from the NPM package in the esm folder, it does the same as if you included the original Coloris -- including the auto initialization.

But I guess in this case the easiest way would be to "bundle" it yourself, i.e. just replace the return at the very beginning with window.Coloris = and it should do what you want:

https://github.com/melloware/coloris-npm/blob/7351d93f3e271f0bbdfdeaff06c418534dc102fc/src/coloris.js#L7

[melloware]

That makes sense let me give that a try.

[melloware]

Works great!