diff options
| -rw-r--r-- | css/reveal.css | 46 | ||||
| -rw-r--r-- | css/reveal.scss | 50 | ||||
| -rw-r--r-- | js/reveal.js | 45 |
3 files changed, 125 insertions, 16 deletions
diff --git a/css/reveal.css b/css/reveal.css index e7c6b1c..143755d 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -198,6 +198,28 @@ body { -webkit-transform: translateX(-5px); transform: translateX(-5px); } } +@-webkit-keyframes bounce-left { + 0%, 10%, 25%, 40%, 50% { + -webkit-transform: translateX(0); + transform: translateX(0); } + 20% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); } + 30% { + -webkit-transform: translateX(5px); + transform: translateX(5px); } } + +@keyframes bounce-left { + 0%, 10%, 25%, 40%, 50% { + -webkit-transform: translateX(0); + transform: translateX(0); } + 20% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); } + 30% { + -webkit-transform: translateX(5px); + transform: translateX(5px); } } + @-webkit-keyframes bounce-down { 0%, 10%, 25%, 40%, 50% { -webkit-transform: translateY(0); @@ -291,6 +313,9 @@ body { bottom: 3.2em; -webkit-transform: translateX(-10px); transform: translateX(-10px); } + .reveal .controls .navigate-left.highlight { + -webkit-animation: bounce-left 2s 50 both ease-out; + animation: bounce-left 2s 50 both ease-out; } .reveal .controls .navigate-right { right: 0; bottom: 3.2em; @@ -322,13 +347,10 @@ body { .reveal .controls .navigate-down.highlight { -webkit-animation: bounce-down 2s 50 both ease-out; animation: bounce-down 2s 50 both ease-out; } - .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled, .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled { opacity: 0.3; } - .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover, .reveal .controls[data-controls-back-arrows="faded"] .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; } @@ -344,6 +366,24 @@ body { .reveal .controls .enabled.fragmented:hover { opacity: 1; } +.reveal:not(.rtl) .controls[data-controls-back-arrows="faded"] .navigate-left.enabled { + opacity: 0.3; } + .reveal:not(.rtl) .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover { + opacity: 1; } + +.reveal:not(.rtl) .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled { + opacity: 0; + visibility: hidden; } + +.reveal.rtl .controls[data-controls-back-arrows="faded"] .navigate-right.enabled { + opacity: 0.3; } + .reveal.rtl .controls[data-controls-back-arrows="faded"] .navigate-right.enabled:hover { + opacity: 1; } + +.reveal.rtl .controls[data-controls-back-arrows="hidden"] .navigate-right.enabled { + opacity: 0; + visibility: hidden; } + .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up, .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down { display: none; } diff --git a/css/reveal.scss b/css/reveal.scss index 7dcec07..971a9c9 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -230,6 +230,12 @@ body { 30% {transform: translateX(-5px);} } +@keyframes bounce-left { + 0%, 10%, 25%, 40%, 50% {transform: translateX(0);} + 20% {transform: translateX(-10px);} + 30% {transform: translateX(5px);} +} + @keyframes bounce-down { 0%, 10%, 25%, 40%, 50% {transform: translateY(0);} 20% {transform: translateY(10px);} @@ -327,6 +333,10 @@ $controlsArrowAngleActive: 36deg; right: $controlArrowSize + $controlArrowSpacing*2; bottom: $controlArrowSpacing + $controlArrowSize/2; transform: translateX( -10px ); + + &.highlight { + animation: bounce-left 2s 50 both ease-out; + } } .navigate-right { @@ -371,7 +381,6 @@ $controlsArrowAngleActive: 36deg; // Back arrow style: "faded": // Deemphasize backwards navigation arrows in favor of drawing // attention to forwards navigation - &[data-controls-back-arrows="faded"] .navigate-left.enabled, &[data-controls-back-arrows="faded"] .navigate-up.enabled { opacity: 0.3; @@ -382,7 +391,6 @@ $controlsArrowAngleActive: 36deg; // Back arrow style: "hidden": // Never show arrows for backwards navigation - &[data-controls-back-arrows="hidden"] .navigate-left.enabled, &[data-controls-back-arrows="hidden"] .navigate-up.enabled { opacity: 0; visibility: hidden; @@ -408,6 +416,44 @@ $controlsArrowAngleActive: 36deg; } } +.reveal:not(.rtl) .controls { + // Back arrow style: "faded": + // Deemphasize left arrow + &[data-controls-back-arrows="faded"] .navigate-left.enabled { + opacity: 0.3; + + &:hover { + opacity: 1; + } + } + + // Back arrow style: "hidden": + // Never show left arrow + &[data-controls-back-arrows="hidden"] .navigate-left.enabled { + opacity: 0; + visibility: hidden; + } +} + +.reveal.rtl .controls { + // Back arrow style: "faded": + // Deemphasize right arrow in RTL mode + &[data-controls-back-arrows="faded"] .navigate-right.enabled { + opacity: 0.3; + + &:hover { + opacity: 1; + } + } + + // Back arrow style: "hidden": + // Never show right arrow in RTL mode + &[data-controls-back-arrows="hidden"] .navigate-right.enabled { + opacity: 0; + visibility: hidden; + } +} + .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up, .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down { display: none; diff --git a/js/reveal.js b/js/reveal.js index 04b8ff5..2a5814e 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -336,6 +336,7 @@ // Remember which directions that the user has navigated towards hasNavigatedRight = false, + hasNavigatedLeft = false, hasNavigatedDown = false, // Slides may hold a data-state attribute which we pick up and apply @@ -760,9 +761,12 @@ dom.progressbar = dom.progress.querySelector( 'span' ); // Arrow controls + var leftArrowLabel = config.rtl ? "next slide" : "previous slide"; + var rightArrowLabel = config.rtl ? "previous slide" : "next slide"; + dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls', - '<button class="navigate-left" aria-label="previous slide"><div class="controls-arrow"></div></button>' + - '<button class="navigate-right" aria-label="next slide"><div class="controls-arrow"></div></button>' + + '<button class="navigate-left" aria-label="' + leftArrowLabel + '"><div class="controls-arrow"></div></button>' + + '<button class="navigate-right" aria-label="' + rightArrowLabel + '"><div class="controls-arrow"></div></button>' + '<button class="navigate-up" aria-label="above slide"><div class="controls-arrow"></div></button>' + '<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>' ); @@ -787,8 +791,9 @@ dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) ); dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) ); - // The right and down arrows in the standard reveal.js controls + // The left, right and down arrows in the standard reveal.js controls dom.controlsRightArrow = dom.controls.querySelector( '.navigate-right' ); + dom.controlsLeftArrow = dom.controls.querySelector( '.navigate-left' ); dom.controlsDownArrow = dom.controls.querySelector( '.navigate-down' ); dom.statusDiv = createStatusDiv(); @@ -3606,6 +3611,7 @@ } + if( config.controlsTutorial ) { // Highlight control arrows with an animation to ensure @@ -3616,16 +3622,26 @@ else { dom.controlsDownArrow.classList.remove( 'highlight' ); - if( !hasNavigatedRight && routes.right && indexv === 0 ) { - dom.controlsRightArrow.classList.add( 'highlight' ); - } - else { - dom.controlsRightArrow.classList.remove( 'highlight' ); + if (config.rtl) { + + if( !hasNavigatedLeft && routes.left && indexv === 0 ) { + dom.controlsLeftArrow.classList.add( 'highlight' ); + } + else { + dom.controlsLeftArrow.classList.remove( 'highlight' ); + } + + } else { + + if( !hasNavigatedRight && routes.right && indexv === 0 ) { + dom.controlsRightArrow.classList.add( 'highlight' ); + } + else { + dom.controlsRightArrow.classList.remove( 'highlight' ); + } } } - } - } /** @@ -5210,6 +5226,8 @@ function navigateLeft() { + hasNavigatedLeft = true; + // Reverse for RTL if( config.rtl ) { if( ( isOverview() || nextFragment() === false ) && availableRoutes().left ) { @@ -5299,7 +5317,12 @@ */ function navigateNext() { - hasNavigatedRight = true; + if (!config.rtl) { + hasNavigatedRight = true; + } else { + hasNavigatedLeft = true; + } + hasNavigatedDown = true; // Prioritize revealing fragments |