m42e / impress.js-progress

Progressbar and pagexounter for impress.js presentation

impress.js-progress

Progressbar and pagexounter for impress.js presentations Requires the steps to be submitted on impress:init event, see impress/impress.js#235 and impress/impress.js#232 for details.

Usage

Add a div for progressbar and/or progress as you can see it here:

<div class="progressbar"><div></div></div>
<div class="progress"></div>

include the CSS in the header

<link href="css/impress-progress.css" rel="stylesheet" />

and include the script

<script src="js/impress-progress.js"></script>

just before including impress.js.

That's it.

Feel free to change the style of your progressbar as you like by editing the CSS file.

Note

Until m42e/impress.js@f367c84 isn't accepted there's the need to patch js/impress.js to add the steps data to init().

Changing line 402 like this:

triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ] });
triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ], steps: steps });

impress.js-progress's Issues

Integrated impress.js-progress in my impress.js fork

Hi Matthias

I've been contributing to impress.js for the past year or so.

I just wanted to let you know that I have added your progress bar to my fork of impress here: https://github.com/henrikingo/impress.js

The new thing is that we're adding (well, it's only in my repo at the moment...) a plugin API so that new features can be added in a modular way. It turns out impress.js-progress was written in the same way as the API mostly does it too, by using the events triggered by core impress.js. So it was straightforward to add your code with minor changes. (I extended the impress:stepleave event instead of adding impress:starttransition, in an effort to minimize additions to the core.)

The main benefit for a user of impress.js-progress is that you don't need to use a separate <script> tag to include a separate js file any longer. Just adding the <div> in your presentation will do the magic.

I also modified the sample CSS slightly to make the bar and digits smaller. You can watch a demo here: http://henrikingo.github.io/impress.js/examples/classic-slides/

One question: Can you confirm your code is MIT licensed, like the core impress.js? If yes, I would appreciate if you also added a mention of MIT license to the README in this repo, so there's no ambiguity.

Add examples

Having a couple of examples in an examples dir, with the progressbar embedded in the slides or outside them would be very useful to start with impress-progress.

Advertise that impress.js needs to be patched until upstream doesn't accept the pull request

Until m42e/impress.js@f367c84 isn't accepted there's the need to patch js/impress.js to add the steps data to init().

Changing line 402 like this:

•        triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ] });
  

•        triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ], steps: steps });
  

Is there any online demo?

Is there any online demo of this library to see how it works?

progress bar only working on 1 slide

Hey,
I was trying to use the progress bar in my presentation but I'm not able to get it working. All my slides have the same data-x and data-y coordinates. I'm just changing the data-z attribute. When putting the div's on my first slide the progress bar works. But when adding the progress bar to more slides it is just empty and also no slide numbers are displayed. I've played a little with it and it seems the first progress bar I added get updated but how do I put it on the other slides?

Felix