Adding more listeners besides onChange?

[lemontango]

At the moment there's only the onChange function call when a new color is picked.

In my specific case I need a function call if any of these occour: mouseup/touchend/keyup. In other words, I don't want to spam non-stop with onChange, but only call a function when the color has been 'properly picked'.

I have tried to create eventlisteners for this but without success since my javascript knowledge is quite limited.

Please let me know what you think about this idea.

[mdbassit]

I'm unsure of what you are requesting? Could you describe your use case in a bit more details? What would you need mouseup/touchend/keyup callbacks for? On which part of the color picker you would like to trigger them?

[lemontango]

Sorry about this, I'll try to explain the case.

I'm using Coloris to change the color of an image on the fly. The image is generated server side with PHP. Each time a new color is picked, the img src URL is updated using a javascript function.

Here is a brief example:

<img src="image.php" id="imageObject">

<input type="text" value="#00ff00" class="imageColor" data-coloris>


<script>
Coloris.setInstance('.imageColor', {
    onChange: (color) => updateUrlParams('color', color.substring(1)),
});

var imageObject = document.getElementById("imageObject");

function updateUrlParams(param, value) {
    const url = new URL(imageObject.src);
    url.searchParams.set(param, value);
    imageObject.src = url;
}
</script>

The problem is that Coloris keeps refreshing the img src URL like crazy when you hold down the mouse button while dragging to find the right color.

The console gets spammed like this:
GET /image.php?color=692727
GET /image.php?color=692742
GET /image.php?color=692853
GET /image.php?color=692974
GET /image.php?color=692385
GET /image.php?color=693799
etc. etc.

Instead of calling the function repeatedly with 'onChange', I think adding something like 'onPicked' would be very useful. I believe a color has been picked on mouse up or touch end.

Please let me know your thoughts.

[mdbassit]

In that case you shouldn't use a callback at all, as it's triggered every time the color changes. You should instead listen to the close event on your color field to refresh your image. Here is an example:

const colorField = document.querySelector('.imageColor');

colorField.addEventListener('close', () => {
  updateUrlParams('color', colorField.value.substring(1));
});

And if you want to refresh the image only when the color changes, you can try this:

const colorField = document.querySelector('.imageColor');
let currentColor = colorField.value;

colorField.addEventListener('open', () => {
  currentColor = colorField.value;
});

colorField.addEventListener('close', () => {
  const newColor = colorField.value;

  if (newColor !== currentColor) {
    updateUrlParams('color', newColor.substring(1));
  }
});

[lemontango]

Thank you very much for looking into this. However, close is not the event I'm looking for.

I want the image URL to refresh each time a color has been "picked". In my case, "picked" means mouse up or end touch, regardless if it's just a fast click or a mouse up after dragging.

If you press and hold down the mouse button while dragging I believe that you are "in the search for a color". As soon as you release the mouse button I consider the color picked.

It's a bit difficult to explain, but I hope it's somewhat clear what I'm looking for. :)

[mdbassit]

I see! you can try this then:

// Retrieve picked color on mouseup or touchend events
function getPickedColorOnMouseOrTouchEvent() {
  // Your color field
  const colorField = document.querySelector('.instance1');

  // Coloris UI elements
  const _colorArea = document.getElementById('clr-color-area');
  const _colorMarker = document.getElementById('clr-color-marker');
  const _hueSlider = document.getElementById('clr-hue-slider');
  const _alphaSlider = document.getElementById('clr-alpha-slider');
  const _colorValue = document.getElementById('clr-color-value');

  // Listen for mouseup and touchend events on the UI elements
  [ _colorArea, _colorMarker, _hueSlider, _alphaSlider ].forEach(element => {
    element.addEventListener('mouseup', () => {
      updateUrlParams('color', colorField.value.substring(1));
    });

    element.addEventListener('touchend', () => {
      updateUrlParams('color', colorField.value.substring(1));
    });
  });

  // Listen for change event on the color value input field
  _colorValue.addEventListener('change', () => {
    updateUrlParams('color', colorField.value.substring(1));
  });
}

