From a30cdaaffc8862556dd0145e5f6fcdc1fbc0851c Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 14 Jan 2012 17:56:11 -0800 Subject: [PATCH] rolled back to classList, promoting poyfill in readme --- README.md | 4 +++- js/reveal.js | 50 ++++++++++++++++++-------------------------------- 2 files changed, 21 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 8e8b4cd8..1edbb070 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ A CSS 3D slideshow tool for quickly creating good looking HTML presentations. Doesn't _rely_ on any external libraries but [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/) is included by default for code highlighting. -Note that this requires a browser with support for CSS 3D transforms and classList. If CSS 3D support is not detected, the presentation will degrade to less exciting 2D transitions. +Note that this requires a browser with support for CSS 3D transforms and ``classList``. If CSS 3D support is not detected, the presentation will degrade to less exciting 2D transitions. You could also use a polyfill for ``classList`` to make this work in < iOS 5 and < Safari 5.1, [here's one](https://github.com/remy/polyfills/blob/master/classList.js) from [@remy](https://github.com/remy). Curious about how this looks in action? [Check out the demo page](http://lab.hakim.se/reveal-js/). @@ -24,6 +24,8 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak - Slides were moved one level deeper, into #reveal .slides - Controls and progress bar were moved into #reveal - CSS is now much more explicit, rooted at #reveal, to prevent conflicts +- Config option for disabling updates to URL, defaults to true +- Anchors with image children no longer rotate in 3D on hover ### 1.1 diff --git a/js/reveal.js b/js/reveal.js index 60bd0f41..5d2f693b 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -73,7 +73,7 @@ * - Controls and progress bar were moved into #reveal * - All CSS is now much more explicit, rooted at #reveal, to prevent conflicts * - Config option for disabling updates to URL, defaults to true - * - Removed dependency on classList + * - Fix 3D link hover for anchors containing images * * * @author Hakim El Hattab | http://hakim.se @@ -163,11 +163,11 @@ var Reveal = (function(){ } if( config.transition !== 'default' ) { - addClass( dom.wrapper, config.transition ); + dom.wrapper.classList.add( config.transition ); } if( config.theme !== 'default' ) { - addClass( dom.wrapper, config.theme ); + dom.wrapper.classList.add( config.theme ); } if( config.rollingLinks ) { @@ -308,7 +308,7 @@ var Reveal = (function(){ var node = nodes[i]; if( node.textContent && !node.querySelector( 'img' ) && ( !node.className || !hasClass( node, 'roll' ) ) ) { - addClass( node, 'roll' ); + node.classList.add( 'roll' ); node.innerHTML = '' + node.innerHTML + ''; } }; @@ -323,7 +323,7 @@ var Reveal = (function(){ * can't be improved. */ function activateOverview() { - addClass( dom.wrapper, 'overview' ); + dom.wrapper.classList.add( 'overview' ); var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); @@ -339,7 +339,7 @@ var Reveal = (function(){ hslide.style.OTransform = htransform; hslide.style.transform = htransform; - if( !hasClass( hslide, 'stack' ) ) { + if( !hslide.classList.contains( 'stack' ) ) { // Navigate to this slide on click hslide.addEventListener( 'click', onOverviewSlideClicked, true ); } @@ -370,7 +370,7 @@ var Reveal = (function(){ * active slide. */ function deactivateOverview() { - removeClass( dom.wrapper, 'overview' ); + dom.wrapper.classList.remove( 'overview' ); var slides = Array.prototype.slice.call( document.querySelectorAll( '#reveal .slides section' ) ); @@ -397,7 +397,7 @@ var Reveal = (function(){ * false otherwise */ function overviewIsActive() { - return hasClass( dom.wrapper, 'overview' ); + return dom.wrapper.classList.contains( 'overview' ); } /** @@ -463,7 +463,7 @@ var Reveal = (function(){ // If this element contains vertical slides if( slide.querySelector( 'section' ) ) { - addClass( slide, 'stack' ); + slide.classList.add( 'stack' ); } } } @@ -508,13 +508,13 @@ var Reveal = (function(){ // Remove the 'enabled' class from all directions [ dom.controlsLeft, dom.controlsRight, dom.controlsUp, dom.controlsDown ].forEach( function( node ) { - removeClass( node, 'enabled' ); + node.classList.remove( 'enabled' ); } ) - if( routes.left ) addClass( dom.controlsLeft, 'enabled' ); - if( routes.right ) addClass( dom.controlsRight, 'enabled' ); - if( routes.up ) addClass( dom.controlsUp, 'enabled' ); - if( routes.down ) addClass( dom.controlsDown, 'enabled' ); + if( routes.left ) dom.controlsLeft.classList.add( 'enabled' ); + if( routes.right ) dom.controlsRight.classList.add( 'enabled' ); + if( routes.up ) dom.controlsUp.classList.add( 'enabled' ); + if( routes.down ) dom.controlsDown.classList.add( 'enabled' ); } /** @@ -576,7 +576,7 @@ var Reveal = (function(){ if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) { var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' ); if( verticalFragments.length ) { - addClass( verticalFragments[0], 'visible' ); + verticalFragments[0].classList.add( 'visible' ); return true; } } @@ -584,7 +584,7 @@ var Reveal = (function(){ else { var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' ); if( horizontalFragments.length ) { - addClass( horizontalFragments[0], 'visible' ); + horizontalFragments[0].classList.add( 'visible' ); return true; } } @@ -603,7 +603,7 @@ var Reveal = (function(){ if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) { var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment.visible' ); if( verticalFragments.length ) { - removeClass( verticalFragments[ verticalFragments.length - 1 ], 'visible' ); + verticalFragments[ verticalFragments.length - 1 ].classList.remove( 'visible' ); return true; } } @@ -611,27 +611,13 @@ var Reveal = (function(){ else { var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment.visible' ); if( horizontalFragments.length ) { - removeClass( horizontalFragments[ horizontalFragments.length - 1 ], 'visible' ); + horizontalFragments[ horizontalFragments.length - 1 ].classList.remove( 'visible' ); return true; } } return false; } - - function hasClass( node, klass ) { - return !!node.className.match( klass ); - } - - function addClass( node, klass ) { - if( !hasClass( node, klass ) ) { - node.className += ' ' + klass; - } - } - - function removeClass( node, klass ) { - node.className = node.className.replace( klass, '' ); - } /** * Triggers a navigation to the specified indices.