data-transition on link, and BaseTransition as interface

assets/scripts/transitions/BaseTransition.js

@@ -0,0 +1,52 @@
+import { APP_NAME, $document, $html, isDebug, $pjaxWrapper } from '../utils/environment';
+
+export default class {
+    constructor(options) {
+
+        this.options = options;
+        this.wrapper = options.wrapper;
+        this.overrideClass = options.overrideClass ? options.overrideClass : '';
+
+    }
+
+    launch() {
+        console.log("---- Launch transition 👊 -----");
+
+        $html
+            .removeClass('dom-is-loaded dom-is-animated')
+            .addClass(`dom-is-loading ${this.overrideClass}`);
+
+    }
+
+    hideView(view) {
+        console.log('----- ❌ [VIEW]:remove - ', view.getAttribute('data-template'));
+        view.remove();
+
+    }
+
+    displayView(view) {
+        setTimeout(() => {
+            
+            console.log('----- ✅ [VIEW]:display :', view.getAttribute('data-template'));
+            this.wrapper.innerHTML = view.outerHTML;
+
+            $html.attr('data-template', view.getAttribute('data-template'));
+
+            $html
+                .addClass('dom-is-loaded')
+                .removeClass('dom-is-loading');
+
+            setTimeout(() => {
+                $html
+                    .removeClass(this.overrideClass)
+                    .addClass('dom-is-animated');
+            }, 1000);
+
+        },1000);
+    }
+
+    
+    destroy() {
+        console.log("---- ❌ [transition]:destroy -----");
+    }
+}

assets/scripts/transitions/CustomTransition.js

@@ -0,0 +1,11 @@
+import { APP_NAME, $document, $html, isDebug, $pjaxWrapper } from '../utils/environment';
+import BaseTransition from './BaseTransition';
+
+export default class extends BaseTransition{
+    constructor(options) {
+        super(options);
+
+        this.overrideClass = '-custom-transition';
+    }
+
+}

assets/scripts/transitions/DefaultTransition.js

@@ -1,30 +0,0 @@
-import { APP_NAME, $document, $html, isDebug, $pjaxWrapper } from '../utils/environment';
-
-
-export default class {
-    constructor(wrapper) {
-        
-        this.wrapper = wrapper;
-    }
-
-    launch(e) {
-        console.log("---- Launch transition 👊 -----");
-
-    }
-
-    hideView(view) {
-        console.log('----- ❌ [VIEW]:remove - ', view.getAttribute('data-template'));
-        view.remove();
-
-    }
-
-    displayView(view) {
-        console.log('----- ✅ [VIEW]:display :', view.getAttribute('data-template'));
-        this.wrapper.innerHTML = view.outerHTML;
-    }
-
-    
-    destroy() {
-        console.log("---- destroy transition ❌ -----");
-    }
-}

assets/scripts/transitions/TransitionManager.js

@@ -3,12 +3,14 @@ import { APP_NAME, $document, $html, isDebug, $pjaxWrapper } from '../utils/envi
 import { EVENT as APP_EVENT } from '../App';
 
 //List here all of your transitions
-import DefaultTransition from './DefaultTransition';
-
+import * as transitions from './transitions';
 
 const MODULE_NAME = 'TransitionManager';
 const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
 
+const EVENT = {
+    CLICK: `click.${EVENT_NAMESPACE}`
+};
 
 /*
 
@@ -22,10 +24,6 @@ const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
 
 */
 
