HTMLElement запускает функцию в другом HTMLElement - PullRequest
Новая
       57

HTMLElement запускает функцию в другом HTMLElement

0 голосов
/ 29 мая 2020

У меня есть кнопка гамбургера и меню в классе HTMLElement.

Когда ширина экрана меньше 912 пикселей, меню переводится на 100% влево (за пределами экрана) и гамбургер появляется. Когда я нажимаю кнопку, меню возвращается на экран.

Я хочу разделить гамбургер и меню на их собственные классы HTMLElement. Это означает, что мне нужно щелкнуть гамбургер, чтобы изменить стиль меню. Проблема в shadowRoot. Если бы не тень root, я мог бы добавить преобразование в стиль меню, но это невозможно.

Как я могу разделить два класса? Есть ли способ вызвать функцию внутри класса меню HTMLElement из внешнего файла HTML? Таким образом, я могу обойти тень Root?

Вот код для рабочего класса: 

const myMenuTemplate = document.createElement('template');
myMenuTemplate.innerHTML = `
<style>

  * {
    padding: 0px;
    margin: 0px;
  }

  .my-button {
    margin-left: 16px;
    display: none;
    cursor: pointer;
  }

  .my-button div{
    width: 25px;
    height: 3px;
    background-color: #34515e;
    margin: 5px;
    transition: all 0.3s ease;
  }

  .my-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 20vw;
    height: 90vh;
    left: 0px;
    bottom: 0px;
  }

  @media screen and (max-width: 912px){

    body{
      overflow-x: hidden;
    }

    .my-button{
      display: block;
    }

    .my-menu{
      transform: translateX(-100%);
    }
  }

  .toggle-button .line1{
    transform: rotate(-45deg) translate(-5px, 0px) scaleX(0.6);
  }

  .toggle-button .line2{
    transform: translate(5px, 0px)
  }

  .toggle-button .line3{
    transform: rotate(45deg) translate(-5px, 0px) scaleX(0.6);
  }

  .toggle-menu {
    transform: translateX(0%);
  }

</style>

<div class="my-button">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

<ul class="my-menu">
  <slot/>
</ul>
`;


class MyMenu extends HTMLElement{
  constructor(){
    super();

    this.attachShadow({ mode: 'open'});
    this.shadowRoot.appendChild(myMenuTemplate.content.cloneNode(true)); 

    const myMenu = this.shadowRoot.querySelector('.my-menu');
    const myButton = this.shadowRoot.querySelector('.my-button');

    myButton.addEventListener('click', () => {
      myButton.classList.toggle('toggle-button');
      myMenu.classList.toggle('toggle-menu');
    });
  }
}

window.customElements.define("my-menu", MyMenu);
...