0

I have an app-drawer in my code:

<app-drawer-layout fullbleed force-narrow>
<app-drawer swipe-open opened="{{drawerOpened}}">
   ...
</app-drawer>

And the drawer always glitching (opens and closes) for like 0.2 second while site is loading its shell (app-toolbar, app-drawer, etc.). I can see these glitches in the edge and firefox (sometimes) browsers.

So I decided to fix it by adding visibility:hidden:

<app-drawer swipe-open opened="{{drawerOpened}}" style="visibility:hidden;">
   ...
</app-drawer>

and make is visible again in 2 seconds after the page's shell is loaded(-ish):

  setTimeout(function(){
        $(document).ready(function() {
            $("app-drawer").css( "visibility", "visible;" );
        });
    },2000);

But this jquery code does not making it visible.

While searching the internet I found that I need to use Polymer.dom(this.root).querySelector instead of using $("app-drawer"), but I have no idea how to implement it in this code, since I'm a beginner. Any help?

Un1
  • 3,874
  • 12
  • 37
  • 79
  • or give an id to your app-drawer and call the element with this.$.idName (inside Polymer element's ready method) – Supersharp Sep 24 '16 at 22:02
  • Thank you for the answer, but non of these are working. Maybe because of all the shadow-dom transformations. I don't know, maybe I have to add a shadow-root class in the jquery, like `--app-drawer{}` or something..but I don't know how to do it really. – Un1 Sep 24 '16 at 22:23
  • try to put the unresolved attribute in the body element – Supersharp Sep 24 '16 at 22:25
  • Well, I tried to put it there as well. It seems like a lot of things doesn't work the same way as before In this polymer starter kit 2.0. – Un1 Sep 24 '16 at 22:29
  • Then put your polymer element in a div and play with the style of the div. – Supersharp Sep 24 '16 at 23:25

1 Answers1

1

Depends where you app-drawer is defined.

If it is directly in your first level of < body >, you can access it with jquery (by ID, class, tagname w/e).

<script>
  window.addEventListener('WebComponentsReady', function(e) {
    // imports are loaded and elements have been registered
    $("app-drawer").css( "visibility", "visible;" );
  });
</script>

If your app-drawer is in a custom element, you need to pass the shadow root (because jQuery is not looking into shadow root via selector).

You can pass the shadow root and reach the element by using polymer dom functions. Just get a reference to the element where your app-drawer is defined and have a look to the $ variable.

document.querySelector("#YOUR-ELE-AROUND-APP-DRAWER").$.appDrawerID.style.visibility = "visible";

https://www.polymer-project.org/1.0/docs/devguide/local-dom#node-finding

Third solution can be to use jquery directly inside your custom element where app-drawer is defined and access it.

ready: function() {
      // access a local DOM element by ID using this.$
      $("app-drawer").css( "visibility", "visible;" );
    }

https://www.polymer-project.org/1.0/docs/devguide/registering-elements#ready-method

Example fiddle: https://jsfiddle.net/PatrickJaja/55cbdft5/

Patrick Jaja
  • 96
  • 1
  • 3
  • Thank you for the answer, my app-drawer is in a custom element. I've added the 3rd solution "as is" to the ` – Un1 Sep 25 '16 at 19:42
  • As for the second solution that you wrote down, do I have to add `"id=appDrawerLayout"` to the `` (where it says #YOUR-ELE-AROUND-APP-DRAWER) and make it look like this: `document.querySelector("#appDrawerLayout").$.appDrawerID.style.visibility = "visible";` ? If so, it doesn't work in as it is now – Un1 Sep 25 '16 at 19:44
  • I have created an example, updated my answer with a fiddle. Please let me know. – Patrick Jaja Sep 26 '16 at 12:18
  • Thank you so much! – Un1 Sep 26 '16 at 12:37