revised remaining height layout logic
This commit is contained in:
parent
6f1dfee81b
commit
04c4fa49b8
4 changed files with 42 additions and 9 deletions
|
@ -355,6 +355,11 @@ body {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reveal .remaining-height {
|
||||||
|
max-width: none;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* CONTROLS
|
* CONTROLS
|
||||||
|
|
2
css/reveal.min.css
vendored
2
css/reveal.min.css
vendored
File diff suppressed because one or more lines are too long
40
js/reveal.js
40
js/reveal.js
|
@ -1014,12 +1014,8 @@ var Reveal = (function(){
|
||||||
dom.slides.style.width = slideWidth + 'px';
|
dom.slides.style.width = slideWidth + 'px';
|
||||||
dom.slides.style.height = slideHeight + 'px';
|
dom.slides.style.height = slideHeight + 'px';
|
||||||
|
|
||||||
// Handle sizing of elements with the 'remaining-height' class
|
// Layout the contents of the slides
|
||||||
toArray( dom.slides.querySelectorAll( 'section > .remaining-height' ) ).forEach( function( element ) {
|
layoutSlideContents( config.width, config.height, slidePadding );
|
||||||
|
|
||||||
element.style.height = getRemainingHeight( element, ( slideHeight - ( slidePadding * 2 ) ) ) + 'px';
|
|
||||||
|
|
||||||
} );
|
|
||||||
|
|
||||||
// Determine scale of content to fit within available space
|
// Determine scale of content to fit within available space
|
||||||
scale = Math.min( availableWidth / slideWidth, availableHeight / slideHeight );
|
scale = Math.min( availableWidth / slideWidth, availableHeight / slideHeight );
|
||||||
|
@ -1071,6 +1067,38 @@ var Reveal = (function(){
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Applies layout logic to the contents of all slides in
|
||||||
|
* the presentation.
|
||||||
|
*/
|
||||||
|
function layoutSlideContents( width, height, padding ) {
|
||||||
|
|
||||||
|
// Handle sizing of elements with the 'remaining-height' class
|
||||||
|
toArray( dom.slides.querySelectorAll( 'section > .remaining-height' ) ).forEach( function( element ) {
|
||||||
|
|
||||||
|
// Determine how much vertical space we can use
|
||||||
|
var remainingHeight = getRemainingHeight( element, ( height - ( padding * 2 ) ) );
|
||||||
|
|
||||||
|
// Consider the aspect ratio of media elements
|
||||||
|
if( /(img|video)/gi.test( element.nodeName ) ) {
|
||||||
|
var nw = element.naturalWidth,
|
||||||
|
nh = element.naturalHeight;
|
||||||
|
|
||||||
|
var es = Math.min( width / nw, remainingHeight / nh );
|
||||||
|
|
||||||
|
element.style.width = ( nw * es ) + 'px';
|
||||||
|
element.style.height = ( nh * es ) + 'px';
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
element.style.width = width + 'px';
|
||||||
|
element.style.height = remainingHeight + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Stores the vertical index of a stack so that the same
|
* Stores the vertical index of a stack so that the same
|
||||||
* vertical slide can be selected when navigating to and
|
* vertical slide can be selected when navigating to and
|
||||||
|
|
4
js/reveal.min.js
vendored
4
js/reveal.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue