[Sage 10] Replace jQuery’s .ready() (#2182)

* Use DOMContentLoaded listener for document ready
* Account for DOMContentLoaded not firing
* Extract ready() to utils.js

Also uses `window.setTimeout(fn, 0)` to cover async.

In a commit/PR in the near future, the `util` directory will be going
away since the DOM router has been extracted to its own package
(https://github.com/roots/js-dom-router). `utils.js` will function as a
place for custom utilities, similar to what `app/helpers.php` is on the
PHP side of things.

Author: knowler

resources/assets/scripts/app.js

@@ -10,6 +10,7 @@ import 'bootstrap';
 import Router from './util/Router';
 import common from './routes/common';
 import aboutUs from './routes/about';
+import { ready } from './utils';
 
 /**
  * Populate the Router instance with DOM routes.
@@ -25,4 +26,4 @@ const routes = new Router({
 /**
  * Load Events
  */
-jQuery(document).ready(() => routes.loadEvents());
+ready(() => routes.loadEvents());

resources/assets/scripts/utils.js

@@ -0,0 +1,8 @@
+/**
+ * Execute a function when the DOM is fully loaded.
+ *
+ * @param {function} fn
+ */
+export const ready = fn => document.readyState !== 'loading'
+  ? window.setTimeout(fn, 0)
+  : document.addEventListener('DOMContentLoaded', fn);