Merge pull request #3568 from bouzidanas/master

fix vertical stack background not working in scroll view

js/controllers/scrollview.js

@@ -1,4 +1,4 @@
-import { HORIZONTAL_SLIDES_SELECTOR } from '../utils/constants.js'
+import { HORIZONTAL_SLIDES_SELECTOR, SLIDES_BACKGROUNDS_SELECTOR } from '../utils/constants.js'
 import { queryAll } from '../utils/util.js'
 
 const HIDE_SCROLLBAR_TIMEOUT = 500;
@@ -40,6 +40,7 @@ export default class ScrollView {
 		this.slideHTMLBeforeActivation = this.Reveal.getSlidesElement().innerHTML;
 
 		const horizontalSlides = queryAll( this.Reveal.getRevealElement(), HORIZONTAL_SLIDES_SELECTOR );
+		const slideBackgrounds = queryAll( this.Reveal.getRevealElement(), SLIDES_BACKGROUNDS_SELECTOR );
 
 		this.viewportElement.classList.add( 'loading-scroll-mode', 'reveal-scroll' );
 
@@ -76,8 +77,19 @@ export default class ScrollView {
 				page.className = 'scroll-page';
 				pageElements.push( page );
 
-				// Copy the presentation-wide background to each page
+				// This transfers over the background of the vertical stack containing
-				if( presentationBackground ) {
+				//  the slide if it exists. Otherwise, it uses the presentation-wide
+				//  background.
+				if( slideBackgrounds && slideBackgrounds.length > h ) {
+					const slideBackground = slideBackgrounds[h];
+					const pageBackground = window.getComputedStyle( slideBackground );
+					
+					if( pageBackground && pageBackground.background ) {
+						page.style.background = pageBackground.background;
+					} else if( presentationBackground ) {
+						page.style.background = presentationBackground;
+					}
+				} else if( presentationBackground ) {
 					page.style.background = presentationBackground;
 				}
 

js/utils/constants.js

@@ -2,6 +2,7 @@
 export const SLIDES_SELECTOR = '.slides section';
 export const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
 export const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
+export const SLIDES_BACKGROUNDS_SELECTOR = '.backgrounds>.slide-background';
 
 // Methods that may not be invoked via the postMessage API
 export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener|showPreview/;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "reveal.js",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reveal.js",
-      "version": "5.0.2",
+      "version": "5.0.4",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.23.2",