dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

create background element from bg controller

This commit is contained in:
Hakim El Hattab 2020-03-16 13:10:50 +01:00
parent 97ee72549b
commit 2a06e0d1e5
3 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo.html
View File

@ -421,6 +421,11 @@ Reveal.addEventListener( 'customevent', function() {
center: true, center: true,
hash: 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 transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies // More info https://github.com/hakimel/reveal.js#dependencies

41
js/controllers/backgrounds.js
View File

@ -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 * Creates the slide background elements and appends them
* to the background container. One element is created per * to the background container. One element is created per
@ -20,16 +28,15 @@ export default class Backgrounds {
create() { create() {
let printMode = this.Reveal.isPrintingPDF(); let printMode = this.Reveal.isPrintingPDF();
let backgroundElement = this.Reveal.getBackgroundsElement();
// Clear prior backgrounds // Clear prior backgrounds
backgroundElement.innerHTML = ''; this.element.innerHTML = '';
backgroundElement.classList.add( 'no-transition' ); this.element.classList.add( 'no-transition' );
// Iterate over all horizontal slides // Iterate over all horizontal slides
this.Reveal.getHorizontalSlides().forEach( slideh => { this.Reveal.getHorizontalSlides().forEach( slideh => {
let backgroundStack = this.createBackground( slideh, backgroundElement ); let backgroundStack = this.createBackground( slideh, this.element );
// Iterate over all vertical slides // Iterate over all vertical slides
toArray( slideh.querySelectorAll( 'section' ) ).forEach( slidev => { toArray( slideh.querySelectorAll( 'section' ) ).forEach( slidev => {
@ -45,10 +52,10 @@ export default class Backgrounds {
// Add parallax background if specified // Add parallax background if specified
if( this.Reveal.getConfig().parallaxBackgroundImage ) { if( this.Reveal.getConfig().parallaxBackgroundImage ) {
backgroundElement.style.backgroundImage = 'url("' + this.Reveal.getConfig().parallaxBackgroundImage + '")'; this.element.style.backgroundImage = 'url("' + this.Reveal.getConfig().parallaxBackgroundImage + '")';
backgroundElement.style.backgroundSize = this.Reveal.getConfig().parallaxBackgroundSize; this.element.style.backgroundSize = this.Reveal.getConfig().parallaxBackgroundSize;
backgroundElement.style.backgroundRepeat = this.Reveal.getConfig().parallaxBackgroundRepeat; this.element.style.backgroundRepeat = this.Reveal.getConfig().parallaxBackgroundRepeat;
backgroundElement.style.backgroundPosition = this.Reveal.getConfig().parallaxBackgroundPosition; this.element.style.backgroundPosition = this.Reveal.getConfig().parallaxBackgroundPosition;
// Make sure the below properties are set on the element - these properties are // 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 // needed for proper transitions to be set on the element via CSS. To remove
@ -61,7 +68,7 @@ export default class Backgrounds {
} }
else { else {
backgroundElement.style.backgroundImage = ''; this.element.style.backgroundImage = '';
this.Reveal.getRevealElement().classList.remove( 'has-parallax-background' ); this.Reveal.getRevealElement().classList.remove( 'has-parallax-background' );
} }
@ -221,7 +228,6 @@ export default class Backgrounds {
update( includeAll = false ) { update( includeAll = false ) {
let currentSlide = this.Reveal.getCurrentSlide(); let currentSlide = this.Reveal.getCurrentSlide();
let backgroundElement = this.Reveal.getBackgroundsElement();
let indices = this.Reveal.getIndices(); let indices = this.Reveal.getIndices();
let currentBackground = null; let currentBackground = null;
@ -232,7 +238,7 @@ export default class Backgrounds {
// Update the classes of all backgrounds to match the // Update the classes of all backgrounds to match the
// states of their slides (past/present/future) // 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' ); 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 previousBackgroundHash = this.previousBackground ? this.previousBackground.getAttribute( 'data-background-hash' ) : null;
let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' ); let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) { if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) {
backgroundElement.classList.add( 'no-transition' ); this.element.classList.add( 'no-transition' );
} }
this.previousBackground = currentBackground; this.previousBackground = currentBackground;
@ -325,7 +331,7 @@ export default class Backgrounds {
// Allow the first background to apply without transition // Allow the first background to apply without transition
setTimeout( () => { setTimeout( () => {
backgroundElement.classList.remove( 'no-transition' ); this.element.classList.remove( 'no-transition' );
}, 1 ); }, 1 );
} }
@ -336,7 +342,6 @@ export default class Backgrounds {
*/ */
updateParallax() { updateParallax() {
let backgroundElement = this.Reveal.getBackgroundsElement();
let indices = this.Reveal.getIndices(); let indices = this.Reveal.getIndices();
if( this.Reveal.getConfig().parallaxBackgroundImage ) { if( this.Reveal.getConfig().parallaxBackgroundImage ) {
@ -344,7 +349,7 @@ export default class Backgrounds {
let horizontalSlides = this.Reveal.getHorizontalSlides(), let horizontalSlides = this.Reveal.getHorizontalSlides(),
verticalSlides = this.Reveal.getVerticalSlides(); verticalSlides = this.Reveal.getVerticalSlides();
let backgroundSize = backgroundElement.style.backgroundSize.split( ' ' ), let backgroundSize = this.element.style.backgroundSize.split( ' ' ),
backgroundWidth, backgroundHeight; backgroundWidth, backgroundHeight;
if( backgroundSize.length === 1 ) { if( backgroundSize.length === 1 ) {
@ -355,7 +360,7 @@ export default class Backgrounds {
backgroundHeight = parseInt( backgroundSize[1], 10 ); backgroundHeight = parseInt( backgroundSize[1], 10 );
} }
let slideWidth = backgroundElement.offsetWidth, let slideWidth = this.element.offsetWidth,
horizontalSlideCount = horizontalSlides.length, horizontalSlideCount = horizontalSlides.length,
horizontalOffsetMultiplier, horizontalOffsetMultiplier,
horizontalOffset; horizontalOffset;
@ -369,7 +374,7 @@ export default class Backgrounds {
horizontalOffset = horizontalOffsetMultiplier * indices.h * -1; horizontalOffset = horizontalOffsetMultiplier * indices.h * -1;
let slideHeight = backgroundElement.offsetHeight, let slideHeight = this.element.offsetHeight,
verticalSlideCount = verticalSlides.length, verticalSlideCount = verticalSlides.length,
verticalOffsetMultiplier, verticalOffsetMultiplier,
verticalOffset; verticalOffset;
@ -383,7 +388,7 @@ export default class Backgrounds {
verticalOffset = verticalSlideCount > 0 ? verticalOffsetMultiplier * indices.v : 0; verticalOffset = verticalSlideCount > 0 ? verticalOffsetMultiplier * indices.v : 0;
backgroundElement.style.backgroundPosition = horizontalOffset + 'px ' + -verticalOffset + 'px'; this.element.style.backgroundPosition = horizontalOffset + 'px ' + -verticalOffset + 'px';
} }

5
js/reveal.js
View File

@ -223,8 +223,8 @@ export default function( revealElement, options ) {
dom.wrapper.classList.remove( 'no-hover' ); dom.wrapper.classList.remove( 'no-hover' );
} }
// Background element // Slide backgrounds
dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null ); backgrounds.render();
// Progress bar // Progress bar
dom.progress = createSingletonNode( dom.wrapper, 'div', 'progress', '<span></span>' ); dom.progress = createSingletonNode( dom.wrapper, 'div', 'progress', '<span></span>' );
@ -2787,7 +2787,6 @@ export default function( revealElement, options ) {
// Returns reveal.js DOM elements // Returns reveal.js DOM elements
getRevealElement: () => dom.wrapper || document.querySelector( '.reveal' ), getRevealElement: () => dom.wrapper || document.querySelector( '.reveal' ),
getSlidesElement: () => dom.slides, getSlidesElement: () => dom.slides,
getBackgroundsElement: () => dom.background,
// Checks if reveal.js has been loaded and is ready for use // Checks if reveal.js has been loaded and is ready for use
isReady: () => ready, isReady: () => ready,