substep: add substep-active class (#741)

js/impress.js

@@ -3746,6 +3746,7 @@
             var steps = startingState[ root.id ];
             var step;
             while ( step = steps.pop() ) {
+
                 // Reset x/y/z in cases where this plugin has changed it.
                 if ( step.relX !== null ) {
                     if ( step.x === null ) {
@@ -4002,8 +4003,12 @@
 
     var showSubstep = function( substeps, visible ) {
         if ( visible.length < substeps.length ) {
+            for ( var i = 0; i < substeps.length; i++ ) {
+                substeps[ i ].classList.remove( "substep-active" );
+            }
             var el = substeps[ visible.length ];
             el.classList.add( "substep-visible" );
+            el.classList.add( "substep-active" );
             return el;
         }
     };
@@ -4018,6 +4023,16 @@
 
     var hideSubstep = function( visible ) {
         if ( visible.length > 0 ) {
+            var current = -1;
+            for ( var i = 0; i < visible.length; i++ ) {
+                if ( visible[ i ].classList.contains( "substep-active" ) ) {
+                    current = i;
+                }
+                visible[ i ].classList.remove( "substep-active" );
+            }
+            if ( current > 0 ) {
+                visible[ current - 1 ].classList.add( "substep-active" );
+            }
             var el = visible[ visible.length - 1 ];
             el.classList.remove( "substep-visible" );
             return el;

src/plugins/substep/README.md

@@ -29,6 +29,12 @@ Example:
             <p class="substep">Apple</p>
         </div>
 
+Classes:
+
+`substep-active` - The most recent substep in the current step
+
+`substep-visible` - The most recent and all previous substeps in the current step
+
 Author
 ------
 

src/plugins/substep/substep.js

@@ -69,8 +69,12 @@
 
     var showSubstep = function( substeps, visible ) {
         if ( visible.length < substeps.length ) {
+            for ( var i = 0; i < substeps.length; i++ ) {
+                substeps[ i ].classList.remove( "substep-active" );
+            }
             var el = substeps[ visible.length ];
             el.classList.add( "substep-visible" );
+            el.classList.add( "substep-active" );
             return el;
         }
     };
@@ -85,6 +89,16 @@
 
     var hideSubstep = function( visible ) {
         if ( visible.length > 0 ) {
+            var current = -1;
+            for ( var i = 0; i < visible.length; i++ ) {
+                if ( visible[ i ].classList.contains( "substep-active" ) ) {
+                    current = i;
+                }
+                visible[ i ].classList.remove( "substep-active" );
+            }
+            if ( current > 0 ) {
+                visible[ current - 1 ].classList.add( "substep-active" );
+            }
             var el = visible[ visible.length - 1 ];
             el.classList.remove( "substep-visible" );
             return el;