diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2016-06-28 12:23:40 +0200 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2017-05-16 09:45:37 +0200 |
| commit | 21554157677db983459850493c6075b29beae29f (patch) | |
| tree | 3baa2cb93a879e50fe81880eafacc0d2eb694e15 | |
| parent | e45a425575502ee085012e53ab46d479bd02e541 (diff) | |
| download | fosdem-2018-presentation-21554157677db983459850493c6075b29beae29f.tar fosdem-2018-presentation-21554157677db983459850493c6075b29beae29f.tar.gz | |
more flexible back arrow controls option
| -rw-r--r-- | css/reveal.css | 12 | ||||
| -rw-r--r-- | css/reveal.scss | 18 | ||||
| -rw-r--r-- | js/reveal.js | 7 |
3 files changed, 25 insertions, 12 deletions
diff --git a/css/reveal.css b/css/reveal.css index 6f35fa6..526006b 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -267,12 +267,16 @@ body { left: 50%; -webkit-transform: translateX(-50%) rotate(-90deg); transform: translateX(-50%) rotate(-90deg); } - .reveal .controls.deemphasize-back-arrows .navigate-left.enabled, - .reveal .controls.deemphasize-back-arrows .navigate-up.enabled { + .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled, + .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled { opacity: 0.3; } - .reveal .controls.deemphasize-back-arrows .navigate-left.enabled:hover, - .reveal .controls.deemphasize-back-arrows .navigate-up.enabled:hover { + .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled:hover, + .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled:hover { opacity: 1; } + .reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled, + .reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled { + opacity: 0; + visibility: hidden; } .reveal .controls .enabled { visibility: visible; opacity: 0.7; diff --git a/css/reveal.scss b/css/reveal.scss index ead768b..3127453 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -333,11 +333,11 @@ body { transform: translateX(-50%) rotate( -90deg ); } - // The deemphasize back arrows option strongly deemphasizes - // backwards navigation in favor of drawing attention to - // forwards navigation - &.deemphasize-back-arrows .navigate-left.enabled, - &.deemphasize-back-arrows .navigate-up.enabled { + // Back arrow style: "deemphasized": + // Strongly deemphasizes backwards navigation in favor of drawing + // attention to forwards navigation + &[data-controls-back-arrows="deemphasized"] .navigate-left.enabled, + &[data-controls-back-arrows="deemphasized"] .navigate-up.enabled { opacity: 0.3; &:hover { @@ -345,6 +345,14 @@ body { } } + // Back arrow style: "hidden": + // Never shows any arrows for backwards navigation + &[data-controls-back-arrows="hidden"] .navigate-left.enabled, + &[data-controls-back-arrows="hidden"] .navigate-up.enabled { + opacity: 0; + visibility: hidden; + } + // Any control button that can be clicked is "enabled" .enabled { visibility: visible; diff --git a/js/reveal.js b/js/reveal.js index c38f695..0e8fbab 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -55,8 +55,9 @@ // Determines where controls appear, "edges" or "bottom-right" controlsPlacement: 'bottom-right', - // De-emphasizes backwards navigation controls - controlsDeemphasizeBackArrows: true, + // Specifies the display rules for backwards navigation arrows; + // "deemphasized", "hidden" or "visible" + controlsBackArrows: 'deemphasized', // Display a presentation progress bar progress: true, @@ -1005,7 +1006,7 @@ dom.progress.style.display = config.progress ? 'block' : 'none'; dom.controls.setAttribute( 'data-controls-placement', config.controlsPlacement ); - dom.controls.classList.toggle( 'deemphasize-back-arrows', config.controlsDeemphasizeBackArrows ); + dom.controls.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows ); if( config.shuffle ) { shuffle(); |