Синхронизация двух ящиков MDC

На моей странице есть два выдвижных ящика компонентов дизайна материала с одинаковыми предметами. Один из них является постоянным для отображения на рабочем столе / планшете, другой - скрытым / модальным для отображения на мобильных устройствах.

<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>

Оба инициализируются:

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

У меня есть JavaScript, который переключает один над другим:

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;
    }
}

Оставшаяся ошибка заключается в том, что при выборе элемента в одном ящике этот элемент не выбирается в другом. Если я перейду из одного размера в другой, выбранный элемент не будет соответствовать содержанию.

Могу ли я связать два выдвижных ящика так, чтобы выбор одного из них изменил состояние другого (особенно без запуска событий в "другом" ящике или входа в цикл перекрестного уведомления рекурсивного цикла)?

Изменить: Добавлена ​​награда. Полный источник.

Источник

1 ответ

Решение

Выяснили, как "отменить" создание экземпляра компонента MDC, чтобы вы могли использовать один ящик и просто переключаться между модальным и постоянным, сохраняя при этом выбор элемента списка ящиков. Важной частью фрагмента ниже является вызов destroy() при переключении носителей, чтобы вы могли изменить класс выдвижного ящика и успешно создать его заново.

const drawer = document.querySelector('.mdc-drawer');
const list = document.querySelector('.mdc-list');
let activeDrawer;
let activeList;

const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.getElementById('app-bar'));
topAppBar.listen('MDCTopAppBar:nav', () => {
  if (typeof activeDrawer !== 'undefined') {
    activeDrawer.open = !activeDrawer.open;
  }
});

const actualResizeHandler = () => {
  if (window.matchMedia('(max-width: 767px)').matches) {
    if (typeof activeList !== 'undefined') {
      activeList.destroy();
    }
    drawer.classList.add('mdc-drawer--modal');
    activeDrawer = mdc.drawer.MDCDrawer.attachTo(drawer);
  } else {
    if (typeof activeDrawer !== 'undefined') {
      activeDrawer.destroy();
    }
    drawer.classList.remove('mdc-drawer--modal');
    activeList = mdc.list.MDCList.attachTo(list);
    activeList.wrapFocus = true;
  }
}

let resizeTimeout;
const resizeThrottler = () => {
  if (!resizeTimeout) {
    resizeTimeout = setTimeout(() => {
      resizeTimeout = null;
      actualResizeHandler();
     }, 66);
  }
}
  
window.addEventListener("resize", resizeThrottler, false);
actualResizeHandler();
  
body {
  display: flex;
  height: 100vh;
}

.mdc-drawer-app-content {
  flex: auto;
  overflow: auto;
}

.main-content {
  overflow: auto;
  height: 100%;
}

.app-bar {
  position: absolute;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Modal Drawer Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>

<body>
  
  <aside class="mdc-drawer mdc-drawer--modal">
    <div class="mdc-drawer__content">
      <nav class="mdc-list">
        <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
          <span class="mdc-list-item__text">Item 1</span>
        </a>
        <a class="mdc-list-item" href="#">
          <span class="mdc-list-item__text">Item 2</span>
        </a>
        <a class="mdc-list-item" href="#">
          <span class="mdc-list-item__text">Item 3</span>
        </a>
      </nav>
    </div>
  </aside>

  <div class="mdc-drawer-scrim"></div>
  
  <div class="mdc-drawer-app-content">
    
    <header class="mdc-top-app-bar app-bar" id="app-bar">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">Title</span>
        </section>
      </div>
    </header>
    
    <main class="main-content" id="main-content">
      <div class="mdc-top-app-bar--fixed-adjust">
        App Content
      </div>
    </main>
    
  </div>

  <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

</body>

</html>

Источник
Другие вопросы по тегам