eastdesire / jscolor Goto Github PK
View Code? Open in Web Editor NEWJavaScript color picker with opacity (alpha channel) and customizable palette. Single file of plain JS with no dependencies.
Home Page: http://jscolor.com
JavaScript color picker with opacity (alpha channel) and customizable palette. Single file of plain JS with no dependencies.
Home Page: http://jscolor.com
jscolor will bind to a class that has color in it's className, it should only bind to a string that has a className of only "color" or a string that has color but is properly delimited by a space.
For example:
<input class = "colorStopContainer">
matches, but it shouldn't<input class = "colorStopContainer color">
matches, but for the wrong reasonIn some projects, people don't have control over their class names, I can submit a pull request with the appropriate fixes if you think this is a good thing to add to the project.
I have jscolor within a form that can be dublicated/cloned by the end user. When that happens, jscolor stop working. Please advise. Here is the code i'm using.
HTML
<button type="button" id="button" onlick="duplicate()">Clone</button>
<input name="color[]" id="duplicater" data-jscolor="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
JS
<script src='jscolor.js'></script>
<script>
jscolor.presets.default = {
format:'rgb',
previewPosition:'right',
closeButton:true,
};
</script>
<script>
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicater');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicetor" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
</script>
It would be really useful to have actual version in bower repo. Currently there is 1.4.2
:(
Thanks to develop the great tool,
I had a dialog to set the color, the dialog would show when use click the button,and then can click the input tag to select the color,
but the jscolor can not work in this situation. the dynamic html append Color:
can not work
how to fix this issue?
best,
hanhuihong
It would be really useful if when in in HEX or RGB mode, the input was split (again) so that:
on the left you could the colour value - as you can now ;)
on the right your could type the alpha value
I know you can have a separate input for alpa value as it is now - but clicking on it closes the colour picker :(
Hello,
The minified version of the library added in 2.0.4 is missing in all recents versions since 2.0.4.
I want the button that opens the picker, meaning the target element in the following code:
var myPicker = new JSColor(<targetElement>, <options>)
to also close the picker when is open.
I think that a isShown
method on the instance can be handy for this.
Hi @EastDesire, I've been reorganising my code in Webpack and am dynamically fetching javascript from the server whenever particular elements appear on the page. One of these is a colour picker controller (via stimulus.js).
https://webpack.js.org/guides/lazy-loading/
https://github.com/danieldiekmeier/stimulus-controller-resolver
For some reason when jscolor
is loaded in this way it doesn't register the click and drag handlers on the control. There are also no errors emitted. When I import jscolor
in the main javascript pack it then works fine. I think there's an incompatibility with the way you're registering those handlers.
The colour palate shows up for selection, and is cross haired on the right place if an existing colour is supplied, but it's unable to be changed via clicking.
Just quickly checking if you have any ideas on what the problem might be.
If the INPUT element is contained inside a DIV that has a position: fixed, JSColor doesn't allow any mouse interaction. Some frameworks like Ionic use a backdrop for modal dialogs that use fixed position, and prevents JSColor from working properly in the dialog.
Hi,
I new user of jscolor and it everything looks like it should to be initialized automatically on all inputs with the data-jscolor
attribute, but it does not.
Actually I have no idea why, but it works correctly on jscolor 2.0.4, but not works with next versions.
jQuery 3.5.1 (if it matter)
No any errors in console (no any actions by jscolor at all)
First of all, thank you for making an awesome color picker!
I'm using it on a project where the picker is shown on a sliding panel, so it's bound to a node in the sliding panel's DOM. It appears to be working well, except that when I use the browser's emulator to change devices/sizes, the color picker appears to get disconnected from its node container and just jumps off screen to the right. Screenshots attached -- the second was taken right after stretching the right border by a few pixels.
Is there a way for the picker to handle resize events?
Hello. This error occurs at file jscolor.js
at line 407
:
if (typeof Event === 'function') {
ev = new Event(eventName, { // Error is here
bubbles: bubbles,
cancelable: cancelable
});
}
It happens because typeof Event === 'function'
returns true
in old browsers, but they don't actually support Event
constructor.
Please, consider using following solution which works in both old and new browsers (even in IE):
triggerEvent: function (el, eventName, bubbles, cancelable) {
var event = document.createEvent("Event");
event.initEvent(eventName, bubbles, cancelable);
el.dispatchEvent(event);
}
I didn't want to operate the jscolor with that input, maybe from another button, what should I do?
Hi,
On previous jscolor version, there was a function jscolor.bind(); where this function enables the support of dynamically generated content. Is there the similar function like that?
I know the release is tagged with the version number, but would you please include the version number inside the code.
In the zip that is downloaded from http://jscolor.com/, it is included in the non-minified version:
/**
* jscolor - JavaScript Color Picker
*
* @link http://jscolor.com
* @license For open source use: GPLv3
* For commercial use: JSColor Commercial License
* @author Jan Odvarko
* @version 2.0.4
*
* See usage examples at http://jscolor.com/examples/
*/
It would be nice to include the version in the minified file as well ๐
Thanks!
I noticed this bug while working on Cookie Monster, a mod for the game Cookie Clicker, and a bug report there.
We import jscolor through npm and our mod functions fine on chrome (and I believe firefox).
However, Safari does not load and indicates a faulty regex expression. When loading our code into the console correct colour coding of the input stops when it reaches the code produced by lines 874-876 in jscolor.js
:
parsePaletteValue : function (mixed) {
var vals = [];
if (typeof mixed === 'string') { // input is a string of space separated color values
// rgb() and rgba() may contain spaces too, so let's find all color values by regex
mixed.replace(/#[0-9A-F]{3}([0-9A-F]{3})?|rgba?\(([^)]*)\)/ig, function (val) {
vals.push(val);
});
} else if (Array.isArray(mixed)) { // input is an array of color values
vals = mixed;
}
After mini-fication through webpack this becomes:
parsePaletteValue:function(e){var t=[];"string"==typeof e?e.replace(/#[0-9A-F]{3}([0-9A-F]{3})?|rgba?\(([^)]*)\)/gi,(function(e){t.push(e)})):Array.isArray(e)&&(t=e);
I think Safari is struggling to understand this regex? I don't immediately see why it would not understand this and a quick search on google also did not indicate any obvious compatibility problems with Safari and regex.
Is this something that could be fixed on your end? Or do we need to do something to make the code work on Safari. It is strange that this does seem to work on chrome and other browsers.
Please increase the size of the color space to around 200 pixels in height and 200 pixels in width, and make it a gray checkered background for 3/4 of the space, and for the remaining bottom right quadrant, the color should be the same as the text in the text box. This is a suggestion that would make me happy.
Change name
entry in package.json
file to a valid npm name
Try the tool validate-npm-package-name to validate it
"name": "@EastDesire/jscolor",
-> change to "name": "@eastdesire/jscolor",
- note: must be all lowercase
Copy jscolor.js
file to jscolor-node.js
file and add module exports:
module.exports = window.jscolor // default export
exports.jscolor = window.jscolor // named export
Now point the main
entry in package.json
to jscolor-node.js
This will make it available for NodeJS projects in a compatible way (See https://stackoverflow.com/questions/30241729/how-do-i-perform-an-export-that-is-compatible-with-es5-and-es6). The compatibility is handled by a transpiler such as Babel for pure javascript or in TypeScript by the compiler itself.
ES6 module usage example (using import
)
import * as JsColor from "@eastdesire/jscolor";
const element = document.createElement("x");
const picker = new JsColor(element);
Old style NodeJs usage example (using require
)
const JsColor = require("@eastdesire/jscolor")
const element = document.createElement("x");
const picker = new JsColor(element);
Since jscolor is also exported as a name constant (via export.jscolor
) you can also import as follows:
const { jscolor } = require("@eastdesire/jscolor")
Similarly for ES5 import
import { jscolor } from "@eastdesire/jscolor";
You can then export more named constants as needed to make it easier to use.
You might want to have a look at my TypeScript conversion for how to convert it to a proper Javascript class, if that is the direction you want to take it... Makes it much easier to extend and customise for the end user.
Please make this available on the App Store as an iPad app! Also, add the ability to make wallpapers for each color with the Hex Alpha code, and make the background stay checkered! Make the random color generator and initiating color picker tools Hex Alpha, too!
The most recent versions (later than 18th Jun) do not work on my userscripts anymore, I had to try to work around this but it never ended up working the same.
Please return it to how it deploys in the old version or maintain this function on a separate branch.
For now I have changed the require to use a specific version from the old commit in order to keep things working.
How does it not work?:
The input with class jscolor no longer does anything but show ffffff instead of FFFFFF and doesn't bring up a picker at all
then if I use the apparently new method of initialising the thing by doing inputElement.jscolor = new jscolor(inputElement)
it works inside the element but doesn't look right and it also doesn't deploy the onFineChange anymore
I don't know any more specifics, it just doesn't work, and working around it comes with so many drawbacks I was only able to do it successfuly for one of my projects
Project that fails to work now and I can't rework the new version to make it work: https://github.com/MagicGonads/MagicGonads.github.io/blob/master/SketchfulPicker.js
Project that fails to work now but I was able to rework the new version to make it work:
https://github.com/AEFGP/AEFGP.github.io/blob/master/Userscripts/Desmos/ColourPicker.js
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.