How to use the screenfull.default.isEnabled function in screenfull

To help you get started, we’ve selected a few screenfull examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github marp-team / marp-cli / src / templates / bespoke / osc.ts View on Github external
export default function bespokeOSC(selector: string = '.bespoke-marp-osc') {
  const osc = document.querySelector(selector)
  if (!osc) return () => {}

  const oscElements = (
    type: string,
    callback: (element: T, index?: number) => void
  ) => {
    osc
      .querySelectorAll(`[data-bespoke-marp-osc=${JSON.stringify(type)}]`)
      .forEach(callback)
  }

  // Hide fullscreen button in not-supported browser (e.g. phone device)
  if (!screenfull.isEnabled)
    oscElements('fullscreen', btn => (btn.style.display = 'none'))

  return deck => {
    osc.addEventListener('click', e => {
      if (e.target instanceof HTMLElement) {
        const { bespokeMarpOsc } = e.target.dataset

        if (bespokeMarpOsc) e.target.blur()

        switch (bespokeMarpOsc) {
          case 'next':
            deck.next()
            break
          case 'prev':
            deck.prev()
            break
github marp-team / marp-cli / src / templates / bespoke / osc.ts View on Github external
osc.addEventListener('click', e => {
      if (e.target instanceof HTMLElement) {
        const { bespokeMarpOsc } = e.target.dataset

        if (bespokeMarpOsc) e.target.blur()

        switch (bespokeMarpOsc) {
          case 'next':
            deck.next()
            break
          case 'prev':
            deck.prev()
            break
          case 'fullscreen':
            if (typeof deck.fullscreen === 'function' && screenfull.isEnabled)
              deck.fullscreen()
        }
      }
    })