metafizzy / huebee Goto Github PK

Hi, I would like to set the font color and border color of elements too with Huebee. I know I can do it with the .on('change') event, but it would be nice if we would get native support with something like setFont and setBorder configuration parameters.

I'm using HueBee with angular and I have come across a weird bug.

Actual Behavior
Everytime I select an color from pink or red hues, they come as negative hues, as shown in print

Expected Behavior:

Hues must be in range of 0 to 360

Reproduction steps
Install HueBee and print the actual color in the console after selecting a hue from pink to red in the right side of the picker panel

I'm sending a print of the problem

Am I doing something wrong ?

This issue appears in Firefox (v113.0.1) not Chrome or Edge.

When I click the field to choose a colour the pop-up box is blank. Is there a quick fix?

Hi, I'd like to update the value from the input['.color-input], however, I can't see the way to do that.

It seems that with the method hueb.on(change) the clicked input is lost.

Any idea or help?

Thanks a lot for this color picker, so simple and nice!

[RESOLVED] mistake founded

Is it possible to apply the color change to an outline button, so that it can change its color completely and take on the Huebee style?
https://getbootstrap.com/docs/5.2/components/buttons/#outline-buttons

Something like this:

I would love the the option to make the picker window close automatically as soon as a color is chosen. Changing input colors would then be just two mouse clicks instead of three!

Vote for your preferred method to set initial color by adding a 😆 , 🎉 , or ❤️ reaction for the corresponding solution

Do not add "+1" comment — they will be deleted. Subscribe for issue notifications using the button in the sidebar.

You can set initial color with <input> elements by setting their value

<input value="#C25" />

But there's no standard way to set initial color for non-inputs.

😆 Add initialColor option.

