bebraw / colorjoe Goto Github PK

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 @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 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);
	},
});

See http://jsfiddle.net/atZvp/2/

Add support for CMYK. At least CMYK fields would be easy. Might be nice to have something else available as well.

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.

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!

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.

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

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.

It would be nice to have a HSL version available as well.

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 ?

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?

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.

The url is moved from http://rightjs.org/ui/colorpicker to http://rightjs.org/ui/colorpicker/demo. Please change it.

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')

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

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.

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();
}

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();

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 !

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};
}

unfinished demo

Except getting color from image we need custom color picker

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.

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.

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 👍

Figure out a nice way to offset it. Seems to fail in certain cases.

Open http://bebraw.github.io/colorjoe/
First rgb sample
Select color first time
It's always grey by red value(192, 192, 192) ex

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!

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.

http://i.imgur.com/CuwnF.png

This was observed in Chrome 20.0.1132.47 on OSX.

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.

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.

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

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?

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.