mousemove event not removed when i release mouse on iFrame

[giacomarco]

Good morning, Status: coloris initialize on document in a column. and close to this column I have an Iframe. when I open coloris box half of gradient picker are over the iframe.

When I release 'mouseup' the mouse on iframe ( if i choose color on the edge it's 99% times) the event 'mousemove' is not removed because the document. it's different. It's not so easy to explain and I'm sorry for my eng. I hope that you understand. Thank you Marco

[mdbassit]

This is a difficult issue to solve, I will think about it and get back to you. A possible solution would be to use CSS to disable pointer events on the iframe if it doesn't have any interactive elements.

[giacomarco]

yesterday I create a workaround for fixit i'll share my solution I add this at line 959 in coloris.js:

 const cover = document.createElement('div')
    cover.classList.add('clr-cover');
    cover.addEventListener('click', ()=> {
      closePicker();
    })
    picker.appendChild(cover);

and this in coloris.css

#clr-picker .clr-cover {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: -1;
}

this create a transparent layer under the picker that cover all window.

[mdbassit]

If that kind of fix is good enough for you, then you don't even need to modify coloris.js. Just add this CSS code to your page:

.clr-picker:after {
  content: '';
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
  background: transparent;
}

But with you won't be able to click outside to close the color picker.

[giacomarco]

Unfortunately I should close on click outside. And it's not possibile to catch click on pseudo elements. I try and it's a cool effect also with background color for example with rgba(0, 0, 0, 0.5)

Obv I don't like to have customized library.

If you like it's possibile add a new parameter in settings like "backdrop" if null nothing change and nothing happend , if a color your code can add clr-cover or better clr-backdrop div as backdrop and add style in line with color selected (even transparent or rgb with alpha 0).

[mdbassit]

In that case here is a version that doesn't force you to modify the color picker itself.

Add this CSS code anywhere in your page:

.clr-picker.clr-open .clr-backdrop {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
  background: transparent;
}

And add this Javascript code after initializing the color picker:

function clrFixIframeMouseUp() {
  const picker = document.getElementById('clr-picker');
  const backdrop = document.createElement('div');

  picker.appendChild(backdrop);
  backdrop.classList.add('clr-backdrop');
  backdrop.addEventListener('click', () => {
    Coloris.close();
  });
}

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

[mdbassit]

Hello @giacomarco, does this solve your problem?

[giacomarco]

Hi @mdbassit sorry for delay. At this moment I should keep mod inside code because I instance Coloris in a lot of diferents parts and I prefer to have this implementation once for future maintenance. IF you think thats possibile to implement in your code I can help you (but i'm sure that you don't need my help for this easy things) . Thank you again for your code and for your help.

[mdbassit]

Unfortunately, I have no plans to implement this.