sphinxxxx / vanilla-picker Goto Github PK

1. Launch the picker
2. Select a colour
3. onChange event triggers twice

See demo of issue

Hi! We are trying to migrate to a stricter Content-Security-Policy header. However, this currently does not work with vanilla-picker. The header we want to enforce is as follows:

Content-Security-Policy: img-src 'self' data:; default-src 'self'

This header causes dynamically injected <style> elements to no longer work. They will be ignored and produce an error. Example in Chrome:

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". [...]
./node_modules/vanilla-picker/dist/vanilla-picker.mjs @ vanilla-picker.mjs:504

The way to fix this could be to add a new option externalCss: true somewhere, which would prevent the dynamic <style> injection. Additionally the user would have to manually import the CSS file using a <link> element, or bundling it in webpack.

Note that directly applying styles to an element is not affected by this, e.g. uiSL.style.color = ... still works fine.

Can you please tell me how use custom CSS, and mofiy markup of the plugin? Also the behavior is weird as described as #8

It would be useful if you can import Options interface from:
https://github.com/Sphinxxxx/vanilla-picker/blob/master/src/index.d.ts:14

Hi, the alpha option can be set only once.
Changing it later via setOption has no effect.
I expect some more options also to be unchangeable, if I will find some - will report in comments, please also check.

This bug is important in case of reusing the same picker for different items on the page with different needs. (e.g. in one case alpha is allowed, in another is not)
Destroying picker each time may be a workaround, but, you know..

Hi and thanks for this nice plugin!

Since you 're using flexbox in your CSS, which is not fully backwards compatible, it would be nice if you could add prefixes for increasing CSS-related compatibility.

I see that you 're using gulp, so the best option to do it (I assume you already know that) is add gulp-autoprefixer to your sass gulp task, which will compile e.g. .picker_wrapper { display:flex; } to .picker_wrapper { display:-webkit-box; display:-ms-flexbox; display:flex; } (or more/less prefixing, according to your 'browsers' setting).

@Sphinxxxx thanks for writing and sharing this color picker, I like the clean and powerful API. I'm using it in JSONEditor now and it works like a charm :)

I noticed that the onClose event is only called when you click "Ok" or click on the parent element where the editor is attached. I would expect onClose to be fired too when clicking anywhere outside of the editor but this is not the case. It would be great if there is a way to get triggered when the editor is closed either via ok or a cancel. Any ideas?

When you launch the color picker, then click off screen somewhere to close the color picker, it doesn't fire the onDone function.

This would be great functionality as then you can additionally set the pickers value after the fact rather than immediately onChange.

Hello,
your Picker looks cool, thank you.

I cant handle creating new Picker instances inside loop.
looks like Picker objects have correct parents in object properties but they all bind to last parent - https://codepen.io/alanhadzh/pen/rrbVoW

Well i noticed an issue with the picker, that it goes beond the picker borders and therefore having not valid colors (using rgba mode)

Hi,

Is there any chance you would add color palette features? It could be implemented as an additional option of the color picker.

Found a small bug - fixed it.
When a popup, onDone never ran, because the popupCloseProxy ran first. So I added a new check:

BEFORE
var popupCloseProxy = function popupCloseProxy(e) { _this2._ifPopup(function () { return _this2.closeHandler(e); }); }; var onDoneProxy = function onDoneProxy(e) { _this2._ifPopup(function () { return _this2.closeHandler(e); }); if (_this2.onDone) { _this2.onDone(_this2.colour); } };

AFTER
var popupCloseProxy = function popupCloseProxy(e) { if (_this2.onDone) { return _this2.onDone(_this2.colour); } _this2._ifPopup(function () { return _this2.closeHandler(e); }); }; var onDoneProxy = function onDoneProxy(e) { _this2._ifPopup(function () { return _this2.closeHandler(e); }); if (_this2.onDone) { _this2.onDone(_this2.colour); } };

Hi folks.
I’m trying to integrate vanilla-picker with Angular. I’ve created a new declaration file for TypeScript:

// src/@types/vanilla-picker/index.d.ts
declare module 'vanilla-picker' {
  interface Color {
    rgba: number[];
    hsla: number[];
    rgbString: string;
    rgbaString: string;
    hslString: string;
    hslaString: string;
    hex: string;
  }

  type ColorCallback = (color: Color) => void;

  interface Options {
    parent: HTMLElement;
    popup?: 'top' | 'bottom' | 'left' | 'right' | false;
    template?: string;
    layout?: string;
    alpha?: boolean;
    editor?: boolean;
    editorFormat?: 'hex' | 'hsl' | 'rgb';
    cancelButton?: boolean;
    color?: string;
    onChange?: ColorCallback;
    onDone?: ColorCallback;
    onOpen?: ColorCallback;
    onClose?: ColorCallback;
  }

  class Picker {
    constructor(options: Options);
    destroy(): void;
  }

  export default Picker;
}

