Skip to content

Commit 4ea510c

Browse files
diegoversianidiegoversiani
committed
Add autoload feature
1 parent d6586b4 commit 4ea510c

File tree

6 files changed

+163
-12
lines changed

6 files changed

+163
-12
lines changed

‎README.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
[![DragsterJS gzip size](http://img.badgesize.io/https://raw.githubusercontent.com/fluidweb-co/require-bundle-js/master/dist/require-bundle.min.js?compression=gzip
55
)](https://raw.githubusercontent.com/fluidweb-co/require-bundle-js/master/dist/require-bundle.min.js)
66

7-
Some features on a web page require more than just the script file to work and will need to load styles and other resources, this is where Require Bundle can come in handy by providing a way to detect when a bundle of resources is necessary and loading it automatically (soon). Require Bundle will load various resources (scripts, styles or images) related to a feature in your application only on the pages which it is present.
7+
Some features on a web page require more than just the script file to work and will need to load styles and other resources, this is where Require Bundle can come in handy by providing a way to detect when a bundle of resources is necessary and loading it automatically.
8+
9+
Require Bundle will load various resources related to a feature or elements in your application only on the pages which they are present present or required.
810

911
Use cases:
1012
- When the page has collapsible blocks, load collapsible.js and collapsible.css
@@ -74,11 +76,13 @@ window.addEventListener( 'load', function(){
7476
} );
7577
```
7678

77-
b. (soon) Register a bundle passing in the selector to detect the html elements that require it and optionally the callback function to execute:
79+
b. Register a bundle passing in the selector to detect the html elements that require it and optionally the callback function to execute:
7880
```js
7981
RequireBundle.register( 'fluid-slider', [ '//domain/js/fluid-slider.min.js', '//domain/css/fluid-slider.min.css' ], '.slider-wrapper', function(){ FluidSlider.init(); } ); // Auto-load when `.slider-wrapper` is present, then execute callback
8082
```
8183

84+
85+
8286
## Contributing to Development
8387

8488
This isn't a large project by any means, but you are definitely welcome to contribute.

‎dist/maps/require-bundle.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/require-bundle.js‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,26 @@ return loadjs;
328328

329329

330330

331+
/******************
332+
* PRIVATE METHODS
333+
*****************/
334+
335+
336+
337+
/**
338+
* Maybe autoload bundles
339+
*/
340+
var maybeAutoload = function() {
341+
_publicMethods.getIds().forEach( function( bundleId ) {
342+
var bundle = _bundles[ bundleId ];
343+
if ( typeof bundle.autoLoadSelector === 'string' && document.querySelector( bundle.autoLoadSelector ) ) {
344+
_publicMethods.require( bundleId, bundle.callbackFn );
345+
}
346+
} );
347+
}
348+
349+
350+
331351
/******************
332352
* PUBLIC METHODS
333353
*****************/
@@ -378,9 +398,21 @@ return loadjs;
378398
* @param {String} bundleId Bundle ID
379399
* @param {Array} deps Array of resource paths
380400
*/
381-
_publicMethods.register = function( bundleId, deps ) {
382-
if ( _publicMethods.hasBundle( bundleId ) ) return false;
383-
_bundles[ bundleId ] = deps;
401+
_publicMethods.register = function( bundleId, deps, autoLoadSelector, callbackFn ) {
402+
// Already registered
403+
if ( _publicMethods.hasBundle( bundleId ) ) {
404+
console.log( 'Bundle already registered: `' + bundleId + '`' );
405+
return false;
406+
};
407+
408+
// Register
409+
_bundles[ bundleId ] = {
410+
bundleId: bundleId,
411+
deps: deps,
412+
autoLoadSelector: autoLoadSelector,
413+
callbackFn: callbackFn,
414+
}
415+
384416
return true;
385417
};
386418

@@ -401,7 +433,10 @@ return loadjs;
401433

402434
// Load each bundle
403435
bundleIds.forEach( function( bundleId ) {
404-
if ( ! loadjs.isDefined( bundleId )) loadjs( _publicMethods.getBundle( bundleId ), bundleId );
436+
var bundle = _publicMethods.getBundle( bundleId );
437+
if ( bundle ) {
438+
if ( ! loadjs.isDefined( bundleId ) ) loadjs( bundle.deps, bundleId );
439+
}
405440
});
406441

407442
// Run callback when ready
@@ -410,6 +445,12 @@ return loadjs;
410445

411446

412447

448+
/**
449+
* Add load event listener to auto-load bundles
450+
*/
451+
window.addEventListener( 'load', maybeAutoload );
452+
453+
413454
//
414455
// Expose Public APIs
415456
//

‎dist/require-bundle.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js-src/require-bundle.js‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,26 @@
1919

2020

2121

22+
/******************
23+
* PRIVATE METHODS
24+
*****************/
25+
26+
27+
28+
/**
29+
* Maybe autoload bundles
30+
*/
31+
var maybeAutoload = function() {
32+
_publicMethods.getIds().forEach( function( bundleId ) {
33+
var bundle = _bundles[ bundleId ];
34+
if ( typeof bundle.autoLoadSelector === 'string' && document.querySelector( bundle.autoLoadSelector ) ) {
35+
_publicMethods.require( bundleId, bundle.callbackFn );
36+
}
37+
} );
38+
}
39+
40+
41+
2242
/******************
2343
* PUBLIC METHODS
2444
*****************/
@@ -69,9 +89,21 @@
6989
* @param {String} bundleId Bundle ID
7090
* @param {Array} deps Array of resource paths
7191
*/
72-
_publicMethods.register = function( bundleId, deps ) {
73-
if ( _publicMethods.hasBundle( bundleId ) ) return false;
74-
_bundles[ bundleId ] = deps;
92+
_publicMethods.register = function( bundleId, deps, autoLoadSelector, callbackFn ) {
93+
// Already registered
94+
if ( _publicMethods.hasBundle( bundleId ) ) {
95+
console.log( 'Bundle already registered: `' + bundleId + '`' );
96+
return false;
97+
};
98+
99+
// Register
100+
_bundles[ bundleId ] = {
101+
bundleId: bundleId,
102+
deps: deps,
103+
autoLoadSelector: autoLoadSelector,
104+
callbackFn: callbackFn,
105+
}
106+
75107
return true;
76108
};
77109

@@ -92,7 +124,10 @@
92124

93125
// Load each bundle
94126
bundleIds.forEach( function( bundleId ) {
95-
if ( ! loadjs.isDefined( bundleId )) loadjs( _publicMethods.getBundle( bundleId ), bundleId );
127+
var bundle = _publicMethods.getBundle( bundleId );
128+
if ( bundle ) {
129+
if ( ! loadjs.isDefined( bundleId ) ) loadjs( bundle.deps, bundleId );
130+
}
96131
});
97132

98133
// Run callback when ready
@@ -101,6 +136,12 @@
101136

102137

103138

139+
/**
140+
* Add load event listener to auto-load bundles
141+
*/
142+
window.addEventListener( 'load', maybeAutoload );
143+
144+
104145
//
105146
// Expose Public APIs
106147
//

‎test.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Require Bundle Test</title>
5+
<script type="text/javascript" src="dist/require-bundle.min.js"></script>
6+
<script type="text/javascript">
7+
var log = function( message ) {
8+
var debugContainer = document.querySelector( '.debug-container' );
9+
if ( debugContainer ) {
10+
var newMessage = document.createElement( 'p' );
11+
newMessage.innerText = message;
12+
debugContainer.appendChild( newMessage );
13+
}
14+
}
15+
16+
var registerBundle = function( bundleName, resources, autoLoadSelector, callbackFn ) {
17+
RequireBundle.register( bundleName, resources, autoLoadSelector, callbackFn );
18+
log( 'Registered bundle: `' + bundleName + '`' );
19+
}
20+
21+
var registerBundles = function() {
22+
// Register
23+
registerBundle( 'smooth-parallax', [ 'https://raw.githubusercontent.com/diegoversiani/smooth-parallax/master/dist/smooth-parallax.min.js' ] );
24+
registerBundle( 'hamburger-menu', [ 'https://raw.githubusercontent.com/center-key/hamburger-menu/master/dist/hamburger-menu.min.js', 'https://raw.githubusercontent.com/center-key/hamburger-menu/master/dist/hamburger-menu.min.css' ] );
25+
26+
// Register with auto-load
27+
registerBundle( 'slider', [ 'https://raw.githubusercontent.com/thomaslanciaux/Slider/master/slider.js' ], '.slider-wrapper', function(){ log( 'Auto-loaded bundle: `slider`' ); } );
28+
}
29+
30+
var requireBundlesViaScript = function() {
31+
RequireBundle.require( 'smooth-parallax', function() { log( 'Loaded bundle: `smooth-parallax`' ); } );
32+
RequireBundle.require( 'hamburger-menu', function() { log( 'Loaded bundle: `hamburger-menu`' ); } );
33+
}
34+
35+
window.addEventListener( "DOMContentLoaded", function () { log( 'DOM Content loaded' ); } );
36+
window.addEventListener( "DOMContentLoaded", function () { if ( window.RequireBundle ) { log( 'Require Bundle loaded' ); } } );
37+
window.addEventListener( "DOMContentLoaded", function () { if ( window.RequireBundle ) { registerBundles(); } } );
38+
window.addEventListener( "load", function () { log( 'Page loaded' ); } );
39+
window.addEventListener( "load", function () { if ( window.RequireBundle ) { requireBundlesViaScript(); } } );
40+
</script>
41+
</head>
42+
<body>
43+
44+
<div class="instructions">
45+
Notes:
46+
<ul>
47+
<li>All bundles are registered as early as possible (on page load in this test)</li>
48+
<li>Bundles <code>smooth-parallax</code> and <code>hamburger-menu</code> are loaded via a function executed on page load</li>
49+
<li>Bundle <code>slider</code> is auto-loaded when an element with class <code>.slider-wrapper</code> is present on the page (temporarily remove the element to test the auto-load feature)</li>
50+
</ul>
51+
</div>
52+
53+
<hr/>
54+
55+
<div class="slider-wrapper">
56+
slider-wrapper present
57+
</div>
58+
59+
<hr/>
60+
61+
<div class="debug-container">
62+
</div>
63+
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)