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,
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

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
* 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';
}

5
js/reveal.js
View File

@ -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', '<span></span>' );
@ -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,