barba js starter

barba js application.js

// /app/javascript/packs/application.js
import Barba from 'barba.js'
import {HideShowTransition, FadeTransition} from '../barbaTransitions'

/**
 * 
 * @param {Element} conatainerElement 
 */
function initAll(conatainerElement) {
  // initialize all js scripts inside conatainerElement
})


// Simple content replacement without animations.
// This is for safari swipe back gesture, because it has it's own animation.
export const HideShowTransition = Barba.BaseTransition.extend({
  start() {
    this.newContainerLoading.then(this.finish.bind(this))
  },

  finish() {
    // safari needs some time, because it freezes without timeout
    setTimeout(() => {
      window.scrollTo(0, 0)
      this.done()
    })
  }
})

// Page transitions with animation
export const FadeTransition = Barba.BaseTransition.extend({
  start() {
    Promise.all([this.newContainerLoading, this.pageOut()]).then(
      this.pageIn.bind(this)
    )
  },

  pageOut() {
    return new Promise(resolve => {
      this.oldContainer.classList.add('pageOut')
      setTimeout(resolve, 300)
    })
  },

  pageIn() {
    window.scrollTo(0, 0)
    this.newContainer.classList.add('pageIn')
    this.done()
    setTimeout(() => {
      this.newContainer.classList.remove('pageIn')
    }, 300)
  }
})

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => initAll(document))
  Barba.Pjax.start()

  // From: http://barbajs.org/prefetch.html
  // With barba.js we can start prefetching the new page on the user's mouseover/touchstart on the link.
  // Since there is a 100-300ms delay during the user hover and the click, 
  // we can use this time to start prefetching the page. 
  // Most of the time this dead time is enough to get the next page ready!
  // !!! Be wise with the prefetching. Do not use it if you have a long list of links.
  Barba.Prefetch.init()

  let linkClicked = true
  Barba.Dispatcher.on('linkClicked', el => {
    linkClicked = true
  })
  Barba.Dispatcher.on('transitionCompleted', () => {
    linkClicked = false
    // Remove all classes that were added to high level containers.
    // In my case I'm adding this class to prevent page scroll when site menu is opened.
    // So I need to remove it when page should be changed.
    document.body.classList.remove('no-scroll')
  })

  Barba.Dispatcher.on('newPageReady', (currentStatus, prevStatus, HTMLElementContainer, newPageRawHTML) => {
    // safari needs some time, because it freezes without timeout on back swipe
    setTimeout(() => initAll(HTMLElementContainer))
    
    // Barba change page title automaticly.
    // But maybe you need to do somethig more, so you can use newPageRawHTML for that 
  })

  const isSafari = /^((?!chrome|android).)*safari/i.test(
    window.navigator.userAgent
  )
  Barba.Pjax.getTransition = function() {
    if (!isSafari) return FadeTransition

    return linkClicked ? FadeTransition : HideShowTransition
  }
})