more flexible back arrow controls option

This commit is contained in:
Hakim El Hattab 2016-06-28 12:23:40 +02:00
parent e45a425575
commit 2155415767
3 changed files with 25 additions and 12 deletions

View file

@ -267,12 +267,16 @@ body {
left: 50%; left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg); -webkit-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg); } transform: translateX(-50%) rotate(-90deg); }
.reveal .controls.deemphasize-back-arrows .navigate-left.enabled, .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled,
.reveal .controls.deemphasize-back-arrows .navigate-up.enabled { .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled {
opacity: 0.3; } opacity: 0.3; }
.reveal .controls.deemphasize-back-arrows .navigate-left.enabled:hover, .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled:hover,
.reveal .controls.deemphasize-back-arrows .navigate-up.enabled:hover { .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled:hover {
opacity: 1; } 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 { .reveal .controls .enabled {
visibility: visible; visibility: visible;
opacity: 0.7; opacity: 0.7;

View file

@ -333,11 +333,11 @@ body {
transform: translateX(-50%) rotate( -90deg ); transform: translateX(-50%) rotate( -90deg );
} }
// The deemphasize back arrows option strongly deemphasizes // Back arrow style: "deemphasized":
// backwards navigation in favor of drawing attention to // Strongly deemphasizes backwards navigation in favor of drawing
// forwards navigation // attention to forwards navigation
&.deemphasize-back-arrows .navigate-left.enabled, &[data-controls-back-arrows="deemphasized"] .navigate-left.enabled,
&.deemphasize-back-arrows .navigate-up.enabled { &[data-controls-back-arrows="deemphasized"] .navigate-up.enabled {
opacity: 0.3; opacity: 0.3;
&:hover { &: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" // Any control button that can be clicked is "enabled"
.enabled { .enabled {
visibility: visible; visibility: visible;

View file

@ -55,8 +55,9 @@
// Determines where controls appear, "edges" or "bottom-right" // Determines where controls appear, "edges" or "bottom-right"
controlsPlacement: 'bottom-right', controlsPlacement: 'bottom-right',
// De-emphasizes backwards navigation controls // Specifies the display rules for backwards navigation arrows;
controlsDeemphasizeBackArrows: true, // "deemphasized", "hidden" or "visible"
controlsBackArrows: 'deemphasized',
// Display a presentation progress bar // Display a presentation progress bar
progress: true, progress: true,
@ -1005,7 +1006,7 @@
dom.progress.style.display = config.progress ? 'block' : 'none'; dom.progress.style.display = config.progress ? 'block' : 'none';
dom.controls.setAttribute( 'data-controls-placement', config.controlsPlacement ); 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 ) { if( config.shuffle ) {
shuffle(); shuffle();