diff options
| -rw-r--r-- | js/reveal.js | 22 | ||||
| -rw-r--r-- | test/test-grid-navigation.html | 74 |
2 files changed, 92 insertions, 4 deletions
diff --git a/js/reveal.js b/js/reveal.js index 4cf43f7..16ff6df 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -104,6 +104,20 @@ // Change the presentation direction to be RTL rtl: false, + // When this is enabled, stepping left/right from a vertical stack + // to an adjacent vertical stack will land you at the same vertical + // index. + // + // Consider a deck with six slides ordered in two stacks like this: + // 1.1 2.1 + // 1.2 2.2 + // 1.3 2.3 + // + // If you're on slide 1.3 and navigate right, you will normally move + // from 1.3 -> 2.1. With "grid" enabled the same navigation takes you + // from 1.3 -> 2.3. + gridNavigation: false, + // Randomizes the order of slides each time the presentation loads shuffle: false, @@ -4678,12 +4692,12 @@ // Reverse for RTL if( config.rtl ) { if( ( isOverview() || nextFragment() === false ) && availableRoutes().left ) { - slide( indexh + 1 ); + slide( indexh + 1, config.gridNavigation ? indexv : undefined ); } } // Normal navigation else if( ( isOverview() || previousFragment() === false ) && availableRoutes().left ) { - slide( indexh - 1 ); + slide( indexh - 1, config.gridNavigation ? indexv : undefined ); } } @@ -4695,12 +4709,12 @@ // Reverse for RTL if( config.rtl ) { if( ( isOverview() || previousFragment() === false ) && availableRoutes().right ) { - slide( indexh - 1 ); + slide( indexh - 1, config.gridNavigation ? indexv : undefined ); } } // Normal navigation else if( ( isOverview() || nextFragment() === false ) && availableRoutes().right ) { - slide( indexh + 1 ); + slide( indexh + 1, config.gridNavigation ? indexv : undefined ); } } diff --git a/test/test-grid-navigation.html b/test/test-grid-navigation.html new file mode 100644 index 0000000..2814ca3 --- /dev/null +++ b/test/test-grid-navigation.html @@ -0,0 +1,74 @@ +<!doctype html> +<html lang="en"> + + <head> + <meta charset="utf-8"> + + <title>reveal.js - Test Grid</title> + + <link rel="stylesheet" href="../css/reveal.css"> + <link rel="stylesheet" href="qunit-2.5.0.css"> + </head> + + <body style="overflow: auto;"> + + <div id="qunit"></div> + <div id="qunit-fixture"></div> + + <div class="reveal" style="display: none;"> + + <div class="slides"> + + <section>0</section> + <section> + <section>1.1</section> + <section>1.2</section> + <section>1.3</section> + <section>1.4</section> + </section> + <section> + <section>2.1</section> + <section>2.2</section> + <section>2.3</section> + <section>2.4</section> + </section> + + </div> + + </div> + + <script src="../js/reveal.js"></script> + <script src="qunit-2.5.0.js"></script> + + <script> + Reveal.addEventListener( 'ready', function() { + + QUnit.module( 'Grid Navigation' ); + + QUnit.test( 'Disabled', function( assert ) { + Reveal.right(); + Reveal.down(); + Reveal.down(); + assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' ); + Reveal.right(); + assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: undefined }, 'Moves to top when going to adjacent stack' ); + }); + + QUnit.test( 'Enabled', function( assert ) { + Reveal.configure({ gridNavigation: true }); + Reveal.slide( 0, 0 ); + Reveal.right(); + Reveal.down(); + Reveal.down(); + assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' ); + Reveal.right(); + assert.deepEqual( Reveal.getIndices(), { h: 2, v: 2, f: undefined }, 'Remains at same vertical index when going to adjacent stack' ); + }); + + } ); + + Reveal.initialize(); + </script> + + </body> +</html> |