Additional reveal.js dependencies/plugins

[akhayyat]

How can I configure additional reveal.js plugins?

Reveal.js lists a number of plugins: https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware

For example, to use the reveal.js-menu plugin (https://github.com/denehyg/reveal.js-menu), I'd need at least to specify additional reveal.js dependencies:

Reveal.initialize({
    // ...
    dependencies: [
        // ... 
        { src: 'plugin/menu/menu.js' }
    ]
});

And at best, to be able to customize the plugin by specifying additional Revial.initialize attributes (see https://github.com/denehyg/reveal.js-menu#configuration).

Is there currently any way to specify additional reveal.js dependencies?

[mojavelinux]

There doesn't seem to be a way currently. I guess that means we need to design a solution.

Perhaps a comma-separated list of extensions, like:

:revealjs_ext: menu,...

But that doesn't address the configuration for that plugin. That feels like too much for document attributes.

Of course, you can achieve this today simply by providing a custom document template. Though, perhaps that shines light on what the solution should be. We should read the dependencies block from a template (or json configuration file) that you can override. That way, you get full control.

Either way, we need to design a solution.

[obilodeau]

Perhaps a comma-separated list of extensions, like:

:revealjs_ext: menu,...

It's not an easy one to address since the plugin can be separately installed via bower, npm or manually which changes the way you need to write the src: entry.

But that doesn't address the configuration for that plugin. That feels like too much for document attributes.

Idea a) attribute to load external javascript file

Maybe we should allow for JSON to be injected via an external file. Quick testing shows that overriding keys would even work so we could provide default values and allow the user to override:

{"a":"b","a":"c"}
> Object {a: "c"}

So a new attribute revealjs_initialize: used like:

:revealjs_initialize: config.js

With a config.js file like:

menu: {
        side: 'right',
        themes: false,
        transitions: true,
    },

Idea b) attribute to run individual Reveal.configure() statements

Reveal.js supports updating it's configuration after the initialize(...) call with:

Reveal.configure({ autoSlide: 0 });

As documented here.

Something like:

:revealjs_configure: menu: {side: 'right', themes: false, transitions: true },

But there are probably corner-cases that I'm not thinking about.

[kubamarchwicki]

I was fiddling with that as well (with menu plugin being one of pluging I was looking for).

Due to constraints @obilodeau pointed out my approach was to handle plugins externally, while building slides not in the slides themselves. I've added a 'replaceable token' in the main document.slim template which was later replaced with appropriate plugin reference, everything handled and downloaded rake scripts. An approach taken from Grunt minification and bundling scripts.

It's still a bit hacky and dependant on my own build environment, but as the topic emerge I'll try to get stuff together so that I can show a working example.

Ideally, an npm build script with asciidoctor.js would be a natural environment for that, but as the slim and jade templates differ, that was a no go for me.

[a4z]

thinking about the same issue just now.
I have now a own fork and have there a adopted document.html.slim
but his is of course bad.

If I would know how to implement it, I would take an optional file that could replace the default text in the init section and I could provide a file (reval_plugins) with for example a content like this..

        dependencies: [
            { src: '#{revealjsdir}/lib/js/classList.js', condition: function() { return !document.body.classList; } },
            #{(attr? 'source-highlighter', 'highlightjs') ? "{ src: '#{revealjsdir}/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }," : nil}
            { src: '#{revealjsdir}/plugin/zoom-js/zoom.js', async: true },
            { src: '#{revealjsdir}/plugin/notes/notes.js', async: true },
            { src: 'myplugins/whatever.js' },
        ], 

        whatever: {
          config: value
        }

but unfortunately my slim knowledge is not existent.

there is a include command for slim and theoretical is should be possible to include a file, if it is give, but I do not know how to implement this

[obilodeau]

This feature was integrated in master. It will be part of the next release.

[wbrauneis]

This is a very nice feature. Is there already an ETA when the next release will be available?

[obilodeau]

I'm going to merge #202, finish a blog post (to see if I want to improve other things), look at #203 #204, do a release and then publish the blog post.

However, right now I'm very busy at work and in my personal life. Things should improve in the coming weeks and I'll get back to it.