1

I am working on a WordPress theme and I am using the built in iris color picker (by Automatic). Iris supports color palettes by default, however it displays all colors on one single line, and once you add more than 8 colors, the color boxes get very small (see JSFiddle demo below). Is there anyway to add a new row of colors to the iris color picker?

Here's the default jQuery plus JSFiddle

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

http://jsfiddle.net/rcm0pdu1/

Kevin M
  • 1,202
  • 15
  • 30
  • 1
    Looks like it builds that row [here](https://github.com/Automattic/Iris/blob/master/src/iris.js#L357-L374) and applies `.iris-palette` to the element. So my guess would be : Modify that function, or modify the [styles](https://github.com/Automattic/Iris/blob/master/src/iris.css#L185-L204) applied (or a mix of the two). – Brad Christie Jun 09 '15 at 12:41
  • I don't know if it would be useful, but see this related answer: http://stackoverflow.com/a/25394888/3739498 – Aibrean Jun 09 '15 at 12:42
  • @Brad Christie Thanks I will be looking into that. – Kevin M Jun 09 '15 at 14:08
  • @Aibrean Thanks. I came across that post as well, but that specific post refers to the color palette of the TinyMCE editor used in WordPress and not the Iris Color picker. – Kevin M Jun 09 '15 at 14:09

1 Answers1

2

It seems the iris plugin makes a few calculations for the design width and height based on the amount of palettes used. The function option responsible for this can be found here: https://github.com/Automattic/Iris/blob/master/src/iris.js#L466-L513

Since I am not that familiar with JavaScript, I don't really know how to override a function option inside of a plugin without touching the core file.

Here is a jQuery hack I quickly wrote. It's not the best solution, but it does the trick. (not the best solution because the iris plugin still makes the calculations of the width and height, although they're not being used in the end)

    $('.iris-palette').css({'height':'20px','width':'20px', 'margin-left':'','margin-right':'3px','margin-top':'3px'});
    $('.iris-strip').css('height','140px');
    paletteCount = $('.iris-palette').length
    paletteRowCount = Math.ceil(paletteCount / 8);
    $('.iris-picker').css({'height': 150 + (paletteRowCount * 23)+'px', 'padding-bottom':'15px'});

http://jsfiddle.net/rcm0pdu1/16/

Kevin M
  • 1,202
  • 15
  • 30