astronomersiva / ember-pickr

Color Picker for EmberJS using pickr

ember-pickr

Color Picker for EmberJS using pickr

Demo & Documentation

Installation

ember install ember-pickr

Usage

{{color-picker
  value=value
  default="#e04e39"
  format="hexa"
}}

Options

Takes all options that are applicable to pickr.

• disabled: Start state. If true, 'disabled' will be added to the button's classlist | false
• default: Default color | #fff
• comparison: If set to false it would directly apply the selected color on the button and preview | true
• defaultRepresentation: Default color representation. Valid options are HEX, RGBA, HSVA, HSLA and CMYK | HEX
• showAlways: Option to keep the color picker always visible | false
• closeWithKey: Close pickr with this specific key. Can be the event key or code | Escape
• position: Defines the position of the color-picker. Available options are top, left and middle relative to the picker button. If clipping occurs, the color picker will automatically choose his position. | middle
• adjustableNumbers: Enables the ability to change numbers in an input field with the scroll-wheel. To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five | true
• saveLabel: Button label for save button | Save
• clearLabel: Button label for clear button | Clear
• format: One of hsva, hsla, rgba, hexa, cmyk | { h, s, v, a }
• To use the onChange and onSave handlers, use closure actions.

{{color-picker
  value=value
  default="#e04e39"
  format="hexa"
  saveLabel="Set Color"
}}

The onSave and onChange handlers can take two parameters - hsva and instance where hsva is an HSVa color object and instance is the current instance of Pickr. The HSVa object has toHSVA, toHSLA, toRGBA, toHEXA, toCMYK, and clone methods that return the converts the object into corresponding arrays. You can call toString on the resulting array to get the string representation of the colors.

• To toggle components inside the color picker, you can pass the following options to the components property:

{
  palette: true,  // Will be overwritten with true if preview, opacity or hue are true
  preview: true,
  opacity: true,
  hue: true,

  interaction: {
    hex: true,
    rgba: true,
    hsva: true,
    input: true,
    clear: true,
    save: true
  }
}

License

This project is licensed under the MIT License.

ember-pickr's Issues

Assertion Failed: You modified "value" twice in a single render

It seems like ember-pickr has issues when used as data-down, action-up component.

onSave(color) {
  this.set('value', color.toHEXA().toString());
}

{{color-picker value=value onSave=(action onSave)}}

It might be possible to workaround this by telling pickr to update silently.

Failing test:

  test('it handles the color value changes without dying', async function(assert) {
    this.set('value', '#bada55');
    this.set('onSave', (color) => this.set('value', color.toHEXA().toString()));
    await render(hbs`{{color-picker value=value onSave=(action onSave)}}`);
    await sleep(1000);

    this.set('value', '#11ccee');

    assert.equal(
      getComputedStyle(this.element.querySelector('.pcr-button')).color,
      'rgb(17, 204,238)'
    );
  });

ember-pickr makes our test suite brittle

Hey!

We just encountered that our tests which rely or render ember-pickr are brittle. We think this happens because pickr.min.js is instantiated within a requestAnimationFrame and in combination with the default parameter different timings can happen. Therefore our test suite sometimes pass and sometimes not.

I'm not sure if it's a ember-pickr issue or something else. Also I do not know how to work around it. Would be great if someone could help us 😃

Here is the stacktrace from the test:

Update pickr-widget

Some breaking changes upstream, need to test and merge them. Locking version to 0.3.2 till then in #5.

Filing this issue as a self-reminder.

Error in Edge Ember-cli from ember-pickr because of spread operator

This attached line throws an error in Edge when running locally.

Update pickr to 0.4.9

pickr 0.4.9 contains fixes for positioning the pickr in scrolled and transformed views. Could ember-picker be updated to use this latest version?

Thanks!

cancel event is swallowed

pickr emits a cancel event when clicking the cancel button.

Sadly this isn't handled/proxied by ember-pickr.
I think it would be great to allow consumers to do something on cancel.

Oops seems like cancel and clear were added 22hrs ago in a release:

https://github.com/Simonwep/pickr/releases/tag/1.2.3

I'll create a PR to add support for these

Octane Compatibility

Update `ember-auto-import` to `v2`

This packages brings atm ember-auto-import v1.x as dependency
ember-auto-import v1 brings webpack 4, which is causing problems with nodeJs v17+

More about nodejs problems you can found here webpack/webpack#14532

Color change after initial render

There’s no way to update the default color after the component is rendered.
It can be done using the did-update method from ember-render-modifiers add-on.

Proxy pickr hide/show events

Once the new pickr release is there, we should proxy hide and show events.
Probably as onHide and onShow.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Allow default color null

I think there should be the possibility of default color as null.

Outdated pickr dependency

Hi, great addon.

I was looking into how to change the pickr theme but noticed that this addon uses [email protected] but the latest upstream version is 1.2.2.

Would you be interested in upgrading pickr to get various fixes and features?

I could try to create a PR for this. There's the question how to make the theme configurable for addon consumers though. For now it's probably good enough to let them manually app.import("node_modules/@simonwep/pickr/dist/themes/nano.min.css"); until this addon finds a better way.

Nvm we should probably make it configurable and use the classic theme by default.