mousemove event not removed when i release mouse on iFrame about coloris HOT 8 CLOSED

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.

from coloris.

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.

from coloris.

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.

from coloris.

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).

from coloris.

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();
  });
}

from coloris.

Hello @giacomarco, does this solve your problem?

from coloris.

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.

from coloris.

Unfortunately, I have no plans to implement this.

from coloris.