个人中心
gpt4 book ai didi

javascript - 同步两个 MDC 抽屉

转载 作者：行者123 更新时间：2023-11-29 20:49:38 30 4
gpt4 key购买 nike

在我的页面中，我有两个具有相同项目的 Material Design Component 抽屉。一个对于桌面/平板电脑显示是永久性的，另一个对于移动显示是隐藏/模态的。

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

仍然存在的一个错误是，在一个抽屉上选择一个项目不会在另一个抽屉上选择相同的项目。如果我从一种尺寸过渡到另一种尺寸，所选项目将与内容不匹配。

我能否链接这两个抽屉，以便对一个抽屉的选择会改变另一个抽屉的状态(尤其是在不触发“另一个”抽屉上的事件或进入递归循环交叉通知循环的情况下)？

编辑:增加赏金。 Full source .

最佳答案

想出如何“撤消”MDC 组件实例化，以便您可以使用单个抽屉并在模态和永久之间切换，同时保留对抽屉列表项的选择。以下代码片段的重要部分是在切换媒体时调用 destroy()，以便您可以修改抽屉类并重新实例化成功。

let timeout;
let activeBar;
let activeDrawer;
let activeList;
const actualResizeHandler = () => {
  const fixedStyles = () => {
    document.body.style = 'display: flex; height: 100vh;';
    document.querySelector('.mdc-drawer-app-content').style = 'flex: auto; overflow: auto;';
    document.querySelector('.main-content').style = 'height: 100%; overflow: auto;';
    document.querySelector('.mdc-top-app-bar').style = 'position: absolute;';
  };

  const modalStyles = () => {
    document.body.removeAttribute('style');
    document.querySelector('.mdc-drawer-app-content').removeAttribute('style');
    document.querySelector('.main-content').removeAttribute('style');
    document.querySelector('.mdc-top-app-bar').removeAttribute('style');
  };
  
  const bar = document.querySelector('.mdc-top-app-bar');
  const drawer = document.querySelector('.mdc-drawer');
  const list = document.querySelector('.mdc-list');
  if (typeof activeBar !== 'undefined') {
    activeBar.destroy();
  }
    
  if (window.matchMedia('(max-width: 767px)').matches) {
    if (typeof activeList !== 'undefined') {
      activeList.destroy();
    }
    
    drawer.classList.add('mdc-drawer--modal');
    drawer.insertAdjacentHTML('afterend', '<div class="mdc-drawer-scrim"></div>');
    modalStyles();
    activeBar = mdc.topAppBar.MDCTopAppBar.attachTo(bar);
    activeBar.listen('MDCTopAppBar:nav', () => {
      if (typeof activeDrawer !== 'undefined') {
        activeDrawer.open = !activeDrawer.open;
      }
      
    });
    
    activeDrawer = mdc.drawer.MDCDrawer.attachTo(drawer);
  } else {
    const scrim = document.querySelector('.mdc-drawer-scrim');
    if (scrim) {
      scrim.remove();
    }
    
    if (typeof activeDrawer !== 'undefined') {
      activeDrawer.destroy();
    }
    
    drawer.classList.remove('mdc-drawer--modal');
    fixedStyles();
    activeList = mdc.list.MDCList.attachTo(list);
    activeList.wrapFocus = true;
  }
};

const resizeThrottler = () => {
  if (!timeout) {
    timeout = setTimeout(() => {
      timeout = null;
      actualResizeHandler();
     }, 66);
  }
};
  
window.addEventListener('resize', resizeThrottler, false);
actualResizeHandler();
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Modal / 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">
      <div class="mdc-drawer__content">
        <nav class="mdc-list">
          <a class="mdc-list-item mdc-list-item--activated" href="#" tabindex="0" aria-current="page">
            <span class="mdc-list-item__text">Item 1</span>
          </a>
          <a class="mdc-list-item" href="#" tabindex="-1">
            <span class="mdc-list-item__text">Item 2</span>
          </a>
          <a class="mdc-list-item" href="#" tabindex="-1">
            <span class="mdc-list-item__text">Item 3</span>
          </a>
        </nav>
      </div>
    </aside>
    <div class="mdc-drawer-app-content">
      <header class="mdc-top-app-bar">
        <div class="mdc-top-app-bar__row">
          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
            <span class="mdc-top-app-bar__title">Title</span>
          </section>
        </div>
      </header>
      <main class="main-content">
        <div class="mdc-top-app-bar--fixed-adjust">
          App Content
        </div>
      </main>
    </div>
  </body>
</html>

关于javascript - 同步两个 MDC 抽屉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52574148/

30 4 0
文章推荐： javascript - 如何在 dc.js 中显示前 N 之前过滤 NaN？
文章推荐： mysql - My SQL 内部联接 根据另一个列的值通过两个条件连接表
文章推荐： javascript - 我如何解析这个非 JSON 数据？
文章推荐： mysql - EntityManager merge() 导致重复行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com