jan/revproxy-presentation
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

feature detect zoom with fallback on transform, allow percent units for deck width/height (#310)

Browse source
This commit is contained in:
hakimel 2013-01-28 18:58:32 -05:00
parent d1c74523a4
commit 312eafe2e0
2 changed files with 46 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
js/reveal.js
View file

@ -17,8 +17,11 @@ var Reveal = (function(){
// Configurations defaults, can be overridden at initialization time // Configurations defaults, can be overridden at initialization time
config = { config = {
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions
width: 1024, width: 1024,
height: 768, height: 768,
padding: 0.1, padding: 0.1,
// Display controls in the bottom right corner // Display controls in the bottom right corner
@ -552,16 +555,49 @@ var Reveal = (function(){
*/ */
function layout() { function layout() {
dom.slides.style.width = config.width + 'px'; // Available space to scale within
dom.slides.style.height = config.height + 'px'; var availableWidth = dom.wrapper.offsetWidth,
availableHeight = dom.wrapper.offsetHeight;
var availableWidth = window.innerWidth - ( window.innerWidth * config.padding * 2 ), // Dimensions of the content
availableHeight = window.innerHeight - ( window.innerHeight * config.padding * 2 ); var slideWidth = config.width,
slideHeight = config.height;
var scale = Math.min( availableWidth / config.width, availableHeight / config.height ); // Slide width may be a percentage of available width
if( typeof slideWidth === 'string' && /%$/.test( slideWidth ) ) {
slideWidth = parseInt( slideWidth, 10 ) / 100 * availableWidth;
}
// dom.slides.style.WebkitTransform = 'translate(-50%, -50%) scale('+ scale +') translate(50%, 50%)'; // Slide height may be a percentage of available height
dom.slides.style.zoom = scale; if( typeof slideHeight === 'string' && /%$/.test( slideHeight ) ) {
slideHeight = parseInt( slideHeight, 10 ) / 100 * availableHeight;
}
dom.slides.style.width = slideWidth + 'px';
dom.slides.style.height = slideHeight + 'px';
// Reduce availabe space by padding
availableWidth = availableWidth - ( availableHeight * config.padding * 2 );
availableHeight = availableHeight - ( availableHeight * config.padding * 2 );
// Determine scale of content to fit within available space
var scale = Math.min( availableWidth / slideWidth, availableHeight / slideHeight );
// Prefer applying scale via zoom since Chrome blurs scaled content
// with nested transforms
if( typeof dom.slides.style.zoom !== 'undefined' ) {
dom.slides.style.zoom = scale;
}
// Apply scale transform as a fallback
else {
var transform = 'translate(-50%, -50%) scale('+ scale +') translate(50%, 50%)';
dom.slides.style.WebkitTransform = transform;
dom.slides.style.MozTransform = transform;
dom.slides.style.msTransform = transform;
dom.slides.style.OTransform = transform;
dom.slides.style.transform = transform;
}
if( config.center ) { if( config.center ) {
@ -569,7 +605,7 @@ var Reveal = (function(){
var slides = toArray( document.querySelectorAll( SLIDES_SELECTOR ) ); var slides = toArray( document.querySelectorAll( SLIDES_SELECTOR ) );
// Determine the minimum top offset for slides // Determine the minimum top offset for slides
var minTop = -dom.wrapper.offsetHeight / 2; var minTop = -slideHeight / 2;
for( var i = 0, len = slides.length; i < len; i++ ) { for( var i = 0, len = slides.length; i < len; i++ ) {
var slide = slides[ i ]; var slide = slides[ i ];

4
js/reveal.min.js vendored
View file

File diff suppressed because one or more lines are too long