CODEWITHSUNDEEP
javascriptpolymer
Andreas
Andreas

Reputation: 300

Call function on polymer navigation drawer panel

I am stuck. I am playing around with polymer but I do not manage to call the togglePanel function on the drawer panel and my code looks like this:

    <!DOCTYPE html>
<html>
  <head>
    <!-- 1. Load platform.js for polyfill support. -->
    <script src="bower_components/platform/platform.js"></script>

    <!-- 2. Use an HTML Import to bring in the element. -->
    <link rel="import"
        href="bower_components/core-ajax/core-ajax.html">

    <link rel="import"
        href="bower_components/core-drawer-panel/core-drawer-panel.html">

    <link rel="import"
        href="bower_components/core-toolbar/core-toolbar.html">

    <link rel="import"
        href="bower_components/core-icon-button/core-icon-button.html">
  </head>
  <body>

    <script>
        function openDrawer() {
            alert("fuck");
            var drawer = document.getElementById("main-drawer");
            drawer.togglePanel();
        }
    </script>

    <core-drawer-panel id="main-drawer">
        <div drawer style="background-color: #FF0000;">

        </div>
        <div main style="background-color: #00FF00;">
            <core-toolbar style="background-color: #8888FF;">
                <core-icon-button icon="menu" onclick="openDrawer()" on-tap="openDrawer()"></core-icon-button>
                    <div flex>PageTitle</div>
            </core-toolbar>
        </div>
    </core-drawer-panel>
  </body>
</html>

The function gets called when I click the menu button but nothing more happens, i made sure using an alert.

I guess it has something to do with the shadow DOM but I am not sure. I hope somebody knows how to call its function.

Upvotes: 0

Views: 751

Answers (2)

fredtma
fredtma

Reputation: 1053

An other way too keep the drawer close. edit the code in core-drawer-panel.hmlt and edit the publish attribute of forceNarrow=true If true, ignore responsiveWidth setting and force the narrow layout.
Or with javascript

$scaffold = document.querySelector('scaffold');
$scaffold.shadowRoot.querySelector('core-drawer-panel').forceNarrow = true;
$scaffold.closeDrawer();

Upvotes: 0

Scott Miles
Scott Miles

Reputation: 11027

core-drawer-panel stays open all the time if the window size is less than responsiveWidth. By default it will generally stay open unless you are on a tablet device or smaller.

If you set responsiveWidth really high, you can alter the behavior so it only opens on demand.

<core-drawer-panel id="main-drawer" responsiveWidth="900em">

http://jsbin.com/zorufa/2/edit

Upvotes: 1

Related Questions