Is there a way to determine if drawerPanel is open or closed?

Question

Or rather, a native method already defined in polymer source? I'm sure I could write up a function to handle the logic pretty easily, but I've done some digging and haven't come up with anything regarding an already implemented method of determining this. Just want to know if I'll have to write up something myself or not.

Edit: Just realized, even if I did write a tagalong function that tracks when the drawer is opened/closed via toggleDrawer(), it'd get thrown off when the drawer is swiped open or swiped closed, so I sure hope there is a native method for this.

Edit: Using info from the page @Justin XL linked me, I did some testing and found that general opening of closing of the drawer, via swipe, or drawer button press, fired 2 core-selected events, but closing via clicking a drawer item fired 4. I've managed to throw together a solution that should be able to determine at any point if the drawer is open or closed based on 2 vars.

drawerOpenIgnoreClose = false;
drawerOpen = false;
drawerEvent = 0;
drawer.addEventListener('core-select', function() {
    drawerEvent++;
    //console.log('drawerpanel event fired ' + drawerEvent);
    if (drawerEvent >= 2) {
        if (drawerOpenIgnoreClose) {
            drawerOpenIgnoreClose = false;
            console.log('drawer is closed, not from click of menu item');
        } else {
            drawerOpenIgnoreClose = true;
            console.log('drawer is open');
        }
        drawerEvent = 0;
    }
});

And drawerOpen is set to false every time drawerPanel.closerDrawer() is called, which is every time a menu item is clicked. I can then determine for certain if the drawer is open with

function checkDrawer() {
    if (drawerOpen && drawerOpenIgnoreClose) {
        console.log('drawer is definitely open');
        return true;
    } else if (!drawerOpen || !drawerOpenIgnoreClose) {
        console.log('drawer is definitely closed');
        return false;
    }
}

It's yet to fail me with a button outside of the drawer and a button inside the drawer that run checkDrawer() (both return open/closed respectively), but I'll do some more testing. I don't even know if this is the simplest or even correct way of handling this but it seems to work and I'm happy.

Edit again: Managed to find an issue, if the drawer panel is swiped open, checkDrawer() will return closed. More logic will fix it I'm sure. gonna make some adjustments.

Answer 1

I suppose you meant core-drawer-panel.

There's a narrow attribute which tells you whether the panel is in a narrow layout or not.

Alternatively, you can subscribe to core-responsive-change event and use detail.narrow to determine.

You can read more from here.