Add loco scroll v2, update load module and app, update html, add nomodule polyfills script tags

assets/scripts/app.js

@@ -1,6 +1,7 @@
 import modular from 'modujs';
 import * as modules from './modules';
 import globals from './globals';
+import { html } from './utils/environment';
 
 const app = new modular({
     modules: modules
@@ -8,3 +9,7 @@ const app = new modular({
 
 app.init(app);
 globals();
+
+html.classList.add('is-loaded is-ready');
+html.classList.remove('is-loading');
+

assets/scripts/modules.js

@@ -1,2 +1,2 @@
-export {default as load} from './modules/load';
+export {default as Load} from './modules/Load';
-export {default as scroll} from './modules/scroll';
+export {default as Scroll} from './modules/Scroll';

assets/scripts/modules/Scroll.js

@@ -8,18 +8,14 @@ export default class extends module {
     }
 
     init() {
-        this.scrollManager = new ScrollManager({
+        this.scroll = new ScrollManager({
-            container: this.$el,
+            container: $(this.el),
-            selector: '.js-animate',
+            smooth: true,
-            smooth: false,
+            inertia: 1
-            smoothMobile: false,
-            mobileContainer: $document,
-            getWay: false,
-            getSpeed: false
         });
     }
 
     destroy() {
-        this.scrollManager.destroy();
+        this.scroll.destroy();
     }
 }

assets/scripts/modules/load.js

@@ -8,15 +8,15 @@ export default class extends module {
 
     init() {
         const load = new modularLoad({
-            enterDelay: 0
+            enterDelay: 0,
+            transitions: {
+                customTransition: {}
+            }
         });
 
         load.on('loaded', (transition, oldContainer, newContainer) => {
             this.call('destroy', oldContainer, 'app');
-        })
-
-        load.on('ready', (transition, newContainer) => {
             this.call('update', newContainer, 'app');
-        })
+        });
     }
 }

assets/scripts/transitions/BaseTransition.js

@@ -1,75 +0,0 @@
-import { APP_NAME, $document, $html, $body,  isDebug, $pjaxWrapper } from '../utils/environment';
-
-import { EVENT as TransitionEvent } from './TransitionManager'
-
-export default class {
-    constructor(options) {
-
-        this.options = options;
-        this.wrapper = options.wrapper;
-        this.overrideClass = options.overrideClass ? options.overrideClass : '';
-        this.clickedLink = options.clickedLink;
-
-    }
-
-    launch() {
-        if(isDebug) {
-            console.log("---- Launch transition 👊 -----");
-        }
-
-        $html
-            .removeClass('has-dom-loaded has-dom-animated ')
-            .addClass(`has-dom-loading ${this.overrideClass}`);
-
-    }
-
-    hideView(oldView, newView) {
-        if(isDebug) {
-            console.log('----- ❌ [VIEW]:hide - ', oldView.getAttribute('data-template'));
-        }
-        
-        // launch it at the end (animations...)
-        $document.triggerHandler({
-            type:TransitionEvent.READYTOAPPEND,
-            oldView: oldView,
-            newView: newView
-        });
-
-    }
-
-
-    displayView(view) {
-
-        if(isDebug) {
-            console.log('----- ✅ [VIEW]:display :', view.getAttribute('data-template'));
-        }
-
-        $html.attr('data-template', view.getAttribute('data-template'));
-
-        setTimeout(() => {
-
-            $html
-                .addClass('has-dom-loaded')
-                .removeClass('has-dom-loading');
-
-            setTimeout(() => {
-                $html
-                    .removeClass(this.overrideClass)
-                    .addClass('has-dom-animated');
-            }, 1000);
-
-            // launch it at the end (animations...)
-            $document.triggerHandler({
-                type:TransitionEvent.READYTODESTROY
-            });
-
-        },1000);
-    }
-
-
-    destroy() {
-        if(isDebug) {
-            console.log("---- ❌ [transition]:destroy -----");
-        }
-    }
-}

assets/scripts/transitions/CustomTransition.js

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

assets/scripts/transitions/TransitionManager.js

@@ -1,256 +0,0 @@
-import Pjax from 'pjax';
-import { APP_NAME, $document, $html, isDebug, $pjaxWrapper, $window } from '../utils/environment';
-import { EVENT as APP_EVENT } from '../app';
-
-//List here all of your transitions
-import * as transitions from './transitions';
-
-const MODULE_NAME = 'Transition';
-const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
-
-export const EVENT = {
-    CLICK: `click.${EVENT_NAMESPACE}`,
-    READYTOAPPEND: `readyToAppend.${EVENT_NAMESPACE}`,
-    READYTODESTROY: `readyToDestroy.${EVENT_NAMESPACE}`,
-    GOTO: `goto.${EVENT_NAMESPACE}`
-};
-
-/*
-
-@todo :
-
-- ✅ get data-transition on clicked link -> launch() and add switch(){}
-- ✅ add goto listener
-- ✅ add overrideClass system for all transitions
-- ✅ add base class manager like old DefaultTransition (has-dom-loaded, has-dom-loading etc..)
-
-
-======= SCHEMA =======
-
-[] : listener
-* : trigger event
-
-[pjax:send] -> (transition) launch()
-
-[pjax:switch] (= new view is loaded) -> (transition) hideView()-> hide animations & *readyToAppend
-
-[readyToAppend] -> append() -> delete modules
-                            -> remove oldView from the DOM, and innerHTMl newView
-                            -> change()
-
-display() -> (transition) displayView() -> display animations & *readyToDestroy
-          -> init new modules
-
-[readyToAppend] -> reinit()
-
-*/
-
-export default class {
-    constructor() {
-
-
-        // jQuery ondomready
-        $window.on('load',() => {
-            this.load();
-        });
-
-        this.transition = new transitions['BaseTransition']({
-            wrapper: this.wrapper
-        });
-
-        /*
-        ===== PJAX CONFIGURATION =====
-        */
-
-        this.containerClass = '.js-pjax-container';
-        this.wrapperId = 'js-pjax-wrapper';
-        this.noPjaxRequestClass = 'no-transition';
-        this.wrapper = document.getElementById(this.wrapperId);
-
-        this.options = {
-            debug: false,
-            cacheBust: false,
-            elements: [`a:not(.${this.noPjaxRequestClass})`,'form[action]'],
-            selectors: ['title',`${this.containerClass}`],
-            switches: {},
-            requestOptions: {
-                timeout: 2000
-            }
-        };
-        this.options.switches[this.containerClass] = (oldEl, newEl, options) => this.switch(oldEl, newEl, options)
-        this.pjax = new Pjax(this.options);
-
-        /*
-        ===== LISTENERS =====
-        */
-
-        document.addEventListener('pjax:send',(e) => this.send(e));
-
-
-        $document.on(EVENT.READYTOAPPEND,(event) => {
-            this.append(event.oldView, event.newView);
-        });
-        $document.on(EVENT.READYTODESTROY,(event) => {
-            this.reinit();
-        });
-
-
-        /** goto exampe
-        $document.triggerHandler({
-            type: 'goto.Transition',
-            options : {
-                el: {{element clicked?}},
-                link: {{url}}
-            }
-        });
-        */
-        $document.on(EVENT.GOTO, (e) => {
-            if(e.options.el != undefined) {
-                this.autoEl = e.options.el.get(0);
-            }
-            this.pjax.loadUrl(e.options.link, $.extend({}, this.pjax.options));
-        });
-    }
-
-
-    /**
-     * (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,transition;
-
-        if(e.triggerElement != undefined) {
-
-            el = e.triggerElement;
-
-            transition = el.getAttribute('data-transition') ? el.getAttribute('data-transition') : 'BaseTransition';
-            $html.attr('data-transition',transition);
-
-        } else {
-            
-            if (this.autoEl != undefined) {
-                el = this.autoEl;
-            } else {
-                el = document;
-            }
-
-            transition = 'BaseTransition';
-        }
-
-        // options available : wrapper, overrideClass
-        this.transition = new transitions[transition]({
-            wrapper: this.wrapper,
-            clickedLink: el
-        });
-
-        this.transition.launch();
-
-    }
-
-    /**
-     * (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);
-    }
-
-    /**
-     * Launch when you trigger EVENT.READYTOAPPEND in your transition
-     * after newView append, launch this.change()
-     * @param  {js dom element},
-     * @param  {js dom element}
-     * @return void
-     */
-    append(oldView, newView) {
-        
-        newView.style.opacity = 0;
-        this.wrapper.appendChild(newView);
-
-        // Add these 2 rAF if you want to have the containers overlapped
-        // Useful with a image transition, to prevent flickering
-        // requestAnimationFrame(() => {
-            // requestAnimationFrame(() => {
-                newView.style.opacity = 1;
-                this.change(oldView, newView);
-            // });
-        // });
-        
-    }
-
-    /**
-     * launch after this.append(), remove modules, remove oldView and set the newView
-     * @param  {js dom element},
-     * @return void
-     */
-    change(oldView, newView) {
-
-        $document.triggerHandler({
-            type: APP_EVENT.DELETE_SCOPED_MODULES,
-            $scope: $pjaxWrapper
-        });
-
-        this.wrapper.innerHTML = newView.outerHTML;
-
-        oldView.remove();
-
-        // Fetch any inline script elements.
-        const scripts = newView.querySelectorAll('script.js-inline');
-
-        if (scripts instanceof window.NodeList) {
-            let i = 0;
-            let len = scripts.length;
-            for (; i < len; i++) {
-                eval(scripts[i].innerHTML);
-            }
-        }
-
-        $document.triggerHandler({
-            type: APP_EVENT.INIT_SCOPED_MODULES,
-            isPjax: true
-        });
-
-        this.pjax.onSwitch();
-
-        this.transition.displayView(newView);
-
-    }
-
-    /**
-     * Launch when you trigger EVENT.READYTODESTROY in your transition -> displayView(), at the end
-     * @return void
-     */
-    reinit() {
-        this.transition.destroy();
-        $html.attr('data-transition','');
-        this.transition = new transitions['BaseTransition']({
-            wrapper: this.wrapper
-        });
-    }
-
-    /**
-     * DOM is loaded
-     *
-     * @return {void}
-     */
-    load() {
-        $html.addClass('has-dom-loaded');
-        $html.removeClass('has-dom-loading');
-        setTimeout(() => {
-            $html.addClass('has-dom-animated');
-        }, 1000)
-    }
-}

assets/scripts/transitions/transitions.js

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

assets/scripts/utils/environment.js

@@ -3,10 +3,11 @@ const DATA_API_KEY = '.data-api';
 
 const $document    = $(document);
 const $window      = $(window);
+const html         = document.documentElement;
 const $html        = $(document.documentElement).removeClass('has-no-js').addClass('has-js');
 const $body        = $(document.body);
 const $pjaxWrapper = $('#js-pjax-wrapper');
 
 const isDebug      = !!$html.data('debug');
 
-export { APP_NAME, DATA_API_KEY, $document, $window, $html, $body, isDebug, $pjaxWrapper };
+export { APP_NAME, DATA_API_KEY, $document, $window, html, $html, $body, isDebug, $pjaxWrapper };

assets/styles/utilities/_ratio.scss

@@ -20,7 +20,7 @@ $aspect-ratios: (
 // Generate a series of ratio classes to be used like so:
 //
 // @example
-//   <div class="o-ratio -16:9">
+//   <div class="o-ratio u-16:9">
 //
 //
 @each $ratio in $aspect-ratios {

package.json

@@ -5,15 +5,14 @@
     "version": "1.0.0",
     "author": "Locomotive <info@locomotive.ca>",
     "dependencies": {
-        "locomotive-scroll": "git+https://git@github.com/locomotivemtl/locomotive-scroll.git",
+        "locomotive-scroll": "github:locomotivemtl/locomotive-scroll#v2",
         "modujs": "*",
         "modularload": "*",
         "normalize.css": "*",
-        "smooth-scrollbar": "git+https://git@github.com/locomotivemtl/smooth-scrollbar.git#develop",
+        "svg4everybody": "*",
-        "svg4everybody": "*"
+        "virtual-scroll": "*"
     },
     "devDependencies": {
-        "@babel/polyfill": "*",
         "gulp-concat": "*"
     }
 }

www/assets/scripts/abortcontroller-polyfill-only.js

@@ -0,0 +1 @@
+!function(t){"function"==typeof define&&define.amd?define(t):t()}(function(){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function e(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t}function i(t){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function l(t,e){return(l=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function u(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function c(t,e,n){return(c="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var r=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=i(t)););return t}(t,e);if(r){var o=Object.getOwnPropertyDescriptor(r,e);return o.get?o.get.call(n):o.value}})(t,e,n||t)}var t,n,a=function(){function t(){r(this,t),Object.defineProperty(this,"listeners",{value:{},writable:!0,configurable:!0})}return e(t,[{key:"addEventListener",value:function(t,e){t in this.listeners||(this.listeners[t]=[]),this.listeners[t].push(e)}},{key:"removeEventListener",value:function(t,e){if(t in this.listeners)for(var n=this.listeners[t],r=0,o=n.length;r<o;r++)if(n[r]===e)return void n.splice(r,1)}},{key:"dispatchEvent",value:function(e){var n=this;if(e.type in this.listeners){for(var t=function(t){setTimeout(function(){return t.call(n,e)})},r=this.listeners[e.type],o=0,i=r.length;o<i;o++)t(r[o]);return!e.defaultPrevented}}}]),t}(),f=function(t){function n(){var t,e;return r(this,n),(t=!(e=i(n).call(this))||"object"!=typeof e&&"function"!=typeof e?u(this):e).listeners||a.call(u(t)),Object.defineProperty(u(t),"aborted",{value:!1,writable:!0,configurable:!0}),Object.defineProperty(u(t),"onabort",{value:null,writable:!0,configurable:!0}),t}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&l(t,e)}(n,a),e(n,[{key:"toString",value:function(){return"[object AbortSignal]"}},{key:"dispatchEvent",value:function(t){"abort"===t.type&&(this.aborted=!0,"function"==typeof this.onabort&&this.onabort.call(this,t)),c(i(n.prototype),"dispatchEvent",this).call(this,t)}}]),n}(),s=function(){function t(){r(this,t),Object.defineProperty(this,"signal",{value:new f,writable:!0,configurable:!0})}return e(t,[{key:"abort",value:function(){var e;try{e=new Event("abort")}catch(t){"undefined"!=typeof document?document.createEvent?(e=document.createEvent("Event")).initEvent("abort",!1,!1):(e=document.createEventObject()).type="abort":e={type:"abort",bubbles:!1,cancelable:!1}}this.signal.dispatchEvent(e)}},{key:"toString",value:function(){return"[object AbortController]"}}]),t}();"undefined"!=typeof Symbol&&Symbol.toStringTag&&(s.prototype[Symbol.toStringTag]="AbortController",f.prototype[Symbol.toStringTag]="AbortSignal"),((n=t="undefined"!=typeof self?self:global).__FORCE_INSTALL_ABORTCONTROLLER_POLYFILL?(console.log("__FORCE_INSTALL_ABORTCONTROLLER_POLYFILL=true is set, will force install polyfill"),1):"function"==typeof n.Request&&!n.Request.prototype.hasOwnProperty("signal")||!n.AbortController)&&(t.AbortController=s,t.AbortSignal=f)});

www/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="has-no-js" lang="en" data-page="home">
+<html class="is-loading" lang="en" data-page="home">
     <head>
         <meta charset="utf-8">
         <title>Boilerplate</title>
@@ -19,7 +19,7 @@
     <body data-module-load>
 
         <header>
-            <h1>Boilerplate</h1>
+            <a href="/"><h1>Boilerplate</h1></a>
             <nav>
                 <ul>
                     <li><a href="page.html">Page</a></li>
@@ -42,8 +42,12 @@
             <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank">🚂</a></p>
         </footer>
 
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js" crossorigin="anonymous"></script>
-        <script>window.jQuery || document.write('<script src="assets/scripts/jquery-3.3.1.min.js"><\/script>')</script>
+        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CCustomEvent%2CElement.prototype.matches" crossorigin="anonymous"></script>
+        <script nomodule src="assets/scripts/abortcontroller-polyfill-only.js"></script>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+        <script>window.jQuery || document.write('<script src="assets/scripts/jquery-3.4.1.min.js"><\/script>')</script>
         <script src="assets/scripts/vendors.js"></script>
         <script src="assets/scripts/app.js"></script>
     </body>

www/page.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="has-no-js" lang="en" data-page="page">
+<html class="is-loading" lang="en" data-page="page">
     <head>
         <meta charset="utf-8">
         <title>Page | Boilerplate</title>
@@ -19,7 +19,7 @@
     <body data-module-load>
 
         <header>
-            <h1>Boilerplate</h1>
+            <a href="/"><h1>Boilerplate</h1></a>
             <nav>
                 <ul>
                     <li><a href="page.html">Page</a></li>
@@ -42,8 +42,12 @@
             <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank">🚂</a></p>
         </footer>
 
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js" crossorigin="anonymous"></script>
-        <script>window.jQuery || document.write('<script src="assets/scripts/jquery-3.3.1.min.js"><\/script>')</script>
+        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CCustomEvent%2CElement.prototype.matches" crossorigin="anonymous"></script>
+        <script nomodule src="assets/scripts/abortcontroller-polyfill-only.js"></script>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+        <script>window.jQuery || document.write('<script src="assets/scripts/jquery-3.4.1.min.js"><\/script>')</script>
         <script src="assets/scripts/vendors.js"></script>
         <script src="assets/scripts/app.js"></script>
     </body>