@digix-ui/dialog/dist/collection/dx-dialog/utils.js

Stencil Component Starter

class Dialogo {
  constructor() {
    this.dialogoAberto = false;
    this.selecionarBody = document.getElementsByTagName('body');
    this.ultimoFocoAntesDoDialogo;
    this.idDoDialogoAberto;
    this.todosElementosDoDialogo;
  }

  mostrarDialogo(idDoDialogo) {
    this.ultimoFocoAntesDoDialogo = document.activeElement;
    this.idDoDialogoAberto = idDoDialogo;
    this.dialogoAberto = true;
    const ultimoElementoDoDialogo = document.createElement('SPAN');
    document.getElementById(this.idDoDialogoAberto).appendChild(ultimoElementoDoDialogo);
    this.todosElementosDoDialogo = document.querySelectorAll(`#${this.idDoDialogoAberto} *`);
    document.getElementById(this.idDoDialogoAberto).classList.add('dialogo_ativo');
    this.todosElementosDoDialogo[1].setAttribute('tabindex', '0');
    this.todosElementosDoDialogo[1].focus();
    this.selecionarBody[0].style.overflowY = 'hidden';
    this.focusApenasNoDialogo();
  }

  focusApenasNoDialogo() {
    this.todosElementosDoDialogo[this.todosElementosDoDialogo.length - 1].setAttribute('tabindex', '0');
    this.todosElementosDoDialogo[this.todosElementosDoDialogo.length - 1].addEventListener('focus', () => {
      this.todosElementosDoDialogo[1].focus();
    });
    this.todosElementosDoDialogo[0].setAttribute('tabindex', '0');

    document.onkeydown = (e) => {
      e = e || window.event;
      this.manterFocoNoDialogo(e);
      if (e.keyCode === 27) {
        this.fecharDialogo();
      }
    };
  }

  manterFocoNoDialogo(e) {
    this.todosElementosDoDialogo[0].addEventListener('focus', () => {
      if (e.shiftKey && e.keyCode === 9) {
        this.todosElementosDoDialogo[1].focus();
      }
    });
  }

  fecharDialogo() {
    if (this.dialogoAberto) {
      document.getElementById(this.idDoDialogoAberto).classList.remove('dialogo_ativo');
      this.todosElementosDoDialogo[this.todosElementosDoDialogo.length - 1].remove();
      this.dialogoAberto = false;
      this.selecionarBody[0].style.overflowY = 'auto';
    }
  }

  bloquearEsc() {
    document.onkeydown = (e) => {
      e = e || window.event;
      this.manterFocoNoDialogo(e);
      if (e.keyCode === 27) {
        return;
      }
    };
  }
}

export default Dialogo;