diff --git a/resources/assets/scripts/main.js b/resources/assets/scripts/main.js index 2df5c3c..07afbd8 100644 --- a/resources/assets/scripts/main.js +++ b/resources/assets/scripts/main.js @@ -1,8 +1,8 @@ -/** import external dependencies */ +// import external dependencies import 'jquery'; import 'bootstrap'; -/** import local dependencies */ +// import local dependencies import Router from './util/Router'; import common from './routes/common'; import home from './routes/home'; @@ -10,16 +10,15 @@ import aboutUs from './routes/about'; /** * Populate Router instance with DOM routes - * @type {Router} routes - An instance of our router */ const routes = new Router({ - /** All pages */ + // All pages common, - /** Home page */ + // Home page home, - /** About Us page, note the change from about-us to aboutUs. */ + // About Us page, note the change from about-us to aboutUs. aboutUs, }); -/** Load Events */ +// Load Events jQuery(document).ready(() => routes.loadEvents()); diff --git a/resources/assets/scripts/util/Router.js b/resources/assets/scripts/util/Router.js index 82798fb..372594e 100644 --- a/resources/assets/scripts/util/Router.js +++ b/resources/assets/scripts/util/Router.js @@ -1,27 +1,45 @@ -/* ======================================================================== - * DOM-based Routing - * Based on http://goo.gl/EUTi53 by Paul Irish - * - * Only fires on body classes that match. If a body class contains a dash, - * replace the dash with an underscore when adding it to the object below. - * ======================================================================== */ - import camelCase from './camelCase'; -// The routing fires all common scripts, followed by the page specific scripts. -// Add additional events for more control over timing e.g. a finalize event -export default class Router { +/** + * DOM-based Routing + * + * Based on {@link http://goo.gl/EUTi53|Markup-based Unobtrusive Comprehensive DOM-ready Execution} by Paul Irish + * + * The routing fires all common scripts, followed by the page specific scripts. + * Add additional events for more control over timing e.g. a finalize event + */ +class Router { + + /** + * Create a new Router + * @param {Object} routes + */ constructor(routes) { this.routes = routes; } - fire(route, fn = 'init', args) { - const fire = route !== '' && this.routes[route] && typeof this.routes[route][fn] === 'function'; + /** + * Fire Router events + * @param {string} route DOM-based route derived from body classes (``) + * @param {string} [event] Events on the route. By default, `init` and `finalize` events are called. + * @param {string} [arg] Any custom argument to be passed to the event. + */ + fire(route, event = 'init', arg) { + const fire = route !== '' && this.routes[route] && typeof this.routes[route][event] === 'function'; if (fire) { - this.routes[route][fn](args); + this.routes[route][event](arg); } } + /** + * Automatically load and fire Router events + * + * Events are fired in the following order: + * * common init + * * page-specific init + * * page-specific finalize + * * common finalize + */ loadEvents() { // Fire common init JS this.fire('common'); @@ -41,3 +59,5 @@ export default class Router { this.fire('common', 'finalize'); } } + +export default Router diff --git a/resources/assets/scripts/util/camelCase.js b/resources/assets/scripts/util/camelCase.js index 3e5cdde..17ea591 100644 --- a/resources/assets/scripts/util/camelCase.js +++ b/resources/assets/scripts/util/camelCase.js @@ -1,4 +1,8 @@ -// the most terrible camelizer on the internet, guaranteed! +/** + * the most terrible camelizer on the internet, guaranteed! + * @param {string} str String that isn't camel-case, e.g., CAMeL_CaSEiS-harD + * @return {string} String converted to camel-case, e.g., camelCaseIsHard + */ export default str => `${str.charAt(0).toLowerCase()}${str.replace(/[\W_]/g, '|').split('|') .map(part => `${part.charAt(0).toUpperCase()}${part.slice(1)}`) .join('')