From 312eafe2e0d31bea49cfb7e0f8eb4b54c45c2b71 Mon Sep 17 00:00:00 2001 From: hakimel Date: Mon, 28 Jan 2013 18:58:32 -0500 Subject: [PATCH] feature detect zoom with fallback on transform, allow percent units for deck width/height (#310) --- js/reveal.js | 52 ++++++++++++++++++++++++++++++++++++++++-------- js/reveal.min.js | 4 ++-- 2 files changed, 46 insertions(+), 10 deletions(-) diff --git a/js/reveal.js b/js/reveal.js index 9984ce6a..2819608b 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -17,8 +17,11 @@ var Reveal = (function(){ // Configurations defaults, can be overridden at initialization time config = { + // The "normal" size of the presentation, aspect ratio will be preserved + // when the presentation is scaled to fit different resolutions width: 1024, height: 768, + padding: 0.1, // Display controls in the bottom right corner @@ -552,16 +555,49 @@ var Reveal = (function(){ */ function layout() { - dom.slides.style.width = config.width + 'px'; - dom.slides.style.height = config.height + 'px'; + // Available space to scale within + var availableWidth = dom.wrapper.offsetWidth, + availableHeight = dom.wrapper.offsetHeight; - var availableWidth = window.innerWidth - ( window.innerWidth * config.padding * 2 ), - availableHeight = window.innerHeight - ( window.innerHeight * config.padding * 2 ); + // Dimensions of the content + 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%)'; - dom.slides.style.zoom = scale; + // Slide height may be a percentage of available height + 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 ) { @@ -569,7 +605,7 @@ var Reveal = (function(){ var slides = toArray( document.querySelectorAll( SLIDES_SELECTOR ) ); // 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++ ) { var slide = slides[ i ]; diff --git a/js/reveal.min.js b/js/reveal.min.js index fa4ea6eb..e704f527 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,8 +1,8 @@ /*! - * reveal.js 2.3 (2013-01-27, 23:26) + * reveal.js 2.3 (2013-01-28, 18:56) * http://lab.hakim.se/reveal-js * MIT licensed * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ -var Reveal=function(){"use strict";function w(e){if(!p&&!h){document.body.setAttribute("class","no-transforms");return}window.addEventListener("load",H,!1),L(i,e),S(),x()}function E(){c.theme=document.querySelector("#theme"),c.wrapper=document.querySelector(".reveal"),c.slides=document.querySelector(".reveal .slides");if(!c.wrapper.querySelector(".progress")&&i.progress){var e=document.createElement("div");e.classList.add("progress"),e.innerHTML="",c.wrapper.appendChild(e)}if(!c.wrapper.querySelector(".controls")&&i.controls){var t=document.createElement("aside");t.classList.add("controls"),t.innerHTML='
',c.wrapper.appendChild(t)}if(!c.wrapper.querySelector(".state-background")){var n=document.createElement("div");n.classList.add("state-background"),c.wrapper.appendChild(n)}if(!c.wrapper.querySelector(".pause-overlay")){var r=document.createElement("div");r.classList.add("pause-overlay"),c.wrapper.appendChild(r)}c.progress=document.querySelector(".reveal .progress"),c.progressbar=document.querySelector(".reveal .progress span"),i.controls&&(c.controls=document.querySelector(".reveal .controls"),c.controlsLeft=A(document.querySelectorAll(".navigate-left")),c.controlsRight=A(document.querySelectorAll(".navigate-right")),c.controlsUp=A(document.querySelectorAll(".navigate-up")),c.controlsDown=A(document.querySelectorAll(".navigate-down")),c.controlsPrev=A(document.querySelectorAll(".navigate-prev")),c.controlsNext=A(document.querySelectorAll(".navigate-next")))}function S(){navigator.userAgent.match(/(iphone|ipod)/i)&&(document.documentElement.style.overflow="scroll",document.body.style.height="120%",window.addEventListener("load",_,!1),window.addEventListener("orientationchange",_,!1))}function x(){function o(){t.length&&head.js.apply(null,t),T()}var e=[],t=[];for(var n=0,r=i.dependencies.length;n3?"none":"block"}n[o].classList.remove("past"),n[o].classList.remove("present"),n[o].classList.remove("future"),ot&&n[o].classList.add("future"),u.querySelector("section")&&n[o].classList.add("stack")}n[t].classList.add("present");var f=n[t].getAttribute("data-state");f&&(l=l.concat(f.split(" ")));var c=n[t].getAttribute("data-autoslide");c?s=parseInt(c,10):s=i.autoSlide}else t=0;return t}function K(){if(i.progress&&c.progress){var n=A(document.querySelectorAll(t)),r=document.querySelectorAll(e+":not(.stack)").length,s=0;e:for(var o=0;o0,right:o0,down:u0||u>0)t+=o;u>0&&(t+="/"+u)}window.location.hash=t}}}function et(e){var n=o,r=u;if(e){var i=!!e.parentNode.nodeName.match(/section/gi),s=i?e.parentNode:e,a=A(document.querySelectorAll(t));n=Math.max(a.indexOf(s),0),i&&(r=Math.max(A(e.parentNode.querySelectorAll("section")).indexOf(e),0))}return{h:n,v:r}}function tt(){if(document.querySelector(n+".present")){var e=document.querySelectorAll(n+".present .fragment:not(.visible)");if(e.length)return e[0].classList.add("visible"),D("fragmentshown",{fragment:e[0]}),!0}else{var r=document.querySelectorAll(t+".present .fragment:not(.visible)");if(r.length)return r[0].classList.add("visible"),D("fragmentshown",{fragment:r[0]}),!0}return!1}function nt(){if(document.querySelector(n+".present")){var e=document.querySelectorAll(n+".present .fragment.visible");if(e.length)return e[e.length-1].classList.remove("visible"),D("fragmenthidden",{fragment:e[e.length-1]}),!0}else{var r=document.querySelectorAll(t+".present .fragment.visible");if(r.length)return r[r.length-1].classList.remove("visible"),D("fragmenthidden",{fragment:r[r.length-1]}),!0}return!1}function rt(){clearTimeout(v),s&&(v=setTimeout(ft,s))}function it(){(G().left&&R()||nt()===!1)&&$(o-1)}function st(){(G().right&&R()||tt()===!1)&&$(o+1)}function ot(){(G().up&&R()||nt()===!1)&&$(o,u-1)}function ut(){(G().down&&R()||tt()===!1)&&$(o,u+1)}function at(){if(nt()===!1)if(G().up)ot();else{var e=document.querySelector(t+".past:nth-child("+o+")");e&&(u=e.querySelectorAll("section").length+1||undefined,o--,$())}}function ft(){tt()===!1&&(G().down?ut():st()),rt()}function lt(e){var t=document.activeElement,n=!(!document.activeElement||!document.activeElement.type&&!document.activeElement.href&&document.activeElement.contentEditable==="inherit");if(n||e.shiftKey||e.altKey||e.ctrlKey||e.metaKey)return;var r=!0;switch(e.keyCode){case 80:case 33:at();break;case 78:case 34:ft();break;case 72:case 37:it();break;case 76:case 39:st();break;case 75:case 38:ot();break;case 74:case 40:ut();break;case 36:$(0);break;case 35:$(Number.MAX_VALUE);break;case 32:R()?I():ft();break;case 13:R()?I():r=!1;break;case 66:case 190:case 191:X();break;case 70:U();break;default:r=!1}r?e.preventDefault():e.keyCode===27&&h&&(q(),e.preventDefault()),rt()}function ct(e){b.startX=e.touches[0].clientX,b.startY=e.touches[0].clientY,b.startCount=e.touches.length,e.touches.length===2&&i.overview&&(b.startSpan=O({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:b.startX,y:b.startY}))}function ht(e){if(!b.handled){var t=e.touches[0].clientX,n=e.touches[0].clientY;if(e.touches.length===2&&b.startCount===2&&i.overview){var r=O({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:b.startX,y:b.startY});Math.abs(b.startSpan-r)>b.threshold&&(b.handled=!0,rb.threshold&&Math.abs(s)>Math.abs(o)?(b.handled=!0,it()):s<-b.threshold&&Math.abs(s)>Math.abs(o)?(b.handled=!0,st()):o>b.threshold?(b.handled=!0,ot()):o<-b.threshold&&(b.handled=!0,ut()),e.preventDefault()}}else navigator.userAgent.match(/android/gi)&&e.preventDefault()}function pt(e){b.handled=!1}function dt(e){clearTimeout(d),d=setTimeout(function(){var t=e.detail||-e.wheelDelta;t>0?ft():at()},100)}function vt(e){var n=A(document.querySelectorAll(t)).length,r=Math.floor(e.clientX/c.wrapper.offsetWidth*n);$(r)}function mt(e){Y()}function gt(e){H()}function yt(e){if(R()){e.preventDefault(),I();var t=e.target;while(t&&!t.nodeName.match(/section/gi))t=t.parentNode;if(t.nodeName.match(/section/gi)){var n=parseInt(t.getAttribute("data-index-h"),10),r=parseInt(t.getAttribute("data-index-v"),10);$(n,r)}}}var e=".reveal .slides section",t=".reveal .slides>section",n=".reveal .slides>section.present>section",r=".reveal .slides>section:first-child",i={width:1024,height:768,padding:.1,controls:!0,progress:!0,history:!1,keyboard:!0,overview:!0,center:!0,touch:!0,loop:!1,rtl:!1,autoSlide:0,mouseWheel:!1,rollingLinks:!0,theme:null,transition:"default",dependencies:[]},s=i.autoSlide,o=0,u=0,a,f,l=[],c={},h="WebkitPerspective"in document.body.style||"MozPerspective"in document.body.style||"msPerspective"in document.body.style||"OPerspective"in document.body.style||"perspective"in document.body.style,p="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style,d=0,v=0,m=0,g=0,y=0,b={startX:0,startY:0,startSpan:0,startCount:0,handled:!1,threshold:80};return{initialize:w,slide:$,left:it,right:st,up:ot,down:ut,prev:at,next:ft,prevFragment:nt,nextFragment:tt,navigateTo:$,navigateLeft:it,navigateRight:st,navigateUp:ot,navigateDown:ut,navigatePrev:at,navigateNext:ft,layout:H,toggleOverview:q,togglePause:X,addEventListeners:C,removeEventListeners:k,getIndices:et,getPreviousSlide:function(){return a},getCurrentSlide:function(){return f},getQueryHash:function(){var e={};return location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(t){e[t.split("=").shift()]=t.split("=").pop()}),e},addEventListener:function(e,t,n){"addEventListener"in window&&(c.wrapper||document.querySelector(".reveal")).addEventListener(e,t,n)},removeEventListener:function(e,t,n){"addEventListener"in window&&(c.wrapper||document.querySelector(".reveal")).removeEventListener(e,t,n)}}}(); \ No newline at end of file +var Reveal=function(){"use strict";function w(e){if(!p&&!h){document.body.setAttribute("class","no-transforms");return}window.addEventListener("load",H,!1),L(i,e),S(),x()}function E(){c.theme=document.querySelector("#theme"),c.wrapper=document.querySelector(".reveal"),c.slides=document.querySelector(".reveal .slides");if(!c.wrapper.querySelector(".progress")&&i.progress){var e=document.createElement("div");e.classList.add("progress"),e.innerHTML="",c.wrapper.appendChild(e)}if(!c.wrapper.querySelector(".controls")&&i.controls){var t=document.createElement("aside");t.classList.add("controls"),t.innerHTML='
',c.wrapper.appendChild(t)}if(!c.wrapper.querySelector(".state-background")){var n=document.createElement("div");n.classList.add("state-background"),c.wrapper.appendChild(n)}if(!c.wrapper.querySelector(".pause-overlay")){var r=document.createElement("div");r.classList.add("pause-overlay"),c.wrapper.appendChild(r)}c.progress=document.querySelector(".reveal .progress"),c.progressbar=document.querySelector(".reveal .progress span"),i.controls&&(c.controls=document.querySelector(".reveal .controls"),c.controlsLeft=A(document.querySelectorAll(".navigate-left")),c.controlsRight=A(document.querySelectorAll(".navigate-right")),c.controlsUp=A(document.querySelectorAll(".navigate-up")),c.controlsDown=A(document.querySelectorAll(".navigate-down")),c.controlsPrev=A(document.querySelectorAll(".navigate-prev")),c.controlsNext=A(document.querySelectorAll(".navigate-next")))}function S(){navigator.userAgent.match(/(iphone|ipod)/i)&&(document.documentElement.style.overflow="scroll",document.body.style.height="120%",window.addEventListener("load",_,!1),window.addEventListener("orientationchange",_,!1))}function x(){function o(){t.length&&head.js.apply(null,t),T()}var e=[],t=[];for(var n=0,r=i.dependencies.length;n3?"none":"block"}n[o].classList.remove("past"),n[o].classList.remove("present"),n[o].classList.remove("future"),ot&&n[o].classList.add("future"),u.querySelector("section")&&n[o].classList.add("stack")}n[t].classList.add("present");var f=n[t].getAttribute("data-state");f&&(l=l.concat(f.split(" ")));var c=n[t].getAttribute("data-autoslide");c?s=parseInt(c,10):s=i.autoSlide}else t=0;return t}function K(){if(i.progress&&c.progress){var n=A(document.querySelectorAll(t)),r=document.querySelectorAll(e+":not(.stack)").length,s=0;e:for(var o=0;o0,right:o0,down:u0||u>0)t+=o;u>0&&(t+="/"+u)}window.location.hash=t}}}function et(e){var n=o,r=u;if(e){var i=!!e.parentNode.nodeName.match(/section/gi),s=i?e.parentNode:e,a=A(document.querySelectorAll(t));n=Math.max(a.indexOf(s),0),i&&(r=Math.max(A(e.parentNode.querySelectorAll("section")).indexOf(e),0))}return{h:n,v:r}}function tt(){if(document.querySelector(n+".present")){var e=document.querySelectorAll(n+".present .fragment:not(.visible)");if(e.length)return e[0].classList.add("visible"),D("fragmentshown",{fragment:e[0]}),!0}else{var r=document.querySelectorAll(t+".present .fragment:not(.visible)");if(r.length)return r[0].classList.add("visible"),D("fragmentshown",{fragment:r[0]}),!0}return!1}function nt(){if(document.querySelector(n+".present")){var e=document.querySelectorAll(n+".present .fragment.visible");if(e.length)return e[e.length-1].classList.remove("visible"),D("fragmenthidden",{fragment:e[e.length-1]}),!0}else{var r=document.querySelectorAll(t+".present .fragment.visible");if(r.length)return r[r.length-1].classList.remove("visible"),D("fragmenthidden",{fragment:r[r.length-1]}),!0}return!1}function rt(){clearTimeout(v),s&&(v=setTimeout(ft,s))}function it(){(G().left&&R()||nt()===!1)&&$(o-1)}function st(){(G().right&&R()||tt()===!1)&&$(o+1)}function ot(){(G().up&&R()||nt()===!1)&&$(o,u-1)}function ut(){(G().down&&R()||tt()===!1)&&$(o,u+1)}function at(){if(nt()===!1)if(G().up)ot();else{var e=document.querySelector(t+".past:nth-child("+o+")");e&&(u=e.querySelectorAll("section").length+1||undefined,o--,$())}}function ft(){tt()===!1&&(G().down?ut():st()),rt()}function lt(e){var t=document.activeElement,n=!(!document.activeElement||!document.activeElement.type&&!document.activeElement.href&&document.activeElement.contentEditable==="inherit");if(n||e.shiftKey||e.altKey||e.ctrlKey||e.metaKey)return;var r=!0;switch(e.keyCode){case 80:case 33:at();break;case 78:case 34:ft();break;case 72:case 37:it();break;case 76:case 39:st();break;case 75:case 38:ot();break;case 74:case 40:ut();break;case 36:$(0);break;case 35:$(Number.MAX_VALUE);break;case 32:R()?I():ft();break;case 13:R()?I():r=!1;break;case 66:case 190:case 191:X();break;case 70:U();break;default:r=!1}r?e.preventDefault():e.keyCode===27&&h&&(q(),e.preventDefault()),rt()}function ct(e){b.startX=e.touches[0].clientX,b.startY=e.touches[0].clientY,b.startCount=e.touches.length,e.touches.length===2&&i.overview&&(b.startSpan=O({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:b.startX,y:b.startY}))}function ht(e){if(!b.handled){var t=e.touches[0].clientX,n=e.touches[0].clientY;if(e.touches.length===2&&b.startCount===2&&i.overview){var r=O({x:e.touches[1].clientX,y:e.touches[1].clientY},{x:b.startX,y:b.startY});Math.abs(b.startSpan-r)>b.threshold&&(b.handled=!0,rb.threshold&&Math.abs(s)>Math.abs(o)?(b.handled=!0,it()):s<-b.threshold&&Math.abs(s)>Math.abs(o)?(b.handled=!0,st()):o>b.threshold?(b.handled=!0,ot()):o<-b.threshold&&(b.handled=!0,ut()),e.preventDefault()}}else navigator.userAgent.match(/android/gi)&&e.preventDefault()}function pt(e){b.handled=!1}function dt(e){clearTimeout(d),d=setTimeout(function(){var t=e.detail||-e.wheelDelta;t>0?ft():at()},100)}function vt(e){var n=A(document.querySelectorAll(t)).length,r=Math.floor(e.clientX/c.wrapper.offsetWidth*n);$(r)}function mt(e){Y()}function gt(e){H()}function yt(e){if(R()){e.preventDefault(),I();var t=e.target;while(t&&!t.nodeName.match(/section/gi))t=t.parentNode;if(t.nodeName.match(/section/gi)){var n=parseInt(t.getAttribute("data-index-h"),10),r=parseInt(t.getAttribute("data-index-v"),10);$(n,r)}}}var e=".reveal .slides section",t=".reveal .slides>section",n=".reveal .slides>section.present>section",r=".reveal .slides>section:first-child",i={width:1024,height:768,padding:.1,controls:!0,progress:!0,history:!1,keyboard:!0,overview:!0,center:!0,touch:!0,loop:!1,rtl:!1,autoSlide:0,mouseWheel:!1,rollingLinks:!0,theme:null,transition:"default",dependencies:[]},s=i.autoSlide,o=0,u=0,a,f,l=[],c={},h="WebkitPerspective"in document.body.style||"MozPerspective"in document.body.style||"msPerspective"in document.body.style||"OPerspective"in document.body.style||"perspective"in document.body.style,p="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style,d=0,v=0,m=0,g=0,y=0,b={startX:0,startY:0,startSpan:0,startCount:0,handled:!1,threshold:80};return{initialize:w,slide:$,left:it,right:st,up:ot,down:ut,prev:at,next:ft,prevFragment:nt,nextFragment:tt,navigateTo:$,navigateLeft:it,navigateRight:st,navigateUp:ot,navigateDown:ut,navigatePrev:at,navigateNext:ft,layout:H,toggleOverview:q,togglePause:X,addEventListeners:C,removeEventListeners:k,getIndices:et,getPreviousSlide:function(){return a},getCurrentSlide:function(){return f},getQueryHash:function(){var e={};return location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(t){e[t.split("=").shift()]=t.split("=").pop()}),e},addEventListener:function(e,t,n){"addEventListener"in window&&(c.wrapper||document.querySelector(".reveal")).addEventListener(e,t,n)},removeEventListener:function(e,t,n){"addEventListener"in window&&(c.wrapper||document.querySelector(".reveal")).removeEventListener(e,t,n)}}}(); \ No newline at end of file