xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

overview now works with percentage based width/height #1247

Browse Source
This commit is contained in:
Hakim El Hattab
2016-04-13 15:21:30 +02:00
parent cb092e60bf
commit 5dd9067150
3 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
js/reveal.js
View File

@ -166,6 +166,10 @@
// Flags if the overview mode is currently active
overview = false,
// Holds the dimensions of our overview slides, including margins
overviewSlideWidth = null,
overviewSlideHeight = null,
// The horizontal and vertical index of the currently active slide
indexh,
indexv,
@ -1798,6 +1802,17 @@
}
} );
// Calculate slide sizes
var margin = 70;
var slideSize = getComputedSlideSize();
overviewSlideWidth = slideSize.width + margin;
overviewSlideHeight = slideSize.height + margin;
// Reverse in RTL mode
if( config.rtl ) {
overviewSlideWidth = -overviewSlideWidth;
}
updateSlidesVisibility();
layoutOverview();
updateOverview();
@ -1821,19 +1836,10 @@
*/
function layoutOverview() {
var margin = 70;
var slideWidth = config.width + margin,
slideHeight = config.height + margin;
// Reverse in RTL mode
if( config.rtl ) {
slideWidth = -slideWidth;
}
// Layout slides
toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {
hslide.setAttribute( 'data-index-h', h );
transformElement( hslide, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' );
transformElement( hslide, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );
if( hslide.classList.contains( 'stack' ) ) {
@ -1841,7 +1847,7 @@
vslide.setAttribute( 'data-index-h', h );
vslide.setAttribute( 'data-index-v', v );
transformElement( vslide, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
transformElement( vslide, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );
} );
}
@ -1849,10 +1855,10 @@
// Layout slide backgrounds
toArray( dom.background.childNodes ).forEach( function( hbackground, h ) {
transformElement( hbackground, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' );
transformElement( hbackground, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );
toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) {
transformElement( vbackground, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' );
transformElement( vbackground, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );
} );
} );
@ -1864,19 +1870,10 @@
*/
function updateOverview() {
var margin = 70;
var slideWidth = config.width + margin,
slideHeight = config.height + margin;
// Reverse in RTL mode
if( config.rtl ) {
slideWidth = -slideWidth;
}
transformSlides( {
overview: [
'translateX('+ ( -indexh * slideWidth ) +'px)',
'translateY('+ ( -indexv * slideHeight ) +'px)',
'translateX('+ ( -indexh * overviewSlideWidth ) +'px)',
'translateY('+ ( -indexv * overviewSlideHeight ) +'px)',
'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)'
].join( ' ' )
} );