fit-text helper now triggers lazyily when slide enters view distance
parent
f231c53b9c
commit
aa6677911c
|
@ -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;
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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
|
||||
} );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
11
js/reveal.js
11
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
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue