Remove widget panel

[sdcaulley]

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

[optlsnd]

Hi @sdcaulley,

From the screenshot, it looks like widget styles are not applied to its elements. The library adds a <style> tag to the DOM, so it needs to be moved to shadow DOM as well. Here's how you can do this

/**
 * 
 * @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.

[sdcaulley]

@optlsnd Thank you.