Add Substeps

[gossi]

Hey there,

I would like to see "substeps". I don't know how to call those properly, I give a little description:

Imagine you have your presentation with some slides/steps. Now on one slide you have a list and you want to fly in the list items one-by-one each by a arrow right keystroke. I tried it that way:

<ul>
<li class="step">Item 1</li>
<li class="step">Item 2</li>
</ul>

It didn't worked, of course I didn't expected that. But would be cool to have something like that.

Thanks very much.

[bartaz]

I kind of try to avoid that. It's so 'powerpointish' ;)

But I understand that it's sometimes useful to reveal some additional information without the need to change to next step or slide.

So I'll think about that :)

[gossi]

Hehe, yes I do understand you :) Nevertheless as "traditional" slides are possible, this makes sense. My last presentation (the first one with impress.js) was kind of a hybrid and I could have used them, went well anyway though ;)

'action' may also a good candidate for this.

And another extension which goes in combination for this, it's like adding a javascript call into the "keyboard navigation", which is kinda impossible in any of the html/javascript slides I've seen. Because something like this is not good:

<script class="action">
// do something here ... because it will be run after pageload.
</script>

Maybe something like this makes sense:
<command class="action" on...="doSomething()" data-action="doSomething()"> maybe something like this with an on* attribute or the data-action attribute with a javascript function to call.

What do you thing?

[bartaz]

Heh, I was actually thinking about such scripts, too. :)
Because I tend to build quite interactive presentations, so basic 'substep' revealed is not enough for me.

The <command> thing looks scary, and way to similar to inline callbacks such as onclick that are not a very good practice (and putting many code in them is ugly).

The <script> approach would be much better, but the script itself has to be treated as JavaScript not to be called by browser at once. But it's possible. I have an idea in my head how it can be done (a little bit of hackery with script type attribute), so keep an eye on that issue.

But I really can't promise if it will be solved any time soon.

[gregmac]

You could potentially add a "step" javascript event, so that you could do, for example:

<div id="part5" class="step">
</div>

$('#part5').step(function() {
   alert('step 5 was shown');
});

A user could potentially then write handlers to attach to every step, or whatever jquery selectors they want. Going further, there could be a few events: beforeStepStart, afterStepStart, beforeStepEnd, afterStepEnd.

Gives a javascript developer a lot of power, without actually baking much extra into impress.js itself.

[bartaz]

It doesn't have much to do with substeps described here, but yes, such events may be useful.

It's partly discussed in issue about public API #9, but I think I'll probably develop it separately, to release simple API earlier.

[gossi]

Another use-case for actions would be to run animations. At the moment animations are timed by a delay in the css. If you are running a presentation, open up a new step talk a bit and you will then run an animation I would like to trigger it by hitting the next button or click with the mouse.

[enyo]

I just wanted to say that I would love to see substeps as well... I have a few slideshows that I would like to transform to impress.js, but they all have sort of substeps that appear only step by step (arrows, descriptions, instructions, etc...)
I agree with you that it's a bit «powerpointish», but at the same time it's a great way to not overwhelm the user with too much information at once. And changing the slide every time is harder to keep focus.

[qingyuan1109]

The first problem I encountered was how to add substeps when I try to learn and make my first small presentation by impress.js today. It's better to show step by step sometimes.

[adrocknaphobia]

+1 on sub steps. Need them ASAP.

[medikoo]

Substeps indeed are mandatory (in my opinion) - as an option, so you can easily switch whether to use them or not, it's good to use them in presentation but later when you give a link to it, it may make no sense to show substeps.

I've once written some quick implementation for impress.js, which worked quite well. I'll see if it can be easily ported now and eventually propose a pull request.

[bartaz]

I see your points guys I just want to make sure the solution is simple and possibly implemented outside of the core code. Cause let's be honest. Sub-steps have nothing to do with impress transitions. We simply want "some other action" to be triggered instead of impress().next() when arrow or space is pressed.

So this can be a modification of next() function or some other abstraction that checks for a presence of a substep and decides to show it or move to the next step. And personally I would prefer the second solution.

But of course I understand that from a users perspective it doesn't really matter - you just want any way to use substeps, possibly as simple as adding some sub-step class on elements.

[emarc]

This was actually the first thing I realized I needed too - and I ended up implementing it before I found this issue.

My implementation is a quick-and-simple one, but I thought I'd mention it here for, uhm, possible inspiration?

Basically, when a step is activated I add a "hidden" classname to all sub-elements with the classname "point" (yeah, needs renaming), then when next() is called it removes that classname until there are no "hidden" elements left, then advances to the next step.

This way you can do CSS animations etc, just like you would when the step is activated. Also, since "hidden" is added by impress.js, the elements will show up if it's not up-and-running.

I set it up so that the sub-elements are only hidden when going forward, so when you go back a step ("oops") everything is showing.

