xobs
/
fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

limit scope of all slide selectors, avoids multiple .reveal classes on one page causing errors

This commit is contained in:
Hakim El Hattab 2014-05-24 15:23:03 +02:00
parent ff788bb31b
commit 09bddce427
1 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
js/reveal.js
View File

@ -25,10 +25,10 @@
var Reveal; var Reveal;
var SLIDES_SELECTOR = '.reveal .slides section', var SLIDES_SELECTOR = '.slides section',
HORIZONTAL_SLIDES_SELECTOR = '.reveal .slides>section', HORIZONTAL_SLIDES_SELECTOR = '.slides>section',
VERTICAL_SLIDES_SELECTOR = '.reveal .slides>section.present>section', VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section',
HOME_SLIDE_SELECTOR = '.reveal .slides>section:first-of-type', HOME_SLIDE_SELECTOR = '.slides>section:first-of-type',
// Configurations defaults, can be overridden at initialization time // Configurations defaults, can be overridden at initialization time
config = { config = {
@ -224,6 +224,10 @@
return; return;
} }
// Cache references to key DOM elements
dom.wrapper = document.querySelector( '.reveal' );
dom.slides = document.querySelector( '.reveal .slides' );
// Force a layout when the whole page, incl fonts, has loaded // Force a layout when the whole page, incl fonts, has loaded
window.addEventListener( 'load', layout, false ); window.addEventListener( 'load', layout, false );
@ -398,11 +402,6 @@
*/ */
function setupDOM() { function setupDOM() {
// Cache references to key DOM elements
dom.theme = document.querySelector( '#theme' );
dom.wrapper = document.querySelector( '.reveal' );
dom.slides = document.querySelector( '.reveal .slides' );
// Prevent transitions while we're loading // Prevent transitions while we're loading
dom.slides.classList.add( 'no-transition' ); dom.slides.classList.add( 'no-transition' );
@ -431,6 +430,7 @@
// Cache references to elements // Cache references to elements
dom.controls = document.querySelector( '.reveal .controls' ); dom.controls = document.querySelector( '.reveal .controls' );
dom.theme = document.querySelector( '#theme' );
// There can be multiple instances of controls throughout the page // There can be multiple instances of controls throughout the page
dom.controlsLeft = toArray( document.querySelectorAll( '.navigate-left' ) ); dom.controlsLeft = toArray( document.querySelectorAll( '.navigate-left' ) );
@ -469,7 +469,7 @@
document.body.style.height = pageHeight + 'px'; document.body.style.height = pageHeight + 'px';
// Slide and slide background layout // Slide and slide background layout
toArray( document.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
// Vertical stacks are not centred since their section // Vertical stacks are not centred since their section
// children will be // children will be
@ -505,7 +505,7 @@
} ); } );
// Show all fragments // Show all fragments
toArray( document.querySelectorAll( SLIDES_SELECTOR + ' .fragment' ) ).forEach( function( fragment ) { toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ' .fragment' ) ).forEach( function( fragment ) {
fragment.classList.add( 'visible' ); fragment.classList.add( 'visible' );
} ); } );
@ -556,7 +556,7 @@
dom.background.classList.add( 'no-transition' ); dom.background.classList.add( 'no-transition' );
// Iterate over all horizontal slides // Iterate over all horizontal slides
toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) { toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
var backgroundStack; var backgroundStack;
@ -705,7 +705,7 @@
*/ */
function configure( options ) { function configure( options ) {
var numberOfSlides = document.querySelectorAll( SLIDES_SELECTOR ).length; var numberOfSlides = dom.wrapper.querySelectorAll( SLIDES_SELECTOR ).length;
dom.wrapper.classList.remove( config.transition ); dom.wrapper.classList.remove( config.transition );
@ -1119,7 +1119,7 @@
function enableRollingLinks() { function enableRollingLinks() {
if( features.transforms3d && !( 'msPerspective' in document.body.style ) ) { if( features.transforms3d && !( 'msPerspective' in document.body.style ) ) {
var anchors = document.querySelectorAll( SLIDES_SELECTOR + ' a' ); var anchors = dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ' a' );
for( var i = 0, len = anchors.length; i < len; i++ ) { for( var i = 0, len = anchors.length; i < len; i++ ) {
var anchor = anchors[i]; var anchor = anchors[i];
@ -1143,7 +1143,7 @@
*/ */
function disableRollingLinks() { function disableRollingLinks() {
var anchors = document.querySelectorAll( SLIDES_SELECTOR + ' a.roll' ); var anchors = dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ' a.roll' );
for( var i = 0, len = anchors.length; i < len; i++ ) { for( var i = 0, len = anchors.length; i < len; i++ ) {
var anchor = anchors[i]; var anchor = anchors[i];
@ -1280,7 +1280,7 @@
} }
// Select all slides, vertical and horizontal // Select all slides, vertical and horizontal
var slides = toArray( document.querySelectorAll( SLIDES_SELECTOR ) ); var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) );
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 ];
@ -1439,7 +1439,7 @@
dom.wrapper.classList.add( 'overview' ); dom.wrapper.classList.add( 'overview' );
dom.wrapper.classList.remove( 'overview-deactivating' ); dom.wrapper.classList.remove( 'overview-deactivating' );
var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ); var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) { for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
var hslide = horizontalSlides[i], var hslide = horizontalSlides[i],
@ -1516,7 +1516,7 @@
}, 1 ); }, 1 );
// Select all slides // Select all slides
toArray( document.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
// Resets all transforms to use the external styles // Resets all transforms to use the external styles
transformElement( slide, '' ); transformElement( slide, '' );
@ -1707,7 +1707,7 @@
previousSlide = currentSlide; previousSlide = currentSlide;
// Query all horizontal slides in the deck // Query all horizontal slides in the deck
var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ); var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
// If no vertical index is specified and the upcoming slide is a // If no vertical index is specified and the upcoming slide is a
// stack, resume at its previous vertical index // stack, resume at its previous vertical index
@ -1803,10 +1803,10 @@
// Reset all slides upon navigate to home // Reset all slides upon navigate to home
// Issue: #285 // Issue: #285
if ( document.querySelector( HOME_SLIDE_SELECTOR ).classList.contains( 'present' ) ) { if ( dom.wrapper.querySelector( HOME_SLIDE_SELECTOR ).classList.contains( 'present' ) ) {
// Launch async task // Launch async task
setTimeout( function () { setTimeout( function () {
var slides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.stack') ), i; var slides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.stack') ), i;
for( i in slides ) { for( i in slides ) {
if( slides[i] ) { if( slides[i] ) {
// Reset stack // Reset stack
@ -1875,7 +1875,7 @@
*/ */
function resetVerticalSlides() { function resetVerticalSlides() {
var horizontalSlides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); var horizontalSlides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
horizontalSlides.forEach( function( horizontalSlide ) { horizontalSlides.forEach( function( horizontalSlide ) {
var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) ); var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) );
@ -1899,7 +1899,7 @@
*/ */
function sortAllFragments() { function sortAllFragments() {
var horizontalSlides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); var horizontalSlides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
horizontalSlides.forEach( function( horizontalSlide ) { horizontalSlides.forEach( function( horizontalSlide ) {
var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) ); var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) );
@ -1932,7 +1932,7 @@
// Select all slides and convert the NodeList result to // Select all slides and convert the NodeList result to
// an array // an array
var slides = toArray( document.querySelectorAll( selector ) ), var slides = toArray( dom.wrapper.querySelectorAll( selector ) ),
slidesLength = slides.length; slidesLength = slides.length;
var printMode = isPrintingPDF(); var printMode = isPrintingPDF();
@ -2036,7 +2036,7 @@
// Select all slides and convert the NodeList result to // Select all slides and convert the NodeList result to
// an array // an array
var horizontalSlides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ), var horizontalSlides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ),
horizontalSlidesLength = horizontalSlides.length, horizontalSlidesLength = horizontalSlides.length,
distanceX, distanceX,
distanceY; distanceY;
@ -2283,8 +2283,8 @@
if( config.parallaxBackgroundImage ) { if( config.parallaxBackgroundImage ) {
var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ), var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
verticalSlides = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR ); verticalSlides = dom.wrapper.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
var backgroundSize = dom.background.style.backgroundSize.split( ' ' ), var backgroundSize = dom.background.style.backgroundSize.split( ' ' ),
backgroundWidth, backgroundHeight; backgroundWidth, backgroundHeight;
@ -2364,7 +2364,7 @@
} }
// Videos // Videos
else if ( backgroundVideo ) { else if ( backgroundVideo ) {
var video = document.createElement( 'video' ); var video = dom.wrapper.createElement( 'video' );
// Support comma separated lists of video sources // Support comma separated lists of video sources
backgroundVideo.split( ',' ).forEach( function( source ) { backgroundVideo.split( ',' ).forEach( function( source ) {
@ -2403,8 +2403,8 @@
*/ */
function availableRoutes() { function availableRoutes() {
var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ), var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
verticalSlides = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR ); verticalSlides = dom.wrapper.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
var routes = { var routes = {
left: indexh > 0 || config.loop, left: indexh > 0 || config.loop,
@ -2511,10 +2511,10 @@
*/ */
function getProgress() { function getProgress() {
var horizontalSlides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); var horizontalSlides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
// The number of past and total slides // The number of past and total slides
var totalCount = document.querySelectorAll( SLIDES_SELECTOR + ':not(.stack)' ).length; var totalCount = dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ':not(.stack)' ).length;
var pastCount = 0; var pastCount = 0;
// Step through all slides and count the past ones // Step through all slides and count the past ones
@ -2690,7 +2690,7 @@
var slideh = isVertical ? slide.parentNode : slide; var slideh = isVertical ? slide.parentNode : slide;
// Select all horizontal slides // Select all horizontal slides
var horizontalSlides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); var horizontalSlides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
// Now that we know which the horizontal slide is, get its index // Now that we know which the horizontal slide is, get its index
h = Math.max( horizontalSlides.indexOf( slideh ), 0 ); h = Math.max( horizontalSlides.indexOf( slideh ), 0 );
@ -2721,7 +2721,7 @@
*/ */
function getTotalSlides() { function getTotalSlides() {
return document.querySelectorAll( SLIDES_SELECTOR + ':not(.stack)' ).length; return dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ':not(.stack)' ).length;
} }
@ -2730,7 +2730,7 @@
*/ */
function getSlide( x, y ) { function getSlide( x, y ) {
var horizontalSlide = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR )[ x ]; var horizontalSlide = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR )[ x ];
var verticalSlides = horizontalSlide && horizontalSlide.querySelectorAll( 'section' ); var verticalSlides = horizontalSlide && horizontalSlide.querySelectorAll( 'section' );
if( verticalSlides && verticalSlides.length && typeof y === 'number' ) { if( verticalSlides && verticalSlides.length && typeof y === 'number' ) {
@ -2763,7 +2763,7 @@
return undefined; return undefined;
} }
var horizontalBackground = document.querySelectorAll( '.backgrounds>.slide-background' )[ x ]; var horizontalBackground = dom.wrapper.querySelectorAll( '.backgrounds>.slide-background' )[ x ];
var verticalBackgrounds = horizontalBackground && horizontalBackground.querySelectorAll( '.slide-background' ); var verticalBackgrounds = horizontalBackground && horizontalBackground.querySelectorAll( '.slide-background' );
if( verticalBackgrounds && verticalBackgrounds.length && typeof y === 'number' ) { if( verticalBackgrounds && verticalBackgrounds.length && typeof y === 'number' ) {
@ -3147,7 +3147,7 @@
} }
else { else {
// Fetch the previous horizontal slide, if there is one // Fetch the previous horizontal slide, if there is one
var previousSlide = document.querySelector( HORIZONTAL_SLIDES_SELECTOR + '.past:nth-child(' + indexh + ')' ); var previousSlide = dom.wrapper.querySelector( HORIZONTAL_SLIDES_SELECTOR + '.past:nth-child(' + indexh + ')' );
if( previousSlide ) { if( previousSlide ) {
var v = ( previousSlide.querySelectorAll( 'section' ).length - 1 ) || undefined; var v = ( previousSlide.querySelectorAll( 'section' ).length - 1 ) || undefined;
@ -3502,7 +3502,7 @@
event.preventDefault(); event.preventDefault();
var slidesTotal = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).length; var slidesTotal = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).length;
var slideIndex = Math.floor( ( event.clientX / dom.wrapper.offsetWidth ) * slidesTotal ); var slideIndex = Math.floor( ( event.clientX / dom.wrapper.offsetWidth ) * slidesTotal );
slide( slideIndex ); slide( slideIndex );