getAutoAnimatableProperties()

in js/controllers/autoanimate.js [347:419]
51 lines of code
14 McCabe index (conditional complexity)

	getAutoAnimatableProperties( direction, element, elementOptions ) {

		let config = this.Reveal.getConfig();

		let properties = { styles: [] };

		// Position and size
		if( elementOptions.translate !== false || elementOptions.scale !== false ) {
			let bounds;

			// Custom auto-animate may optionally return a custom tailored
			// measurement function
			if( typeof elementOptions.measure === 'function' ) {
				bounds = elementOptions.measure( element );
			}
			else {
				if( config.center ) {
					// More precise, but breaks when used in combination
					// with zoom for scaling the deck ¯\_(ツ)_/¯
					bounds = element.getBoundingClientRect();
				}
				else {
					let scale = this.Reveal.getScale();
					bounds = {
						x: element.offsetLeft * scale,
						y: element.offsetTop * scale,
						width: element.offsetWidth * scale,
						height: element.offsetHeight * scale
					};
				}
			}

			properties.x = bounds.x;
			properties.y = bounds.y;
			properties.width = bounds.width;
			properties.height = bounds.height;
		}

		const computedStyles = getComputedStyle( element );

		// CSS styles
		( elementOptions.styles || config.autoAnimateStyles ).forEach( style => {
			let value;

			// `style` is either the property name directly, or an object
			// definition of a style property
			if( typeof style === 'string' ) style = { property: style };

			if( typeof style.from !== 'undefined' && direction === 'from' ) {
				value = { value: style.from, explicitValue: true };
			}
			else if( typeof style.to !== 'undefined' && direction === 'to' ) {
				value = { value: style.to, explicitValue: true };
			}
			else {
				// Use a unitless value for line-height so that it inherits properly
				if( style.property === 'line-height' ) {
					value = parseFloat( computedStyles['line-height'] ) / parseFloat( computedStyles['font-size'] );
				}

				if( isNaN(value) ) {
					value = computedStyles[style.property];
				}
			}

			if( value !== '' ) {
				properties.styles[style.property] = value;
			}
		} );

		return properties;

	}