Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140101

Synchronizing two MDC drawers

$
0
0

In my page I have two Material Design Component drawers with the same items. One is permanent for desktop/tablet display, the other is hidden/modal for mobile display.

<aside class="mdc-drawer mdc-drawer--permanent">
    <div class="mdc-drawer__header">
        <h3 class="mdc-drawer__title">App</h3>
        <h6 class="mdc-drawer__subtitle">@username</h6>
    </div>
    <div class="mdc-drawer__content">
        <nav class="mdc-list--permanent">@menu_drawer_content</nav>
    </div>
</aside>

<aside class="mdc-drawer mdc-drawer--modal">
    <div class="mdc-drawer__header">
        <h3 class="mdc-drawer__title">App</h3>
        <h6 class="mdc-drawer__subtitle">@username</h6>
    </div>
    <div class="mdc-drawer__content">
        <nav class="mdc-list">@menu_drawer_content</nav>
    </div>
</aside>

Both are initialised:

modalDrawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer--modal'));
let list = mdc.list.MDCList.attachTo(document.querySelector('.mdc-list--permanent'));
list.wrapFocus = true;

I have javascript that toggles one over the other:

let smallForm = window.matchMedia("(max-width: 767px)").matches;

function resized() {
    let smallForm_ = window.matchMedia("(max-width: 767px)").matches;
    if (smallForm !== smallForm_) {
        smallForm = smallForm_;
        changedMedia();
    }
}

function changedMedia() {
    let drawerButton = $('.mdc-top-app-bar__row > section > button');
    if (smallForm) {
        $('.mdc-drawer--permanent').hide();
        drawerButton.show();
    } else {
        $('.mdc-drawer--permanent').show();
        drawerButton.hide();
        modalDrawer.open = false;
    }
}

A bug that remains is that selecting an item on one drawer does not select the same item on the other drawer. If I transition from one size to another the selected item will not match the content.

Can I link the two drawers such that selection on one will change the state of the other (especially without triggering events on the "other" drawer or entering a recursive loop cross-notifying loop)?

Edit: Added bounty. Full source.


Viewing all articles
Browse latest Browse all 140101

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>