move script loader to utils

This commit is contained in:
Hakim El Hattab 2020-03-07 14:18:03 +01:00
parent f968927bff
commit 20b8def298
2 changed files with 67 additions and 66 deletions

View File

@ -7,6 +7,7 @@ import {
deserialize,
transformElement,
injectStyleSheet,
loadScript,
closestParent,
colorToRgb,
colorBrightness,
@ -303,53 +304,6 @@ export default function( revealElement, options ) {
}
/**
* 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 ) {
const 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 = 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 = 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>
const head = document.querySelector( 'head' );
head.insertBefore( script, head.lastChild );
}
/**
* Starts up reveal.js by binding input events and navigating
* to the current URL deeplink if there is one.

View File

@ -76,25 +76,6 @@ export const transformElement = ( element, transform ) => {
}
/**
* Injects the given CSS styles into the DOM.
*
* @param {string} value
*/
export const injectStyleSheet = ( value ) => {
let tag = document.createElement( 'style' );
tag.type = 'text/css';
if( tag.styleSheet ) {
tag.styleSheet.cssText = value;
}
else {
tag.appendChild( document.createTextNode( value ) );
}
document.getElementsByTagName( 'head' )[0].appendChild( tag );
}
/**
* Find the closest parent that matches the given
* selector.
@ -230,4 +211,70 @@ export const enterFullscreen = () => {
requestMethod.apply( element );
}
}
/**
* Injects the given CSS styles into the DOM.
*
* @param {string} value
*/
export const injectStyleSheet = ( value ) => {
let tag = document.createElement( 'style' );
tag.type = 'text/css';
if( tag.styleSheet ) {
tag.styleSheet.cssText = value;
}
else {
tag.appendChild( document.createTextNode( value ) );
}
document.getElementsByTagName( 'head' )[0].appendChild( tag );
}
/**
* 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
*/
export const loadScript = ( url, callback ) => {
const script = document.createElement( 'script' );
script.type = 'text/javascript';
script.async = false;
script.defer = false;
script.src = url;
if( typeof callback === 'function' ) {
// Success callback
script.onload = script.onreadystatechange = 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 = 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>
const head = document.querySelector( 'head' );
head.insertBefore( script, head.lastChild );
}