## Installation
```sh
-# install mbp and gulp
-npm install mbp gulp@next -g
+npm install mbp gulp -g
```
## Usage
@@ -19,140 +21,177 @@ gulp
```
## Configuration
-Change the mentions of `boilerplate` for your project's name in
-- `mconfig.json`
-- `assets/scripts/utils/environment.js`
+Change the mentions of `boilerplate` for your project's name in `mconfig.json`. It is based on [modularBP](https://github.com/modularorg/modularbp).
-## CSS
+[Learn more](https://github.com/modularorg/modularbp)
-- We use [Sass](http://sass-lang.com) for our CSS Preprocessor
-- [itcss](http://itcss.io) CSS architecture
-- More Minimal BEM like CSS Syntax: `.block_element -modifier`
-- [More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces)
+## Build
+[gulp](https://github.com/gulpjs/gulp) is our build system. It compiles our styles and scripts, generate svg sprites, live reload the browser and minify everything.
-### Sass import order
+#### Tasks
+```sh
+# watch
+gulp
-* **Settings:** Global variables, site-wide settings, config switches, etc.
-* **Tools:** Site-wide mixins and functions.
-* **Generic:** Low-specificity, far-reaching rulesets (e.g. resets).
-* **Base:** Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).
-* **Objects:** Objects, abstractions, and design patterns (e.g. `.o-media {}`).
-* **Components:** Discrete, complete chunks of UI (e.g. `.c-carousel {}`).
-* **Utilities:** High-specificity, very explicit selectors. Overrides and helper
- classes (e.g. `.u-hidden {}`).
+# compile
+gulp compile
-### Grid
-We use [inuitcss](https://github.com/inuitcss/inuitcss/tree/6eb574fa604481ffa36272e6034e77467334ec50) layout and width system. We are using a inline-block grid system.
-
-Insert a `.o-layout` block and add `.o-layout_item` elements inside it. By default `o-layout_item` made 100%.
-You can define different fractions in `/tools/_widths.scss` (`$widths-fractions`)
-
-If you want a 2 columns grid, just add `.u-1/2` on your 2 `.o-layout_item`
-
-If you want to adapt columns by media queries, by example a 2 columns grid for 1000px + resolutions, and one columns in block under 1000px :
-
-**HTML**
+# minify
+gulp build
```
-
-
- first colum
-
-
- second colum
-
+
+[Learn more](https://github.com/modularorg/modularbp-gulp)
+
+## Styles
+[Sass](https://github.com/sass/node-sass) is our CSS preprocessor. [Autoprefixer](https://github.com/postcss/autoprefixer) is also included.
+
+#### Architecture
+[ITCSS](https://github.com/itcss) is our CSS architecture.
+
+* `settings`: Global variables, site-wide settings, config switches, etc.
+* `tools`: Site-wide mixins and functions.
+* `generic`: Low-specificity, far-reaching rulesets (e.g. resets).
+* `elements`: Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).
+* `objects`: Objects, abstractions, and design patterns (e.g. `.o-layout {}`).
+* `components`: Discrete, complete chunks of UI (e.g. `.c-carousel {}`).
+* `utilities`: High-specificity, very explicit selectors. Overrides and helper
+ classes (e.g. `.u-hidden {}`)
+
+[_source_](https://github.com/inuitcss/inuitcss#css-directory-structure)
+
+#### Naming
+We use a simplified [BEM](https://github.com/bem) syntax.
+
+ `.block .block_element -modifier`
+
+#### Namespaces
+We namespace our classes for more [transparency](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/).
+
+* `o-`: Object that it may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places.
+* `c-`: Component is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.
+* `u-`: Utility has a very specific role (often providing only one declaration) and should not be bound onto or changed. It can be reused and is not tied to any specific piece of UI.
+* `s-`: Scope creates a new styling context. Similar to a Theme, but not necessarily cosmetic, these should be used sparingly—they can be open to abuse and lead to poor CSS if not used wisely.
+* `is-`, `has-`: Is currently styled a certain way because of a state or condition. It tells us that the DOM currently has a temporary, optional, or short-lived style applied to it due to a certain state being invoked.
+
+[_source_](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#the-namespaces)
+
+#### Example
+```html
+
```
+```scss
+.c-block {
+ &.-large {
+ padding: rem(60px);
+ }
+}
-**CSS** (`/tools/_widths.scss`)
-```
-.u-1\/2\@from-medium {
- @media (min-width: $from-medium) {
- width: span(1/2);
+.c-block_heading {
+ @media (max-width: $to-medium) {
+ .c-block.-large & {
+ margin-bottom: rem(40px);
+ }
}
}
```
+## Scripts
+[modularJS](https://github.com/modularorg/modularjs) is a small framework we use on top of ES modules. It compiles with [Rollup](https://github.com/rollup/rollup) and [Babel](https://github.com/babel/babel).
-### Form
+#### Why
+- Automatically init visible modules.
+- Easily call other modules methods.
+- Quickly set scoped events with delegation.
+- Simply select DOM elements scoped in their module.
-We included some basic CSS styles and resets to the form elements so we can easily have custom style form elements that work on every browsers.
+[_source_](https://github.com/modularorg/modularjs#why)
-*[Demo][demo-form]*
+#### Example
+```html
+
+
+
Example
+
+
+
+```
+```js
+import { module } from 'modujs';
-## JavaScript
+export default class extends module {
+ constructor(m) {
+ super(m);
-- We use HTML data attributes to init our JavaScript modules: `data-module`
-- All DOM related JavaScript is hooked to `js-` prefixed HTML classes
-- [jQuery](https://jquery.com) is globally included
+ this.events = {
+ click: {
+ load: 'loadMore'
+ }
+ }
+ }
-[locomtl]: https://locomotive.ca
-[demo-grid]: https://codepen.io/AntoineBoulanger/pen/EaLNxe
-[demo-form]: https://codepen.io/AntoineBoulanger/pen/uBJmi
+ loadMore() {
+ this.$('main').classList.add('is-loading');
+ }
+}
+```
+
+[Learn more](https://github.com/modularorg/modularjs)
## Page transitions
-We use [Pjax](https://github.com/MoOx/pjax) by MoOx.
+[modularLoad](https://github.com/modularorg/modularload) is used for page transitions and lazy loading.
-### Setup
-1. Create a wrapper : `.js-pjax-wrapper` and a container `.js-pjax-container` inside. When a transition is launched, the new container is put inside the wrapper, and the old one is remove.
+#### Example
+```html
+
+
+
+
+```
+```js
+import modularLoad from 'modularload';
-2. Main settings are set inside `assets/scripts/transitions/TransitionManager.js`
+this.load = new modularLoad({
+ enterDelay: 300,
+ transitions: {
+ transitionName: {
+ enterDelay: 450
+ }
+ }
+});
+```
-3. `BaseTransition` is launched by default, to set a new transition (like `CustomTransition`) :
- - create a new class `TestTransition.js` witch extends `BaseTransition` in `assets/scripts/transitions/`
- - add a line in `assets/scripts/transitions/transitions.js` to add your transition
- - use it like : `My page`
- - Enjoy and made everything you want in your transition, check `BaseTransition.js` or `CustomTransition.js` like example
+[Learn more](https://github.com/modularorg/modularload)
-### Schema
+## Scroll detection
+ [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) is used for elements in viewport detection and smooth scrolling with parallax.
-Legend
-- `[ ]` : listener
-- `*` : trigger event
+#### Example
+```html
+
+
Trigger
+
Parallax
+
+```
+```js
+import ScrollManager from '../scroll/vendors/ScrollManager';
-`[pjax:send]` -> (transition) launch()
-
-`[pjax:switch]` (= new view is loaded) -> (BaseTransition) `hideView()` -> hide animations & `*readyToRemove`
-
-`[readyToRemove]` -> `remove()` -> delete modules, remove oldView from the DOM, innerHTML newView, init modules, `display()`
-
-`display()` -> (BaseTransition) `displayView()` -> display animations & `*readyToDestroy`
- -> init new modules
-
-`[readyToRemove]` -> reinit()
-
-## Locomotive Scroll
-
-
- - [locomotive-scroll](https://github.com/locomotivemtl/locomotive-scroll)
-
-### Configuration
- - Create a `.o-scroll` container with `data-module="Scroll"`
- - in the module `Scroll.js` you have a basic initialisation
-
-### Options
-
-Options | Type | Description
---- | --- | ---
-container | $element | Scroll container (with the smooth scroll, this container will be transform)
-selector | String | Every elements will be check by the scroll, can be affect by a followed data attributes
-smooth | Boolean | If you want a smooth scroll
-smoothMobile | Boolean | If you want a smooth scroll on mobile
-mobileContainer | $element | Scroll container on mobile, document by default
-getWay | Boolean | if true, the animate will determine if you scroll down or scroll up
-getSpeed | Boolean | if true, the animate will calcul the velocity of your scroll. Access with `this.scroll.y`
-
-### Data attributes
-
-Data | Value | Description
---- | --- | ---
-data-speed | number | Speed of transform for parallax elements
-data-repeat | false | Determine if the "In View" class is added one or each times
-data-inview-class | is-show | CSS Class when the element is in view.
-data-position | top/bottom | Trigger from top/bottom of the window instead of the default from bottom to top
-data-target | #id, .class | Trigger from another element
-data-horizontal | false | Use transformX instead of transformY
-data-sticky | false | Set $element sticky when it's in viewport
-data-sticky-target | #id | Stop the element stick when the target is in viewport
-data-callback | `test.Scroll(test:0)` | trigger event, with options way wich return "leave" or "enter" when $element is in viewport
-data-viewport-offset | i,j | value between 0 to 1 (0.3 to start at 30% of the bottom of the viewport), useful to trigger a sequence of callbacks. (i : value wich start at the bottom, j : start at the top, j is optional)
+this.scrollManager = new ScrollManager({
+ container: $(this.el),
+ selector: '.js-animate',
+ smooth: true
+ });
+````
+[Learn more](https://github.com/locomotivemtl/locomotive-scroll)
diff --git a/assets/scripts/app.js b/assets/scripts/app.js
index c4732fc..2961ffc 100644
--- a/assets/scripts/app.js
+++ b/assets/scripts/app.js
@@ -1,161 +1,15 @@
-import { APP_NAME, $document, $pjaxWrapper } from './utils/environment';
-
-import globals from './globals';
-
-import { arrayContains, removeFromArray } from './utils/array';
-import { getNodeData } from './utils/html';
-import { isFunction } from './utils/is';
-
-// Basic modules
+import modular from 'modujs';
import * as modules from './modules';
+import globals from './globals';
+import { html } from './utils/environment';
-const MODULE_NAME = 'App';
-const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
+const app = new modular({
+ modules: modules
+});
-export const EVENT = {
- INIT_MODULES: `initModules.${EVENT_NAMESPACE}`,
- INIT_SCOPED_MODULES: `initScopedModules.${EVENT_NAMESPACE}`,
- DELETE_SCOPED_MODULES: `deleteScopedModules.${EVENT_NAMESPACE}`
-};
+app.init(app);
+globals();
-class App {
- constructor() {
- this.modules = modules;
- this.currentModules = [];
+html.classList.add('is-loaded is-ready');
+html.classList.remove('is-loading');
- $document.on(EVENT.INIT_MODULES, (event) => {
- this.initGlobals(event.firstBlood)
- .deleteModules(event)
- .initModules(event);
- });
-
- $document.on(EVENT.INIT_SCOPED_MODULES, (event) => {
- this.initModules(event);
- });
-
- $document.on(EVENT.DELETE_SCOPED_MODULES, (event) => {
- this.deleteModules(event);
- });
- }
-
- /**
- * Destroy all existing modules or a specific scope of modules
- * @param {Object} event The event being triggered.
- * @return {Object} Self (allows chaining)
- */
- deleteModules(event) {
- let destroyAll = true;
- let moduleIds = [];
-
- // Check for scope first
- if (event.$scope instanceof jQuery && event.$scope.length > 0) {
- // Modules within scope
- const $modules = event.$scope.find('[data-module]');
-
- // Determine their uids
- moduleIds = $.makeArray($modules.map(function(index) {
- return $modules.eq(index).data('uid');
- }));
-
- if (moduleIds.length > 0) {
- destroyAll = false;
- } else {
- return this;
- }
- }
-
- // Loop modules and destroying all of them, or specific ones
- let i = this.currentModules.length;
-
- while (i--) {
- if (destroyAll || arrayContains(moduleIds, this.currentModules[i].uid)) {
- removeFromArray(moduleIds, this.currentModules[i].uid);
- this.currentModules[i].destroy();
- this.currentModules.splice(i, 1);
- }
- }
-
- return this;
- }
-
- /**
- * Execute global functions and settings
- * Allows you to initialize global modules only once if you need
- * (ex.: when using Barba.js or SmoothState.js)
- * @return {Object} Self (allows chaining)
- */
- initGlobals(firstBlood) {
- globals(firstBlood);
- return this;
- }
-
- /**
- * Find modules and initialize them
- * @param {Object} event The event being triggered.
- * @return {Object} Self (allows chaining)
- */
- initModules(event) {
- // Elements with module
- let $moduleEls = [];
-
- // If first blood, load all modules in the DOM
- // If scoped, render elements with modules
- // If Barba, load modules contained in Barba container
- if (event.firstBlood) {
- $moduleEls = $document.find('[data-module]');
- } else if (event.$scope instanceof jQuery && event.$scope.length > 0) {
- $moduleEls = event.$scope.find('[data-module]');
- } else if (event.isPjax) {
- $moduleEls = $pjaxWrapper.find('[data-module]');
- }
-
- // Loop through elements
- let i = 0;
- const elsLen = $moduleEls.length;
-
- for (; i < elsLen; i++) {
-
- // Current element
- let el = $moduleEls[i];
-
- // All data- attributes considered as options
- let options = getNodeData(el);
-
- // Add current DOM element and jQuery element
- options.el = el;
- options.$el = $moduleEls.eq(i);
-
- // Module does exist at this point
- let attr = options.module;
-
- // Splitting modules found in the data-attribute
- let moduleIdents = attr.split(/[,\s]+/g);
-
- // Loop modules
- let j = 0;
- let modulesLen = moduleIdents.length;
-
- for (; j < modulesLen; j++) {
- let moduleAttr = moduleIdents[j];
-
- if (typeof this.modules[moduleAttr] === 'function') {
- let module = new this.modules[moduleAttr](options);
- this.currentModules.push(module);
- module.init();
- }
- }
- }
-
- return this;
- }
-}
-
-// IIFE for loading the application
-// ==========================================================================
-(function() {
- new App();
- $document.triggerHandler({
- type: EVENT.INIT_MODULES,
- firstBlood: true
- });
-})();
diff --git a/assets/scripts/globals.js b/assets/scripts/globals.js
index 2be37e8..73cc387 100644
--- a/assets/scripts/globals.js
+++ b/assets/scripts/globals.js
@@ -1,10 +1,5 @@
-import TransitionManager from './transitions/TransitionManager';
import svg4everybody from 'svg4everybody';
-export default function(firstBlood) {
+export default function() {
svg4everybody();
-
- if (firstBlood) {
- const transitionManager = new TransitionManager();
- }
}
diff --git a/assets/scripts/modules.js b/assets/scripts/modules.js
index 911f288..e542fac 100644
--- a/assets/scripts/modules.js
+++ b/assets/scripts/modules.js
@@ -1,2 +1,2 @@
-export {default as Example} from './modules/Example';
+export {default as Load} from './modules/Load';
export {default as Scroll} from './modules/Scroll';
diff --git a/assets/scripts/modules/AbstractModule.js b/assets/scripts/modules/AbstractModule.js
deleted file mode 100644
index 55fee26..0000000
--- a/assets/scripts/modules/AbstractModule.js
+++ /dev/null
@@ -1,24 +0,0 @@
-let uid = 0;
-
-/**
- * Abstract Module
- */
-export default class {
- constructor(options) {
- this.$el = options.$el || null;
- this.el = options.el || null;
-
- // Generate a unique module identifier
- this.uid = 'm-' + uid++;
- // Use jQuery's data API to "store it in the DOM"
- this.$el.data('uid', this.uid);
- }
-
- init() {}
-
- destroy() {
- if (this.$el) {
- this.$el.removeData('uid')
- }
- }
-}
diff --git a/assets/scripts/modules/Example.js b/assets/scripts/modules/Example.js
index 15829a8..b24436c 100644
--- a/assets/scripts/modules/Example.js
+++ b/assets/scripts/modules/Example.js
@@ -1,30 +1,11 @@
-import { APP_NAME } from '../utils/environment';
-import AbstractModule from './AbstractModule';
-
-const MODULE_NAME = 'Example';
-const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
-
-const EVENT = {
- CLICK: `click.${EVENT_NAMESPACE}`
-};
-
-export default class extends AbstractModule {
- constructor(options) {
- super(options);
-
- // Declaration of properties
- console.log('🔨 [module]:constructor - Example');
+import { module } from 'modujs';
+export default class extends module {
+ constructor(m) {
+ super(m);
}
init() {
- // Set events and such
}
-
- destroy() {
- console.log('❌ [module]:destroy - Example');
- super.destroy();
- this.$el.off(`.${EVENT_NAMESPACE}`);
- }
}
diff --git a/assets/scripts/modules/Scroll.js b/assets/scripts/modules/Scroll.js
index c17a9b9..d93c555 100644
--- a/assets/scripts/modules/Scroll.js
+++ b/assets/scripts/modules/Scroll.js
@@ -1,31 +1,21 @@
-import { APP_NAME, $document } from '../utils/environment';
-import AbstractModule from './AbstractModule';
+import { module } from 'modujs';
+import { $document } from '../utils/environment'
import ScrollManager from '../scroll/vendors/ScrollManager';
-const MODULE_NAME = 'Scroll';
-const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
-
-export default class extends AbstractModule {
- constructor(options) {
- super(options);
+export default class extends module {
+ constructor(m) {
+ super(m);
}
init() {
- setTimeout(() => {
- this.scrollManager = new ScrollManager({
- container: this.$el,
- selector: '.js-animate',
- smooth: false,
- smoothMobile: false,
- mobileContainer: $document,
- getWay: false,
- getSpeed: false
- });
- }, 500);
+ this.scroll = new ScrollManager({
+ container: $(this.el),
+ smooth: true,
+ inertia: 1
+ });
}
destroy() {
- super.destroy();
- this.scrollManager.destroy();
+ this.scroll.destroy();
}
}
diff --git a/assets/scripts/modules/load.js b/assets/scripts/modules/load.js
new file mode 100644
index 0000000..903f471
--- /dev/null
+++ b/assets/scripts/modules/load.js
@@ -0,0 +1,22 @@
+import { module } from 'modujs';
+import modularLoad from 'modularload';
+
+export default class extends module {
+ constructor(m) {
+ super(m);
+ }
+
+ init() {
+ const load = new modularLoad({
+ enterDelay: 0,
+ transitions: {
+ customTransition: {}
+ }
+ });
+
+ load.on('loaded', (transition, oldContainer, newContainer) => {
+ this.call('destroy', oldContainer, 'app');
+ this.call('update', newContainer, 'app');
+ });
+ }
+}
diff --git a/assets/scripts/transitions/BaseTransition.js b/assets/scripts/transitions/BaseTransition.js
deleted file mode 100644
index 31635f8..0000000
--- a/assets/scripts/transitions/BaseTransition.js
+++ /dev/null
@@ -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 -----");
- }
- }
-}
diff --git a/assets/scripts/transitions/CustomTransition.js b/assets/scripts/transitions/CustomTransition.js
deleted file mode 100644
index f101b9f..0000000
--- a/assets/scripts/transitions/CustomTransition.js
+++ /dev/null
@@ -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';
- }
-
-}
diff --git a/assets/scripts/transitions/TransitionManager.js b/assets/scripts/transitions/TransitionManager.js
deleted file mode 100644
index 408afdf..0000000
--- a/assets/scripts/transitions/TransitionManager.js
+++ /dev/null
@@ -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)
- }
-}
diff --git a/assets/scripts/transitions/transitions.js b/assets/scripts/transitions/transitions.js
deleted file mode 100644
index fd440be..0000000
--- a/assets/scripts/transitions/transitions.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export {default as BaseTransition} from './BaseTransition';
-export {default as CustomTransition} from './CustomTransition';
diff --git a/assets/scripts/utils/environment.js b/assets/scripts/utils/environment.js
index b809e10..eb7590e 100644
--- a/assets/scripts/utils/environment.js
+++ b/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 };
diff --git a/assets/styles/base/_fonts.scss b/assets/styles/elements/_fonts.scss
similarity index 100%
rename from assets/styles/base/_fonts.scss
rename to assets/styles/elements/_fonts.scss
diff --git a/assets/styles/base/_headings.scss b/assets/styles/elements/_headings.scss
similarity index 100%
rename from assets/styles/base/_headings.scss
rename to assets/styles/elements/_headings.scss
diff --git a/assets/styles/base/_page.scss b/assets/styles/elements/_page.scss
similarity index 100%
rename from assets/styles/base/_page.scss
rename to assets/styles/elements/_page.scss
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 394bdd8..b040487 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -14,8 +14,7 @@
@import "tools/mixins";
@import "tools/fonts";
@import "tools/layout";
-// @import "tools/ratio";
-// @import "tools/widths";
+@import "tools/widths";
// @import "tools/family";
// Generic
@@ -26,23 +25,23 @@
@import "generic/form";
@import "generic/button";
-// Base
+// Elements
// ==========================================================================
-@import "base/fonts";
-@import "base/page";
-@import "base/headings";
+@import "elements/fonts";
+@import "elements/page";
+@import "elements/headings";
// Objects
// ==========================================================================
@import "objects/container";
-// @import "objects/crop";
-// @import "objects/ratio";
-// @import "objects/table";
+@import "objects/ratio";
@import "objects/layout";
@import "objects/form";
@import "objects/button";
@import "objects/pjax";
@import "objects/scroll";
+// @import "objects/crop";
+// @import "objects/table";
// Vendors
// ==========================================================================
@@ -58,10 +57,11 @@
// Utilities
// ==========================================================================
+@import "utilities/ratio";
+@import "utilities/widths";
// @import "utilities/align";
// @import "utilities/helpers";
// @import "utilities/states";
// @import "utilities/headings";
// @import "utilities/spacing";
-// @import "utilities/widths";
// @import "utilities/print";
diff --git a/assets/styles/objects/_ratio.scss b/assets/styles/objects/_ratio.scss
index 4cf9008..579b927 100644
--- a/assets/styles/objects/_ratio.scss
+++ b/assets/styles/objects/_ratio.scss
@@ -2,20 +2,6 @@
// Objects / Ratio
// ==========================================================================
-//
-// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss
-//
-
-// A list of aspect ratios that get generated as modifier classes.
-
-$aspect-ratios: (
- (2:1),
- (4:3),
- (16:9),
-) !default;
-
-
-
/**
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
* their correct aspect ratios.
@@ -38,6 +24,7 @@ $aspect-ratios: (
}
.o-ratio_content,
+ .o-ratio > img,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
@@ -46,34 +33,5 @@ $aspect-ratios: (
bottom: 0;
left: 0;
width: 100%;
- height: 100%;
+ // height: 100%;
}
-
-/* stylelint-disable */
-
-//
-// Generate a series of ratio classes to be used like so:
-//
-// @example
-//
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus tempore officia temporibus error rem id, vel perspiciatis eveniet placeat, ducimus fugit vitae sequi, quas deserunt ab eius expedita quia nulla.
+
+
+
+
+