From 2a06e0d1e5de95ecf3b5f1a8ae80b72975a44632 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 16 Mar 2020 13:10:50 +0100 Subject: [PATCH] create background element from bg controller --- demo.html | 5 +++++ js/controllers/backgrounds.js | 41 ++++++++++++++++++++--------------- js/reveal.js | 5 ++--- 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/demo.html b/demo.html index adaef1cb..01a57472 100644 --- a/demo.html +++ b/demo.html @@ -421,6 +421,11 @@ Reveal.addEventListener( 'customevent', function() { center: true, hash: true, + // parallaxBackgroundImage: "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg", + + // Parallax background size + // parallaxBackgroundSize: "2100px 900px", + transition: 'slide', // none/fade/slide/convex/concave/zoom // More info https://github.com/hakimel/reveal.js#dependencies diff --git a/js/controllers/backgrounds.js b/js/controllers/backgrounds.js index 03970fe3..8328fe1a 100644 --- a/js/controllers/backgrounds.js +++ b/js/controllers/backgrounds.js @@ -12,6 +12,14 @@ export default class Backgrounds { } + render() { + + this.element = document.createElement( 'div' ); + this.element.className = 'backgrounds'; + this.Reveal.getRevealElement().appendChild( this.element ); + + } + /** * Creates the slide background elements and appends them * to the background container. One element is created per @@ -20,16 +28,15 @@ export default class Backgrounds { create() { let printMode = this.Reveal.isPrintingPDF(); - let backgroundElement = this.Reveal.getBackgroundsElement(); // Clear prior backgrounds - backgroundElement.innerHTML = ''; - backgroundElement.classList.add( 'no-transition' ); + this.element.innerHTML = ''; + this.element.classList.add( 'no-transition' ); // Iterate over all horizontal slides this.Reveal.getHorizontalSlides().forEach( slideh => { - let backgroundStack = this.createBackground( slideh, backgroundElement ); + let backgroundStack = this.createBackground( slideh, this.element ); // Iterate over all vertical slides toArray( slideh.querySelectorAll( 'section' ) ).forEach( slidev => { @@ -45,10 +52,10 @@ export default class Backgrounds { // Add parallax background if specified if( this.Reveal.getConfig().parallaxBackgroundImage ) { - backgroundElement.style.backgroundImage = 'url("' + this.Reveal.getConfig().parallaxBackgroundImage + '")'; - backgroundElement.style.backgroundSize = this.Reveal.getConfig().parallaxBackgroundSize; - backgroundElement.style.backgroundRepeat = this.Reveal.getConfig().parallaxBackgroundRepeat; - backgroundElement.style.backgroundPosition = this.Reveal.getConfig().parallaxBackgroundPosition; + this.element.style.backgroundImage = 'url("' + this.Reveal.getConfig().parallaxBackgroundImage + '")'; + this.element.style.backgroundSize = this.Reveal.getConfig().parallaxBackgroundSize; + this.element.style.backgroundRepeat = this.Reveal.getConfig().parallaxBackgroundRepeat; + this.element.style.backgroundPosition = this.Reveal.getConfig().parallaxBackgroundPosition; // Make sure the below properties are set on the element - these properties are // needed for proper transitions to be set on the element via CSS. To remove @@ -61,7 +68,7 @@ export default class Backgrounds { } else { - backgroundElement.style.backgroundImage = ''; + this.element.style.backgroundImage = ''; this.Reveal.getRevealElement().classList.remove( 'has-parallax-background' ); } @@ -221,7 +228,6 @@ export default class Backgrounds { update( includeAll = false ) { let currentSlide = this.Reveal.getCurrentSlide(); - let backgroundElement = this.Reveal.getBackgroundsElement(); let indices = this.Reveal.getIndices(); let currentBackground = null; @@ -232,7 +238,7 @@ export default class Backgrounds { // Update the classes of all backgrounds to match the // states of their slides (past/present/future) - toArray( backgroundElement.childNodes ).forEach( ( backgroundh, h ) => { + toArray( this.element.childNodes ).forEach( ( backgroundh, h ) => { backgroundh.classList.remove( 'past', 'present', 'future' ); @@ -303,7 +309,7 @@ export default class Backgrounds { let previousBackgroundHash = this.previousBackground ? this.previousBackground.getAttribute( 'data-background-hash' ) : null; let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' ); if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) { - backgroundElement.classList.add( 'no-transition' ); + this.element.classList.add( 'no-transition' ); } this.previousBackground = currentBackground; @@ -325,7 +331,7 @@ export default class Backgrounds { // Allow the first background to apply without transition setTimeout( () => { - backgroundElement.classList.remove( 'no-transition' ); + this.element.classList.remove( 'no-transition' ); }, 1 ); } @@ -336,7 +342,6 @@ export default class Backgrounds { */ updateParallax() { - let backgroundElement = this.Reveal.getBackgroundsElement(); let indices = this.Reveal.getIndices(); if( this.Reveal.getConfig().parallaxBackgroundImage ) { @@ -344,7 +349,7 @@ export default class Backgrounds { let horizontalSlides = this.Reveal.getHorizontalSlides(), verticalSlides = this.Reveal.getVerticalSlides(); - let backgroundSize = backgroundElement.style.backgroundSize.split( ' ' ), + let backgroundSize = this.element.style.backgroundSize.split( ' ' ), backgroundWidth, backgroundHeight; if( backgroundSize.length === 1 ) { @@ -355,7 +360,7 @@ export default class Backgrounds { backgroundHeight = parseInt( backgroundSize[1], 10 ); } - let slideWidth = backgroundElement.offsetWidth, + let slideWidth = this.element.offsetWidth, horizontalSlideCount = horizontalSlides.length, horizontalOffsetMultiplier, horizontalOffset; @@ -369,7 +374,7 @@ export default class Backgrounds { horizontalOffset = horizontalOffsetMultiplier * indices.h * -1; - let slideHeight = backgroundElement.offsetHeight, + let slideHeight = this.element.offsetHeight, verticalSlideCount = verticalSlides.length, verticalOffsetMultiplier, verticalOffset; @@ -383,7 +388,7 @@ export default class Backgrounds { verticalOffset = verticalSlideCount > 0 ? verticalOffsetMultiplier * indices.v : 0; - backgroundElement.style.backgroundPosition = horizontalOffset + 'px ' + -verticalOffset + 'px'; + this.element.style.backgroundPosition = horizontalOffset + 'px ' + -verticalOffset + 'px'; } diff --git a/js/reveal.js b/js/reveal.js index 70310701..44e009b3 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -223,8 +223,8 @@ export default function( revealElement, options ) { dom.wrapper.classList.remove( 'no-hover' ); } - // Background element - dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null ); + // Slide backgrounds + backgrounds.render(); // Progress bar dom.progress = createSingletonNode( dom.wrapper, 'div', 'progress', '' ); @@ -2787,7 +2787,6 @@ export default function( revealElement, options ) { // Returns reveal.js DOM elements getRevealElement: () => dom.wrapper || document.querySelector( '.reveal' ), getSlidesElement: () => dom.slides, - getBackgroundsElement: () => dom.background, // Checks if reveal.js has been loaded and is ready for use isReady: () => ready,