mdbassit / Coloris

A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.
https://coloris.js.org/examples.html
MIT License
443 stars 58 forks source link

Open method #120

Closed Mashiane closed 11 months ago

Mashiane commented 11 months ago

Hi, can you please expose the "open" method just like the close method so that one can call it directly.

I am trying this out with Ionic and its proving a little challenging with ion-input. I guess if it can be opened via e.g. a button click event, it could work.

Please.

melloware commented 11 months ago

@Mashiane here is what I do in PrimeFaces with Coloris to open it.

/**
     * Shows the popup panel.
     */
    show: function() {
        if (this.input) {
            this.input.trigger('click');
        }
    },

Basically just "click" on your input. Note: I am using jQuery above but you get the idea.

mdbassit commented 11 months ago

Hi @Mashiane, there is no way to open the color picker without it being bound to an input element.

An ion-input is just a wrapper around a label element and an input element, so the color picker should work if you provide the correct CSS selector to the el property when initialiazing. Here is an example:

<ion-input label="My color field" class="coloris"></ion-input>
Coloris({
  el: '.coloris input' // Target the input field inside the ion-input component
});
mdbassit commented 11 months ago

I'm closing this for lack of activity. Feel free to reopen if the issue persists.