remove head.min.js in favor of simple built-in script loader

This commit is contained in:
Hakim El Hattab 2018-10-04 14:48:01 +02:00
parent d5cf3fa13c
commit 29b0e86089
22 changed files with 200 additions and 42 deletions

View File

@ -384,7 +384,6 @@ Reveal.addEventListener( 'customevent', function() {
</div> </div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script> <script src="js/reveal.js"></script>
<script> <script>

View File

@ -29,7 +29,6 @@
</div> </div>
</div> </div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script> <script src="js/reveal.js"></script>
<script> <script>

View File

@ -436,41 +436,28 @@
scriptsToPreload = 0; scriptsToPreload = 0;
// Called once synchronous scripts finish loading // Called once synchronous scripts finish loading
function proceed() { function afterSynchronousScriptsLoaded() {
if( scriptsAsync.length ) {
// Load asynchronous scripts // Load asynchronous scripts
head.js.apply( null, scriptsAsync ); if( scriptsAsync.length ) {
scriptsAsync.forEach( function( s ) {
loadScript( s.src, s.callback );
} );
} }
start(); start();
} }
function loadScript( s ) {
head.ready( s.src.match( /([\w\d_\-]*)\.?js(\?[\w\d.=&]*)?$|[^\\\/]*$/i )[0], function() {
// Extension may contain callback functions
if( typeof s.callback === 'function' ) {
s.callback.apply( this );
}
if( --scriptsToPreload === 0 ) {
proceed();
}
});
}
for( var i = 0, len = config.dependencies.length; i < len; i++ ) { for( var i = 0, len = config.dependencies.length; i < len; i++ ) {
var s = config.dependencies[i]; var s = config.dependencies[i];
// Load if there's no condition or the condition is truthy // Load if there's no condition or the condition is truthy
if( !s.condition || s.condition() ) { if( !s.condition || s.condition() ) {
if( s.async ) { if( s.async ) {
scriptsAsync.push( s.src ); scriptsAsync.push( s );
} }
else { else {
scripts.push( s.src ); scripts.push( s );
} }
loadScript( s );
} }
} }
@ -478,14 +465,73 @@
scriptsToPreload = scripts.length; scriptsToPreload = scripts.length;
// Load synchronous scripts // Load synchronous scripts
head.js.apply( null, scripts ); scripts.forEach( function( s ) {
loadScript( s.src, function() {
if( typeof s.callback === 'function' ) s.callback();
if( --scriptsToPreload === 0 ) {
afterSynchronousScriptsLoaded();
}
} );
} );
} }
else { else {
proceed(); afterSynchronousScriptsLoaded();
} }
} }
/**
* Loads a JavaScript file from the given URL and executes it.
*
* @param {string} url Address of the .js file to load
* @param {function} callback Method to invoke when the script
* has loaded and executed
*/
function loadScript( url, callback ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.async = false;
script.defer = false;
script.src = url;
if( callback ) {
// Success callback
script.onload = script.onreadystatechange = function( event ) {
if( event.type === "load" || (/loaded|complete/.test( script.readyState ) ) ) {
// Kill event listeners
script.onload = script.onreadystatechange = script.onerror = null;
callback();
}
};
// Error callback
script.onerror = function( err ) {
// Kill event listeners
script.onload = script.onreadystatechange = script.onerror = null;
callback( new Error( 'Failed loading script: ' + script.src + '\n' + err) );
};
}
// Append the script at the end of <head>
var head = document.querySelector( 'head' );
head.insertBefore( script, head.lastChild );
}
/** /**
* Starts up reveal.js by binding input events and navigating * Starts up reveal.js by binding input events and navigating
* to the current URL deeplink if there is one. * to the current URL deeplink if there is one.

6
lib/js/head.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -109,7 +109,6 @@
</div> </div>
</div> </div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script> <script src="../../js/reveal.js"></script>
<script> <script>

View File

@ -0,0 +1 @@
window.externalScriptSequence += 'A';

View File

@ -0,0 +1 @@
window.externalScriptSequence += 'B';

View File

@ -0,0 +1 @@
window.externalScriptSequence += 'C';

View File

@ -0,0 +1 @@
window.externalScriptSequence += 'D';

View File

@ -34,7 +34,6 @@
</div> </div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script> <script src="../../js/reveal.js"></script>
<script> <script>

View File

@ -159,7 +159,6 @@
</div> </div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script> <script src="../../js/reveal.js"></script>
<script> <script>

View File

@ -122,7 +122,6 @@
</div> </div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script> <script src="../../js/reveal.js"></script>
<script> <script>

View File

@ -81,7 +81,6 @@
</div> </div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script> <script src="../../js/reveal.js"></script>
<script> <script>

View File

@ -0,0 +1,74 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Async Dependencies</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section>Slide content</section>
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script>
<script>
window.externalScriptSequence = '';
QUnit.module( 'Async Dependencies' );
var scriptCount = 0;
QUnit.test( 'Async scripts are loaded', function( assert ) {
assert.expect( 5 );
var done = assert.async( 5 );
function callback( event ) {
if( window.externalScriptSequence.length === 1 ) {
assert.ok( window.externalScriptSequence === 'A', 'first callback was sync script' );
}
else {
assert.ok( true, 'async script loaded' );
}
if( window.externalScriptSequence.length === 4 ) {
assert.ok( window.externalScriptSequence.indexOf( 'A' ) !== -1 &&
window.externalScriptSequence.indexOf( 'B' ) !== -1 &&
window.externalScriptSequence.indexOf( 'C' ) !== -1 &&
window.externalScriptSequence.indexOf( 'D' ) !== -1, 'four unique scripts were loaded' );
}
done();
scriptCount ++;
}
Reveal.initialize({
dependencies: [
{ src: 'assets/external-script-a.js', async: false, callback: callback },
{ src: 'assets/external-script-b.js', async: true, callback: callback },
{ src: 'assets/external-script-c.js', async: true, callback: callback },
{ src: 'assets/external-script-d.js', async: true, callback: callback }
]
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Dependencies</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section>Slide content</section>
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script>
<script>
window.externalScriptSequence = '';
Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Dependencies' );
QUnit.test( 'Load synchronous scripts', function( assert ) {
assert.strictEqual( window.externalScriptSequence, 'ABC', 'Loaded and executed in order' );
});
} );
Reveal.initialize({
dependencies: [
{ src: 'assets/external-script-a.js' },
{ src: 'assets/external-script-b.js' },
{ src: 'assets/external-script-c.js' }
]
});
</script>
</body>
</html>

View File

@ -122,7 +122,6 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="../plugin/markdown/marked.js"></script> <script src="../plugin/markdown/marked.js"></script>
<script src="../plugin/markdown/markdown.js"></script> <script src="../plugin/markdown/markdown.js"></script>

View File

@ -23,7 +23,6 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="../plugin/highlight/highlight.js"></script> <script src="../plugin/highlight/highlight.js"></script>
<script src="../plugin/markdown/marked.js"></script> <script src="../plugin/markdown/marked.js"></script>

View File

@ -31,7 +31,6 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script> <script src="qunit-2.5.0.js"></script>

View File

@ -116,7 +116,6 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="../plugin/markdown/marked.js"></script> <script src="../plugin/markdown/marked.js"></script>
<script src="../plugin/markdown/markdown.js"></script> <script src="../plugin/markdown/markdown.js"></script>

View File

@ -40,7 +40,6 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="../plugin/markdown/marked.js"></script> <script src="../plugin/markdown/marked.js"></script>
<script src="../plugin/markdown/markdown.js"></script> <script src="../plugin/markdown/markdown.js"></script>

View File

@ -73,7 +73,6 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script> <script src="qunit-2.5.0.js"></script>

View File

@ -76,7 +76,6 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script> <script src="qunit-2.5.0.js"></script>