barba: Barba.HistoryManager.currentStatus is undefined

Hi @destefanis ! Are you sure that Barba.HistoryManager.currentStatus() returns undefined, or it’s just the .namespace value?

In the second case, it’s normal.

When .getTransition is called, the next page is not loaded yet, that means that we don’t know the data-namespace yet on the next container.

Usually I use different solutions:

1. by URL

---

You can make a check on Barba.HistoryManager.currentStatus().url to choose what Transition to use.

cons: could be tricky to keep track of the URL for a multilanguage / CMS driven site

2. by namespace

---

You can make a generic Transition, that waits newContainerLoading to be resolved, at that point .namespace will be populated and you can continue the transition accordingly.

cons: You need to wait the loading of the next page before starting the transition

3. by latest clicked element

---

You may want to save the latest clicked element

let lastClickEl;
Barba.Dispatcher.on('linkClicked', (el) => {
  lastClickEl = el;
});

then, in .getTransition, decide the transition based on this.

How I structure my transitions:

---

I use commonJS modules for all my project, and I have all my transition in separate files.

To each transition I implement a valid() method, that could return true or false, based if that transition has the right or not to be executed.

A typical valid function may look like this:

valid() {
    const prev = Barba.HistoryManager.prevStatus();

    return prev.namespace === 'page-blabla' && (window.innerWidth > 800);
}

and in my .getTransition I do something like:

getTransition() {
  if (FromHomeSlider.valid()) {
    return FromHomeSlider;
  }

  if (PortfolioToCaseStudy.valid()) {
    return PortfolioToCaseStudy;
  }

  if (CaseStudyReadMore.valid()) {
    return CaseStudyReadMore;
  }

  if (CaseStudySibling.valid()) {
    return CaseStudySibling;
  }

  return FadeTransition;
}

This structure helps me to be very flexible, and to use that three different technique to choose if that particular transition needs to run or not.

Hope this reply fits your needs. Cheers!

Really enjoying Barba!

I’ve come up with a technique for managing transitions that I wanted to share. Curious if anyone else has used this technique. Would really appreciate any feedback!

// All transitions are managed by a single reducer transition
Barba.Pjax.getTransition = transitionReducer

const map = {
  default: fade,
  home: {
    single: fade,
  },
  single: {
    home: slideUp,
  },
}

// once the newContainerLoading promise resolves, we can check if a custom transition 
// is defined in the map. If it's not, use the default transition defined in the map.
const transitionReducer = () => Barba.BaseTransition.extend({
  start() {
    // maybe show a spinner or some loading indicator here
    this.newContainerLoading.then(() => {
      const from = Barba.Pjax.History.prevStatus().namespace
      const to = Barba.Pjax.History.currentStatus().namespace
      return ((map[from] && map[from][to]) || map.default)(
        this.oldContainer,
        this.newContainer,
        this.done.bind(this)
      )
    })
  }
})

// then define transitions like so
function fade(oldContainer, newContainer, done) {
  // call done when transition is complete
}

function slideUp(oldContainer, newContainer, done) {
  // call done when transition is complete
}

Informative and thorough response! I might suggest adding something like this to the documentation. However, this is perfect, I appreciate the help.