I'm not sure if this is related to the wp-color-picker implementation, but that's where I've noticed this issue and placing this here just in case.

Default form behavior like clicking on labels to focus on an input does not work to pop up the Iris color picker.

Can be reproduced with the input either inside or outside the label.

Input inside label
<label for="color-picker">Color Picker <input type="text" id="color-picker" value="#000000"></label>

Input outside label
<label for="color-picker">Color Picker</label><input type="text" id="color-picker" value="#000000">

Farbtastic understood this and displayed the color picker. Iris should, too :)

It seems the only event/callback is change. Having show/hide event callbacks/hooks would be very useful.

I'd like the ability to add titles to the palette swatch (provided as a json array in palette: options)

Also I'd like the ability to use only the palette, removing the gradient color picker. This allows me to use the same tool for every color picking feature I want to implement.

When removing the custom palette, the zone is empty but still visible/opened!
Thanks

@mattwiebe I'm trying to incorporate the Iris color picker into a plugin and I'm getting a very strange problem.

the-events-calendar/the-events-calendar-category-colors#5

After colors are set, when the picker opens the selector is not over the color. Sometimes it's not even inside the grid.

I'm testing locally in MAMP, MultiSite 3.7RC2, TwentyTwelve and minimal plugins.

Any ideas what could be causing this?

Hi,
Devinsays added this colorpicker to Theme Options Framework & I'd like to use it because it's now included in Wordpress. Plus then I wouldn't have to use a fork off of Devin's code.

Can you tell me if I can retrieve HSL values, as I did with Farbtastic?
I was doing it like this: var hslcolor = $.farbtastic('#picker').hsl;

The reason why, is because I can choose a base color for my theme, and based on this, I can calculate a half dozen shades of color that are used throughout the site. I can't do that purely with CSS, because RGBA doesn't have some easy way to add lightness or change hue (that I know of).

Thanks.

Thanks.

(This issue still exists after the bug fixes on June 8th by myself)

