comments, tweaks and a new slide highlighting mobile support

This commit is contained in:
Hakim El Hattab 2012-06-02 17:58:09 -04:00
parent 4f08e2aeb0
commit 43da46f06b
2 changed files with 47 additions and 25 deletions

View file

@ -89,6 +89,13 @@
</p> </p>
</section> </section>
<section>
<h2>Works in Mobile Safari</h2>
<p>
Try it out! You can swipe through the slides pinch your way to the overview.
</p>
</section>
<section> <section>
<h2>Transition Styles</h2> <h2>Transition Styles</h2>
<p> <p>
@ -251,13 +258,13 @@ linkify( 'a' );
<div class="progress"><span></span></div> <div class="progress"><span></span></div>
</div> </div>
<script src="js/reveal.js"></script>
<!-- Optional libraries for code syntax highlighting and classList support in IE9 --> <!-- Optional libraries for code syntax highlighting and classList support in IE9 -->
<script src="lib/highlight.js"></script> <script src="lib/highlight.js"></script>
<script src="lib/classList.js"></script> <script src="lib/classList.js"></script>
<script src="js/reveal.js"></script>
<script> <script>
// Parse the query string into a key/value object // Parse the query string into a key/value object
var query = {}; var query = {};

View file

@ -37,17 +37,20 @@ var Reveal = (function(){
dom = {}, dom = {},
// Detect support for CSS 3D transforms // Detect support for CSS 3D transforms
supports3DTransforms = document.body.style['perspectiveProperty'] !== undefined || supports3DTransforms = document.body.style['WebkitPerspective'] !== undefined ||
document.body.style['WebkitPerspective'] !== undefined ||
document.body.style['MozPerspective'] !== undefined || document.body.style['MozPerspective'] !== undefined ||
document.body.style['msPerspective'] !== undefined || document.body.style['msPerspective'] !== undefined ||
document.body.style['OPerspective'] !== undefined, document.body.style['OPerspective'] !== undefined ||
document.body.style['perspective'] !== undefined,
supports2DTransforms = document.body.style['transformProperty'] !== undefined || supports2DTransforms = document.body.style['WebkitTransform'] !== undefined ||
document.body.style['WebkitTransform'] !== undefined ||
document.body.style['MozTransform'] !== undefined || document.body.style['MozTransform'] !== undefined ||
document.body.style['msTransform'] !== undefined || document.body.style['msTransform'] !== undefined ||
document.body.style['OTransform'] !== undefined, document.body.style['OTransform'] !== undefined ||
document.body.style['transform'] !== undefined,
// Detect support for elem.classList
supportsClassList = !!document.body.classList;
// Throttles mouse wheel navigation // Throttles mouse wheel navigation
mouseWheelTimeout = 0, mouseWheelTimeout = 0,
@ -72,10 +75,10 @@ var Reveal = (function(){
*/ */
function initialize( options ) { function initialize( options ) {
if( !supports2DTransforms && !supports3DTransforms ) { if( ( !supports2DTransforms && !supports3DTransforms ) || !supportsClassList ) {
document.body.setAttribute( 'class', 'no-transforms' ); document.body.setAttribute( 'class', 'no-transforms' );
// If the browser doesn't support transforms we won't be // If the browser doesn't support core features we won't be
// using JavaScript to control the presentation // using JavaScript to control the presentation
return; return;
} }
@ -95,6 +98,26 @@ var Reveal = (function(){
// Copy options over to our config object // Copy options over to our config object
extend( config, options ); extend( config, options );
// Updates the presentation to match the current configuration values
configure();
// Read the initial hash
readURL();
// Set up hiding of the browser address bar
if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) {
// Give the page some scrollable overflow
document.documentElement.style.overflow = 'scroll';
document.body.style.height = '120%';
// Events that should trigger the address bar to hide
window.addEventListener( 'load', removeAddressBar, false );
window.addEventListener( 'orientationchange', removeAddressBar, false );
}
}
function configure() {
// Fall back on the 2D transform theme 'linear' // Fall back on the 2D transform theme 'linear'
if( supports3DTransforms === false ) { if( supports3DTransforms === false ) {
config.transition = 'linear'; config.transition = 'linear';
@ -125,21 +148,6 @@ var Reveal = (function(){
// Add some 3D magic to our anchors // Add some 3D magic to our anchors
linkify(); linkify();
} }
// Read the initial hash
readURL();
// Set up hiding of the browser address bar
if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) {
// Give the page some scrollable overflow
document.documentElement.style.overflow = 'scroll';
document.body.style.height = '120%';
// Events that should trigger the address bar to hide
window.addEventListener( 'load', removeAddressBar, false );
window.addEventListener( 'orientationchange', removeAddressBar, false );
}
} }
function addEventListeners() { function addEventListeners() {
@ -178,6 +186,13 @@ var Reveal = (function(){
} }
} }
/**
* Measures the distance in pixels between point a
* and point b.
*
* @param {Object} a point with x/y properties
* @param {Object} b point with x/y properties
*/
function distanceBetween( a, b ) { function distanceBetween( a, b ) {
var dx = a.x - b.x, var dx = a.x - b.x,
dy = a.y - b.y; dy = a.y - b.y;