barba.js page transitions

barba js views.js

import Barba from 'barba.js';
import mud from '../loader/behaviour';
import events from '../helpers/events';
import { transitionEnd, css3 } from '../helpers/prefix';
import Tweezer from 'tweezer.js';

export const views = () => {

	const heroClassName = 'is-page-with-hero';
	const heroWithOutClassName = 'is-page-without-hero';
	const $body = $('body');
	
	Barba.Prefetch.init();
	Barba.Pjax.start();


	Barba.Dispatcher.on('linkClicked', (currentStatus, oldStatus, container) => events.trigger('page:changing'));
	
	Barba.Dispatcher.on('transitionCompleted', (currentStatus, oldStatus, container) => {
		events.trigger('page:changed');
		events.trigger('page:loaded');
		mud.loadBehaviour();
	});


	const HideShowTransition = Barba.BaseTransition.extend({
		start() {
			Promise
				.all([this.newContainerLoading, this.fadeOut()])
				.then(this.fadeIn.bind(this));
		},

		fadeOut() {
			return $(this.oldContainer).animate({ opacity: 0 }).promise();
		},

		fadeIn() {
			const location = window.location.pathname;
			const segment1 = location.split('/')[1];
			const $menuItem = $('.menu a');
			const $el = $(this.newContainer);

			// don't do shit on the home page
			if(location.length > 1) {
				$menuItem.each(function() {
					const href = $(this).attr('href');
					const $parent = $(this).parent('li');
					if(href.indexOf(location) > -1) {
						$parent.addClass('is-current');
					} else {
						$parent.removeClass('is-current');
					}
					if(href.indexOf(segment1) > -1 && $parent.hasClass('menu__item--parent')) {
						$parent.addClass('is-current');
					}
				});
			}

	  	$el.find('.js-hero').length > 0 ? $body.addClass(heroClassName).removeClass(heroWithOutClassName) : $body.addClass(heroWithOutClassName).removeClass(heroClassName);
	  
	  	$(this.oldContainer).hide();

	  	$el.css({visibility : 'visible', opacity : 0});

	  	new Tweezer({
		    start: window.scrollY,
		    end: 0
		  })
		  .on('tick', v =>  window.scrollTo(0, v))
		  .begin();

	  	$el.animate({ opacity: 1 }, 400, () => this.done());
	  }
	});


	Barba.Pjax.getTransition = () => HideShowTransition;
}