xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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 );