When dragging the circle to the bottom of the color palette, the color changes to almost black. Repeat this process two times, dragging it further and further down to the black area. Then, adjust the hue slider. The colors will not change nicely (it's very discrete) but when the circle is restored to a position in the middle of the color pallette, the problem disappears. The following screen capture may help:

http://cl.ly/2A023B3P2K1j

Hi,
I would like to change the preset colors dynamically, but it doesn't seem to work with jQuery('.color-picker').iris('option','palettes',['#aaa','#bbb','#ccc']);
Is there a way to make it work?
Thanks

Using chrome (32.0.1700.41) and http://automattic.github.io/Iris/, when I try to select black (#000) by clicking in the iris square and dragging to the bottom left i'm given the color (#0f0f0f). Releasing the mouse and trying again gives me color (#070707). Finally, after trying a third time I'm given the right color.

IE 10 doesn't load Iris on http://automattic.github.com/Iris/.
IE console prints that this happens because the script has been blocked because of a "MIME type conflict".

The documentation for the target option at http://automattic.github.io/Iris/ incorrectly states that the option will be ignored for <input> elements, however, it's the exact opposite, it is only honored if Iris is applied to an <input> element. Inline documentation in iris.js is correct however.

I've noticed that double-clicking on a color picker to select a color also seems to affect the browser's address bar, specifically, by appending a # character. This can actually be re-created on the project homepage at http://automattic.github.io/Iris/.

This causes serious problems for single page apps. Right now it makes Iris unsuitable for the BackboneJS app I'm working on. Can anything be done?

It would be great if there was an init method for wpColorPicker so that I can, for instance change the background image of the .wp-color-result element that gets prepended to the initialized input field.

I know I can change the background with css, but for some reason, when I do that, the selected color gets written to the element as background-color and that won't overwrite my default background inside the css. With init method I'd be able to append the background as an inline style, then remove it on change and add the color.

More information & discussion: elementor/elementor#1026

//Color picker
( function( $ ){

$('.of-color').wpColorPicker({

    change: _.throttle( function( event , ui) { 
        console.log( ui.color.toRgb() );
        $(this).trigger( 'change' );
    }, 2000 )
});

})(jQuery);

When using the code above I can't add direct function with $(this).trigger( 'change' ); without use of _.throttle because it causes the script to stop working. Even when I use _.throttle and try to use ui firebug sometimes but not always shows that it doesn't exist. Is there a way to add trigger other than above ( note that when I set delay to anything under 2000 it causes incorrect behaviour )

I am using Iris using the most simple call:
$(".popup-colorpicker").iris();
When any color is selected the value of the input type text isn't changed, so when my other scripts grab the value of the input field they show the default value.
Can we include a stop function, so when color selecting is done I can change the value of the input field?

Hi, it's possible to add transparency support in color picker box?
Thanks

I have number of form fields. I reset all the form fields value but color picker is not showing the default color.

Does this plugin support this feature or not ?

    var background_color = jQuery('#background_color');
        background_color.val(background_color.attr('data-real')).wpColorPicker({color:background_color.attr('data-real')});

I thought color option will do that, but it doesn't

I am using this inside a plugin and have seen the following issue. Since iris doesn't do alpha channels I have a range input below for opacity. When there is no color selected I want to hide that field. Also on color change I update a live view of the element being styled.

Here is the code currently being used.

PUMColorPickers = {
    init: function () {
        $('.color-picker').filter(':not(.initialized)')
            .addClass('initialized')
            .wpColorPicker({
                change: function (e) {
                    var $input = $(e.currentTarget);
                    if ($input.hasClass('background-color')) {
                        $input.parents('table').find('.background-opacity').show();
                    }

                    $(this).trigger('change.update');

                    PopMakeAdmin.update_theme();
                },
                clear: function (e) {
                    var $input = $(e.currentTarget).prev();
                    if ($input.hasClass('background-color')) {
                        $input.parents('table').find('.background-opacity').hide();
                    }

                    $(this).prev('input').trigger('change.clear').wpColorPicker('close');

                    PopMakeAdmin.update_theme();
                }
            });
    }
};

As you can see it should show / hide the opacity input when a color is chosen or cleared. Here is how it is working / not working.

Click clear - Works perfect, field hides.

With clear field, open picker and click once(no drag) on the color chart - Updates the color fields value, but does not trigger the change callback function or hide the opacity input. Also the theme update isn't triggered.

With clear field, open picker and click any paletted color - Same result as above. Color field shows new value but change event never fires.

With existing color, single click any color on palette or color chart(no drag) - Same as above, but if you click a second color in the palette, then the change callback is fired, but not for the newly selected color, but rather the last one picked. You always have to double click in order to update the opacity field and rerender the theme.

EX of that.
Current color: #fffffff
Open iris, click the red color palette. Field updates to red hex code, but the live preview still shows white.
Now click yellow in the palette and the field updates to yellow, but the live preview now shows red.

I have tried everything from using _.throttle and _.debounce to setting a timeout on the theme update and show/hide function, nothing seems to fix this glitch for me or my users. Been there since v1.0 of Popup Maker even though I have rewritten that entire section of JS multiple times over the last 16 months.

See https://core.trac.wordpress.org/ticket/42078

In order to be fully accessible, the hue-only control used, for example, in Twenty Seventeen would need to display the underlying input field as an alternative input source. A native input field is the only guarantee the hue control can be used by everyone, with any device and ability. Worth noting the full color picker already allows to manually update the value form the input field and see the color palette and slider updating on the fly.

However, in the hue control moving the slider updates the value in the input field, but the other way around doesn't work. For example, manually changing the input value from 250 to 240 passes an hex color to _setOption () because of color.toString() so what gets passed is actually #224400 and nothing happens.

I've played a bit with the Iris version used in core, and passing the hue value with some adjustments seems to work. However, I'm really not an expert and I'm sure there are better ways to do it.

Issues I've identified so far:

• when the type ie hue, then _addInputListeners() should pass a hue value (number from 0 to 359) or the value should be converted to something Iris can use to update the slider later on
• not sure if the regex in _addInputListeners() should be adjusted
• color.js may return an error when changing the input to a value under 100 because the current error checking expects a hex string with at list 3 chars
• performance: since the input field used in core is of type number, it's possible to keep the Up or Down arrow keys pressed to change its value. Keeping the key pressed continuously triggers the change event so lots of code is continuously running. Even on a modern macbook pro this makes the CPU go over 100% after a few seconds. The simplest solution I can think of is to debounce also the change callback.

I'm interested in restricting users access to the light/dark spectrum, so I'd love to have a horizontal slider-only UI element that only enables adjustment of the hue value. I was playing around a bit and I think this is already close-to-possible and I'll enable this in my WordPress environment by extending WP_Customize_Color_Control and messing around with a bit of the output HTML, etc. I just figured I would open it as an idea in case you had any thought on enabling it as an easily enabled option for the library.

Hello,

I'm referring to the tagline shown on http://automattic.github.io/Iris/#

I was wondering why you would call "awesome" a color picker that doesn't support basic color opacity?

I'm missing this feature and I'm not using the WordPress default color picker for this very reason. However I would love to change my opinion and to be proven wrong ;)

Cheers

From the most important to me to the least important:

