Update : manage clickedLink via pjax:send, logs if isDebug, manage events, add schema to explain the order of executions, refactoring after tests in a real project

assets/scripts/transitions/BaseTransition.js

@@ -1,4 +1,13 @@
-import { APP_NAME, $document, $html, isDebug, $pjaxWrapper } from '../utils/environment';
+import { APP_NAME, $document, $html, $body,  isDebug, $pjaxWrapper } from '../utils/environment';
+
+const MODULE_NAME = 'Transition';
+const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
+
+const EVENT = {
+    CLICK: `click.${EVENT_NAMESPACE}`,
+    READYTOREMOVE: `readyToRemove.${EVENT_NAMESPACE}`,
+    READYTODESTROY: `readyToDestroy.${EVENT_NAMESPACE}`
+};
 
 export default class {
     constructor(options) {
@@ -6,34 +15,49 @@ export default class {
         this.options = options;
         this.wrapper = options.wrapper;
         this.overrideClass = options.overrideClass ? options.overrideClass : '';
+        this.clickedLink = options.clickedLink;
 
     }
 
     launch() {
-        console.log("---- Launch transition 👊 -----");
+        if(isDebug) {
+            console.log("---- Launch transition 👊 -----");
+        }
+
+        $body.removeClass('has-logo-big');
 
         $html
-            .removeClass('dom-is-loaded dom-is-animated')
+            .removeClass('dom-is-loaded dom-is-animated has-nav-open')
             .addClass(`dom-is-loading ${this.overrideClass}`);
 
     }
 
-    hideView(view) {
-        console.log('----- ❌ [VIEW]:remove - ', view.getAttribute('data-template'));
-        view.remove();
+    hideView(oldView, newView) {
+        if(isDebug) {
+            console.log('----- ❌ [VIEW]:hide - ', oldView.getAttribute('data-template'));
+        }
+
+        // launch it at the end (animations...)
+        $document.triggerHandler({
+            type:EVENT.READYTOREMOVE,
+            oldView: oldView,
+            newView: newView
+        });
 
     }
 
+
     displayView(view) {
 
-        console.log('----- ✅ [VIEW]:display :', view.getAttribute('data-template'));
-        this.wrapper.innerHTML = view.outerHTML;
+        if(isDebug) {
+            console.log('----- ✅ [VIEW]:display :', view.getAttribute('data-template'));
+        }
 
         $html.attr('data-template', view.getAttribute('data-template'));
+        $html.attr('data-theme', view.getAttribute('data-theme'));
 
-        // if you want a delay
         setTimeout(() => {
-
+                
             $html
                 .addClass('dom-is-loaded')
                 .removeClass('dom-is-loading');
@@ -44,11 +68,18 @@ export default class {
                     .addClass('dom-is-animated');
             }, 1000);
 
+            // launch it at the end (animations...)
+            $document.triggerHandler({
+                type:EVENT.READYTODESTROY
+            });
+
         },1000);
     }
 
     
     destroy() {
-        console.log("---- ❌ [transition]:destroy -----");
+        if(isDebug) {
+            console.log("---- ❌ [transition]:destroy -----");
+        }
     }
 }

assets/scripts/transitions/CustomTransition.js

@@ -1,6 +1,17 @@
 import { APP_NAME, $document, $html, isDebug, $pjaxWrapper } from '../utils/environment';
 import BaseTransition from './BaseTransition';
 
+const MODULE_NAME = 'Transition';
+const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
+
+const EVENT = {
+    CLICK: `click.${EVENT_NAMESPACE}`,
+    READYTOREMOVE: `readyToRemove.${EVENT_NAMESPACE}`,
+    READYTODISPLAY: `readyToDisplay.${EVENT_NAMESPACE}`,
+    READYTODESTROY: `readyToDestroy.${EVENT_NAMESPACE}`
+};
+
+
 export default class extends BaseTransition{
     constructor(options) {
         super(options);

assets/scripts/transitions/TransitionManager.js

@@ -9,7 +9,9 @@ const MODULE_NAME = 'Transition';
 const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
 
 const EVENT = {
-    CLICK: `click.${EVENT_NAMESPACE}`
+    CLICK: `click.${EVENT_NAMESPACE}`,
+    READYTOREMOVE: `readyToRemove.${EVENT_NAMESPACE}`,
+    READYTODESTROY: `readyToDestroy.${EVENT_NAMESPACE}`
 };
 
 /*
@@ -22,6 +24,26 @@ const EVENT = {
 - ✅ add overrideClass system for all transitions
 - ✅ add base class manager like old DefaultTransition (dom-is-loaded, dom-is-loading etc..)
 
+
+
+======= SCHEMA =======
+
+[] : listener
+* : trigger event
+
+[pjax:send] -> (transition) launch()
+
+[pjax:switch] (= new view is loaded) -> (transition) hideView()-> hide animations & *readyToRemove
+
+[readyToRemove] -> remove() -> delete modules
+                            -> remove oldView from the DOM, and innerHTMl newView
+                            -> display()
+
+display() -> (transition) displayView() -> display animations & *readyToRemove
+          -> init new modules
+
+[readyToRemove] -> reinit()
+
 */
 
 export default class {
@@ -33,7 +55,9 @@ export default class {
             this.load();
         });
 
-        this.transition;
+        this.transition = new transitions['BaseTransition']({
+            wrapper: this.wrapper
+        });
 
         /*
         ===== PJAX CONFIGURATION =====
@@ -46,6 +70,7 @@ export default class {
 
         this.options = {
             debug: false,
+            cacheBust: false,
             elements: [`a:not(.${this.noPjaxRequestClass})`,'form[action]'],
             selectors: ['title',`${this.containerClass}`],
             switches: {}
@@ -53,41 +78,94 @@ export default class {
         this.options.switches[this.containerClass] = (oldEl, newEl, options) => this.switch(oldEl, newEl, options)
         this.pjax = new Pjax(this.options);
 
-        // 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));
-        }
+        /*
+        ===== LISTENERS =====
+        */
 
-        document.addEventListener('pjax:success',(e) => this.success(e));
+        document.addEventListener('pjax:send',(e) => this.send(e));
 
+
+        $document.on(EVENT.READYTOREMOVE,(event) => {
+            this.remove(event.oldView, event.newView);
+        });
+        $document.on(EVENT.READYTODESTROY,(event) => {
+            this.reinit();
+        });
     }
 
-    click(e) {
-        console.log("---- Launch request 🙌 -----");
 
-        let el = e.target;
-        let transition = el.getAttribute('data-transition') ? el.getAttribute('data-transition') : 'BaseTransition'
+    /**
+     * (PJAX) Launch when pjax receive a request
+     * get & manage data-transition,init and launch it
+     * @param  {event}
+     * @return void
+     */
+    send(e) {
+        if(isDebug) {
+            console.log("---- Launch request 🙌 -----");
+        }
+
+        let el = e.triggerElement;
+        
+        let transition = el.getAttribute('data-transition') ? el.getAttribute('data-transition') : 'BaseTransition';
+        $html.attr('data-transition',transition);
 
         // options available : wrapper, overrideClass
         this.transition = new transitions[transition]({
-            wrapper: this.wrapper
+            wrapper: this.wrapper,
+            clickedLink: el
         });
 
         this.transition.launch();
+
     }
 
-    switch(oldEl, newEl, options) {
+    /**
+     * (PJAX) Launch when new page is loaded
+     * @param  {js dom element}, 
+     * @param  {js dom element}
+     * @param  {options : pjax options}
+     * @return void
+     */
+    switch(oldView, newView, options) {
+        if(isDebug) {
+            console.log('---- Next view loaded 👌 -----');
+        }
+        this.transition.hideView(oldView, newView);
 
-        console.log('---- Next view loaded 👌 -----');
+        this.pjax.onSwitch();
+        
+    }
+
+    /**
+     * Launch when you trigger EVENT.READYTOREMOVE in your transition -> hideView(), at the end
+     * after oldView hidden, delete modules and launch this.display()
+     * @param  {js dom element}, 
+     * @param  {js dom element}
+     * @return void
+     */
+    remove(oldView, newView) {
 
         $document.triggerHandler({
             type: APP_EVENT.DELETE_SCOPED_MODULES,
             $scope: $pjaxWrapper
         });
 
-        this.transition.hideView(oldEl);
-        this.transition.displayView(newEl);
+        oldView.remove();
+
+        this.wrapper.innerHTML = view.outerHTML;
+
+        this.display(newView);
+    }
+
+    /**
+     * launch after this.remove()
+     * @param  {js dom element}, 
+     * @return void
+     */
+    display(view) {
+
+        this.transition.displayView(view);
 
         $document.triggerHandler({
             type: APP_EVENT.INIT_SCOPED_MODULES,
@@ -96,9 +174,16 @@ export default class {
 
     }
 
-    success(e) {
+    /**
+     * Launch when you trigger EVENT.READYTODESTROY in your transition -> displayView(), at the end
+     * @return void
+     */
+    reinit() {
         this.transition.destroy();
-        this.transition = null;
+        $html.attr('data-transition','');
+        this.transition = new transitions['BaseTransition']({
+            wrapper: this.wrapper
+        });
     }
 
     /**