diff options
author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-03-07 14:18:03 +0100 |
---|---|---|
committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-03-07 14:18:03 +0100 |
commit | 20b8def298fd576ac6be3111824e974ad4d5eab5 (patch) | |
tree | f54ac420fec96ea01e7f14a35ddb3eeb73f5bab1 /js/utils/util.js | |
parent | f968927bff6d0ccb10b30dccd9447d4d359e2b56 (diff) | |
download | fosdem-2021-minimalism-presentation-20b8def298fd576ac6be3111824e974ad4d5eab5.tar fosdem-2021-minimalism-presentation-20b8def298fd576ac6be3111824e974ad4d5eab5.tar.gz |
move script loader to utils
Diffstat (limited to 'js/utils/util.js')
-rw-r--r-- | js/utils/util.js | 85 |
1 files changed, 66 insertions, 19 deletions
diff --git a/js/utils/util.js b/js/utils/util.js index 0c39ebc..b96fe29 100644 --- a/js/utils/util.js +++ b/js/utils/util.js @@ -77,25 +77,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 ); + }
\ No newline at end of file |