CODEWITHSUNDEEP
javascripthtmlpolymer
sbranturesh
sbranturesh

Reputation: 102

Detect when core-drawer-panel is closed?

I am trying to detect when the user clicks off the core-drawer-panel on a website for example.

I am trying to get some attributes of a div to respond to whether the core-drawer-panel is open/closed.

I have managed to get it to respond when it is opened by adding an event listener for the menu icon I have used but it is the closing of the core-drawer-panel that I am having issues with.

Any help would be appreciated!

<body fullbleed layout vertical>

<template is="auto-binding">

    <core-drawer-panel id="drawerPanel">

        <core-header-panel id="drawerCHP" drawer>

            <core-toolbar id="navheader">
                <span>My Webpage</span>
            </core-toolbar>

            <core-menu selected="0">
                <core-item icon="home" label="Home"></core-item>    
                <core-item icon="settings" label="Settings"></core-item>
                <core-item icon="help" label="Help"></core-item>
            </core-menu>
        </core-header-panel>

        <core-header-panel id="chp" main mode="seamed">
            <core-toolbar id="mainHeader">
                <paper-icon-button id="navicon" icon="menu"></paper-icon-button>
            </core-toolbar>
            <div class="content">
                <!-- Content Goes Here -->
            </div>
        </core-header-panel>
    </core-drawer-panel>

    <script>    
        document.getElementById("navicon").addEventListener("click", openDrawer);

        function openDrawer() {
            document.getElementById("drawerPanel").togglePanel();
        }
    </script>
</template>

'

I haven't used the core-drawer-panel within a Polymer app so I can't use events such as core-responsive-change.

Upvotes: 1

Views: 497

Answers (1)

jimi dough10
jimi dough10

Reputation: 2016

looking @ the source for core-drawer-panel it looks like you can use the document.querySelector('core-drawer-panel').isMainSelected() method and get a true / false return. true would mean the panel is closed and false would mean panel is open.

Upvotes: 1

Related Questions