Closed giacomarco closed 1 year ago
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.
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.
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.
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).
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();
});
}
Hello @giacomarco, does this solve your problem?
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.
Unfortunately, I have no plans to implement this.
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