1. Having alpha or rgba() would make it complete.
2. I'm not sure if this is possible or not but absolute positioning of color picker would be a cool improvement (so that it can float above elements like in Photoshop).
3. Maybe no message "pick a color" at all? It is quite clear anyway. I would add an alternative mode where upon initialization it still shows old input field and to the right of that input field you see a solid little square - exactly like this person did: http://dribbble.com/shots/232627-Custom-colour-picker (it's probably Iris).
4. Additional controls (at least as an option) where user can manually put R, G, B or H, L, S numbers is sometimes useful to me in Photoshop as well.

Basically, I think that companies like Adobe or Autodesk deliver nice colorpickers in their products that can be used for further improvements. And for a person that is half-wordpress-user-half-designer (like a person setting up unified brand color for entire WordPress website through admin panel) some more options like number (4) might be useful.

I hope that some of my ideas will help make it better :)

Is it possible to set a color palette after the color picker has been instantiated? Advanced Custom Fields uses the Iris color picker as one of the available fields, and I'd like to be able to set the color palette without having to edit the ACF files.

Thanks!

The color picker can be dragged off the color chooser in small increments. I took a screen capture of the issue because I tend to be bad at explaining things.

I am using the latest version of Chrome and the screen capture was taken from the official Iris manual http://automattic.github.io/Iris/

http://cl.ly/1b1m3u3m3g0c

Hi!
Instead of having very little squares when setting a lot of palettes, it could be great to display them on several lines above ~ 8 / 10 palettes.
Thanks!

I'm trying to use Iris for multiple text inputs on a page. However, whenever you open an instance of Iris, it does not close.

In this example - http://jsfiddle.net/sFnsB/1/ - you can see that there are 2x text inputs. I've styled Iris so it displays absolutely on top of the form (another feature I'd love to see out of the box), but as you'll see, it's pretty much impossible for me to use Iris in this scenario.

It would be great to have a 'close when you click away' setting for Iris. Or even an setting to add a close button, if desired.

Here is an image showing the current impracticalities of using Iris for my scenario -

I'm under the impression that all the options in Iris are not available to wpColorPicker.

In particular

var irisOnlyOptions = {
// the following option are available to iris not wpColorPicker
  color: false,
  mode: 'hsl',
  controls: {
    horiz: 's', // horizontal defaults to saturation
    vert: 'l', // vertical defaults to lightness
    strip: 'h' // right strip defaults to hue
    },
  border: true, // draw a border around the collection of UI elements
  target: false, // a DOM element / jQuery selector that the element will be appended within. Only used when called on an input.
  width: 150,
};

Is there some way to include these in wpColorPicker or am I out of luck?

Thanks.

It seems like it would be fairly simple to add touch support to your control by changing:

