fit-text helper now triggers lazyily when slide enters view distance

2 files changed, 15 insertions, 11 deletions

diff --git a/js/controllers/slidecontent.js b/js/controllers/slidecontent.js
index 7ed5573..485a2ce 100644
--- a/js/controllers/slidecontent.js
+++ b/js/controllers/slidecontent.js
@@ -2,6 +2,8 @@ import { HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR } from '../utils/c
 import { extend, queryAll, closest } from '../utils/util.js'
 import { isMobile } from '../utils/device.js'
 
+import fitty from 'fitty';
+
 /**
  * Handles loading, unloading and playback of slide
  * content such as images, videos and iframes.
@@ -159,6 +161,19 @@ export default class SlideContent {
 
 		}
 
+		// Autosize text with the r-fit-text class based on the
+		// size of its container. This needs to happen after the
+		// slide is visible in order to measure the text.
+		Array.from( document.querySelectorAll( '.r-fit-text:not([data-fitted])' ) ).forEach( element => {
+			element.dataset.fitted = '';
+			fitty( element, {
+				minSize: 24,
+				maxSize: this.Reveal.getConfig().height * 0.8,
+				observeMutations: false,
+				observeWindow: false
+			} );
+		} );
+
 	}
 
 	/**
diff --git a/js/reveal.js b/js/reveal.js
index 87635e4..4657707 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -25,8 +25,6 @@ import {
 	POST_MESSAGE_METHOD_BLACKLIST
 } from './utils/constants.js'
 
-import fitty from 'fitty';
-
 // The reveal.js version
 export const VERSION = '4.0.2';
 
@@ -283,15 +281,6 @@ export default function( revealElement, options ) {
 		dom.statusElement = createStatusElement();
 
 		dom.wrapper.setAttribute( 'role', 'application' );
-
-		// The r-fit-text helper resizes text to be as large as
-		// possible within its given container
-		fitty( '.r-fit-text', {
-			minSize: 24,
-			maxSize: config.height * 0.8,
-			observeMutations: false,
-			observeWindow: false
-		} );
 	}
 
 	/**