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

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

0 голосов
/ 30 сентября 2018

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

<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 Ответ

0 голосов
/ 12 октября 2018

Выяснили, как «отменить» создание экземпляра компонента 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 Dismissible 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 href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</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-current="page">
          <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>
</body>

</html>
...