But when I run my app, even tho everything works, I have this error on the console: ERROR in src/app/draw/sidebar/sidebar.component.ts(36,17): error TS2339: Property 'destroy' does not exist on type 'Picker'.
In my sidebar.component.ts:

// ...
  ngAfterViewInit() {
    this.picker = new Picker({
      parent: this.figureEl.nativeElement,
      popup: false,
      onChange: () => console.log('change'),
      onDone: () => console.log('done'),
    });
  }

  ngOnDestroy() {
    this.picker.destroy();
  }
// ...

What am I doing wrong? Thank you.

I need to remove alpha as an option for end users but would then expect the returned hex value to not include an alpha. My specific use case requires me to then send this data to a 3rd party API, which only validates 6 digit hex. This means I will now need to edit the hex value before I send it off.

It would make more sense to me that when alpha is set to false in the color picker it would return non-alpha colors (rgb instead of rgba, 6-digit hex instead of 8, etc.)

Hi Andreas, maybe you can help me. I'm using vanilla-picker library on my application, but have troubles when trying to import Picker. All browsers work fine, only IE 11 throw error like

SCRIPT1006: Expected ')'

When trying to use the library with tag <script> all works fine.
Would be great if you can have a look into that.

Handling the placement would be great (probably depending if the click is further than half of the screen size). Right now the picker can get hidden off the screen

Support for gradients could be added

Hi,

Great package!

I'm hearing reports the two sliders are too small, so I'd like to give them more of the screen relative to picker_sl.

I looked at the code but can't figure out how to change the relative height or width - can anyone help?

Many thanks@

Hi there. I was looking for a "vanillaJS" colour picker and was pleasantly surprised to find this, thank-you!

I'm attempting to use the picker within a "shadow DOM":
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

The picker doesn't seem to operate correctly in this scenario. (it momentarily displays a text field and button before vanishing). I notice there's some code that dynamically creates a style element, and injects it into the document head. I'm wondering if it would be possible to control where the style gets injected so that it could be injected into a shadow DOM.

I've created a gist to demonstrate the scenario at:
https://gist.github.com/mattriley/fe456b6579d6938359266c305fd45a3a

Thanks again and look forward to your reply.

Hey there. I'm building a solution attempting to avoid globals as much as possible. I'm using jsdom for testing, and preferring to avoid jsdom-global. What would be helpful is if vanilla picker could accept a window object as a constructor option and use that reference internally so that vanilla picker is not relying on globals. If a window object is not passed in, it could default to the global window object. At the moment, I'm having to set these globals to get vanilla picker playing nice with my tests:

global.window = window;
global.document = window.document;
global.HTMLElement = window.HTMLElement;
global.getComputedStyle = window.getComputedStyle;

Thanks for your consideration!

For correct current code it need to stay 5 classes and elements, which I may not use in picker.

For example, I use this teplate:

<div class="picker_wrapper" tabindex="-1">
    <div class="picker_arrow"></div>
    <div class="picker_hue picker_slider">
        <div class="picker_selector"></div>
    </div>
    <span class="picker_transp">
        <input type="checkbox" title="set transparent color"/>
    </span>
    <div class="picker_cancel">
        <button>x</button>
    </div>
    <div class="picker_sl">
        <div class="picker_selector"></div>
    </div>
</div>

But I need add this fictive invisible element for workaround of errors:

<div class="picker_alpha picker_editor picker_sample picker_done">
    <button class="picker_selector"><input></div>

After this truck template works correctly.
Picker code can check for the absence of these classes and elements.

Vanilla-Picker is fantastic however it does not work with input elements at all and while it will hectically display when associated with a button element it immediately closes after any attempt of interaction.

My first suspicion was that HTML/XML added to the DOM was using a pseudo-element however it is now (pseudo-elements can not be applied to self-closing elements such as br and input).

My interest is to replace the default behavior of input[type='color'] with Vanilla Picker starting with the use of event.preventDefault(); however this is currently not possible. In the interim it appears that I'll have to utilize anchor elements and have them manipulate hidden input[type='color'] elements. As much as I'd love to go poking around through the code I simply can't at this point otherwise I would have naturally suggested a starting point of some kind.

I am using your awesome plugin with my VueJS app, but I need to prevent memory lacks to destroy the instance... And I didn't find the way how to do it in the documentation...

Is there some methods to destroy it? Something like this?

var pick = new Picker(element, options); ... pick.destroy();

Hi, very cool picker, thank you!
Please help - I want to create the picker at the top level of DOM-tree and show/hide it dynamically when the user clicks one of the sub-elements on the page.
Can I do it?
I want picker to be passive, so it will not listen for clicks, and also I want to position it absolutely, depending on which element was clicked.

I tried to create picker instance on click, then use method 'show', and then destroy it onDone.

But currently, the picker tries to add itself as a child of a clickable element, but this absolutely doesn't work in my case, because the parent element is overflow: hidden and also heavy CSS applied in the area of this element, so picker gets very distorted. (I have an editable tree of properties, and some of these properties are colors)

