CODEWITHSUNDEEP
polymer
blitz
blitz

Reputation: 149

Polymer Navigation Drawer double click to open

I have followed the polymer demo to create a navigation drawer with a icon to open it on click. The demo only requires one click to open up the navigation drawer, but when I try it with my own code it required double clicks to open up. Any reason why? I have copied the code straight up from the demo. The function openDrawer() looks correct, but opening the drawers a double click. I don't know why it won't open on the first click.

<body fullbleed>
<template is="auto-binding" id="tmp">
    <core-drawer-panel id="drawerPanel">
        <core-header-panel drawer id="drawer" mode="seamed">
            <core-toolbar id="navheader">
                <span>Menu</span>
            </core-toolbar>
            <core-menu selected="{{option}}" valueattr="data-category">

            </core-menu>
        </core-header-panel>
        <core-header-panel main id="main" mode="seamed">

            <core-toolbar id="mainheader">
                <paper-icon-button id="navicon" icon="menu" onclick="openDrawer()"></paper-icon-button>
                <span flex>Booklet</span>
            </core-toolbar>


        </core-header-panel>
    </core-drawer-panel>
    </template>

    <script>
        document.addEventListener('polymer-ready', function() {
            var pageStart = document.querySelector('#tmp');
            pageStart.option = 'home';

        });

        function openDrawer() {
            var navicon = document.getElementById('navicon');
            var drawerPanel = document.getElementById('drawerPanel');
            navicon.addEventListener('click', function() {
                drawerPanel.togglePanel();
            });
        }

    </script>

</body>

Upvotes: 1

Views: 678

Answers (1)

robdodson
robdodson

Reputation: 6786

I see a few issues.

Because you have everything in an auto-binding template, you need to listen for template-bound instead of polymer-ready. Only when template-bound fires will your elements have been stamped to the DOM.

The other issue is that you're adding your click listener INSIDE your openDrawer method. You want to add the click listener in the template-bound handler.

Here's a jsbin example

<body fullbleed>
  <template is="auto-binding" id="tmp">
    <core-drawer-panel id="drawerPanel">
      <core-header-panel drawer id="drawer" mode="seamed">
        <core-toolbar id="navheader">
          <span>Menu</span>
        </core-toolbar>
        <core-menu selected="{{option}}" valueattr="data-category">
          <core-item>Foo</core-item>
          <core-item>Bar</core-item>
          <core-item>Baz</core-item>
        </core-menu>
      </core-header-panel>
      <core-header-panel main id="main" mode="seamed">

        <core-toolbar id="mainheader">
          <paper-icon-button id="navicon" icon="menu"></paper-icon-button>
          <span flex>Booklet</span>
        </core-toolbar>


      </core-header-panel>
    </core-drawer-panel>
  </template>

  <script>
    document.addEventListener('template-bound', function() {
      var navicon = document.getElementById('navicon');
      var drawerPanel = document.getElementById('drawerPanel');
      navicon.addEventListener('click', function() {
        drawerPanel.togglePanel();
      });
    });
  </script>


</body>

Upvotes: 1

Related Questions