Auto active substep

[thawk]

I think it's useful to let use active a substep after enter the step, so the first substep (or specified substep) is active at first, then can be hidden after. e.g. we can show a slogan at first, then replacing it with actually content.

I thought of some way:

1. add attribute data-substep-active/data-substep-active=<substep-idx> to step element
2. add attribute data-substep-active to a substep element
3. add class substep-auto-active to a substep element

[henrikingo]

I like 3 as it is analogous to

impress.js/src/impress.js

Lines 484 to 488 in 78c954a

	if ( activeStep ) {
	activeStep.classList.remove( "active" );
	body.classList.remove( "impress-on-" + activeStep.id );
	}
	el.classList.add( "active" );

[thawk]

Substeps can only be actived one by one. For example, for a step with 3 substeps, it should have only the follow states:

• Neither substeps actived
• Substep 1 actived
• Substep 1 and 2 actived
• Substep 1, 2 and 3 actived

I can't image what should happen while user press the space if just substep 3 is actived. Should only substep 1 actived? or substep 1 and 3 is actived?
I think auto active the very first substep is meanful, e.g. auto highlight substep 1, then unhighligh substep 1 and highlight substep 2, and so on. So I think it's reasonable to add a class substep-auto-active to the step element, make the first substep of that step be auto actived. This is different from the 3 ways in the top post, using class instead of attribute.
Don't know if we have a guideline about when to use class, and when to use attribute?

[henrikingo]

I've always preferred CSS class when possible. This way you can also use CSS directly against this class.

[henrikingo]

Hmm... I'm only now paying more attention to what you are trying to do...

It should be possible to do what you want already with just CSS: Just add substep-visible and substep-active to the first substep and this should make the slide look like you had just pressed space one already.

[thawk]

It should be possible to do what you want already with just CSS: Just add substep-visible and substep-active to the first substep and this should make the slide look like you had just pressed space one already.

When we enter the slide the second time, the class will be removed. So I think we have to introduce new class. Maybe I should commit a PR to be discussed.

[henrikingo]

Ah, hmm... Good point...

Even so, rather than adding a new css class, I would still want to discuss whether existing commands could be used to achieve what you want. I can actually think of 2 alternatives:

• You could submit a PR which changes the behaviour such that what I suggested above becomes possible. In particular, it seems that the substep module should maybe save the starting state of a slide and then reuse it if the slide is shown a second time?
• The module that you would generally use to automatically show a substep is actually the autoplay module. It is also used in https://impress.js.org/examples/classic-slides/#/step-9. However, this cannot conveniently be done for the first substep, because there isn't a "previous" substep where to put the autoplay command. You could put the autoplay command on the step itself, but it is cumbersome to do that for an effect you want to use just for one substep, not all.
  ** I think the right solution down this path would be something like <div class="step" data-autoplay-once="0.1">.
  This would automatically move to the first substep after 0.1 seconds, but would not automatically move to further substeps. Of course, if there are no substeps, the same command would move to the next slide.

What do you think? I actually like the second option.