diff --git a/.babelrc b/.babelrc index e40a6e4..1320b9a 100644 --- a/.babelrc +++ b/.babelrc @@ -1,13 +1,3 @@ { - "presets": [ - [ - "@babel/preset-env", - { - "targets": { - "ie": "11" - }, - "useBuiltIns": "usage" - } - ] - ] + "presets": ["@babel/preset-env"] } diff --git a/README.md b/README.md index 4b3fa8a..9658856 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,14 @@ -Locomotive's Front-end Boilerplate -================================== - -Front-end boilerplate for projects by [Locomotive][locomtl]. +
+
+
+
+
Front-end boilerplate for projects by Locomotive.
## Installation ```sh -# install mbp and gulp -npm install mbp gulp@next -g +npm install mbp gulp -g ``` ## Usage @@ -19,9 +21,7 @@ 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`. ## CSS diff --git a/assets/scripts/app.js b/assets/scripts/app.js index c4732fc..afa6a36 100644 --- a/assets/scripts/app.js +++ b/assets/scripts/app.js @@ -1,161 +1,10 @@ -import { APP_NAME, $document, $pjaxWrapper } from './utils/environment'; - +import modular from 'modujs'; +import * as modules from './modules'; import globals from './globals'; -import { arrayContains, removeFromArray } from './utils/array'; -import { getNodeData } from './utils/html'; -import { isFunction } from './utils/is'; +const app = new modular({ + modules: modules +}); -// Basic modules -import * as modules from './modules'; - -const MODULE_NAME = 'App'; -const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`; - -export const EVENT = { - INIT_MODULES: `initModules.${EVENT_NAMESPACE}`, - INIT_SCOPED_MODULES: `initScopedModules.${EVENT_NAMESPACE}`, - DELETE_SCOPED_MODULES: `deleteScopedModules.${EVENT_NAMESPACE}` -}; - -class App { - constructor() { - this.modules = modules; - this.currentModules = []; - - $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 - }); -})(); +app.init(app); +globals(); 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..a16ec92 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 Scroll} from './modules/Scroll'; +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..760ca8d 100644 --- a/assets/scripts/modules/Scroll.js +++ b/assets/scripts/modules/Scroll.js @@ -1,31 +1,25 @@ -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.scrollManager = new ScrollManager({ + container: this.$el, + selector: '.js-animate', + smooth: false, + smoothMobile: false, + mobileContainer: $document, + getWay: false, + getSpeed: false + }); } destroy() { - super.destroy(); this.scrollManager.destroy(); } } diff --git a/assets/scripts/modules/load.js b/assets/scripts/modules/load.js new file mode 100644 index 0000000..cf9b1b6 --- /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 + }); + + load.on('loaded', (transition, oldContainer, newContainer) => { + this.call('destroy', oldContainer, 'app'); + }) + + load.on('ready', (transition, newContainer) => { + this.call('update', newContainer, 'app'); + }) + } +} diff --git a/package.json b/package.json index c977c24..6c1fbdf 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,9 @@ "author": "Locomotive