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

5
css/reveal.css
View File

@@ -20,7 +20,7 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
.reveal time, .reveal mark, .reveal audio, video {
.reveal time, .reveal mark, .reveal audio, .reveal video {
margin: 0;
padding: 0;
border: 0;
@@ -989,7 +989,8 @@ html:-moz-full-screen-ancestor {
-webkit-perspective: 700px;
perspective: 700px; }
.reveal.overview .slides section {
height: 700px;
height: 100%;
top: 0 !important;
opacity: 1 !important;
overflow: hidden;
visibility: visible !important;

3
css/reveal.scss
View File

@@ -1022,7 +1022,8 @@ html:-moz-full-screen-ancestor {
perspective: 700px;
.slides section {
height: 700px;
height: 100%;
top: 0 !important;
opacity: 1 !important;
overflow: hidden;
visibility: visible !important;

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( ' ' )
} );