Add ability to specify substep order (#779)
The substep plugin currently shows each substep in the order in which it appears in the HTML. This is not always an ideal fit for some presentation styles, where it would be helpful to specify a different order (e.g., to add annotations to an image). This commit allows users to specify a custom order via the `data-substep-order` attribute. Substeps without a `data-substep-order` attribute are revealed last. This commit also updates the Substep README to document the new feature.
This commit is contained in:
@@ -61,12 +61,28 @@
|
||||
|
||||
var showSubstepIfAny = function( step ) {
|
||||
var substeps = step.querySelectorAll( ".substep" );
|
||||
var visible = step.querySelectorAll( ".substep-visible" );
|
||||
if ( substeps.length > 0 ) {
|
||||
return showSubstep( substeps, visible );
|
||||
var sorted = sortSubsteps( substeps );
|
||||
var visible = step.querySelectorAll( ".substep-visible" );
|
||||
return showSubstep( sorted, visible );
|
||||
}
|
||||
};
|
||||
|
||||
var sortSubsteps = function( substepNodeList ) {
|
||||
var substeps = Array.from( substepNodeList );
|
||||
var sorted = substeps
|
||||
.filter( el => el.dataset.substepOrder )
|
||||
.sort( ( a, b ) => {
|
||||
var orderA = a.dataset.substepOrder;
|
||||
var orderB = b.dataset.substepOrder;
|
||||
return parseInt( orderA ) - parseInt( orderB );
|
||||
} )
|
||||
.concat( substeps.filter( el => {
|
||||
return el.dataset.substepOrder === undefined;
|
||||
} ) );
|
||||
return sorted;
|
||||
};
|
||||
|
||||
var showSubstep = function( substeps, visible ) {
|
||||
if ( visible.length < substeps.length ) {
|
||||
for ( var i = 0; i < substeps.length; i++ ) {
|
||||
@@ -82,8 +98,9 @@
|
||||
var hideSubstepIfAny = function( step ) {
|
||||
var substeps = step.querySelectorAll( ".substep" );
|
||||
var visible = step.querySelectorAll( ".substep-visible" );
|
||||
var sorted = sortSubsteps( visible );
|
||||
if ( substeps.length > 0 ) {
|
||||
return hideSubstep( visible );
|
||||
return hideSubstep( sorted );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user