From d378ab2e63aca8f3bec19022714214a5455ffcdc Mon Sep 17 00:00:00 2001 From: quilicicf Date: Fri, 8 Nov 2019 13:31:28 +0100 Subject: [PATCH] Add bundler-friendly dependency injection --- README.md | 7 +++++++ js/controllers/plugins.js | 33 ++++++++++++++++++++++----------- js/reveal.js | 4 ++-- 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 49a66fe..f45e004 100644 --- a/README.md +++ b/README.md @@ -522,6 +522,13 @@ You can add your own extensions using the same syntax. The following properties - **callback**: [optional] Function to execute when the script has loaded - **condition**: [optional] Function which must return true for the script to be loaded +You can additionally use the following syntax, in case you are using a bundler: +- **id**: the id of the plugin to load +- **plugin**: the plugin object to load. It is the plugin implementation that can contain an `init` function +- **async**: [optional] Flags if the script should load after reveal.js has started, defaults to false +- **callback**: [optional] Function to execute when the script has loaded +- **condition**: [optional] Function which must return true for the script to be loaded + ### Ready Event A `ready` event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`. diff --git a/js/controllers/plugins.js b/js/controllers/plugins.js index 300b0ba..94077f7 100644 --- a/js/controllers/plugins.js +++ b/js/controllers/plugins.js @@ -48,17 +48,22 @@ export default class Plugins { if( scripts.length ) { scriptsToLoad = scripts.length; + const scriptLoadedCallback = (s) => { + if( typeof s.callback === 'function' ) s.callback(); + + if( --scriptsToLoad === 0 ) { + this.initPlugins().then( resolve ); + } + }; + // Load synchronous scripts scripts.forEach( s => { - loadScript( s.src, () => { - - if( typeof s.callback === 'function' ) s.callback(); - - if( --scriptsToLoad === 0 ) { - this.initPlugins().then( resolve ); - } - - } ); + if (s.id) { + this.registerPlugin(s.id, s.plugin); + scriptLoadedCallback(s); + } else { + loadScript( s.src, () => scriptLoadedCallback(s)); + } } ); } else { @@ -129,7 +134,13 @@ export default class Plugins { if( this.asyncDependencies.length ) { this.asyncDependencies.forEach( s => { - loadScript( s.src, s.callback ); + if (s.id) { + this.registerPlugin(s.id, s.plugin); + if (typeof s.plugin.init === 'function') { s.plugin.init(); } + if (typeof s.callback === 'function') { s.callback(); } + } else { + loadScript( s.src, s.callback ); + } } ); } @@ -190,4 +201,4 @@ export default class Plugins { } -} \ No newline at end of file +} diff --git a/js/reveal.js b/js/reveal.js index 8cb521b..a48377b 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -180,7 +180,7 @@ export default function( revealElement, options ) { // Flags if we should use zoom instead of transform to scale // up slides. Zoom produces crisper results but has a lot of - // xbrowser quirks so we only use it in whitelsited browsers. + // xbrowser quirks so we only use it in white-listed browsers. features.zoom = 'zoom' in testElement.style && !isMobileDevice && ( isChrome || /Version\/[\d\.]+.*Safari/.test( UA ) ); @@ -5675,4 +5675,4 @@ export default function( revealElement, options ) { return Reveal; -}; \ No newline at end of file +};