Request: A few options for configurable design tweaks

[m4mbart]

Hi,

Thanks for fixing the Safari/Angular bug I encountered. And since you asked, I do have a few little requests:

• It would be nice if there were an option to set the colorwheel brightness to fixed. Because sliding the slider to dark will only show black in the wheel.
• The designers would have liked a vertical slider over an horizontal slider. So maybe an option to tweak the orientation (or position: top, bottom, left, right).
• It would be nice to be able to use custom handle styles. The designers suggested these handles:
  

Well these are all 'would be nice', but I won't stop using your library anyway :)

[Ape]

There is #9 for the first thing. I would also like to have that myself.

[jaames]

Hey! Thank you for the feature requests. :>

• This has been suggested a couple of times (as @Ape mentioned). My previous argument against it was that I intended for the user's selected color to be marked by both handles, and "breaking" that behaviour may be counterintuitive for them. I guess it could be added as an option since there's been a number of requests for it now. For a quick fix, as of 3.0.0 you can actually disable the color wheel's brightness via CSS:

  .iro__wheel__lightness {
      display: none;
      visibility: hidden;
  }

• I've wanted to do this for a while now. It will take a while to implement, but I'll put that on a priority since it's probably about time I improve how the library solves UI layout. The current layout method hasn't changed since version 1, and as such it isn't particularly robust.

• I really like this idea! Perhaps they could be implemented via SVG symbols or something? They'll probably be subject to the same Safari URL bug as mentioned in Black output on Safari #18 but I'll see what I can do.

[jaames]

Went ahead and added a wheelLightness option to iro.ColorPicker. If you set this to false, then the color wheel won't fade to black as the selected color lightness decreases.

I should note that this option will be documented as "unrecommended" though, I don't personally think this behaviour is exactly ideal from a design standpoint. ¯\_(ツ)_/¯

[m4mbart]

Thank you for offering us the option. I do think it is favourably for our use in the application. Since the default color is black, the first time you enter the color picker dialogue the entire wheel will be black. It is sort of less intuitive to just start clicking randomly on the black wheel I guess... But we'll see how it will be used and I will enable/disable this option based on that.

[m4mbart]

As for request #3: I agree that pointing to a custom svg for the handles does make sense. And maybe one should be able to give a center offset per handle, just like Google Maps does for the the anchor point of an Icon: https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

[jaames]

Ah, I didn't think of that actually. You raise a very valid point there. :>

Looks like custom SVG handles will be pretty easy to implement, <use> elements don't seem to be subject to the same Safari issues as gradients and filters.

The color picker parameters are starting to get a little messy though, I'm wondering if it's time to adopt some sort of multi-level param structure like this:

var colorPicker = new iro.ColorPicker("#colorPicker", {
    markers: {
        url: "#markerShape",
        origin: {x: 4, y: 4}
    },
    slider: {
        height: 20,
        margin: 24
    },
    wheel: {
        lightness: false 
    }
});

Any thoughts?

[m4mbart]

Yes I think something like that would be nice. And it might then also be nice to have a configurable slider (optional) for both elements separately:

var colorPicker = new iro.ColorPicker("#colorPicker", {
    slider: {
        height: 20,
        margin: 24,
        marker: {
            url: "#markerShape",
            origin: {x: 4, y: 4}
        }
    },
    wheel: {
        lightness: false,
        marker: {
            url: "#markerShape",
            origin: {x: 4, y: 4}
        }
    }
});

[m4mbart]

That would be a configurable marker per element. 'markers' could still be used optionally to configure both elements at once.

[jaames]

Being able to configure markers per control element would be a good addition, I agree.

When I was looking at implementing this earlier, I started to wonder if it would actually just be easer to allow developers to create each UI element directly if they wanted more options:

var colorPicker = new iro.ColorPicker("#colorPicker", {
    controls: [
        iro.control.wheel({
             ...
        }),
        iro.control.slider({
             ...
        }),     
    ]
});

They're already created like this internally, and of course the "old" param format could still be kept around for users who just want to install the library and go. Maybe in the future, extra control types can be added and devs can decide which they want to use.

[m4mbart]

Even better :)

[ReseTTim]

I created a fork with the slider vertical positioned.. :)

[Harshit-pratiti]

@jaames Did you implement the discussion that was going on for creating custom handles (like svg) to override the already present marker? I have that requirement to change the marker and make it custom.

[jaames]

@Harshit-pratiti It's on the todo list for version 4.0 (#30), but I haven't had the time to implement it yet.

[jaames]

Custom SVG handles are now available in the iro.js v4 beta!

The iro.ColorPicker constructor now supports handleUrl and handleOrigin as config params. handleUrl needs to be an ID selector referencing an SVG that is wrapped in a node.

Here's a basic example:

<html>
  <head>
    <script src="https://unpkg.com/@jaames/iro@beta/dist/iro.js"></script>
  </head>
  <body>
    <svg>
      <!-- svg must be wrapped in a <defs> node -->
      <defs>
        <g id="#handle">
          <rect x="0" y="0" width="10" height="10" fill="black"></rect>
        </g>
      </defs>
    </svg>
    <div id="color-picker-mount"></div>
    <script>
       var colorPicker = new iro.ColorPicker("#color-picker-mount", {
         width: 360,
         handleUrl: "#handle",
         handleOrigin: {y: 0, x: 0},
       });
    </script>
  </body>
</html>

Custom handles per element (as discussed) will also be coming soon. Horizontal layout is further down the road because it's quite complicated, especially with plans for custom UI controls and optional extra sliders for transparency, etc.

Sorry for taking so long to get around to this! ':)

[jaames]

Custom handles are now available as of iro.js version 4.0.0! Check out the documentation here: https://iro.js.org/guide.html#custom-handles

Horizontal layout will also be coming pretty soon, so I'm going to close this thread now. :)