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

This commit is contained in:
Hakim El Hattab 2020-06-09 10:28:01 +02:00
parent f231c53b9c
commit aa6677911c
6 changed files with 24 additions and 14 deletions

View file

@ -16,6 +16,12 @@
box-sizing: border-box;
}
// Text that auto-fits it's container
.reveal .r-fit-text {
display: inline-block; // https://github.com/rikschennink/fitty#performance
white-space: nowrap;
}
// Stack multiple elements on top of each other
.reveal .r-stack {
display: grid;

2
dist/reveal.css vendored

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js vendored

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored

File diff suppressed because one or more lines are too long

View file

@ -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
} );
} );
}
/**

View file

@ -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
} );
}
/**