-const EVENT = {
-    GOTO: `goto.${EVENT_NAMESPACE}`
-};
-
 export default class {
     constructor() {
         
@@ -37,6 +35,9 @@ export default class {
 
         this.transition;
 
+        /*
+        ===== PJAX CONFIGURATION =====
+        */
 
         this.containerClass = '.js-pjax-container';
         this.wrapperId = 'js-pjax-wrapper';
@@ -49,20 +50,29 @@ export default class {
             selectors: ['title',`${this.containerClass}`],
             switches: {}
         };
-
         this.options.switches[this.containerClass] = (oldEl, newEl, options) => this.switch(oldEl, newEl, options)
-
         this.pjax = new Pjax(this.options);
 
-        document.addEventListener('pjax:send',(e) => this.send(e));
-        document.addEventListener('pjax:success',(e) => this.success(e));
+        // temporary solution to get currentTarget clicked (to get data-transition)
+        let a = document.querySelectorAll(`a:not(.${this.noPjaxRequestClass})`);
+        for (var i = a.length - 1; i >= 0; i--) {
+            a[i].addEventListener('click',(e) => this.click(e));
         }
 
-    send(e) {
+        document.addEventListener('pjax:success',(e) => this.success(e));
+
+    }
+
+    click(e) {
         console.log("---- Launch request 🙌 -----");
 
-        //by default, but need to be manage by data-transiton on currentTarget
-        this.transition = new DefaultTransition(this.wrapper);
+        let el = e.target;
+        let transition = el.getAttribute('data-transition') ? el.getAttribute('data-transition') : 'BaseTransition'
+
+        // options available : wrapper, overrideClass
+        this.transition = new transitions[transition]({
+            wrapper: this.wrapper
+        });
 
         this.transition.launch();
     }
@@ -88,6 +98,7 @@ export default class {
 
     success(e) {
         this.transition.destroy();
+        this.transition = null;
     }
 
     /**

assets/scripts/transitions/_DefaultTransition.js

@@ -1,57 +0,0 @@
-/* jshint esnext: true */
-import { APP_NAME, $document, $html, $pjaxWrapper } from '../utils/environment';
-import { EVENT as APP_EVENT } from '../App';
-
-function DefaultTransition(options) {
-    options = options || {};
-    const startCallback = (typeof options.startCallback === 'function') ? options.startCallback : function(){};
-    const overrideClass = (typeof options.overrideClass === 'string') ? options.overrideClass : '';
-
-    return Barba.BaseTransition.extend({
-        start: function() {
-            $html
-                .removeClass('dom-is-loaded dom-is-animated')
-                .addClass(`dom-is-loading ${overrideClass}`);
-
-            startCallback();
-
-            /* Close any overlays */
-
-            setTimeout(() => {
-                Promise
-                  .all([this.newContainerLoading])
-                  .then(this.finish.bind(this));
-            }, 1000);
-        },
-        finish: function() {
-            $document.triggerHandler({
-                type:   APP_EVENT.DELETE_SCOPED_MODULES,
-                $scope: $pjaxWrapper
-            });
-
-            this.done();
-
-            const $el = $(this.newContainer);
-
-            // Get the template name of the new container and set it to the DOM
-            $html.attr('data-template', $el.data('template'));
-
-            $document.triggerHandler({
-                type: APP_EVENT.INIT_SCOPED_MODULES,
-                isPjax: true
-            });
-
-            $html
-                .addClass('dom-is-loaded')
-                .removeClass('dom-is-loading');
-
-            setTimeout(() => {
-                $html
-                    .removeClass(overrideClass)
-                    .addClass('dom-is-animated');
-            }, 1000);
-        }
-    });
-}
-
-export default DefaultTransition;

assets/scripts/transitions/transitions.js

@@ -0,0 +1,2 @@
+export {default as BaseTransition} from './BaseTransition';
+export {default as CustomTransition} from './CustomTransition';

www/assets/scripts/vendors.js

@@ -1,4 +1,4 @@
-/*! Dependencies for Locomotive Boilerplate - 2018-01-31 */
+/*! Dependencies for Locomotive Boilerplate - 2018-02-01 */
 !function(e){if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.Pjax=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
 var clone = _dereq_('./lib/clone.js')
 var executeScripts = _dereq_('./lib/execute-scripts.js')

www/index.html

@@ -1,6 +1,6 @@
 <!doctype html>
 <!--[if lte IE 9]>     <html lang="fr" class="has-no-js ie9"> <![endif]-->
-<!--[if gt IE 9]><!--> <html lang="fr" class="has-no-js"> <!--<![endif]-->
+<!--[if gt IE 9]><!--> <html lang="fr" class="has-no-js" data-debug> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -22,7 +22,7 @@
                     <a href="/">Home</a>
                 </li>
                 <li>
-                    <a href="page.html">Page</a>
+                    <a href="page.html" data-transition="CustomTransition">Page</a>
                 </li>
                 <li>
                     <a href="page.html" class="no-transition">No transition link</a>

www/page.html

@@ -22,7 +22,7 @@
                     <a href="/">Home</a>
                 </li>
                 <li>
-                    <a href="/page.html">A page</a>
+                    <a href="page.html" data-transition="CustomTransition">Page</a>
                 </li>
                 <li>
                     <a href="page.html" class="no-transition">No transition link</a>