Suggestions

[flexeo]

First of all, well done for this great script!

I made three changes:

• There is an alert in the console with Chrome when the color is assigned to the native colorpicker (the color is not selected in the colorpicker):

The specified value "rgba(255, 0, 0, 255)" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

To correct this problem I added this:

if (/^rgb/.test(color)) {
  var toHex = function (color) {
    var rgb = (color.r << 16) | (color.g << 8) | (color.b << 0);
    return '#' + (0x1000000 + rgb).toString(16).slice(1);
  }
  var c = color.match(/\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})/);
  color = toHex({r: c[1], g: c[2], b: c[3]});
}

<input type="color" data-toggle="handler-color" value="' + color + '">

• Then, it is sometimes difficult to see the controls above the gradient to move the position of the color. You can use this css property:

.grp-handler-drag {
background-color: rgba (255, 255, 255, .5);
mix-blend-mode: exclusion; // <---- this property
cursor: col-resize;
width: 100%;
height: 100%
}

.grp-handler-selected .grp-handler-drag {
background-color: rgba (255, 255, 255, 1);
}

This ensures that the control must always be visible, whatever the color.

• Sometimes, when we want to move the position of a color, we make an accidental click that adds a new color on the gradient. To avoid that I added:

 var lastOffset;
pEl && (0, _utils.on)(pEl, 'mousedown', function (e) {
     lastOffset = {x: e.offsetX, y: e.offsetY};										 
});
pEl && (0, _utils.on)(pEl, 'click', function (e) {
  if (lastOffset && Math.abs(lastOffset.x-e.offsetX) > 2) return;
  // etc...
});

Suggestion

I suggest an optimization: Of course, in use, we try to move (drag) the position of the selected color also with the color picker. We should be able to move them as with position control.

What do you think?