uploadcare-widget
uploadcare-widget copied to clipboard
Remove widget panel
Summary
I have been working on an lit-element work around for the upload-widget using the CDN. I have gotten to a place that I can load the dialog, However it also places a div on the screen that I would rather not have. Is there a way to not have this happen?
Relevant information
Input
<input
type="hidden"
role="uploadcare-uploader"
id="uploadedImage"
data-preview-step="true" />
Function to activate dialog
openUploadcare() {
const ele = this.shadowRoot.querySelector('#uploadedImage');
const widget = uploadcare.Widget(ele).openDialog();
}
Screenshot of panel
Environment (if relevant)
Node: 14.15.4 lit-element: 2.4.0
Hi @sdcaulley,
From the screenshot, it looks like widget styles are not applied to its elements. The library adds a
/**
*
* @param {ShadowRoot} targetContainer
* @param {Boolean} [removeOriginal]
*/
function copyStyle(targetContainer, removeOriginal = false) {
let styles = document.querySelectorAll('style');
let style = [...styles].find((stl) => {
return stl.textContent.includes('.uploadcare--jcrop-handle');
});
let styleCopy = style.cloneNode(true);
targetContainer.prepend(styleCopy);
if (removeOriginal) {
style.remove();
}
}
It's not a perfect solution, but it should do the trick. We'll definitely find a more robust way to do this and implement it in our wrapper.
@optlsnd Thank you.