Browse Source

hide vertical arrows when navigationMode is 'linear' #2307

Hakim El Hattab 5 years ago
parent
commit
481208f43f
3 changed files with 23 additions and 2 deletions
  1. 6 0
      css/reveal.css
  2. 7 0
      css/reveal.scss
  3. 10 2
      js/reveal.js

+ 6 - 0
css/reveal.css

@@ -343,10 +343,16 @@ body {
   .reveal .controls .enabled.fragmented:hover {
     opacity: 1; }
 
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
+  display: none; }
+
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
 .reveal:not(.has-vertical-slides) .controls .navigate-left {
   bottom: 1.4em;
   right: 5.5em; }
 
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
 .reveal:not(.has-vertical-slides) .controls .navigate-right {
   bottom: 1.4em;
   right: 0.5em; }

+ 7 - 0
css/reveal.scss

@@ -407,12 +407,19 @@ $controlsArrowAngleActive: 36deg;
 	}
 }
 
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
+	display: none;
+}
+
 // Adjust the layout when there are no vertical slides
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
 .reveal:not(.has-vertical-slides) .controls .navigate-left {
 	bottom: $controlArrowSpacing;
 	right: 0.5em + $controlArrowSpacing + $controlArrowSize;
 }
 
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
 .reveal:not(.has-vertical-slides) .controls .navigate-right {
 	bottom: $controlArrowSpacing;
 	right: 0.5em;

+ 10 - 2
js/reveal.js

@@ -1362,6 +1362,14 @@
 
 		dom.slideNumber.style.display = slideNumberDisplay;
 
+		// Add the navigation mode to the DOM so we can adjust styling
+		if( config.navigationMode !== 'default' ) {
+			dom.wrapper.setAttribute( 'data-navigation-mode', config.navigationMode );
+		}
+		else {
+			dom.wrapper.removeAttribute( 'data-navigation-mode' );
+		}
+
 		sync();
 
 	}
@@ -5316,8 +5324,8 @@
 	/**
 	 * Event handler for navigation control buttons.
 	 */
-	function onNavigateLeftClicked( event ) { event.preventDefault(); onUserInput(); navigateLeft(); }
-	function onNavigateRightClicked( event ) { event.preventDefault(); onUserInput(); navigateRight(); }
+	function onNavigateLeftClicked( event ) { event.preventDefault(); onUserInput(); config.navigationMode === 'linear' ? navigatePrev() : navigateLeft(); }
+	function onNavigateRightClicked( event ) { event.preventDefault(); onUserInput(); config.navigationMode === 'linear' ? navigateNext() : navigateRight(); }
 	function onNavigateUpClicked( event ) { event.preventDefault(); onUserInput(); navigateUp(); }
 	function onNavigateDownClicked( event ) { event.preventDefault(); onUserInput(); navigateDown(); }
 	function onNavigatePrevClicked( event ) { event.preventDefault(); onUserInput(); navigatePrev(); }