As a bonus, this also should make UI interactions a little less choppy
Added activeHandleRadius ColorPicker option for overriding the radius of active color handles. See https://github.com/jaames/iro.js/issues/166
Added kelvin object option for a Color’s constructor and set() method. See https://github.com/jaames/iro.js/issues/149
Fixed an issue where calling a ColorPicker’s resize() or setOptions() methods directly after another state update (e.g addColor, removeColor, setColors, etc) would cause the color picker to lock up. See https://github.com/jaames/iro.js/issues/156.
Prevented ColorWheel events from being registered if they began inside the wheel’s square hitbox, but not inside the circular boundaries of the wheel.
Wow, thanks for 800 stars! I’m taking this milestone as a motivator to start working on iro.js again!
This release just presents some internal refactoring around how iro.js draws its UI. Instead of SVG components are now comprised of regular HTML elements - aside from handles which will still be SVG for the foreseeable future.
I’m hoping that this refactor will pave the way for making the library truly responsive in the near future. It should also make it a lot smoother and less resource-heavy overall, since we can now use conical gradients and all that nice CSS stuff instead of the hacky SVG equivalents.
Watch this space! :)
Adds optional second activeColorIndex param to ColorPicker.setColors() (https://github.com/jaames/iro.js/issues/162) and fixes IE11 event issue (https://github.com/jaames/iro.js/issues/163).
Fixes https://github.com/jaames/iro.js/issues/145
Added optional boxHeight option for setting the height of the box component. Added id option for all components, which will get passed to the input:start, input:move and input:end event callbacks as a second param (see https://github.com/jaames/iro.js/issues/140). Also mitigated an issue related to kelvin temperatures under 2000 (see https://github.com/jaames/iro.js/issues/138).
Bumps iro-core version to fix server-side environment issues noted in https://github.com/jaames/iro.js/issues/131
Fixes https://github.com/jaames/iro.js/issues/129
Fixed an issue where the touchstart event wasn’t firing on certain touchscreen desktop PCs, see https://github.com/jaames/iro.js/issues/126
Added slider types for red, green and blue color channels! See https://github.com/jaames/iro.js/issues/78
Fixes issue with kelvin -> RGB conversion that resulted in the red channel overflowing the 0-255 range in certain cases, see https://github.com/jaames/iro.js/issues/124
Adds activeIndex option for Slider and Box components, for manually specifying which color to use in multi-color setups
var colorPicker = new iro.ColorPicker("#demoWheel", {
layout: [
// default slider, will reflect whichever color is currently active
{
component: iro.ui.Slider,
},
// this slider will always reflect the color at index 2
{
component: iro.ui.Slider,
options: {
activeIndex: 2,
}
},
]
});
Re-adds iro.version since it was accidentally omitted in 5.1.7
Fixes Typescript issues noted in #109
Fixes package.json to include Typescript typedef files in the NPM package
Added margin color picker option for setting the gap between individual components. sliderMargin will also work for now, but will be deprecated in a later version.
Internal improvements to prevent events causing infinite loops
transparency color picker optionFurther tweaks to input handling so that interacting with handles is more predictable overall.
Tweaked input handling so that interacting with handles on a multi-color picker is more predictable.
color.kelvin, iro.Color.rgbToKelvin() and iro.Color.kelvinToRgb()).color properties for common color channels
redgreenbluehuesaturationvaluealphacolor properties for color-with-alpha formats
rgbahsvahslargbaStringhslaStringhex8Stringindex property, for keeping track of their position in the color arraycolors property which provides an array of its selectable colorsaddColor, removeColor, setActiveColor and setColors methods for manipulating the color arraycolor:setActive and color:remove and color:setAll eventslayoutDirection property (thanks asonix!)setOptions method to update config options at any pointreset method to reset all colors back to their initial valuessliderHeight option renamed to sliderSizehandleOrigin option renamed to handlePropsiro.Color.onChange no longer externalcolor:init event no longer provides color changester job of showing off what the library can do<base> tag is also present.Added a new param for iro.ColorPicker:
id - HTML ID for the color picker root element, also available as a prop on the color picker instanceColor picker event callbacks this context is now set to the active color picker instance
See issue thread #71 for more information
Added two new params for iro.ColorPicker:
wheelAngle - starting angle for the color wheel’s hue gradientwheelDirection - direction of the color wheel’s hue gradient (clockwise/anticlockwise)See issue thread #66 for more information
Fixes an issue where the alpha component wasn’t being parsed correctly from rgba and hsla strings. For more info, see issue thread #2 on the iro-transparency-plugin repository.
Somehow a line of code was missed when the new events API was merged, so the input:change event wasn’t actually firing (issue thread #64). This is now fixed.
Fixes a few issues related to how color alpha/transparency was handled internally, which was causing problems with iro-transparency-plugin. Setting a color to a value without an alpha component (e.g hexString = "#fff") will now set the alpha value to 1, and the alpha component will no longer be undefined when using new iro.Color. For more info, see issue thread #2 on the iro-transparency-plugin repository.
input:change - The same as color:change, but only fires when the color has been set with user inputcolor:init - Same as color:change, but fired once with the initial color valueon and off methods can now take arrays of eventTypes as well as stringsdeferredEmit method (should only be used by plugins)The color:change event no longer fires with the initial color value, as this was catching a few people out.
If you need to reproduce previous behaviour, please make sure to listen for both color:init and color:change events with the same listener, like so:
colorPicker.on(['color:init', 'color:change'], function(color, change) {
// do whatever
});
Fixes a typo in the input:move event (was previously “input:mode”). Thanks @jbellue for the contribution!
Makes sure that input:start fires before color:update and that input:end fires after color:update. See thread #59.
Fixes color picker DOM event handling in IE11, issue thread #58.
(nice)
Adds support for hue and saturation sliders, documented here
Internal plugin API changes to allow for plugins to customise the slider type
iro.js version 4.0.0 is a major rewrite of the core library which aims to solve numerous long-standing issues. There are numerous changes and deprecations, so please check the migration guide before moving your project over. If needed, version 3.5.1 has been preserved in the v3 branch.
Color Picker
anticlockwise option has been removed, and is now hardcoded to truemarkerRadius option has been renamed as handleRadiusSafari Bugfix Note
To resolve an issue where Safari wasn’t rendering the color picker properly because of certain client-side routing libraries, it was previously recommended to call emit('history:statechange') on the color picker when navigating to new client-side routes. This has been deprecated in favour of the catch-all forceUpdate() color picker method.
Static Color Methods
hsv2Hsl renamed to hsvToHslhsl2Hsv renamed to hslToHsvrgb2Hsv renamed to rgbToHsvhsv2Rgb renamed to hsvToRgbparseHexStr removedparseRgbStr removedparseHslStr removedrgb2Hex removedrgb2Str removedhsl2Str removedmix removedlighten removeddarken removedcompare removedColor Methods
mix removedlighten removeddarken removedStylesheet API
This is more of a spring cleaning release, no changes / fixes that might affect the API have been made.
Rewritten API classes using the es6 syntax – more could be rewritten to use other es6 features such as the spread operator, etc, but I’ll save that for v4. Everything should remain functionally identical to the previous version for now.
Moved the build process from webpack to bili (which uses rollup under the hood). I’ve found the code it produces to be more lightweight than webpack + babel while still having the same functionality (even before messing about with force-mangling specific property names!). Config is also a lot cleaner.
Removed yarn.lock file. Yarn was neat back in late 2017 because it fixed a lot of issues that NPM had at the time, but they’ve since caught up so Yarn is no longer relevant imo.
iro.ColorPicker has a new mount event which fires once color picker’s UI has been inserted into the DOM, as requested in #28.
The input:start and input:end events now get passed the color picker’s color object as per #24.
iro is now available as an npm module.
iro.ColorPicker’s off method. Thanks to @mdmower for their pull request.iro.ColorPicker instances now have a display option, as requested in issue thread #23.iro.ColorPicker instances now have a wheelLightness option, as requested in issue threads #9 and #19.This version works around two bugs in Safari’s handling of SVG gradient URLs. The first issue is caused by the library being used in combination with the HTML <base> element, and the second is a similar issue that may arise when using a client-side routing library that uses the HTML5 history API to navigate between views. More details can be found in this issue thread.
iro.ColorPicker instances now have a history:stateChange event that should be emitted whenever the user navigates to another view. Doing so force-updates the SVG gradient URLs, working around a bug present in Safari. To emit the event, call emit("history:stateChange") on your iro.ColorPicker instance.iro.Color instances have new clone, compare and setChannel methods.Another major release, there are some breaking changes this time around, particularly for those still using remnants of the older v1 API like watch and unwatch. While I understand that this may be frustrating (and bad practice…) I felt that it was important to remove/change a number of things to make iro.js more pleasant to use. I’m pretty happy with the current API as it stands, so I think it can be considered “locked” from here on. \ o /
Note: The v1 branch where version 1.0.0 of the library was formerly preserved has been deleted; the current version of the library supports IE9+ so there was no reason to keep it around any longer.
iro.ColorPicker’s watch and unwatch methods were removed in favor of using the Event API methods (on and off) intead.iro.colorPicker’s dynamic CSS used to replace template values set to rgb with the selected color. This value will be renamed to $color going forward.iro.Color’s watch and unwatch methods were removed as it seemed unnecessary for devs to add watchers to single color instances. Such behaviour was only ever in place for internal use, but if you want it to return then please raise an issue.iro.Color’s set method no longer takes a second “triggerEvents” param. Now you can just set the color in any way you like within a color:watch callback function without having to worry about infinite event loops.iro.Color’s get method was removed, just use the hsv property instead.iro.Stylesheet’s on and off methods were replaced with the new enabled property. Keeping them around with the recently added Event API methods could have lead to a lot of confusion.iro.Stylesheet’s getCss and getCssText methods were replaced with the css and cssText properties, respectively.iro.ColorWheel as an alias of iro.ColorPicker, which was added in 2.0.0.iro.Color instances have new mix, lighten and darken methods.iro.Color also has a bunch of new static helper methods for color mixing + conversion.iro.ColorPicker has a new anticlockwise option, which draws the hue wheel in the opposite direction (¯\_(ツ)_/¯ it looks nicer, imo).iro.ColorPicker’s color option works with supported color format, or even an iro.Color instance.iro.ColorPicker.set method was changed as per https://github.com/jaames/iro.js/issues/11#issuecomment-336940566iro.ColorPicker instances now have a full event system, with on, off and emit methods. Listening for color:change is the same as using the watch method, and there are new input:start and input:end methods for detecting when the user begins and finishes interacting with the color picker.iro.ColorPicker constructor has new (optional) borderWidth and borderColor options, which can be used to add borders around the color picker’s UI elementsThis version represents a major rewrite of the library, although there are no major API changes. Anything using the publicly documented 1.0.0 API should be fully compatible with ver 2.0.0 and above (but not vice versa) for the foreseeable future.
Note: version 1.0.0 of the library has been preserved in the v1 branch. Feel free to use it if you want IE 9 support, but note that I don’t intend to actively maintain it.
on() and off() - enable and disable the stylesheet stylesgetCss() - returns the stylesheet content as an objectgetCssText() - returns the stylesheet content as a stringsheet - stylesheet’s CSSStyleSheet objectrules - stylesheet’s CSSRuleList objectmap - stylesheet’s CSSStyleDeclaration objects; keyed by the CSS selector that they belong toiro.ColorWheel was renamed to iro.ColorPicker, although ColorWheel is still supported for backwards compatibility.styles option for iro.ColorPicker was renamed to css, but again, the former is still supported