diff options
| -rw-r--r-- | README.md | 27 | ||||
| -rw-r--r-- | css/reveal.css | 15 | ||||
| -rw-r--r-- | css/reveal.scss | 11 | ||||
| -rw-r--r-- | js/reveal.js | 43 | ||||
| -rw-r--r-- | test/test-grid-navigation.html | 74 |
5 files changed, 153 insertions, 17 deletions
@@ -23,6 +23,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/ - [Ready Event](#ready-event) - [Auto-sliding](#auto-sliding) - [Keyboard Bindings](#keyboard-bindings) +- [Vertical Slide Navigation](#vertical-slide-navigation) - [Touch Navigation](#touch-navigation) - [Lazy Loading](#lazy-loading) - [API](#api) @@ -282,6 +283,11 @@ Reveal.initialize({ // 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 instead of the top. + gridNavigation: false, // Randomizes the order of slides each time the presentation loads shuffle: false, @@ -510,6 +516,21 @@ Reveal.configure({ }); ``` +### Vertical Slide Navigation + +Slides can be nested within other slides to create vertical stacks (see [Markup](#markup)). When presenting, you use the left/right arrows to step through the main (horizontal) slides. When you arrive at a vertical stack you can optionally press the up/down arrows to view the vertical slides or skip past them by pressing the right arrow. Here's an example showing a bird's-eye view of what this looks like in action: + +<img src="https://static.slid.es/support/reveal.js-vertical-slides.gif" width="450"> + +#### Grid Navigation +If you are on a vertical slide and step right onto an adjacent vertical stack, you'll arrive at the top of that stack. Consider a deck with six slides organized 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. If you prefer remaining at the same vertical index and going directly from 1.3 -> 2.3 you can enable the `gridNavigation` config option: `Reveal.configure({ gridNavigation: true })`. + ### Touch Navigation You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the `touch` config option to false when initializing reveal.js. @@ -1316,6 +1337,12 @@ Reveal.initialize({ Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability. +#### MathJax in Markdown +If you want to include math inside of a presentation written in Markdown you need to wrap the forumla in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example: + +``` +`$$ J(\theta_0,\theta_1) = \sum_{i=0} $$` +``` ## License diff --git a/css/reveal.css b/css/reveal.css index 4a9c604..ebc399f 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1488,7 +1488,7 @@ body { .reveal .speaker-notes { display: none; position: absolute; - width: 25vw; + width: 33.3333333333%; height: 100%; top: 0; left: 100%; @@ -1516,7 +1516,7 @@ body { opacity: 0.5; } .reveal.show-notes { - max-width: 75vw; + max-width: 75%; overflow: visible; } .reveal.show-notes .speaker-notes { @@ -1531,19 +1531,24 @@ body { border-left: 0; max-width: none; max-height: 70%; + max-height: 70vh; overflow: visible; } .reveal.show-notes .speaker-notes { top: 100%; left: 0; width: 100%; - height: 42.8571428571%; } } + height: 42.8571428571%; + height: 30vh; + border: 0; } } @media screen and (max-width: 600px) { .reveal.show-notes { - max-height: 60%; } + max-height: 60%; + max-height: 60vh; } .reveal.show-notes .speaker-notes { top: 100%; - height: 66.6666666667%; } + height: 66.6666666667%; + height: 40vh; } .reveal .speaker-notes { font-size: 14px; } } diff --git a/css/reveal.scss b/css/reveal.scss index 63d1d45..75ffb72 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1619,6 +1619,8 @@ $controlsArrowAngleActive: 36deg; * SPEAKER NOTES *********************************************/ +$notesWidthPercent: 25%; + // Hide on-page notes .reveal aside.notes { display: none; @@ -1629,7 +1631,7 @@ $controlsArrowAngleActive: 36deg; .reveal .speaker-notes { display: none; position: absolute; - width: 25vw; + width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%; height: 100%; top: 0; left: 100%; @@ -1665,7 +1667,7 @@ $controlsArrowAngleActive: 36deg; .reveal.show-notes { - max-width: 75vw; + max-width: 100% - $notesWidthPercent; overflow: visible; } @@ -1684,6 +1686,7 @@ $controlsArrowAngleActive: 36deg; border-left: 0; max-width: none; max-height: 70%; + max-height: 70vh; overflow: visible; } @@ -1692,17 +1695,21 @@ $controlsArrowAngleActive: 36deg; left: 0; width: 100%; height: (30/0.7)*1%; + height: 30vh; + border: 0; } } @media screen and (max-width: 600px) { .reveal.show-notes { max-height: 60%; + max-height: 60vh; } .reveal.show-notes .speaker-notes { top: 100%; height: (40/0.6)*1%; + height: 40vh; } .reveal .speaker-notes { diff --git a/js/reveal.js b/js/reveal.js index c9f3b3b..afbc35a 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -107,6 +107,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 "gridNavigation" 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, @@ -1134,18 +1148,27 @@ if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition; if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity; - // If this slide has a background color, add a class that + // If this slide has a background color, we add a class that // signals if it is light or dark. If the slide has no background - // color, no class will be set - var computedBackgroundStyle = window.getComputedStyle( element ); - if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) { - var rgb = colorToRgb( computedBackgroundStyle.backgroundColor ); + // color, no class will be added + var contrastColor = data.backgroundColor; + + // If no bg color was found, check the computed background + if( !contrastColor ) { + var computedBackgroundStyle = window.getComputedStyle( element ); + if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) { + contrastColor = computedBackgroundStyle.backgroundColor; + } + } + + if( contrastColor ) { + var rgb = colorToRgb( contrastColor ); // Ignore fully transparent backgrounds. Some browsers return // rgba(0,0,0,0) when reading the computed background color of // an element with no background if( rgb && rgb.a !== 0 ) { - if( colorBrightness( computedBackgroundStyle.backgroundColor ) < 128 ) { + if( colorBrightness( contrastColor ) < 128 ) { slide.classList.add( 'has-dark-background' ); } else { @@ -4674,12 +4697,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 ); } } @@ -4691,12 +4714,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> |