This has worked pretty nicely for my case, while being a quite minimal implementation.

I'm guessing you'd want to modify my code, since I wanted to make really minimal changes and ended up adding a few lines to goto(), prev() and next(). It could be made more beautiful by adding the functionality 'deeper'. But having said that, I could provide the changes, if you want to take a look...?

Awesome project, by the way - keep up the good work!

[joefiorini]

I'm not sure if this concept is the same as what you call sub steps, but I'd love to be able to show a high level overview of a grouping of steps and then zoom in on them and start iterating through them one-by-one, with the ability to jump up a level as needed to remind the audience of where we are in the talk. That would be great for helping the audience follow my talk as I'm speaking. This seems like what sub steps would solve, but this idea doesn't seem "Powerpointish" at all. Quite the opposite in fact, transitioning from step to step in a liner fashion seems more Powerpointish than that. Am I misunderstanding something here? Can impress.js do this?

[bartaz]

@joefiorini I think that your idea can be implemented by adding arbitrary "sub-overview" steps in your presentation. As you can see in the demo source, the overview step is nothing more than empty div with specific position and scale to show all the steps on the screen. You can manually create such 'sub-overviews' as steps in your presentation. So you will at first show such 'sub-overview' than move to specific steps. If you want to move back to the 'sub-overview' just make a copy of it in HTML (with different id).

Hope it answers your question.

[timonf]

+1 for substep usage like in the first comment here!

[gossi]

I was looking into different other html5 presentation toolkits right now. Some things I really like in reveal.js that may be applicable to that use-case:

1. It calls substeps fragments, which is a good candidate I think, I like that word. If you have an element with class="fragment" that appears after the next arrow.
2. With html you can use the attribute data-state="blabla" and then register a javascript listener, like this: Reveal.addEventListener('blabla', function() {...}); to react with javascript on the users next action.

Reveal.JS: http://lab.hakim.se/reveal-js

[sokra]

we use the attribute data-jmpress to realise substeps, i.e. data-jmpress="fade after 1s"

http://shama.github.com/jmpress.js/docs/#docs-animation
http://shama.github.com/jmpress.js/examples/animation/#/basic

[aurelien-naldi]

I like the "fragment" class from reveal.js and I'm experimenting with it in impress.js as follow:

• when entering a step, add a "future" class to all of its fragments
• modify next() to start by looking for the first ".fragment.future" in the current step and remove its future class instead of moving to the next step.
• remove the future class when leaving a step

As the prev function is unaffected, calling prev will jump to the first state of a step, which makes more sense for me.
It adds 5 lines in 3 different places of impress.js and should be enough for simple cases.

I see 3 obvious improvements:

• add a class like data-fragment-order="n" to set an order explicitly (plus group some fragment activations together)
• add "present" and "past" classes to fragments to make it easier to make them appear then vanish. all fragments of the current step would have one of these classes. Fragments of other steps would have none.
• trigger a "impress:fragment" event for complex cases

Does it make sense and more importantly, is there any chance for this or something similar to be integrated?
If yes, I can improve it a bit and propose a patch :)

[mayconbordin]

I needed to trigger some functions when my presentation reached certain step, like start playing a video or something like that, but I didn't wanted to modify the library code, so I tried to use backbone.js's Router, and it works.

I'm sure there may be better ways to do that, and with this solution you still can't have substeps.

[Thomas131]

+1 Substeps

[briceparent]

You might want to give a try to #215 .
It allows the use of substeps the same way impress already works (no javascript skills required), and now offers events handler for those who want to execute some js when substeps are entered or left.

[ciembor]

+1. I have some huge UML diagram in img element and I need to move between it's classes. Substeps would solve this problem.

[aruizca]

+1

[bartaz]

oh man, I know how much you want it :)
It's probably the most requested feature for impress.js.

And I even have an idea how I'd like to have it implemented... if only I had time for that :)

[wecacuee]

Here's my two cents to handling this problem:

Inside impress.js

1. Have a optional custom attribute 'slide-states'=n for each slide.
2. Throw a custom event 'nextSlideState' n times before moving to next slide.

  var slidestates = slide.getAttribute('slide-states') ;
  if (slidestates > 0) {
    var evt = new CustomEvent("nextSlideState",
    { detail : { curSlide : slide, curState : slidestates },
      bubbles: true, cancelable: true});
    document.dispatchEvent(evt);
    slidestates -= 1;
    slide.setAttribute('slide-states', slidestates);
  } else {
    nextSlide();
  }

User code:
Add listener to nextSlideState. Has the additional flexibility to handle states as it likes. We can have a library of custom handlers which reduces the overhead of simpler cases like building simple lists in order.

