framework/bedrock
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use jsDoc comments in front-end scripts

Browse Source
This commit is contained in:
2017-07-01 01:08:54 -07:00
parent b8a502def6
commit 0a99ad1db5
3 changed files with 45 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
resources/assets/scripts/main.js
View File

@@ -1,8 +1,8 @@
/** import external dependencies */ // import external dependencies
import 'jquery'; import 'jquery';
import 'bootstrap'; import 'bootstrap';
/** import local dependencies */ // import local dependencies
import Router from './util/Router'; import Router from './util/Router';
import common from './routes/common'; import common from './routes/common';
import home from './routes/home'; import home from './routes/home';
@@ -10,16 +10,15 @@ import aboutUs from './routes/about';
/** /**
* Populate Router instance with DOM routes * Populate Router instance with DOM routes
* @type {Router} routes - An instance of our router
*/ */
const routes = new Router({ const routes = new Router({
/** All pages */ // All pages
common, common,
/** Home page */ // Home page
home, home,
/** About Us page, note the change from about-us to aboutUs. */ // About Us page, note the change from about-us to aboutUs.
aboutUs, aboutUs,
}); });
/** Load Events */ // Load Events
jQuery(document).ready(() => routes.loadEvents()); jQuery(document).ready(() => routes.loadEvents());

48
resources/assets/scripts/util/Router.js
View File

@@ -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'; 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 * DOM-based Routing
export default class Router { *
* 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) { constructor(routes) {
this.routes = 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 (`<body class="...">`)
* @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) { 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() { loadEvents() {
// Fire common init JS // Fire common init JS
this.fire('common'); this.fire('common');
@@ -41,3 +59,5 @@ export default class Router {
this.fire('common', 'finalize'); this.fire('common', 'finalize');
} }
} }
export default Router

6
resources/assets/scripts/util/camelCase.js
View File

@@ -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('|') export default str => `${str.charAt(0).toLowerCase()}${str.replace(/[\W_]/g, '|').split('|')
.map(part => `${part.charAt(0).toUpperCase()}${part.slice(1)}`) .map(part => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
.join('') .join('')