// Wait for the document to load first
if (document.readyState !== 'loading') {
  getPickedColorOnMouseOrTouchEvent();
} else {
  document.addEventListener('DOMContentLoaded', function () {
    getPickedColorOnMouseOrTouchEvent();
  });
}

This doesn't support swatches though.

[lemontango]

Thanks, that was exactly what I was looking for! You're a wizard. :)

Now, there's just one little bug;
The first time you click a color or hue slider it sets the initial color, not the color you picked. This only happens the very first time, after that it sets the color correctly. This bug doesn't occur after mouseup/touchend, but only on click/touched.

[mdbassit]

Glad it worked :)
That bug is most likely because of a race condition, we just need to delay the mouseup/touchend listeners to avoid it. try this:

// Retrieve picked color on mouseup or touchend events
function getPickedColorOnMouseOrTouchEvent() {
  // Your color field
  const colorField = document.querySelector('.instance1');

  // Coloris UI elements
  const _colorArea = document.getElementById('clr-color-area');
  const _colorMarker = document.getElementById('clr-color-marker');
  const _hueSlider = document.getElementById('clr-hue-slider');
  const _alphaSlider = document.getElementById('clr-alpha-slider');
  const _colorValue = document.getElementById('clr-color-value');

  // Listen for mouseup and touchend events on the UI elements
  [ _colorArea, _colorMarker, _hueSlider, _alphaSlider ].forEach(element => {
    element.addEventListener('mouseup', () => {
      setTimeout(() => { // Prevent race condition
        updateUrlParams('color', colorField.value.substring(1));
      });
    });

    element.addEventListener('touchend', () => {
      setTimeout(() => { // Prevent race condition
        updateUrlParams('color', colorField.value.substring(1));
      });
    });
  });

  // Listen for change event on the color value input field
  _colorValue.addEventListener('change', () => {
    updateUrlParams('color', colorField.value.substring(1));
  });
}

// Wait for the document to load first
if (document.readyState !== 'loading') {
  getPickedColorOnMouseOrTouchEvent();
} else {
  document.addEventListener('DOMContentLoaded', function () {
    getPickedColorOnMouseOrTouchEvent();
  });
}

And if you use the lastest version (0.22.0) that I just pushed, you can replace that last bit with a call to Coloris.ready like this:

// Retrieve picked color on mouseup or touchend events
function getPickedColorOnMouseOrTouchEvent() {
  // Your color field
  const colorField = document.querySelector('.instance1');

  // Coloris UI elements
  const _colorArea = document.getElementById('clr-color-area');
  const _colorMarker = document.getElementById('clr-color-marker');
  const _hueSlider = document.getElementById('clr-hue-slider');
  const _alphaSlider = document.getElementById('clr-alpha-slider');
  const _colorValue = document.getElementById('clr-color-value');

  // Listen for mouseup and touchend events on the UI elements
  [ _colorArea, _colorMarker, _hueSlider, _alphaSlider ].forEach(element => {
    element.addEventListener('mouseup', () => {
      setTimeout(() => { // Prevent race condition
        updateUrlParams('color', colorField.value.substring(1));
      });
    });

    element.addEventListener('touchend', () => {
      setTimeout(() => { // Prevent race condition
        updateUrlParams('color', colorField.value.substring(1));
      });
    });
  });

  // Listen for change event on the color value input field
  _colorValue.addEventListener('change', () => {
    updateUrlParams('color', colorField.value.substring(1));
  });
}

// Wait for the document to load first
Coloris.ready(getPickedColorOnMouseOrTouchEvent);

[lemontango]

Sorry for my late reply, having busy days here. Your last example works like a dream, thank you! 🥇

Now, as usual, there's something that I didn't initially think of:
When you press mouse button on the color area and keep it pressed while moving the cursor outside of the color area and release the mouse button, the color isn't picked. This makes it nearly impossible to pick colors at the very edges of the color area and causes quite some confusion as well.

I figure this is a more difficult task to solve though?

[mdbassit]

That one is going to be hard to solve, indeed there is guarantee that the mouseup event will trigger on the same element where mousedown was initiated. I'll look into it when I have time.