So, if I will create picker instance with body parent - can I control somehow it's revealing position?

Can't use it whatever element I set as parent keeps returning this error..

I want to clear the color (no color code). possible?

I ran into a problem that when using the moduleResolution option with the value "Bundle" (in tsconfig.json), it is not possible to find the types for the package.

I found a solution: you need to make edits to package.json.

"exports": {
    ".": {
      "require": "./dist/vanilla-picker.js",
      "import": "./dist/vanilla-picker.mjs",
      "default": "./dist/vanilla-picker.mjs",
      "types": "./src/index.d.ts"   <---   ADD THIS LINE
    },
    "./csp": {
      "require": "./dist/vanilla-picker.csp.js",
      "import": "./dist/vanilla-picker.csp.mjs",
      "default": "./dist/vanilla-picker.csp.mjs"
    },
    "./dist/": "./dist/",
    "./dist/*": "./dist/*"
  },

Can u help me please? I know, it's minor, but very important in my case

Hey Sphinxxxx,

I like this picker and I am using in my website, however there is a small issue in firefox,

I init picker with alpha: false, then in firefox if you drag the slider and picker to the right, you can see a grey boundary line.

These are the options that I am using:

pickerBackround.setOptions({
    alpha: false,
    color: '#12263F',
    popup: 'left'
});

Picker works as expected otherwise.

I think this question is related to the issue #20.

If I cannot use the picker with an input filed, how can I have it in a form?
I need to save the color that the user picks in my DB. So, I need the picker within a form. Is that possible?

Hello,

I am allowing myself to open a new issue in case a message on a closed thread would not notify you.
I have the exact same issue as #8 and I would like to know if it is possible today to fix that problem?
In my case, I have different panels with the possibility to change elements' colors and those panels have a scroll bar because of their size. That's why the color picker is halfway in the panel and hidden.

Thanks for your answer!

Hi,

When i use color.hslString, result give me too much precision :

hsl(355.29411764705884,99.1304347826087%,51.73913043478261%)

It would be nice to have a function that allows to choose the result after the decimal point or something approching ?

Hey @Sphinxxxx

Thanks for this color picker library, it looks like a nice alternative to jQuery-Minicolors.

My main concern is the cryptic colorNames feature: https://github.com/Sphinxxxx/vanilla-picker/blob/master/dist/vanilla-picker.js#L85

Could you please consider removing it?

It looks malicious on first glance. After reading the comments in more depth, it's apparent that this was built with good intentions. But this is a case where being clever to save a few bytes isn't doing anyone any favors.

It makes the code very difficult to interpret, and the feature itself will probably go unnoticed by the vast majority of users. Thanks for the consideration.

Hello.
Thank you very much for creating this very flexible color-picker.

We currently have an "OK" button.
It would be good to also have a "Cancel" or "Dismiss" button that will do picker.hide()

Many thanks

Arcadius

Hi Andreas, thanks for this awesome library, it really works like a charm! I use it in http://github.com/josdejong/jsoneditor 👍

I noticed a small CSS issue on Firefox: the color HEX code doesn't fit in the input field with the default styling:

Would be great if you can have a look into that.

It's pretty much as the title suggest.

In my project, I offer a separate input field to type a hex code and I use setColor() to sync it to the color picker. The only issue is that I also use the onChange() to do a bunch of stuff too but the setColor() fires it.

This leads to unexpected behavior...

How can I use setColor() and not fire onChange() simultaneously?

In use case of sharing one picker instance across multiple buttons the 'parent'/container element may be different from the button (body or section). Click on parent should not always open the picker. So please add option to ignore handling on parent click

if (!settings.preventOpeningOnParentClick) {
                      this._events.add(parent, 'click', openProxy);
                  }    

Hi Sphinxxxx,

Thank you for this great colour-picker. It's just what I needed for my site.

As an additional request to #18 , could the Cancel button fire an onCancel event (in addition to onClose, of course), please?

I did have a look at the code to see if I could create a pull-request, but am struggling.

Best,
DefCheese.

Hi, first congratulate you for so good tool you have made. Im currently using the picker and I load it inside of a modal with other options (input for text, image, etc). The thing is when i try to focus on the input, the picker hides and i lose the focus on the input. If I click again in the input, the picker shows and I lose the focus in the input again.

Is there any way to prevent or disable that option? I mean if the picker could never hide until I hide the parent (the modal) or disable the property of hide the picker when I click outside of it.

Thanks!!

You wanted some feedback on accessibillity.

If the picker_selector divs were to have role="button" and tabindex="0" they would be keyboard focusable. Then keydown eventhandlers for arrowkeys could move them.

It would be great if there could be support for #AARRGGBB format (i.e. with alpha AA at the start not at the end). I am coming to this from an Android environment, where all my colours are represented in this format (see here) and whilst it would be possible to create a bolt-on to translate from #AARRGGBB to #RRGGBBAA before vanilla sees it, and then translate back at the other end to #AARRGGBB, it would be really nice if this could be supported natively.