xobs/fossasia-22-renode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

es6 refactoring, overlay design tweaks

Browse Source
This commit is contained in:
Hakim El Hattab 2020-03-06 14:54:55 +01:00
parent fba914a0ab
commit 6ee1b9f2a2
3 changed files with 123 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/reveal.css
View File

File diff suppressed because one or more lines are too long

19
css/reveal.scss
View File

@ -1420,6 +1420,9 @@ $controlsArrowAngleActive: 36deg;
* OVERLAY FOR LINK PREVIEWS AND HELP * OVERLAY FOR LINK PREVIEWS AND HELP
*********************************************/ *********************************************/
$overlayHeaderHeight: 40px;
$overlayHeaderPadding: 5px;
.reveal > .overlay { .reveal > .overlay {
position: absolute; position: absolute;
top: 0; top: 0;
@ -1428,14 +1431,8 @@ $controlsArrowAngleActive: 36deg;
height: 100%; height: 100%;
z-index: 1000; z-index: 1000;
background: rgba( 0, 0, 0, 0.9 ); background: rgba( 0, 0, 0, 0.9 );
opacity: 0;
visibility: hidden;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.reveal > .overlay.visible {
opacity: 1;
visibility: visible;
}
.reveal > .overlay .spinner { .reveal > .overlay .spinner {
position: absolute; position: absolute;
@ -1458,14 +1455,14 @@ $controlsArrowAngleActive: 36deg;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 40px; padding: $overlayHeaderPadding;
z-index: 2; z-index: 2;
border-bottom: 1px solid #222; box-sizing: border-box;
} }
.reveal > .overlay header a { .reveal > .overlay header a {
display: inline-block; display: inline-block;
width: 40px; width: $overlayHeaderHeight;
height: 40px; height: $overlayHeaderHeight;
line-height: 36px; line-height: 36px;
padding: 0 10px; padding: 0 10px;
float: right; float: right;
@ -1495,7 +1492,7 @@ $controlsArrowAngleActive: 36deg;
.reveal > .overlay .viewport { .reveal > .overlay .viewport {
position: absolute; position: absolute;
display: flex; display: flex;
top: 40px; top: $overlayHeaderHeight + $overlayHeaderPadding*2;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;

244
js/reveal.js
View File

@ -592,7 +592,7 @@
*/ */
function loadScript( url, callback ) { function loadScript( url, callback ) {
let script = document.createElement( 'script' ); const script = document.createElement( 'script' );
script.type = 'text/javascript'; script.type = 'text/javascript';
script.async = false; script.async = false;
script.defer = false; script.defer = false;
@ -618,14 +618,14 @@
// Kill event listeners // Kill event listeners
script.onload = script.onreadystatechange = script.onerror = null; script.onload = script.onreadystatechange = script.onerror = null;
callback( new Error( 'Failed loading script: ' + script.src + '\n' + err) ); callback( new Error( 'Failed loading script: ' + script.src + '\n' + err ) );
}; };
} }
// Append the script at the end of <head> // Append the script at the end of <head>
let head = document.querySelector( 'head' ); const head = document.querySelector( 'head' );
head.insertBefore( script, head.lastChild ); head.insertBefore( script, head.lastChild );
} }
@ -661,7 +661,7 @@
// Notify listeners that the presentation is ready but use a 1ms // Notify listeners that the presentation is ready but use a 1ms
// timeout to ensure it's not fired synchronously after #initialize() // timeout to ensure it's not fired synchronously after #initialize()
setTimeout( function() { setTimeout( () => {
// Enable transitions now that we're loaded // Enable transitions now that we're loaded
dom.slides.classList.remove( 'no-transition' ); dom.slides.classList.remove( 'no-transition' );
@ -723,10 +723,10 @@
// Arrow controls // Arrow controls
dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls', dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',
'<button class="navigate-left" aria-label="' + ( config.rtl ? 'next slide' : 'previous slide' ) + '"><div class="controls-arrow"></div></button>' + `<button class="navigate-left" aria-label="${ config.rtl ? 'next slide' : 'previous slide' }"><div class="controls-arrow"></div></button>
'<button class="navigate-right" aria-label="' + ( config.rtl ? 'previous slide' : 'next slide' ) + '"><div class="controls-arrow"></div></button>' + <button class="navigate-right" aria-label="${ config.rtl ? 'previous slide' : 'next slide' }"><div class="controls-arrow"></div></button>
'<button class="navigate-up" aria-label="above slide"><div class="controls-arrow"></div></button>' + <button class="navigate-up" aria-label="above slide"><div class="controls-arrow"></div></button>
'<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>' ); <button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>` );
// Slide number // Slide number
dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' ); dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );
@ -766,7 +766,7 @@
*/ */
function createStatusDiv() { function createStatusDiv() {
var statusDiv = document.getElementById( 'aria-status-div' ); let statusDiv = document.getElementById( 'aria-status-div' );
if( !statusDiv ) { if( !statusDiv ) {
statusDiv = document.createElement( 'div' ); statusDiv = document.createElement( 'div' );
statusDiv.style.position = 'absolute'; statusDiv.style.position = 'absolute';
@ -790,7 +790,7 @@
*/ */
function getStatusText( node ) { function getStatusText( node ) {
var text = ''; let text = '';
// Text node // Text node
if( node.nodeType === 3 ) { if( node.nodeType === 3 ) {
@ -799,11 +799,11 @@
// Element node // Element node
else if( node.nodeType === 1 ) { else if( node.nodeType === 1 ) {
var isAriaHidden = node.getAttribute( 'aria-hidden' ); let isAriaHidden = node.getAttribute( 'aria-hidden' );
var isDisplayHidden = window.getComputedStyle( node )['display'] === 'none'; let isDisplayHidden = window.getComputedStyle( node )['display'] === 'none';
if( isAriaHidden !== 'true' && !isDisplayHidden ) { if( isAriaHidden !== 'true' && !isDisplayHidden ) {
toArray( node.childNodes ).forEach( function( child ) { toArray( node.childNodes ).forEach( child => {
text += getStatusText( child ); text += getStatusText( child );
} ); } );
@ -811,7 +811,7 @@
} }
return text; return text.trim();
} }
@ -995,7 +995,7 @@
*/ */
function setupScrollPrevention() { function setupScrollPrevention() {
setInterval( function() { setInterval( () => {
if( dom.wrapper.scrollTop !== 0 || dom.wrapper.scrollLeft !== 0 ) { if( dom.wrapper.scrollTop !== 0 || dom.wrapper.scrollLeft !== 0 ) {
dom.wrapper.scrollTop = 0; dom.wrapper.scrollTop = 0;
dom.wrapper.scrollLeft = 0; dom.wrapper.scrollLeft = 0;
@ -1016,26 +1016,24 @@
* *
* @return {HTMLElement} * @return {HTMLElement}
*/ */
function createSingletonNode( container, tagname, classname, innerHTML ) { function createSingletonNode( container, tagname, classname, innerHTML='' ) {
// Find all nodes matching the description // Find all nodes matching the description
var nodes = container.querySelectorAll( '.' + classname ); let nodes = container.querySelectorAll( '.' + classname );
// Check all matches to find one which is a direct child of // Check all matches to find one which is a direct child of
// the specified container // the specified container
for( var i = 0; i < nodes.length; i++ ) { for( let i = 0; i < nodes.length; i++ ) {
var testNode = nodes[i]; let testNode = nodes[i];
if( testNode.parentNode === container ) { if( testNode.parentNode === container ) {
return testNode; return testNode;
} }
} }
// If no node was found, create it now // If no node was found, create it now
var node = document.createElement( tagname ); let node = document.createElement( tagname );
node.className = classname; node.className = classname;
if( typeof innerHTML === 'string' ) { node.innerHTML = innerHTML;
node.innerHTML = innerHTML;
}
container.appendChild( node ); container.appendChild( node );
return node; return node;
@ -1049,19 +1047,19 @@
*/ */
function createBackgrounds() { function createBackgrounds() {
var printMode = isPrintingPDF(); let printMode = isPrintingPDF();
// Clear prior backgrounds // Clear prior backgrounds
dom.background.innerHTML = ''; dom.background.innerHTML = '';
dom.background.classList.add( 'no-transition' ); dom.background.classList.add( 'no-transition' );
// Iterate over all horizontal slides // Iterate over all horizontal slides
toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) { toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( slideh => {
var backgroundStack = createBackground( slideh, dom.background ); let backgroundStack = createBackground( slideh, dom.background );
// Iterate over all vertical slides // Iterate over all vertical slides
toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) { toArray( slideh.querySelectorAll( 'section' ) ).forEach( slidev => {
createBackground( slidev, backgroundStack ); createBackground( slidev, backgroundStack );
@ -1083,7 +1081,7 @@
// needed for proper transitions to be set on the element via CSS. To remove // needed for proper transitions to be set on the element via CSS. To remove
// annoying background slide-in effect when the presentation starts, apply // annoying background slide-in effect when the presentation starts, apply
// these properties after short time delay // these properties after short time delay
setTimeout( function() { setTimeout( () => {
dom.wrapper.classList.add( 'has-parallax-background' ); dom.wrapper.classList.add( 'has-parallax-background' );
}, 1 ); }, 1 );
@ -1107,13 +1105,12 @@
*/ */
function createBackground( slide, container ) { function createBackground( slide, container ) {
// Main slide background element // Main slide background element
var element = document.createElement( 'div' ); let element = document.createElement( 'div' );
element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' ); element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' );
// Inner background element that wraps images/videos/iframes // Inner background element that wraps images/videos/iframes
var contentElement = document.createElement( 'div' ); let contentElement = document.createElement( 'div' );
contentElement.className = 'slide-background-content'; contentElement.className = 'slide-background-content';
element.appendChild( contentElement ); element.appendChild( contentElement );
@ -1137,7 +1134,7 @@
*/ */
function syncBackground( slide ) { function syncBackground( slide ) {
var element = slide.slideBackgroundElement, let element = slide.slideBackgroundElement,
contentElement = slide.slideBackgroundContentElement; contentElement = slide.slideBackgroundContentElement;
// Reset the prior background state in case this is not the // Reset the prior background state in case this is not the
@ -1158,7 +1155,7 @@
contentElement.style.opacity = ''; contentElement.style.opacity = '';
contentElement.innerHTML = ''; contentElement.innerHTML = '';
var data = { let data = {
background: slide.getAttribute( 'data-background' ), background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ), backgroundSize: slide.getAttribute( 'data-background-size' ),
backgroundImage: slide.getAttribute( 'data-background-image' ), backgroundImage: slide.getAttribute( 'data-background-image' ),
@ -1213,18 +1210,18 @@
// If this slide has a background color, we add a class that // If this slide has a background color, we add a class that
// signals if it is light or dark. If the slide has no background // signals if it is light or dark. If the slide has no background
// color, no class will be added // color, no class will be added
var contrastColor = data.backgroundColor; let contrastColor = data.backgroundColor;
// If no bg color was found, check the computed background // If no bg color was found, check the computed background
if( !contrastColor ) { if( !contrastColor ) {
var computedBackgroundStyle = window.getComputedStyle( element ); let computedBackgroundStyle = window.getComputedStyle( element );
if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) { if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) {
contrastColor = computedBackgroundStyle.backgroundColor; contrastColor = computedBackgroundStyle.backgroundColor;
} }
} }
if( contrastColor ) { if( contrastColor ) {
var rgb = colorToRgb( contrastColor ); let rgb = colorToRgb( contrastColor );
// Ignore fully transparent backgrounds. Some browsers return // Ignore fully transparent backgrounds. Some browsers return
// rgba(0,0,0,0) when reading the computed background color of // rgba(0,0,0,0) when reading the computed background color of
@ -1254,8 +1251,8 @@
function setupPostMessage() { function setupPostMessage() {
if( config.postMessage ) { if( config.postMessage ) {
window.addEventListener( 'message', function ( event ) { window.addEventListener( 'message', event => {
var data = event.data; const data = event.data;
// Make sure we're dealing with JSON // Make sure we're dealing with JSON
if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) { if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) {
@ -1292,7 +1289,7 @@
*/ */
function configure( options ) { function configure( options ) {
var oldTransition = config.transition; const oldTransition = config.transition;
// New config options may be passed when this method // New config options may be passed when this method
// is invoked through the API after initialization // is invoked through the API after initialization
@ -1303,7 +1300,7 @@
// finishes // finishes
if( loaded === false ) return; if( loaded === false ) return;
var numberOfSlides = dom.wrapper.querySelectorAll( SLIDES_SELECTOR ).length; const numberOfSlides = dom.wrapper.querySelectorAll( SLIDES_SELECTOR ).length;
// Remove the previously configured transition class // Remove the previously configured transition class
dom.wrapper.classList.remove( oldTransition ); dom.wrapper.classList.remove( oldTransition );
@ -1397,7 +1394,7 @@
// Generate auto-slide controls if needed // Generate auto-slide controls if needed
if( numberOfSlides > 1 && config.autoSlide && config.autoSlideStoppable ) { if( numberOfSlides > 1 && config.autoSlide && config.autoSlideStoppable ) {
autoSlidePlayer = new Playback( dom.wrapper, function() { autoSlidePlayer = new Playback( dom.wrapper, () => {
return Math.min( Math.max( ( Date.now() - autoSlideStartTime ) / autoSlide, 0 ), 1 ); return Math.min( Math.max( ( Date.now() - autoSlideStartTime ) / autoSlide, 0 ), 1 );
} ); } );
@ -1407,14 +1404,14 @@
// When fragments are turned off they should be visible // When fragments are turned off they should be visible
if( config.fragments === false ) { if( config.fragments === false ) {
toArray( dom.slides.querySelectorAll( '.fragment' ) ).forEach( function( element ) { toArray( dom.slides.querySelectorAll( '.fragment' ) ).forEach( element => {
element.classList.add( 'visible' ); element.classList.add( 'visible' );
element.classList.remove( 'current-fragment' ); element.classList.remove( 'current-fragment' );
} ); } );
} }
// Slide numbers // Slide numbers
var slideNumberDisplay = 'none'; let slideNumberDisplay = 'none';
if( config.slideNumber && !isPrintingPDF() ) { if( config.slideNumber && !isPrintingPDF() ) {
if( config.showSlideNumber === 'all' ) { if( config.showSlideNumber === 'all' ) {
slideNumberDisplay = 'block'; slideNumberDisplay = 'block';
@ -1506,7 +1503,7 @@
// Listen to both touch and click events, in case the device // Listen to both touch and click events, in case the device
// supports both // supports both
var pointerEvents = [ 'touchstart', 'click' ]; let pointerEvents = [ 'touchstart', 'click' ];
// Only support touch for Android, fixes double navigations in // Only support touch for Android, fixes double navigations in
// stock browser // stock browser
@ -1753,7 +1750,7 @@
*/ */
function injectStyleSheet( value ) { function injectStyleSheet( value ) {
var tag = document.createElement( 'style' ); let tag = document.createElement( 'style' );
tag.type = 'text/css'; tag.type = 'text/css';
if( tag.styleSheet ) { if( tag.styleSheet ) {
tag.styleSheet.cssText = value; tag.styleSheet.cssText = value;
@ -1778,14 +1775,14 @@
*/ */
function closestParent( target, selector ) { function closestParent( target, selector ) {
var parent = target.parentNode; let parent = target.parentNode;
while( parent ) { while( parent ) {
// There's some overhead doing this each time, we don't // There's some overhead doing this each time, we don't
// want to rewrite the element prototype but should still // want to rewrite the element prototype but should still
// be enough to feature detect once at startup... // be enough to feature detect once at startup...
var matchesMethod = parent.matches || parent.matchesSelector || parent.msMatchesSelector; let matchesMethod = parent.matches || parent.matchesSelector || parent.msMatchesSelector;
// If we find a match, we're all set // If we find a match, we're all set
if( matchesMethod && matchesMethod.call( parent, selector ) ) { if( matchesMethod && matchesMethod.call( parent, selector ) ) {
@ -1818,7 +1815,7 @@
*/ */
function colorToRgb( color ) { function colorToRgb( color ) {
var hex3 = color.match( /^#([0-9a-f]{3})$/i ); let hex3 = color.match( /^#([0-9a-f]{3})$/i );
if( hex3 && hex3[1] ) { if( hex3 && hex3[1] ) {
hex3 = hex3[1]; hex3 = hex3[1];
return { return {
@ -1828,7 +1825,7 @@
}; };
} }
var hex6 = color.match( /^#([0-9a-f]{6})$/i ); let hex6 = color.match( /^#([0-9a-f]{6})$/i );
if( hex6 && hex6[1] ) { if( hex6 && hex6[1] ) {
hex6 = hex6[1]; hex6 = hex6[1];
return { return {
@ -1838,7 +1835,7 @@
}; };
} }
var rgb = color.match( /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i ); let rgb = color.match( /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i );
if( rgb ) { if( rgb ) {
return { return {
r: parseInt( rgb[1], 10 ), r: parseInt( rgb[1], 10 ),
@ -1847,7 +1844,7 @@
}; };
} }
var rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i ); let rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );
if( rgba ) { if( rgba ) {
return { return {
r: parseInt( rgba[1], 10 ), r: parseInt( rgba[1], 10 ),
@ -1888,12 +1885,10 @@
* @param {HTMLElement} element * @param {HTMLElement} element
* @param {number} [height] * @param {number} [height]
*/ */
function getRemainingHeight( element, height ) { function getRemainingHeight( element, height = 0 ) {
height = height || 0;
if( element ) { if( element ) {
var newHeight, oldHeight = element.style.height; let newHeight, oldHeight = element.style.height;
// Change the .stretch element height to 0 in order find the height of all // Change the .stretch element height to 0 in order find the height of all
// the other elements // the other elements
@ -1933,7 +1928,7 @@
*/ */
function dispatchEvent( type, args ) { function dispatchEvent( type, args ) {
var event = document.createEvent( 'HTMLEvents', 1, 2 ); let event = document.createEvent( 'HTMLEvents', 1, 2 );
event.initEvent( type, true, true ); event.initEvent( type, true, true );
extend( event, args ); extend( event, args );
dom.wrapper.dispatchEvent( event ); dom.wrapper.dispatchEvent( event );
@ -1950,7 +1945,7 @@
function dispatchPostMessage( type, data ) { function dispatchPostMessage( type, data ) {
if( config.postMessageEvents && window.parent !== window.self ) { if( config.postMessageEvents && window.parent !== window.self ) {
var message = { let message = {
namespace: 'reveal', namespace: 'reveal',
eventName: type, eventName: type,
state: getState() state: getState()
@ -1968,11 +1963,9 @@
* *
* @param {string} [selector=a] - selector for anchors * @param {string} [selector=a] - selector for anchors
*/ */
function enablePreviewLinks( selector ) { function enablePreviewLinks( selector = 'a' ) {
var anchors = toArray( document.querySelectorAll( selector ? selector : 'a' ) ); toArray( document.querySelectorAll( selector ) ).forEach( element => {
anchors.forEach( function( element ) {
if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) { if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
element.addEventListener( 'click', onPreviewLinkClicked, false ); element.addEventListener( 'click', onPreviewLinkClicked, false );
} }
@ -1983,11 +1976,9 @@
/** /**
* Unbind preview frame links. * Unbind preview frame links.
*/ */
function disablePreviewLinks( selector ) { function disablePreviewLinks( selector = 'a' ) {
var anchors = toArray( document.querySelectorAll( selector ? selector : 'a' ) ); toArray( document.querySelectorAll( selector ) ).forEach( element => {
anchors.forEach( function( element ) {
if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) { if( /^(http|www)/gi.test( element.getAttribute( 'href' ) ) ) {
element.removeEventListener( 'click', onPreviewLinkClicked, false ); element.removeEventListener( 'click', onPreviewLinkClicked, false );
} }
@ -2022,23 +2013,19 @@
</small> </small>
</div>`; </div>`;
dom.overlay.querySelector( 'iframe' ).addEventListener( 'load', function( event ) { dom.overlay.querySelector( 'iframe' ).addEventListener( 'load', event => {
dom.overlay.classList.add( 'loaded' ); dom.overlay.classList.add( 'loaded' );
}, false ); }, false );
dom.overlay.querySelector( '.close' ).addEventListener( 'click', function( event ) { dom.overlay.querySelector( '.close' ).addEventListener( 'click', event => {
closeOverlay(); closeOverlay();
event.preventDefault(); event.preventDefault();
}, false ); }, false );
dom.overlay.querySelector( '.external' ).addEventListener( 'click', function( event ) { dom.overlay.querySelector( '.external' ).addEventListener( 'click', event => {
closeOverlay(); closeOverlay();
}, false ); }, false );
setTimeout( function() {
dom.overlay.classList.add( 'visible' );
}, 1 );
} }
/** /**
@ -2077,7 +2064,7 @@
dom.overlay.classList.add( 'overlay-help' ); dom.overlay.classList.add( 'overlay-help' );
dom.wrapper.appendChild( dom.overlay ); dom.wrapper.appendChild( dom.overlay );
var html = '<p class="title">Keyboard Shortcuts</p><br/>'; let html = '<p class="title">Keyboard Shortcuts</p><br/>';
html += '<table><th>KEY</th><th>ACTION</th>'; html += '<table><th>KEY</th><th>ACTION</th>';
for( var key in keyboardShortcuts ) { for( var key in keyboardShortcuts ) {
@ -2107,10 +2094,6 @@
event.preventDefault(); event.preventDefault();
}, false ); }, false );
requestAnimationFrame( function() {
dom.overlay.classList.add( 'visible' );
} );
} }
} }
@ -2147,9 +2130,9 @@
document.documentElement.style.setProperty( '--vh', ( window.innerHeight * 0.01 ) + 'px' ); document.documentElement.style.setProperty( '--vh', ( window.innerHeight * 0.01 ) + 'px' );
} }
var size = getComputedSlideSize(); const size = getComputedSlideSize();
var oldScale = scale; const oldScale = scale;
// Layout the contents of the slides // Layout the contents of the slides
layoutSlideContents( config.width, config.height ); layoutSlideContents( config.width, config.height );
@ -2202,17 +2185,17 @@
} }
// Select all slides, vertical and horizontal // Select all slides, vertical and horizontal
var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ); const 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 ]; const slide = slides[ i ];
// Don't bother updating invisible slides // Don't bother updating invisible slides
if( slide.style.display === 'none' ) { if( slide.style.display === 'none' ) {
continue; continue;
} }
if( ( config.center || slide.classList.contains( 'center' ) ) ) { if( config.center || slide.classList.contains( 'center' ) ) {
// Vertical stacks are not centred since their section // Vertical stacks are not centred since their section
// children will be // children will be
if( slide.classList.contains( 'stack' ) ) { if( slide.classList.contains( 'stack' ) ) {
@ -2258,17 +2241,17 @@
function layoutSlideContents( width, height ) { function layoutSlideContents( width, height ) {
// Handle sizing of elements with the 'stretch' class // Handle sizing of elements with the 'stretch' class
toArray( dom.slides.querySelectorAll( 'section > .stretch' ) ).forEach( function( element ) { toArray( dom.slides.querySelectorAll( 'section > .stretch' ) ).forEach( element => {
// Determine how much vertical space we can use // Determine how much vertical space we can use
var remainingHeight = getRemainingHeight( element, height ); var remainingHeight = getRemainingHeight( element, height );
// Consider the aspect ratio of media elements // Consider the aspect ratio of media elements
if( /(img|video)/gi.test( element.nodeName ) ) { if( /(img|video)/gi.test( element.nodeName ) ) {
var nw = element.naturalWidth || element.videoWidth, const nw = element.naturalWidth || element.videoWidth,
nh = element.naturalHeight || element.videoHeight; nh = element.naturalHeight || element.videoHeight;
var es = Math.min( width / nw, remainingHeight / nh ); const es = Math.min( width / nw, remainingHeight / nh );
element.style.width = ( nw * es ) + 'px'; element.style.width = ( nw * es ) + 'px';
element.style.height = ( nh * es ) + 'px'; element.style.height = ( nh * es ) + 'px';
@ -2293,7 +2276,7 @@
*/ */
function getComputedSlideSize( presentationWidth, presentationHeight ) { function getComputedSlideSize( presentationWidth, presentationHeight ) {
var size = { const size = {
// Slide size // Slide size
width: config.width, width: config.width,
height: config.height, height: config.height,
@ -2348,7 +2331,7 @@
if( typeof stack === 'object' && typeof stack.setAttribute === 'function' && stack.classList.contains( 'stack' ) ) { if( typeof stack === 'object' && typeof stack.setAttribute === 'function' && stack.classList.contains( 'stack' ) ) {
// Prefer manually defined start-indexv // Prefer manually defined start-indexv
var attributeName = stack.hasAttribute( 'data-start-indexv' ) ? 'data-start-indexv' : 'data-previous-indexv'; const attributeName = stack.hasAttribute( 'data-start-indexv' ) ? 'data-start-indexv' : 'data-previous-indexv';
return parseInt( stack.getAttribute( attributeName ) || 0, 10 ); return parseInt( stack.getAttribute( attributeName ) || 0, 10 );
} }
@ -2378,15 +2361,15 @@
dom.slides.appendChild( dom.background ); dom.slides.appendChild( dom.background );
// Clicking on an overview slide navigates to it // Clicking on an overview slide navigates to it
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
if( !slide.classList.contains( 'stack' ) ) { if( !slide.classList.contains( 'stack' ) ) {
slide.addEventListener( 'click', onOverviewSlideClicked, true ); slide.addEventListener( 'click', onOverviewSlideClicked, true );
} }
} ); } );
// Calculate slide sizes // Calculate slide sizes
var margin = 70; const margin = 70;
var slideSize = getComputedSlideSize(); const slideSize = getComputedSlideSize();
overviewSlideWidth = slideSize.width + margin; overviewSlideWidth = slideSize.width + margin;
overviewSlideHeight = slideSize.height + margin; overviewSlideHeight = slideSize.height + margin;
@ -2419,13 +2402,13 @@
function layoutOverview() { function layoutOverview() {
// Layout slides // Layout slides
toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( ( hslide, h ) => {
hslide.setAttribute( 'data-index-h', h ); hslide.setAttribute( 'data-index-h', h );
transformElement( hslide, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' ); transformElement( hslide, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );
if( hslide.classList.contains( 'stack' ) ) { if( hslide.classList.contains( 'stack' ) ) {
toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { toArray( hslide.querySelectorAll( 'section' ) ).forEach( ( vslide, v ) => {
vslide.setAttribute( 'data-index-h', h ); vslide.setAttribute( 'data-index-h', h );
vslide.setAttribute( 'data-index-v', v ); vslide.setAttribute( 'data-index-v', v );
@ -2436,10 +2419,10 @@
} ); } );
// Layout slide backgrounds // Layout slide backgrounds
toArray( dom.background.childNodes ).forEach( function( hbackground, h ) { toArray( dom.background.childNodes ).forEach( ( hbackground, h ) => {
transformElement( hbackground, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' ); transformElement( hbackground, 'translate3d(' + ( h * overviewSlideWidth ) + 'px, 0, 0)' );
toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) { toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( ( vbackground, v ) => {
transformElement( vbackground, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' ); transformElement( vbackground, 'translate3d(0, ' + ( v * overviewSlideHeight ) + 'px, 0)' );
} ); } );
} ); } );
@ -2483,7 +2466,7 @@
// moving from slide to slide // moving from slide to slide
dom.wrapper.classList.add( 'overview-deactivating' ); dom.wrapper.classList.add( 'overview-deactivating' );
setTimeout( function () { setTimeout( () => {
dom.wrapper.classList.remove( 'overview-deactivating' ); dom.wrapper.classList.remove( 'overview-deactivating' );
}, 1 ); }, 1 );
@ -2491,14 +2474,14 @@
dom.wrapper.appendChild( dom.background ); dom.wrapper.appendChild( dom.background );
// Clean up changes made to slides // Clean up changes made to slides
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
transformElement( slide, '' ); transformElement( slide, '' );
slide.removeEventListener( 'click', onOverviewSlideClicked, true ); slide.removeEventListener( 'click', onOverviewSlideClicked, true );
} ); } );
// Clean up changes made to backgrounds // Clean up changes made to backgrounds
toArray( dom.background.querySelectorAll( '.slide-background' ) ).forEach( function( background ) { toArray( dom.background.querySelectorAll( '.slide-background' ) ).forEach( background => {
transformElement( background, '' ); transformElement( background, '' );
} ); } );
@ -2557,16 +2540,16 @@
*/ */
function locationHash( slide ) { function locationHash( slide ) {
var url = '/'; let url = '/';
// Attempt to create a named link based on the slide's ID // Attempt to create a named link based on the slide's ID
var s = slide || currentSlide; let s = slide || currentSlide;
var id = s ? s.getAttribute( 'id' ) : null; let id = s ? s.getAttribute( 'id' ) : null;
if( id ) { if( id ) {
id = encodeURIComponent( id ); id = encodeURIComponent( id );
} }
var index = getIndices( slide ); let index = getIndices( slide );
if( !config.fragmentInURL ) { if( !config.fragmentInURL ) {
index.f = undefined; index.f = undefined;
} }
@ -2578,7 +2561,7 @@
} }
// Otherwise use the /h/v index // Otherwise use the /h/v index
else { else {
var hashIndexBase = config.hashOneBasedIndex ? 1 : 0; let hashIndexBase = config.hashOneBasedIndex ? 1 : 0;
if( index.h > 0 || index.v > 0 || index.f !== undefined ) url += index.h + hashIndexBase; if( index.h > 0 || index.v > 0 || index.f !== undefined ) url += index.h + hashIndexBase;
if( index.v > 0 || index.f !== undefined ) url += '/' + (index.v + hashIndexBase ); if( index.v > 0 || index.f !== undefined ) url += '/' + (index.v + hashIndexBase );
if( index.f !== undefined ) url += '/' + index.f; if( index.f !== undefined ) url += '/' + index.f;
@ -2596,10 +2579,7 @@
* orientation of * orientation of
* @return {Boolean} * @return {Boolean}
*/ */
function isVerticalSlide( slide ) { function isVerticalSlide( slide = currentSlide ) {
// Prefer slide argument, otherwise use current slide
slide = slide ? slide : currentSlide;
return slide && slide.parentNode && !!slide.parentNode.nodeName.match( /section/i ); return slide && slide.parentNode && !!slide.parentNode.nodeName.match( /section/i );
@ -2613,10 +2593,10 @@
*/ */
function enterFullscreen() { function enterFullscreen() {
var element = document.documentElement; let element = document.documentElement;
// Check which implementation is available // Check which implementation is available
var requestMethod = element.requestFullscreen || let requestMethod = element.requestFullscreen ||
element.webkitRequestFullscreen || element.webkitRequestFullscreen ||
element.webkitRequestFullScreen || element.webkitRequestFullScreen ||
element.mozRequestFullScreen || element.mozRequestFullScreen ||
@ -2661,7 +2641,7 @@
function pause() { function pause() {
if( config.pause ) { if( config.pause ) {
var wasPaused = dom.wrapper.classList.contains( 'paused' ); const wasPaused = dom.wrapper.classList.contains( 'paused' );
cancelAutoSlide(); cancelAutoSlide();
dom.wrapper.classList.add( 'paused' ); dom.wrapper.classList.add( 'paused' );
@ -2678,7 +2658,7 @@
*/ */
function resume() { function resume() {
var wasPaused = dom.wrapper.classList.contains( 'paused' ); const wasPaused = dom.wrapper.classList.contains( 'paused' );
dom.wrapper.classList.remove( 'paused' ); dom.wrapper.classList.remove( 'paused' );
cueAutoSlide(); cueAutoSlide();
@ -2761,7 +2741,7 @@
previousSlide = currentSlide; previousSlide = currentSlide;
// Query all horizontal slides in the deck // Query all horizontal slides in the deck
var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ); const horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
// Abort if there are no slides // Abort if there are no slides
if( horizontalSlides.length === 0 ) return; if( horizontalSlides.length === 0 ) return;
@ -2779,12 +2759,12 @@
} }
// Remember the state before this slide // Remember the state before this slide
var stateBefore = state.concat(); const stateBefore = state.concat();
// Reset the state array // Reset the state array
state.length = 0; state.length = 0;
var indexhBefore = indexh || 0, let indexhBefore = indexh || 0,
indexvBefore = indexv || 0; indexvBefore = indexv || 0;
// Activate and transition to the new slide // Activate and transition to the new slide
@ -2803,7 +2783,7 @@
// Find the current horizontal slide and any possible vertical slides // Find the current horizontal slide and any possible vertical slides
// within it // within it
var currentHorizontalSlide = horizontalSlides[ indexh ], let currentHorizontalSlide = horizontalSlides[ indexh ],
currentVerticalSlides = currentHorizontalSlide.querySelectorAll( 'section' ); currentVerticalSlides = currentHorizontalSlide.querySelectorAll( 'section' );
// Store references to the previous and current slides // Store references to the previous and current slides
@ -2815,7 +2795,7 @@
} }
// Dispatch an event if the slide changed // Dispatch an event if the slide changed
var slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore ); let slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore );
if (!slideChanged) { if (!slideChanged) {
// Ensure that the previous slide is never the same as the current // Ensure that the previous slide is never the same as the current
previousSlide = null; previousSlide = null;
@ -2829,26 +2809,21 @@
previousSlide.setAttribute( 'aria-hidden', 'true' ); previousSlide.setAttribute( 'aria-hidden', 'true' );
// Reset all slides upon navigate to home // Reset all slides upon navigate to home
// Issue: #285 if( Reveal.isFirstSlide() ) {
if ( dom.wrapper.querySelector( HOME_SLIDE_SELECTOR ).classList.contains( 'present' ) ) {
// Launch async task // Launch async task
setTimeout( function () { setTimeout( () => {
var slides = toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.stack') ), i; getVerticalStacks().forEach( slide => {
for( i in slides ) { setPreviousVerticalIndex( slide, 0 );
if( slides[i] ) { } );
// Reset stack
setPreviousVerticalIndex( slides[i], 0 );
}
}
}, 0 ); }, 0 );
} }
} }
// Apply the new state // Apply the new state
stateLoop: for( var i = 0, len = state.length; i < len; i++ ) { stateLoop: for( let i = 0, len = state.length; i < len; i++ ) {
// Check if this state existed on the previous slide. If it // Check if this state existed on the previous slide. If it
// did, we will avoid adding it repeatedly // did, we will avoid adding it repeatedly
for( var j = 0; j < stateBefore.length; j++ ) { for( let j = 0; j < stateBefore.length; j++ ) {
if( stateBefore[j] === state[i] ) { if( stateBefore[j] === state[i] ) {
stateBefore.splice( j, 1 ); stateBefore.splice( j, 1 );
continue stateLoop; continue stateLoop;
@ -2906,7 +2881,7 @@
if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' ) ) { if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' ) ) {
dom.slides.classList.add( 'disable-slide-transitions' ); dom.slides.classList.add( 'disable-slide-transitions' );
setTimeout( function() { setTimeout( () => {
dom.slides.classList.remove( 'disable-slide-transitions' ); dom.slides.classList.remove( 'disable-slide-transitions' );
}, 0 ); }, 0 );
@ -4976,6 +4951,15 @@
} }
/**
* Returns all vertical stacks (each stack can contain multiple slides).
*/
function getVerticalStacks() {
return toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.stack') );
}
/** /**
* Returns true if there are at least two horizontal slides. * Returns true if there are at least two horizontal slides.
*/ */
@ -6569,7 +6553,7 @@
// Returns true if we're currently on the first slide // Returns true if we're currently on the first slide
isFirstSlide: function() { isFirstSlide: function() {
return ( indexh === 0 && indexv === 0 ); return indexh === 0 && indexv === 0;
}, },
// Returns true if we're currently on the last slide // Returns true if we're currently on the last slide