[SOLVED] BasicUI shows icon for webview

Add-ons UIs
,
21

Quite possibly.

You will want to also hide the webview. Make sure it’s the last thing on the page and use this code from @patrik_gfeller

// Hide the last web element of the page ...
_webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
_lastWebViewElement = _webViewElements[_webViewElements.length - 1];
_lastWebViewElement.style.display = "none";
22

I didn’t get it to work. As soon as a different hierarchy level is selected the script is no longer carried out. I do not speak enough JavaScript to have an idea how to address this problem. I also do not see how the css injection approach you mentioned worked in the first place since it should face the very same problem: the injection script is only executed when the hierarchy level is shown that has the webview with the injection. Anyway, what works is an additional icon buster Webview as the last item in each hierarchy level that one wants to treat. The following has the code for the icon buster Webview that worked for me:

<head>
    <style>
        
    </style>
</head>

<body>
    <script type="text/javascript">
        // Hide the last web element of the page ...
        _webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
        _lastWebViewElement = _webViewElements[_webViewElements.length - 1];
        _lastWebViewElement.style.display = "none";
        _lastWebViewElement.previousElementSibling.style.display = "none";

        // hide the Webview icon for all Webview instances
        Array.prototype.forEach.call(_webViewElements, function(element) {
            element.previousElementSibling.style.display = "none";
        });
    </script>
</body>

If anyone comes up with a better solution (i.e., only a single icon buster Webview in the entire sitemap) please let us all know.

23

Hello,

I managed to get a working solution using JQuery. I tried to make it flexible and no too generic in the elements targeting.
In fact, the space on top of the iframe is reserved for the icon AND the label of the Webview, so my solution hides this space (the entire <div> element) if no icon and no label are defined.
If no icon is defined but a label is, the icon <img> element will be hidden to prevent printing of unknown icon by the browser.
All the logic resides in the following html document, which must be embedded in the sitemap as the last Webview element (self-destructing) :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="jquery-3.4.1.slim.min.js"></script>
    <script>
      $(parent.document).ready(function() {
        const iconImg = $("img[data-icon='webview']", parent.document);
        iconImg.hide();
        iconImg
          .parent()
          .siblings("span.mdl-form__label")
          .text(function(i, t) {
            return $.trim(t);
          })
          .filter(":empty")
          .parent()
          .hide();
        $("div[data-control-type='webview']", parent.document)
          .last()
          .parents("div.mdl-cell")
          .remove();
      });
    </script>
  </head>
</html>
1 Like
24

I’ll give this a try, seems like a nice sollution.