Revamp loading logic

because it did not work when we change stylesheets while the last load wasn't finished yet
McShelby · May 10, 2020 · 7d653ce · 7d653ce
1 parent 5cccb6a
commit 7d653ce
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -89,11 +89,11 @@ Values for themes may contain one of the following:
 
 ### CSS
 
-To apply style overrides depending on the displayed themes, the plugin will add the names of the active themes to the ```<body>``` ```class``` attribute like:
+To apply style overrides depending on the displayed themes, the plugin will add data attributes with the names of the active themes as values to the ```<body>``` element like:
 
 ```html
 ...
-<body class="theme-serif highlight-theme-monokai"
+<body data-theme="serif" data-highlight-theme="monokai">
 ...
 ```
 

diff --git a/themeoverride.js b/themeoverride.js
@@ -66,15 +66,19 @@ var ThemeOverride = ( function( Reveal ){
 			if( c.id == 'theme' ){
 				console.error( '<link> element with id attribute ' + c.id + ' was not found in your HTML file.' );
 			}else if( theme && isHighlightJsUsed() ){
-				console.error( 'highlight.js stylesheet link not found in your HTML file. This usually happens when you haven\'t set the id "hljs-theme" to your highlight.js stylesheet link.' );
+				console.error( 'highlight.js stylesheet link not found in your HTML file. This usually happens when you haven\'t set the id "highlight-theme" on your syntax highlightning stylesheet link.' );
 			}
 			return;
+		}else if( c.id == 'hljs-theme' && theme && isHighlightJsUsed() ){
+			console.warn( 'You are using the deprecated "hljs-theme" id on your syntax highlightning stylesheet link. Instead use "highlight-theme".' );
 		}
 
-		var old_path = link.attributes.href && link.attributes.href.value;
 		if( !theme ){
+			// if someone hasn't set an configuration option we
+			// try to get the theme from our link element
 			theme = link.attributes.href && link.attributes.href.value;
 		}
+
 		if( theme ){
 			if( !theme.match( /\.css$/i ) ){
 				theme += '.css';
@@ -92,8 +96,19 @@ var ThemeOverride = ( function( Reveal ){
 			config[ c.option ] = path;
 			Reveal.configure( config );
 
-			// set the new stylesheet
-			if( !link.attributes.href || link.attributes.href.value != path ){
+			var body = document.querySelector( 'body' );
+			var old_name = body.getAttribute( 'data-' + c.id );
+			if( !old_name ){
+				// if we are coming here for the first time, we
+				// do not have a data-attribute; so just read the
+				// previous theme name form the link element directly
+				var old_path = link.attributes.href && link.attributes.href.value;
+				old_name = old_path.replace( /.*?([^/]+)\.css$/i, '$1' );
+			}
+
+			var name = path.replace( /.*?([^/]+)\.css$/i, '$1' );
+			if( old_name != name ){
+				// set the new stylesheet
 				setTimeout( function(){
 					// FF 74: After switching a theme using the AltMode plugin during
 					// runtime, we experience layout issues with to much top
@@ -103,12 +118,7 @@ var ThemeOverride = ( function( Reveal ){
 			}
 
 			// set theme class on body element
-			var old_name = old_path.replace( /.*?([^/]+)\.css$/i, '$1' );
-			var name = path.replace( /.*?([^/]+)\.css$/i, '$1' );
-			if( old_name != name ){
-				document.querySelector( 'body' ).classList.remove( c.id + '-' + old_name );
-			}
-			document.querySelector( 'body' ).classList.add( c.id + '-' + name );
+			body.setAttribute( 'data-' + c.id, name );
 		}
 	}