more flexible back arrow controls option
This commit is contained in:
		| @@ -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; | ||||||
|   | |||||||
| @@ -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; | ||||||
|   | |||||||
| @@ -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(); | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user