more flexible back arrow controls option
This commit is contained in:
parent
e45a425575
commit
2155415767
3 changed files with 25 additions and 12 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in a new issue