<ul>
<li class="state1 hidden"> shows in state1 </li>
<li class="state2 hidden">shows in state2</li>
<li class="state1 hidden">shows in state1</li>
</ul>

  var nextState = function(e) {
      var slide = e.detail.curSlide;
      var remaining_states = e.detail.curState;
      var thisState = ".state" + remaining_states;
      var toBuild = slide.querySelectorAll(".hidden" + thisState);
      for (var i = 0; i < toBuild.length; ++i) {
        var toB = toBuild[i];
        toB.classList.remove('hidden');
        toB.classList.remove(thisState);
        toB.classList.add('current');
      }
  };
  document.addEventListener("nextSlideState", nextState);

[jejb]

It would be great if there were a mailing list for this, since github's bugzilla doesn't even allow attachments, but this is how I did it: I used a different type of slide class called a build, which allows you to add stuff to an existing step, as many things as you want, including per build animations (like thinks flying in or rotating). The code is fairly easy for steps, but gets messy for disjoint navigation:

http://git.kernel.org/cgit/linux/kernel/git/jejb/impress.js.git/commit/?id=de9f8e20717b76ace9a546488f27f932bfb690b1

[misterbrownlee]

I implemented substeps in a fork. I am trying to keep it current with impress.js as it make sense, with only my substep code added.

You can see more, grab the code, or fork it here:
http://github.com/tehfoo/impress.js

You can see the diff of how I implemented substeps here:
#280

I don't expect the pull request to be merged, but it's a good reference for one approach to substeps.

HTH :)

[edouardmenayde]

I agree this would be a good feature :-)

[bioinfornatics]

@tehfoo why you don not do a pull request ?

[patricebeutler]

I am working on a solution for this problem. Basically with this solution there is the possibility to add javascript functions as "tweensteps". In this functions you can do whatever you want. Also, there are functions for reverse the changes done by these step-functions. When the work and the testing is done, i will file a pull-request or create a fork.

[Announcement]

Tween not steps pls
On Feb 20, 2015 8:27 PM, "Patrice Beutler" notifications@github.com wrote:

I am working on a solution for this problem. Basically with this solution
there is the possibility to add javascript functions as "steps". In this
functions you can do whatever you want. Also, there are functions for
reverse the changes done by these step-functions. When the work and the
testing is done, i will file a pull-request or create a fork.

—
Reply to this email directly or view it on GitHub
#81 (comment).

[patricebeutler]

@Announcement Thanks for the hint. My fault. I corrected it.

[patricebeutler]

Hey people. If you need this now take a look at my fork: https://github.com/patricebeutler/impress.js. Its exactly the same beside the supsteps-feature. Let me know what you think. The demo is updated, so you can download it and take a look at it. Should be pretty straight-forward.

[calebeby]

Any chance this will be merged?

[naraesk]

Seems like @bartaz doesn't have much time for this project recently. However, it would be great if a solution could be found that this repository stays at least maintained. There are several forks of it currently, can't use them simultaneously.

[henrikingo]

Hi @calebeby, @naraesk and others

Thanks for pinging on this thread again. Like bartaz, I kinda felt this is a silly powerpoint feature, so it wasn't top of my priority list last year. At the same time, it is true this must be the most requested feature at this point. So I have implemented it in my fork today. (Demo).

it would be great if a solution could be found that this repository stays at least maintained.
There are several forks of it currently, can't use them simultaneously.

Just to let everyone know, my fork:

• Is actively maintained (for over a year now)
• Intended to be general purpose, so I add feature requests like this, even if I don't personally use them
• I'm happy to take pull requests too (please familiarize yourself with the plugin framework)
• I originally added a plugin framework, based on helpful guidance from bartaz himself. Even today, he has at least not objected to what I ended up doing. In this sense, I've done my best to continue delivering upon the original vision of impress.js
• I periodically merge from upstream and have avoided doing some things in order to remain compatible with it. I realize upstream impress.js is stagnant, but should it ever spring to life again, it's been my hope that the work in my fork could be merged back upstream.

[calebeby]

@henrikingo Thanks for the update. That's good to hear that you are maintaining a fork. Thanks!

[ecolui]

@henrikingo - Thank you for the update. I also did some work on the sub-steps feature that was commonly requested. I did this by introducing two new functions (e.g. registerEnter and registerExit) that will allow the user to register any function as a sub-step inside a slide. The ability to introduce user defined functions as sub-steps gives the user the flexibility to do whatever they want as a sub-step (e.g. growing/shrinking text, transition opacity from 0 to 1, spinning text, etc). I committed the code to a fork of this project just for the sake of sharing this idea and the corresponding committed code (url provided below). I am not going to actively maintain the forked version - i just forked the project in order to provide the following url.

ecolui@004e8b6

• Note: In the preceding url, pay attention to the new commented code at the bottom of index.html. That commented code shows you how to use the new registerEnter and registerExit functions.

[henrikingo]

substep plugin is now merged to master.