melloware/coloris-npm

A lightweight and elegant JavaScript color picker.

Reputation

Sponsor Me ❤️

Tech Stack

coloris-npm's Issues

Inline colorpicker not calculating the right area dimensions

I want to display the colorpicker in a custom popup without any input. I used the following options:

    Coloris({
      el: null,
      inline: true,
      parent: '#' + anchorId,
      autoClose: false,
      focusInput: false,
      alpha: false,
    })

The colorpicker opens as expected but when using the colorArea the color marker is locked to the right of the area because the x / y dimensions getting calculated are a bit off in the updatePickerPosition() function. I fixed it by using getBoundingClientRect() for the dimensions. I can provide the fix as a PR but it probably needs some testing on other use cases.

undefined error when reading getBoundingClientRect in updatePickerPosition()

There is an error in updatePickerPosition() with the latest (0.19.0) release on npm, which appears to be due to the line added in 9af0f49 not being in the actual npm 0.19.0 release.

Specifically, the release on GitHub includes the following check:

coloris-npm/src/coloris.js

Line 351 in 9af0f49

if (!picker || (!currentEl && !settings.inline)) return; //** DO NOT REMOVE: in case called before initialized

However, the version hosted at npmjs.com, and downloaded via npm, does not:

This is causing the following error:

Angular 15 no loaders are configured to process coloris.css

I am trying to use the colorpicker in an Anguar 15 project but I get an error when running the project:

./node_modules/@melloware/coloris/dist/coloris.css?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .clr-picker {
|   display: none;
|   flex-wrap: wrap;

Feature Request: Angular Implementation

Yes Yes Sir! I shall be doing this I know your time is thin :)

Angular/Ivy build in this code base or a separate repo?

[Bug] import_coloris.default.init is not a function

I have same kind of errors as #13

Just by adding

import "@melloware/coloris/dist/coloris.css";
import Coloris from "@melloware/coloris";
Coloris.init();
Coloris({el: "#coloris"});

I have the error:

Uncaught TypeError: import_coloris.default.init is not a function

Using CDN is working properly, am I missing something ?

Reference to input element

IMPORTANT: Before reporting anything here please report it on the main project at https://github.com/mdbassit/Coloris That is the main repository where bugs should be fixed and we will port them to this project once the original Coloris project does a release.

If your issue is NPM or TypeScript related then it is OK to report that here.

Is that possible to support passing element as an input on top of query Selector for el? In case of shadow dom, passing the query selector might not work.

Non-passive event listener [Google Chrome]

Hello guys,

Thanks for the library.

I just started using the library and as soon I opened in Google Chrome I got this warning message:

coloris.js:928 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Any idea to remove the warning?

Builds Failing

@blutorange Do you mind looking into why the builds are failing? It doesn't look like any code was changed but they seem to be failing

Readme should focus on NPM

.. remove other docs which might make it confusing to users. We should refer to the original repo for documentation.

[Vue] init is not a function

Hi, after importing with npm, and adding the following to the top of the vue file

import "@melloware/coloris/dist/coloris.css";
import Coloris from "@melloware/coloris";
Coloris.init();
Coloris({el: "#coloris"});

I get the following error.

Uncaught (in promise) TypeError: _melloware_coloris__WEBPACK_IMPORTED_MODULE_1___default().init is not a function

If i add the library through the CDN, it works just fine.

Use in vanilla JS app

@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.

Import stylesheets into scss BUG

When I import into scss - @import "@melloware/coloris/dist/coloris.css";

Syntax Error: Error: Package path ./dist/coloris.css is not exported from package .../node_modules/@melloware/coloris (see exports field in .../node_modules/@melloware/coloris/package.json)

Merge readme.md

formatToggle: true is missing.