narsenico / a-color-picker Goto Github PK

View Code? Open in Web Editor NEW

107.0 3.0 21.0 2.7 MB

A color picker for web app

License: MIT License

CSS 5.82% HTML 38.37% JavaScript 54.80% TypeScript 1.01%

javascript color picker color-picker

a-color-picker's Introduction

See api and demo

Usage

Include acolorpicker.js

<script type="text/javascript" src="acolorpicker.js"></script>

or require a-color-picker

const AColorPicker = require('a-color-picker');

Call this JavaScript function
```
AColorPicker.from('div.container');
```

a-color-picker's People

Contributors

Stargazers

Watchers

a-color-picker's Issues

[Request] set color() silently

Hi,
i can change picker color programatically by

picker.color = [205, 220, 57];  // set color

I need something like

picker.colorSilent = '' ;  // set color , do not trigger change event !!!

picker.color = '';  // set color empty string
// change event is triggered 
//  should return color as empty as well,  instead of black color

Is there a way to set color silently so that handle and canavs are updated but change event is not triggered.

I am trying to implement Clear and Cancel functionality and when i click on Clear button , i set picker.color='' //empty ''' but picker triggers change``` and sends me back black color hex.

It will be helfpful if either change event send color as empty string or null if set picker.color='' //empty ''' Or If I am able to set color silenty without triggering change``` so i can set value of colro to empty string internally.

I hope you understand my issue :)

[Request] Theme Suggestion

HI,
Please consider using tabs for showing HSLA, HEXA etc. or buttons that display HEXA HSLA fields.
This will make height less when all HSLA HEXA AND RGBA are enabled and look cooler :)

I modified this plugin heavily after it is initialsed. See demo below
Animated gif:

Great Plugin BTW!!!

[Request] Display Alpha editable field when showAlpha is true

Hi,
All other pickers display alpha Field when Alpha bar is visible.
specially HEX field then also includes Alpha values
Can we request same feature ?

Ref: Animated gif

Image:

Feature: Eyedropper (Pick Color from Website)

@narsenico I'd like to get your opinion on something that's haunting me for a long time now.

There's currently no browser-based colorpicker out there that allows "eyedropping" (picking a color from the current page). While there are some extensions that do so, i'm not aware of any project that tries to bridge that gap, to bring this functionality to the page javascript context.

As you're probably aware, todays' browsers simply don't provide an API for that.

Anyways, I'm playing with the Idea of using a browser-extension to bridge support to the pages' javascript context. As for user experience, I could see how a eye-dropper button decides to (1) open up the chrome extension page for install, or (2) start the eye-dropping feature if the extension is present. The extension itself would run silently in the background, and bring no visible GUI on its' own.

I'm not entirely sure whether this 'somewhat cumbersome' experience (requiring an extension install) breaks the design goal, however I'm still intrigued, as it would probably the first time that a javascript-based color picker gets even close to delivering on this functionality.

So, to sum it all up, I'm just curious to hear whether you think this could be a valuable addition, or whether eye-dropping is not as much of a requirement, or any other thoughts.

cannot set palette

Hi,
Please make a way to set palette dynamically from code side.
I'm trying to set it with jqAttr but it's not working.
Tnx for this useful tool.

All palette updates add an additional addColor listener

Fantastic plug-in!

I have only two small issues. Whenever I use picker.palette = <blah>, it seems setPalette creates listeners each time anew. So every time I change the stock palettes in the picker, more and more duplicated listeners get added.

Similarly, is there a way to disable the default actions for adding and removing?

Need ability to override default styling

As it stands, the only way that I have been able to override the default styles is to disable adding them to the in the JS file. (What purpose does this serve?) And personally, I'd rather not modify the source files of the plugin.

WebPack issue

I use color picker with webpack + the following code in my js code:
import AColorPicker from 'a-color-picker'

But I get an error in my console:
AColorPicker is not defined

wrong return type for API method parseColor

When I check the file acolorpicker.d.ts file I see

export function parseColor(color: string | Array<number>, outFormat?: OutFormat): string;

which is simply wrong because it could also return a number[].

Dropdown mode

Is there an option to make the picker works as a dropdown?
Thank you.

Property 'on' does not exist on type 'ACPController[]'.

I'm trying to integrate this with a StencilJs component. I have the below code.

componentDidLoad() {
    AColorPicker.from('.kp-color-generator__form__color-chip', {
      color: this.defaultColorHex,
      palette: 'PALETTE_MATERIAL_CHROME'
    }).on('change', (picker) => {
      this.defaultColorHex = picker.color;
    });
  }

But Stencil build fails with a warning as below, with a highlight for .on(

TypeScript: src/components/kp-color-generator/kp-color-generator.tsx:24:8
           Property 'on' does not exist on type 'ACPController[]'.

     L23:    palette: 'PALETTE_MATERIAL_CHROME'
     L24:  }).on('change', (picker) => {
     L25:    this.defaultColorHex = picker.color;

How does one safely destroy an ACPController instance?

Is possible to detach it from a DOM node without destroying the node?

[Request] Mobile support

Hi, thanks for making such a great little plugin :) Would love touchscreen support to be added.

Problem with import

Is there a way to insert the library in a typescript module base project.

I have tried many things like :

import AColorPicker = require('a-color-picker');

But I alway get an empty object.

Logo Proposal

Good day @narsenico I am a graphic designer and I want to contribute to your good project by proposing a logo design which i will be doing for free. I noticed that the project doesn't have a logo yet. If you will allow me i will begin my design asap. Thanks and best regards!

-Tobaloidee

No way to close the color picker

Hey! Thanks for the awesome color picker!
But there's no default way to close it. I did get it working by manually adding a display property but it would be great if such a functionality comes out of the box

How to change color value in Picker by user input from outside of picker

Hello! I've been trying to get user input value to change color ii Picker. I want user input value and change to picker color. I also tried to change "color" attr after user input. But, I didn't work.
Thanks

Using input fields inside form

Hello,

First of all, gotta say that this feature is awesome, works like a charm.

I'd like to mention that if I use the color picker inside a form, when I send the information to the back-end, I receive a lot of unnecessary information, because since the color picker has input fields with the "name" attribute, all this data gets saved, even if I disable HSL and RGB picker, they're still in the DOM but not rendered, so I get the numbers anyway.

Is there any way to solve this? A way to not send everything on submit.
What I have on my form is a hidden input field that I change the value using the .onChange property when instancing it. Like this:
const picker = AColorPicker.createPicker({ attachTo: 'div.colorPicker', showHSL: false, showRGB: false }).onchange = (picker) => { $('input#color').val(picker.color); };

Build issue

I am trying to add touch events, but is is not building on my side:

yarn run build
yarn run v1.22.18
warning ../package.json: No license field
$ webpack --config webpack.prod.js
clean-webpack-plugin: /Users/gkucmierz/workspace/a-color-picker/dist has been removed.
Hash: a6b6910bcf3ee9288238
Version: webpack 4.47.0
Time: 1391ms
Built at: 11/20/2023 10:24:28 PM
 1 asset
Entrypoint acolorpicker = acolorpicker.js
[1] ./src/acolorpicker.js 57.9 KiB {0} [built]
[2] ./src/utils.js 24.4 KiB {0} [built]
[4] ./src/acolorpicker.html 1.67 KiB {0} [built]
[5] ./src/acolorpicker.css 351 bytes {0} [built]
[6] ./node_modules/css-loader??ref--4-1!./src/acolorpicker.css 3.32 KiB {0} [built]
    + 3 hidden modules

WARNING in acolorpicker.js contains invalid source map

ERROR in acolorpicker.js from Terser
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/terser-webpack-plugin/dist/index.js:217:37
    at Array.forEach (<anonymous>)
    at TerserPlugin.optimizeFn (/Users/gkucmierz/workspace/a-color-picker/node_modules/terser-webpack-plugin/dist/index.js:160:259)
    at _next1 (eval at create (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
    at eval (eval at create (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/uglifyjs-webpack-plugin/dist/index.js:287:11
    at step (/Users/gkucmierz/workspace/a-color-picker/node_modules/uglifyjs-webpack-plugin/dist/uglify/Runner.js:94:11)
    at done (/Users/gkucmierz/workspace/a-color-picker/node_modules/uglifyjs-webpack-plugin/dist/uglify/Runner.js:103:22)
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/uglifyjs-webpack-plugin/dist/uglify/Runner.js:109:15
    at Runner.boundWorkers (/Users/gkucmierz/workspace/a-color-picker/node_modules/uglifyjs-webpack-plugin/dist/uglify/Runner.js:80:13)
    at enqueue (/Users/gkucmierz/workspace/a-color-picker/node_modules/uglifyjs-webpack-plugin/dist/uglify/Runner.js:100:17)
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/uglifyjs-webpack-plugin/dist/uglify/Runner.js:120:11
    at Array.forEach (<anonymous>)
    at Runner.runTasks (/Users/gkucmierz/workspace/a-color-picker/node_modules/uglifyjs-webpack-plugin/dist/uglify/Runner.js:98:13)
    at UglifyJsPlugin.optimizeFn (/Users/gkucmierz/workspace/a-color-picker/node_modules/uglifyjs-webpack-plugin/dist/index.js:198:16)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:26:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/webpack/lib/Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/webpack/lib/Compilation.js:1405:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/gkucmierz/workspace/a-color-picker/node_modules/webpack/lib/Compilation.js:1342:27)
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/webpack/lib/Compiler.js:675:18
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/webpack/lib/Compilation.js:1261:4
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/Users/gkucmierz/workspace/a-color-picker/node_modules/webpack/lib/Compilation.js:1253:28)
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/webpack/lib/Compiler.js:672:17
    at eval (eval at create (/Users/gkucmierz/workspace/a-color-picker/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/webpack/lib/Compilation.js:1185:12
    at /Users/gkucmierz/workspace/a-color-picker/node_modules/webpack/lib/Compilation.js:1097:9
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Need ability to modify size of color picker

I need to be able to scale down the entire tool, but have not been able to determine how to do that. Even if I change the size of the via CSS, it doesn't alter the width and height properties on the tag itself.

How to add color-picker to laravel 5 app?

Hello,

In my laravel 5.7 / jquery 3.4.1
I want to add color-picker and in my edit.blade.php file I add link to color-picker files and js file which is related to this editor after
color-picker files :

@section('scripts')

    <link rel="stylesheet" href="{{ asset('/css/acolorpicker.css') }}" type="text/css">
    <script src="{{ asset('/js/acolorpicker.js') }}"></script>

    <script src="{{ asset('js/'.$current_admin_template.'/color.js') }}{{  "?dt=".time()  }}"></script>

    <script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\ColorRequest', '#form_color_edit'); !!}


    <script>
        /*<![CDATA[*/

        var backendColor = new backendColor('edit',  // must be called before jQuery(document).ready(function ($) {
            <?php echo $appParamsForJSArray ?>
        );
        jQuery(document).ready(function ($) {
            backendColor.onBackendPageInit('edit')
        });

        /*]]>*/
    </script>

@endsection

and in color.js I try to init color-picker as :

var this_backend_home_url
var this_id
var this_csrf_token

function backendColor(page, paramsArray) {  // constructor of backend Color's editor - set all from referring page and from server
    // alert( "backendColor  paramsArray::"+var_dump(paramsArray) )
    this_backend_home_url = paramsArray.backend_home_url;
    this_backendLengthMenuArray = paramsArray.backendLengthMenuArray;
    this_csrf_token = paramsArray.csrf_token;

    if (page == "edit") {
        this_id = paramsArray.id;
    }
    if (page == "list") {
        this.ColorsLoad()
        $(".dataTables_filter").css("display", "none")
        $(".dataTables_info").css("display", "none")
    }
} // function backendColor(Params) {  constructor of backend Color's editor - set all from referring page and from server


backendColor.prototype.onBackendPageInit = function (page) {  // all vars/objects init
    backendInit()
    const AColorPicker = require('a-color-picker'); // I GOT JS errors (Below) !
    AColorPicker.from('color-picker');

} // backendColor.prototype.onBackendPageInit= function(page) {
...

But I got JS errors:

Uncaught SyntaxError: Cannot use import statement outside a module
DevTools failed to parse SourceMap: http://local-boxbooking2.com/css/bootstrap.min.css.map
jquery-3.3.1.min.js:2 jQuery.Deferred exception: require is not defined ReferenceError: require is not defined
    at backendColor.onBackendPageInit (http://local-boxbooking2.com/js/Backend/color.js?dt=1583830130:24:26)
    at HTMLDocument.<anonymous> (http://local-boxbooking2.com/admin/colors/3/edit:385:26)
    at l (http://local-boxbooking2.com/js/jquery-3.3.1.min.js:2:29375)
    at c (http://local-boxbooking2.com/js/jquery-3.3.1.min.js:2:29677) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
c @ jquery-3.3.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
fire @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
ready @ jquery-3.3.1.min.js:2
_ @ jquery-3.3.1.min.js:2
jquery-3.3.1.min.js:2 Uncaught ReferenceError: require is not defined
    at backendColor.onBackendPageInit (color.js?dt=1583830130:24)
    at HTMLDocument.<anonymous> (edit:385)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)

Which is valid way to add color-picker to the project?

I tried to comment line
const AColorPicker = require('a-color-picker');
then I got errors on next lines :

SyntaxError: import declarations may only appear at top level of a module acolorpicker.js:10
jQuery.Deferred exception: AColorPicker is not defined backendColor.prototype.onBackendPageInit@http://local-boxbooking2.com/js/Backend/color.js?dt=1583942792:25:5
@http://local-boxbooking2.com/admin/colors/1/edit:385:26
l@http://local-boxbooking2.com/js/jquery-3.3.1.min.js:2:29375
a/</c<@http://local-boxbooking2.com/js/jquery-3.3.1.min.js:2:29677
 undefined jquery-3.3.1.min.js:2:30930
ReferenceError: AColorPicker is not definedcolor.js:25:5

```How correct it ?



Thanks!

using with angular 8 and ng-bootstrap throws an error

I'm using a-color-picker with angular 8 and ng-bootstrap.

I'm showing an NgbModal and inside that picker shown. I see the below error message (but it continues to work without a problem) It might be a bug of angular as well

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.
at viewDebugError (core.js:28793)
at expressionChangedAfterItHasBeenCheckedError (core.js:28770)
at checkBindingNoChanges (core.js:29758)
at checkNoChangesNodeInline (core.js:44443)
at checkNoChangesNode (core.js:44416)
at debugCheckNoChangesNode (core.js:45377)
at debugCheckRenderNodeFn (core.js:45309)
at Object.eval [as updateRenderer] (ColorPickerComponent.html:9)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:45294)
at checkNoChangesView (core.js:44251)

narsenico / a-color-picker Goto Github PK

a-color-picker's Introduction

Usage

a-color-picker's People

Contributors

Stargazers

Watchers

Forkers

a-color-picker's Issues

Recommend Projects

Recommend Topics

Recommend Org