novoland-developer-networks/OfficialSite
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Antoine Boulanger
2019-05-23 10:06:45 -04:00
parent 52db1cc63e
commit d166261d0a
16 changed files with 42 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/scripts/app.js
View File

@@ -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');

4
assets/scripts/modules.js
View File

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

14
assets/scripts/modules/Scroll.js
View File

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

10
assets/scripts/modules/load.js
View File

@@ -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');
})
});
}
}

75
assets/scripts/transitions/BaseTransition.js
View File

@@ -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 -----");
}
}
}

13
assets/scripts/transitions/CustomTransition.js
View File

@@ -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';
}
}

256
assets/scripts/transitions/TransitionManager.js
View File

@@ -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)
}
}

2
assets/scripts/transitions/transitions.js
View File

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

3
assets/scripts/utils/environment.js
View File

@@ -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 };

2
assets/styles/utilities/_ratio.scss
View File

@@ -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 {