@govbr-ds/webcomponents/dist/collection/pages/components/scrim/index.js

Biblioteca de Web Components baseado no GovBR-DS

if (!window.elementsToListen && !window.eventsToListen) {
  const elementsToListen = document.querySelectorAll('br-scrim')

  const eventsToListen = ['brScrimOpen, brScrimClose']

  elementsToListen.forEach((domElement) => {
    eventsToListen.forEach((event) => {
      domElement.addEventListener(event, function (event) {
        console.log({
          Evento: event.type,
          Elemento: domElement.outerHTML,
          ...(event.detail && { Detail: event.detail }),
          ...(event.data && { Data: event.data }),
        })
      })
    })
  })
}

const scrimBlock = document.getElementById('myScrim')
document.getElementById('openScrimBlock').addEventListener('click', () => {
  scrimBlock.open()
})
document.getElementById('closeScrimBlock').addEventListener('click', () => {
  scrimBlock.close()
})

const scrimClose = document.getElementById('myScrim1')
document.getElementById('openScrimClose').addEventListener('click', () => {
  scrimClose.open()
})
document.getElementById('closeScrim').addEventListener('click', () => {
  scrimClose.close()
})

// document.getElementById('openScrimBackground').addEventListener('click', () => {
//   document.getElementById('backgroundScrim').open()
// })
document.getElementById('closeScrimBackground').addEventListener('click', () => {
  document.getElementById('backgroundScrim').close()
})

document.getElementById('openScrimOpacity').addEventListener('click', () => {
  document.getElementById('opacityScrim').open()
})
document.getElementById('closeScrimOpacity').addEventListener('click', () => {
  document.getElementById('opacityScrim').close()
})

document.getElementById('openScrimDisableClick').addEventListener('click', () => {
  document.getElementById('disableClickScrim').open()
})
document.getElementById('closeScrimDisableClick').addEventListener('click', () => {
  document.getElementById('disableClickScrim').close()
})

// Scripts para controlar a abertura e fechamento de position-content
document.getElementById('openScrimTop').addEventListener('click', () => {
  document.getElementById('topScrim').open()
})
document.getElementById('closeScrimTop').addEventListener('click', () => {
  document.getElementById('topScrim').close()
})

document.getElementById('openScrimRight').addEventListener('click', () => {
  document.getElementById('rightScrim').open()
})
document.getElementById('closeScrimRight').addEventListener('click', () => {
  document.getElementById('rightScrim').close()
})

document.getElementById('openScrimBottom').addEventListener('click', () => {
  document.getElementById('bottomScrim').open()
})
document.getElementById('closeScrimBottom').addEventListener('click', () => {
  document.getElementById('bottomScrim').close()
})

document.getElementById('openScrimLeft').addEventListener('click', () => {
  document.getElementById('leftScrim').open()
})
document.getElementById('closeScrimLeft').addEventListener('click', () => {
  document.getElementById('leftScrim').close()
})

// Scripts para controlar a abertura e fechamento de display-mode
document.getElementById('openScrimFullscreen').addEventListener('click', () => {
  document.getElementById('fullscreenScrim').open()
})
document.getElementById('closeScrimFullscreen').addEventListener('click', () => {
  document.getElementById('fullscreenScrim').close()
})

document.getElementById('openScrimParent').addEventListener('click', () => {
  document.getElementById('parentScrim').open()
})
document.getElementById('closeScrimParent').addEventListener('click', () => {
  document.getElementById('parentScrim').close()
})