line 556 from:

}).on( 'mousedown mouseup', function( event ) {

to:

}).on( 'mousedown mouseup touchmove touchend', function( event ) {

and line 594 from:

square.mousedown( function( event ) {

to:

square.on('mousedown touchmove', function( event ) {

btw, very nice plugin!

Hi,
I am trying to make a function that is called on color change... But the value in the input doesn't update. The text updates, but value stays the same. So I have some trouble calling my function.

Advice?
Thanks!

Hey,

Thanks for the colorpicker, but just wondering what's supported in iris.js that isn't supported in iris-basic.js?

Hi there!

I am using WP Customizer to allow users configure my plugin. There are two color settings I would like to "sync", so changing the color from "color 1" makes "color 2" setting have the same value.

To achieve a full "sync", it is needed to achieve 3 things: update input value, button color and handle position.

So far, I have been able to make "color 2" have the same value and "button color" than "color 1" (with jQuery)... but I'm not able to make the iris handle to position where it should be. See screenshot below.

Anyone could tell how to force the handle to update its position accordingly to the inputted value?

Many thanks in advance!

Hi. It's my internet connection failing miserably or is there a problem with the url http://automattic.github.io/Iris/?
My browser say "waiting for response from ajax.googleapis.com..." and it stays there forever.
What's happening? How do I access the docs?

Hey there,
it's not possible to reset color of the iris color picker to an empty value:
jQuery( element ).wpColorPicker( 'color', '' ); is not working here.
I solved it in following way:
jQuery( this ).find( '.wp-color-result' ).css( 'background-color', '' );

On initialization it works fine.

PS: I know it's the wp-color-picker, in iris it would be something like that:
jQuery( element ).iris( 'color', '' );
jQuery( this ).find( '.iris-result' ).css( 'background-color', '' );

Hi there,
When I use the default WP_Customize_Color_Control Class the labeland descirption are displayed above the color-picker, but when I use the WP_Customize_Color_Control Class the labeland descriptiontext is shown after clicking on the color picker button, so the text is hidden.

See on the picture. The first picker is the WP_Customize_Color_Control, the rest is the WP_Customize_Color_Control Class.

The Code looks like that:

<?php
    // Text Color
    $wp_customize->add_setting( 'nav_text_color', array(
      'default'           => '',
    ) );
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'nav_text_color', array(
      'label'    => esc_html__( 'Custom Style Options', 'onedrop_template' ),
      'description' => esc_html__( 'Text Color', 'onedropTemplate' ),
      'section'  => 'header_menulayout_section',
      'settings' => 'nav_text_color',
      'show_opacity' => true, // Optional.
      'priority' => 10
    ) ) );

    // Background Nav Color
    $wp_customize->add_setting( 'nav_background_color', array(
      'default'           => '',
    ) );
    $wp_customize->add_control( new Customize_Alpha_Color_Control( $wp_customize, 'nav_background_color', array(
      'description' => esc_html__( 'Background Color', 'onedropTemplate' ),
      'section'  => 'header_menulayout_section',
      'settings' => 'nav_background_color',
      'priority' => 10
    ) ) );
?>

Any Ideas? Thanks :))

If you just Click the circle selector instead of Dragging it, it will append a # to the URL, causing the page to jump to the top.

Temporary fix until it's fixed in the repo:

jQuery(document).ready(function($){
    $('#color-picker').iris();

   // after initializing iris on your element(s)
   $('.iris-square-value').click(function(e) {
       e.preventDefault();
   });
});

Trying to confirm the license for this project. Is it “GPLv2, or any later version” or just GPLv2?

The slider handles do not have focus outlines for accessibility when clicking or tabbing on a clean install of WordPress 4.3.1. I tried adjusting the CSS outline property with no success. You can see somewhat of a blue square in the middle of the center handle when clicked or focused using the tab key.

Reproduced issue in the latest versions of Chrome, Safari, Firefox, and Edge with a clean install of WordPress 4.3.1 and enqueuing the script using the 'iris' handle.

It would be great if the box below the colorpicker displayed recently picked colors. Or if there was at least an option to include that.

I'll try to add this in a pull request, but essentially from a development perspective, there should be a way to destroy and/or disable the colorpicker. If the colorpicker is instantiated on an input with a disabled property, the button should be disabled, which could be re-enabled by changing the input's disabled property and/or using a dedicated method of $.wpColorPicker.

As we have default color with data attribute, I think it would be more streamline to have data-color-palette with comma separated hex colors than reconfiguring options via JS.

How to use multiple color pickers on the page? I tried this

<input type="text" class='color-picker' value="#bada55" />
<input type="text" class='color-picker' value="#bada55" />

<script type="text/javascript">
jQuery(document).ready(function($){
    $('.color-picker').iris();
});
</script>

but it seems it doesn't work correctly, when I dragging the circle over the field with colors

If I have already set the colour, but I want to remove it later, I cannot as it does not trigger a change event.

Related to #53

I am using iris color picker (wordpress to exac) with a few preset color palettes. Now I want to add more colors, however I don't want to touch the previous code. I need a solution to extend the color palettes without touching the original code.

The problem I have, is that if I use the palette parameter again, it simply overwrites the previous selected palettes.

jQuery(document).ready(function($){
    $('#color-picker').iris({
        hide: false,
         palettes: ['#125', '#459', '#78b'],
    });
    
     $('#color-picker').iris({
         palettes: ['#000', '#000', '#000'],
    });
});

Here is my fiddle: http://jsfiddle.net/8ctrmsyx/

I also can't just add the previous color palettes, since there are dozens of different color pickers across the site, each with their own color palettes.

The easiest solution would be to somehow have a function to extend the palettes, rather than overwriting them.

How could I do that?

Since underscore is bundled with WordPress 3.5, would it make sense to make it a dependency of Iris and use its native debounce() instead of recreating it? If we do use it, there are probably some other places where we could take advantage of its utility functions, this is just an obvious one I noticed.

We recently worked with the Inclusive Design Research Centre to conduct an accessibility audit on our WordPress-based software backend (for Pressbooks). In the course of that audit, the auditor indicated that the content of the color picker is not communicated to users of assistive technologies. For example, the selector within the gradient is communicated as link, and the various colors (black, white, red, etc.) are announced as group.

Our auditors indicated that this can be fixed by adding an ARIA label to each color so that it says something other than 'group' (i.e. the color's name or hex value).

It'd be great if the color picker could output a rgba color and offer users an opacity option.

Cheers,

Sean.

It would be awsome to have an option to use it more or less as a tooltip-style colorpicker instead of adding it inline to the input field.

On focus/enter the overlay opens, on exit/out of focus it closes.

Really like the plugin. Neat and simple layout.