Browse Source

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

master
Hakim El Hattab 2 years ago
parent
commit
aa6677911c
  1. 6
      css/layout.scss
  2. 2
      dist/reveal.css
  3. 2
      dist/reveal.esm.js
  4. 2
      dist/reveal.js
  5. 15
      js/controllers/slidecontent.js
  6. 11
      js/reveal.js

6
css/layout.scss

@ -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

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js

File diff suppressed because one or more lines are too long

2
dist/reveal.js

File diff suppressed because one or more lines are too long

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

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…
Cancel
Save