See api and demo
- Include
acolorpicker.js
or require<script type="text/javascript" src="acolorpicker.js"></script>
a-color-picker
const AColorPicker = require('a-color-picker');
- Call this JavaScript function
AColorPicker.from('div.container');
A color picker for web app
License: MIT License
See api and demo
acolorpicker.js
<script type="text/javascript" src="acolorpicker.js"></script>
a-color-picker
const AColorPicker = require('a-color-picker');
AColorPicker.from('div.container');
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 !!!
OR
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 :)
@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.
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.
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?
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.
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
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[]
.
Is there an option to make the picker works as a dropdown?
Thank you.
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;
Is possible to detach it from a DOM node without destroying the node?
Hi, thanks for making such a great little plugin :) Would love touchscreen support to be added.
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.
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
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
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
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); };
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.
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.
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?
const AColorPicker = require('a-color-picker');
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!
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)
How I can add an opacity to peaker?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.