From ea295796eab7661c1e2050d3442e53a44d02ad88 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 11 Feb 2020 15:31:17 +0100 Subject: [PATCH] refactoring and fixed auto-animate test exception --- README.md | 11 ++++++++ js/reveal.js | 33 ++++++++++++------------ test/examples/auto-animate.html | 2 +- test/test-auto-animate.html | 45 ++++++++++++++++++--------------- 4 files changed, 53 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 7f78d97..fd35581 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/ - [Vertical Slide Navigation](#vertical-slide-navigation) - [Touch Navigation](#touch-navigation) - [Lazy Loading](#lazy-loading) +- [Auto-Animate](#auto-animate) - [API](#api) - [Custom Key Bindings](#custom-key-bindings) - [Slide Changed Event](#slide-changed-event) @@ -543,6 +544,16 @@ Reveal.configure({ }); ``` +### Auto-Animate + +TBD + +#### Slide & Element Specific Settings +TBD. How to use data-attributes to override transition settings. + +#### Custom Element Matcher +TBD. How to implement your own element matcher. + ### Vertical Slide Navigation Slides can be nested within other slides to create vertical stacks (see [Markup](#markup)). When presenting, you use the left/right arrows to step through the main (horizontal) slides. When you arrive at a vertical stack you can optionally press the up/down arrows to view the vertical slides or skip past them by pressing the right arrow. Here's an example showing a bird's-eye view of what this looks like in action: diff --git a/js/reveal.js b/js/reveal.js index f44b36f..2943619 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3854,7 +3854,7 @@ delete element.dataset.autoAnimateTarget; } ); - var animationOptions = getAutoAnimateOptions( toSlide, { + var slideOptions = getAutoAnimateOptions( toSlide, { // If our slides are centered vertically, we need to // account for their difference in position when @@ -3869,7 +3869,7 @@ // Inject our auto-animate styles for this transition autoAnimateStyleSheet.innerHTML = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) { - return getAutoAnimateCSS( elements[0], elements[1], elements[2] || {}, animationOptions, autoAnimateCounter++ ); + return getAutoAnimateCSS( elements[0], elements[1], elements[2] || {}, slideOptions, autoAnimateCounter++ ); } ).join( '' ); // Start the animation next cycle @@ -3920,11 +3920,11 @@ * @param {HTMLElement} from * @param {HTMLElement} to * @param {Object} elementOptions Options for this element pair - * @param {Object} animationOptions Options for all elements in + * @param {Object} slideOptions Options set at the slide level * @param {String} id Unique ID that we can use to identify this * auto-animate element in the DOM */ - function getAutoAnimateCSS( from, to, elementOptions, animationOptions, id ) { + function getAutoAnimateCSS( from, to, elementOptions, slideOptions, id ) { // 'from' elements are given a data-auto-animate-target with no value, // 'to' elements are are given a data-auto-animate-target with an ID @@ -3933,13 +3933,13 @@ // Each element may override any of the auto-animate options // like transition easing, duration and delay - animationOptions = getAutoAnimateOptions( to, animationOptions ); + var options = getAutoAnimateOptions( to, slideOptions ); // Individual transition settings can be overridden via // element options - if( typeof elementOptions.delay !== 'undefined' ) animationOptions.delay = elementOptions.delay; - if( typeof elementOptions.duration !== 'undefined' ) animationOptions.duration = elementOptions.duration; - if( typeof elementOptions.easing !== 'undefined' ) animationOptions.easing = elementOptions.easing; + if( typeof elementOptions.delay !== 'undefined' ) options.delay = elementOptions.delay; + if( typeof elementOptions.duration !== 'undefined' ) options.duration = elementOptions.duration; + if( typeof elementOptions.easing !== 'undefined' ) options.easing = elementOptions.easing; var fromProps = getAutoAnimatableProperties( 'from', from, elementOptions ), toProps = getAutoAnimatableProperties( 'to', to, elementOptions ); @@ -3948,7 +3948,7 @@ fromProps.styles['transition'] = 'none'; // transition to the 'to' state - toProps.styles['transition'] = 'all '+ animationOptions.duration +'s '+ animationOptions.easing + ' ' + animationOptions.delay + 's'; + toProps.styles['transition'] = 'all '+ options.duration +'s '+ options.easing + ' ' + options.delay + 's'; // If translation and/or scalin are enabled, offset the // 'to' element so that it starts out at the same position @@ -3957,7 +3957,7 @@ var delta = { x: fromProps.x - toProps.x, - y: fromProps.y - toProps.y + animationOptions.offsetY, + y: fromProps.y - toProps.y + options.offsetY, scaleX: fromProps.width / toProps.width, scaleY: fromProps.height / toProps.height }; @@ -3999,12 +3999,12 @@ * that can be auto-animated for the given element * and their respective values. */ - function getAutoAnimatableProperties( direction, element, options ) { + function getAutoAnimatableProperties( direction, element, elementOptions ) { var properties = { styles: [] }; // Position and size - if( options.translate !== false || options.scale !== false ) { + if( elementOptions.translate !== false || elementOptions.scale !== false ) { properties.x = element.offsetLeft; properties.y = element.offsetTop; properties.width = element.offsetWidth; @@ -4014,7 +4014,7 @@ var computedStyles = window.getComputedStyle( element ); // CSS styles - ( options.styles || config.autoAnimateStyles ).forEach( function( style ) { + ( elementOptions.styles || config.autoAnimateStyles ).forEach( function( style ) { var value; // `style` is either the property name directly, or an object @@ -4067,9 +4067,10 @@ } /** - * Identifies matching elements between slides. You can specify - * a custom matcher function by using the autoAnimateMatcher - * config option. + * Identifies matching elements between slides. + * + * You can specify a custom matcher function by using + * the autoAnimateMatcher config option. */ function findAutoAnimatePairs( fromSlide, toSlide ) { diff --git a/test/examples/auto-animate.html b/test/examples/auto-animate.html index 7603ecb..b8fca80 100644 --- a/test/examples/auto-animate.html +++ b/test/examples/auto-animate.html @@ -30,7 +30,7 @@ function Example() {
-

Auto-Matched Content (no IDs)

+

Auto-Matched Content (no IDs)

This will fade out

This element is unmatched

diff --git a/test/test-auto-animate.html b/test/test-auto-animate.html index 2d75710..6e3080d 100644 --- a/test/test-auto-animate.html +++ b/test/test-auto-animate.html @@ -45,20 +45,19 @@