new Huebee( elem, {
  initialColor: '#C25',
}

<button data-huebee='{ "initialColor": "#C25" }'>Set color</button>

🎉 Read initial color from text

<button>#C25</button>

❤️ Read initial color from style=" background-color: ..." attribute

<button style="background-color: #C25">#C25</button>

Trying out any custom alignment was not so easy/flexible. The only way I could get it to work was through hard-coding the position values. I didn't spend a ton of time on it, maybe with wrappers and percent you could get something going.

Might need an option to do different alignment, or just an addition to docs to help people out with that.

Hi,

First off, wanted to say thanks for this awesome color picker, it's really fantastic. I have a styling question / request though. I'm wondering if it's possible to either a) delete the white to black vertical swatches next to the main grouping of color swatches or b) move them so they line up with the main grouping of color swatches?

Currently no matter what you set the number of shades to, (5, 7, any thing else) the vertical white to black swatches will always have 2 more than the main group. This creates an ugly blank space under the main group of swatches and I'd like to tighten up that area of the picker.

I put together a really crappy mock-up to explain better what I'm talking about.

Thanks!
~Nick

I've had a look at the documentation, but can't see it listed... is there a way of preventing the keyboard appearing at the same time as the picker?

Hi, thanks for this great script there.
I use Huebee to change element's color using the 'change' event and it is working perfectly.
When I try to change another element's color using the same currently selected color, the 'change' event is not triggered.
It is of course obvious that the 'change' event is not triggered when the color does not change.
However, I need some event to be triggered when user select a color, even when there is no change in the selected color.

One more thing, when I set the color programmatically using the hueb.setColor(hex) method, the 'change' event is also not triggered. If staticOpen option is not set, the 'selection' cursor does not point to the color set even though the color being set is on the (palette) list.

Would you consider this as a feature request?
Thanks.

Greetings,

I have an issue, I noticed that the color change function fires up only when the color is valid.

Is there a way to fire it up even if the inputted data is not a valid color?

For example, in the console.log(this.selectedColor), it only fires when the color is valid. Let's say I add #xxx87, it doesn't fire up. Is it possible to make it available even when the data is not a valid color?

if (!this.colorSelector) {
        const elem = this.$el.querySelector('.brand-color-input')
        this.colorSelector = new Huebee(elem,{
          notation: 'hex',
          saturations: 2,
        })
        this.colorSelector.on('change', (color) => {
          this.selectedColor = color
          this.colorIcon = elem.style.color
          this.$emit('input', this.selectedColor)
          console.log(this.selectedColor)
        })
      }

Thanks for this great library. Currently, I'm using this library with turbolinks, so I need a way to destroy Huebee instance. I have gone through the code, but I'm unable to find it.

Is there any easy way to do it?

It would be really good to have the ability to clear a colour from Huebee. Whether this is via a JS method only or via the Hue panel, either would be great.

Conflict dont working with UIkit framework, color picker modal open empty

Add at 👍 reaction to this issue if you want Huebee to add this feature. Do not add a "+1" comment — they will be deleted. Subscribe using the button in the sidebar for updates on this feature request.

The current behavior is for Huebee to close if a click/tap occurs outside the Huebee element, or if its anchor element is blurred. This works well on desktop, allowing you click outside Huebee to close it. But on mobile touch devices, this means that you cannot scroll the page and keep Huebee open. As soon as you press down outside Huebee, it closes.

Hi David,

I'm trying to use Huebee with the CSS framework Bulma.

But for some reason, the canvas doesn't show up:

Here's the codepen: https://codepen.io/tompec/pen/jagwYe

Thanks!

Hi, I did not notice a way to use only custom colors. This can be very handy when you wish to limit selection to a brand's color theme or similar.

Thank you.

For isLight functionality you must change at ligne 896 :

this.emitEvent( 'change', [ color, swatch.hue, swatch.sat, swatch.lum ] );

By

this.emitEvent( 'change', [ color, swatch.hue, swatch.sat, swatch.lum, this.isLight ] );

How can I change the color of input elements in Bootstrap?

For example, from blue color to red color:

Thanks for your help @desandro!

i initialize huebee in html
if i change number of hues ( <input class="color-input" data-huebee data-huebee='{ "hues": "1" }'/> )
the width of element become very huge

(width - 2000px on pic)

I thought, that Huebee automatically sets the value of the input field, but it only changes the background color.

Does anybody knows how to fill the value?

z-index is a classic issue with tooltip/modal libraries I've used. See:

http://codepen.io/matthewlein/pen/zoEvpN

From what I've seen, the only way to make it z-index work as intended is to append to the body, instead of a sibling like you're doing. The body is most likely not in a set z-index context, so it can be reliably set by a developer. Its happened to me plenty of times. will-change also creates a new stacking context, making the issue more likely in other unforeseen ways.

First of all i think this is great 🎆 and thank you @desandro to make the web great again !

Feature Request (maybe?)

I think that would be cool to have an alpha value that change the color to exadecimal to rgba().

Something like this:

Add at 👍 reaction to this issue if you want Huebee to add jQuery plugin support. Do not add a "+1" comment — they will be deleted. Subscribe using the button in the sidebar for updates on this feature request.

I understand some users might be scared off by vanilla JS syntax new Huebee(), and are more comfortable with jQuery syntax .huebee(). Huebee jQuery plugin support would look like:

// initialize
var $colorInput = $('.color-input').huebee({
  // options
});

// methods
$colorInput.huebee( 'setColor', '#C25' );
$colorInput.huebee('open');
$colorInput.huebee('close');

// events
$colorInput.on( 'change.huebee', function( event, color, hue, sat, lum ) {
  console.log( 'color changed to: ' + color );
});

I've decided against jQuery support as I'd like to keep Huebee's source code small and simple. I don't feel jQuery support adds that much value over vanilla JS. jQuery plugin methods (i.e. .huebee( 'setColor', '#C25' ) do more to obfuscate actual JavaScript than to help understand it.

But, jQuery is widely popular and Huebee's user base is likely more comfortable with it, than vanilla JS.

In the case I'm using it on the pound sign / hashtag is not okay to have in the value. It would be nice to have it be able to be removed.

Another classic—should tooltips ever open offscreen?

IMO, no, thats something I want a library to take care of, and I would guess users would want that too. Inputs at the bottom of a page (or side, depending on where you want it to open).

Is there a way to set input text color to bg color on change?

For example, I want the text to be the same color as the selected swatch, so that it's invisible to the viewer. I.e. they only see the swatch with no text.

Or maybe there is a way to set the text color to transparent?

I would like to suggest to add the ability to set notation to false.

I’m using this with a button and icon and just wan’t the selected color to change the color of the element. As of now it replaces my icon with the hex value and I don’t want it to 😊

Thanks for the great work with this great js library 🤘🏻