phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

further work on remaining-height helper #244 #490 #561

Browse Source
This commit is contained in:
Hakim El Hattab 2013-08-17 12:11:05 -04:00
parent fecee266b6
commit 0239302f45
2 changed files with 26 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
js/reveal.js
View File

@ -722,43 +722,29 @@ var Reveal = (function(){
} }
function getComputedCSSProperty( element, prop ) {
if( window.getComputedStyle ) {
return window.getComputedStyle( element )[ prop ];
}
else {
return element.currentStyle ? element.currentStyle( prop ) : element.style[ prop ];
}
}
/** /**
* Returns the remaining height within the parent element * Returns the remaining height within the parent of the
* of the target after taking out the height of all * target element after subtracting the height of all
* siblings. * siblings.
* *
* remaining height = [parent height] - [ siblings height] * remaining height = [parent height] - [ siblings height]
*/ */
function getRemainingHeight( element ) { function getRemainingHeight( element, height ) {
var height = 0; height = height || 0;
if( element ) { if( element ) {
var parent = element.parentNode; var parent = element.parentNode;
var siblings = parent.childNodes; var siblings = parent.childNodes;
height = config.height; // Subtract the height of each sibling
// Remove the height of each sibling
toArray( siblings ).forEach( function( sibling ) { toArray( siblings ).forEach( function( sibling ) {
if( typeof sibling.offsetHeight === 'number' && sibling !== element ) { if( typeof sibling.offsetHeight === 'number' && sibling !== element ) {
var marginTop = parseInt( getComputedCSSProperty( sibling, 'margin-top' ), 10 ); var styles = window.getComputedStyle( sibling ),
var marginBottom = parseInt( getComputedCSSProperty( sibling, 'margin-bottom' ), 10 ); marginTop = parseInt( styles[ 'margin-top' ], 10 ),
marginBottom = parseInt( styles[ 'margin-bottom' ], 10 );
console.log( marginTop, marginBottom );
height -= sibling.offsetHeight + marginTop + marginBottom; height -= sibling.offsetHeight + marginTop + marginBottom;
@ -766,6 +752,12 @@ var Reveal = (function(){
} ); } );
var elementStyles = window.getComputedStyle( element );
// Subtract the margins of the target element
height -= parseInt( elementStyles[ 'margin-top' ], 10 ) +
parseInt( elementStyles[ 'margin-bottom' ], 10 );
} }
return height; return height;
@ -1006,7 +998,8 @@ var Reveal = (function(){
// Dimensions of the content // Dimensions of the content
var slideWidth = config.width, var slideWidth = config.width,
slideHeight = config.height; slideHeight = config.height,
slidePadding = 20; // TODO Dig this out of DOM
// Slide width may be a percentage of available width // Slide width may be a percentage of available width
if( typeof slideWidth === 'string' && /%$/.test( slideWidth ) ) { if( typeof slideWidth === 'string' && /%$/.test( slideWidth ) ) {
@ -1021,6 +1014,13 @@ 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
toArray( dom.slides.querySelectorAll( 'section > .remaining-height' ) ).forEach( function( element ) {
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 );
@ -1056,7 +1056,7 @@ var Reveal = (function(){
slide.style.top = 0; slide.style.top = 0;
} }
else { else {
slide.style.top = Math.max( - ( getAbsoluteHeight( slide ) / 2 ) - 20, -slideHeight / 2 ) + 'px'; slide.style.top = Math.max( - ( getAbsoluteHeight( slide ) / 2 ) - slidePadding, -slideHeight / 2 ) + 'px';
} }
} }
else { else {
@ -1067,13 +1067,6 @@ var Reveal = (function(){
updateProgress(); updateProgress();
// Handle sizing of elements with the 'remaining-height' class
toArray( dom.slides.querySelectorAll( 'section > .remaining-height' ) ).forEach( function( element ) {
element.style.height = getRemainingHeight( element ) + 'px';
} );
} }
} }

4
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long