bebraw / colorjoe Goto Github PK
View Code? Open in Web Editor NEWScaleable color picker with touch and AMD support (MIT)
Home Page: http://bebraw.github.io/colorjoe/
License: MIT License
Scaleable color picker with touch and AMD support (MIT)
Home Page: http://bebraw.github.io/colorjoe/
License: MIT License
Hi guys !
I have setup the colorpicker in an HTML form, but I'm facing an issue. When I try to enter manually the hex number and press enter, it submit the form.
Any idea for a solution ?
I am the author of one-color (https://github.com/One-com/one-color) and I have been thinking about building a color picker like this for ages. You've done beautiful work.
I thought it might be beneficial to outsource the color math so you don't have to maintain that as well, and i think one-color might just fit the bill. My goal writing it was a very slim library that would remove all the uglyness and need for implicit knowledge about when to convert and when not to.
one-color clocks in at fewer bytes than your current color module, and I think it even has more features.
If you think this might be a good direction I can make the switch for you.
Figure out a nice way to offset it. Seems to fail in certain cases.
Hi @bebraw .. I'm graphic designer and an open source enthusiast. I would like to contribute to your awesome project by proposing logo design for it if you allow me. I'll be doing it as a gift for free to your awesome project.
Best regard. Mirza zulfan.
I couldn't work out a way to allow/set a transparent color - i.e. a null value. The colorpicker simply reverts back to #000000
due to this:
https://github.com/bebraw/colorjoe/blob/master/src/colorjoe.js#L245
I'll have a bash and raise a PR if that's ok?
Cheers ๐
I have a folder of 3rd party JS files (jQuery plugins and Javascript libraries).
I am trying to bundle them into a single file with webpack.
Below is relevant part of webpack.config.json
:
var glob = require("glob");
module.exports = {
entry: {
js: glob.sync("./src/js/*.js")
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist/js")
}
When I run webpack, I get these errors relating to colorjoe.js
:
ERROR in ./src/js/colorjoe.js
Module not found: Error: Can't resolve 'onecolor' in 'C:\Users\Me\Documents\my_repo\src\js'
@ ./src/js/colorjoe.js 7:33-52 9:8-37
Version information in that file is:
/*! colorjoe - v2.0.0 - Juho Vepsalainen <*****@gmail.com> - MIT
https://bebraw.github.com/colorjoe - 2016-08-12 */
/*! dragjs - v0.7.0 - Juho Vepsalainen <*****@gmail.com> - MIT
https://bebraw.github.com/dragjs - 2016-08-12 */
(Here is link to the 2.0.0 release - I am using an older version because newer versions don't seem to "work" with the way I have implemented it).
Do you know what changes I would need to make in this file in order to get rid of that error?
Thank You.
In Chrome, you get the following warning when using the library:
[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
When adding the touchmove
event, we need to explicitly specify { passive: false }
to fix this warning.
Replacing findPos function with following fixes issue
//https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element
function findPos(e) {
var bodyRect = document.body.getBoundingClientRect(),
elemRect = e.getBoundingClientRect(),
x = elemRect.left - bodyRect.left,
y = elemRect.top - bodyRect.top;
return {x: x, y: y};
}
I found an issue with the RGB_BG function used for HSL. The color should change when the bottom most value is picked in the color picker. The same can be viewed in MS Paint Color grid. The fix for this is as below:
function RGB_BG_HSL(e, h) {
utils.BG(e, h);
}
colorjoe.hsl = colorjoe({
xy: function (col, p, xy, z) {
.......
RGB_BG_HSL(z.background, col.css());
return col.hue(p.x).saturation(1 - p.y);
},
});
Probably best as a checkbox but I don't want to over-specify. Use case is as follows: When color picker is part of a 'builder' screen (e.g., customize this theme) and all elements have default colors, some elements may need to be transparent in order to not interfere with other elements.
Is it possible to import colorjoe using 'import' keyword?
I tried importing its all contents using:
import * as colorjoe from 'colorjoe';
and as default:
import colorjoe from 'colorjoe';
but it did not work
Actually I get TypeError: Cannot set properties of undefined (setting 'colorjoe')
To see this in action, pick some color at the top right using your mouse, then edit the red value to a large number. The cursor should drop down to the black part of the area, though the correct color will appear.
This was observed in Chrome 20.0.1132.47 on OSX.
In the 3.0.0 release you have renamed the onecolor variable to ONECOLOR but not when it is injected into the dist package so it is broken.
This problem happens when you use only the slider to set alpha value, if you then focus and unfocus the "alpha" field, the event is fired. Also, typing an alpha value directly works well.
Great colorpicker. I noticed an issue trying to integrate into a WinJS windows application. The CSS rules aren't using the MS prefix -- which should be OK because IE11 supports it unprefixed. However, there is a syntax proble with the rule that causes it to not work. The reason it works in the other browsers is their vendor prefixes are present.
Running index.html
from zip file downloaded from:
http://bebraw.github.io/colorjoe
gives this error in console:
Uncaught TypeError: ONECOLOR is not a function
at getColor (colorjoe.js:703)
at setup (colorjoe.js:595)
at Function.rgb (colorjoe.js:472)
at main (demo.js:19)
at demo.js:3
Hello! I get an error about root.one.color being undefined when I try to use colorjoe.js. Here's what appears to be happening when I check using Chrome dev tools...
In this block of onecolor.js, jQuery.color
is set instead of one.color
:
if (typeof module !== 'undefined') {
// Node module export
module.exports = ONECOLOR;
} else if (typeof define === 'function' && !undef(define.amd)) {
define([], function () {
return ONECOLOR;
});
} else if (typeof jQuery !== 'undefined' && undef(jQuery.color)) {
jQuery.color = ONECOLOR;
} else {
one = window.one || {};
one.color = ONECOLOR;
}
But then this block of colorjoe.js tries to use one.color
, even though it was never set:
(function(root, factory) {
if(typeof exports === 'object') {
module.exports = factory(require('onecolor'));
}
else if(typeof define === 'function' && define.amd) {
define(['onecolor'], factory);
}
else {
root.colorjoe = factory(root.one.color);
}
}
Am I doing something wrong, or is this a bug with colorjoe? Thanks!
Add support for CMYK. At least CMYK fields would be easy. Might be nice to have something else available as well.
I am updating the colorpicker in an on event with:
joe.set("rgb(" + red_value + "," + green_value + "," + blue_value + ")");
joe
is currently a global variable set up on document ready:
joe = colorjoe.hsl('hslPicker', '#113c38', ['currentColor',['fields', {space: 'RGB', limit: 255, fix: 2}]]);
How can I access colorjoe without using a global variable?
The url is moved from http://rightjs.org/ui/colorpicker to http://rightjs.org/ui/colorpicker/demo. Please change it.
I'm trying to set this up in an environment where jQuery is prevalent.
I've tried to replicate demo with:
HTML
<link rel="stylesheet" href="/static/css/third_party_css/colorjoe.css">
<script src='/static/js/scale.fix.js'></script>
<script src="/static/js/onecolor.js"></script>
<script src="/static/js/colorjoe.js"></script>
<h2>HSL Picker with Extras</h2>
<div id="hslaValue"></div>
<div id="hslPicker"></div>
As documented in README.md
, I am using colorjoe.js
from /dist
in the download folder.
I am using onecolor.js
and scale.fix.js
from /js
and colorjoe.css
from /css
in the download folder.
JS (my_script.js)
function testtest() {
var hVal = document.getElementById('hslaValue');
colorjoe.hsl('hslPicker', '#113c38', [
'alpha',
'currentColor',
['fields', {space: 'HSLA', limit: 100}],
['fields', {space: 'CMYKA', limit: 100}],
'hex'
]).on('change', function(c) {
hVal.innerHTML = 'Alpha: ' + c.alpha().toFixed(2);
}).update();
}
$(document).ready(function() {
fixScale(document);
testtest();
});
Firebug Errors
TypeError: root.one is undefined
http://localhost/static/js/colorjoe.js
Line 9
and:
ReferenceError: colorjoe is not defined
http://localhost/static/js/my_script.js
Line 209
Hi !
I got 2 problems when I try to manually enter a color. First, in the RGB field my cursor keep coming back to the end, I need to remplace it 2 times to be able to enter a color.
Second, in the Hex field when I enter the color there is a modification in the hex value and when I press close, it change to black.
Am I the only one with these problems ?
Your color picker is really great, so if I could get those two things to work, everything would be perfect !
Thanks !
This could optionally include onecolor via a require() statement instead of loading it from a global variable - any interest in adopting a more commonJS-esque approach?
Hey bebraw!
I love color joe and really appreciate your work! It's a beautiful plugin.
I just wanted to make you aware that colorjoe does not initialize on any page that also has jquery. I've tested this by including jquery in the supplied demo files. I haven't had time to look into why this breaks colorjoe so I apologize for not offering more info. If I am missing something please feel free to correct me.
I'm really looking forward to using the plugin if this is a solve-able issue. Thank you for your hard work!
Open http://bebraw.github.io/colorjoe/
First rgb sample
Select color first time
It's always grey by red value(192, 192, 192) ex
I placed the picker and tried to change the cmyka input value manually. But this doesn't work.
Everything else is fine, please let me know how to fix it.
const joe = colorjoe.rgb("hslPicker", "red", [ "alpha", "currentColor", ["fields", { space: "RGBA" }], ["fields", { space: "CMYKA", limit: 100, fix: 0 }], "hex", ]).on("change", function (color) { console.log("Selecting " + color.alpha()); }).update();
When using the MVC default template with Bootstrap on the same page with Colorjoe, it leds the main menu to lose its dropdown ability. Instead, a scrollbar appears next to the menu bar.
The problem is triggered by colorjoe.css:5, which sets the .container css class to overflow auto globally.
Hello, I was wondering if I could ask you a technical question of CMYK palette.
When I was picking colors on a palette, the CMYK codes of the colors showed on the palette are wrong. I don't understand what's wrong. Please help me fix this bug.
I would be thrilled if you could reply me.
Thank you so much for your time
It would be nice to have a HSL version available as well.
Firstly, thanks a lot for committing my previous fix.
I found one more issue. If we dont drag the color picker, but just use a click event on the picker, sometimes the slider doesn't reflect the correct color. The drag works perfectly updating the slider but not the click.
I found it a bit challenging to make this fix, but the below call to cbs.xy twice solved the issue for me. Can you please see this code and maybe help with some better code to resolve this issue.
function changeXY(p) {
col = cbs.xy(
col,
{
x: utils.clamp(p.x, 0, 1),
y: utils.clamp(p.y, 0, 1),
},
xy,
z
);
col = cbs.xy(
col,
{
x: utils.clamp(p.x, 0, 1),
y: utils.clamp(p.y, 0, 1),
},
xy,
z
);
changed();
}
Except getting color from image we need custom color picker
See https://github.com/bgrins/spectrum/blob/master/spectrum.css#L116 for reference. Going to need to need that for the hue band.
This is going to require a "attachEvent" fallback as well.
Whenever you try to input a HEX value, it simply auto-completes (incorrectly) instead of allowing you to input the full value.
Tested on both Chrome and Firefox.
Hi,
I wonder if I can get some assistance on changing the orientation on sliders from vertical to horizontal?
I managed to rotate it (ez pz) but I can't figure out how to make it listen to mouse movements along the x-axis... ๐ค
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.