Version 1.2.2

- Avoid loading the Verticator style multiple times if there are multiple Reveal.js instances - Avoid loading the Verticator style through scripting if in a Quarto setup
Martinomagnifico · Nov 18, 2022 · 44c1013 · 44c1013
1 parent 05b1b24
commit 44c1013
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [1.2.2] - 2022-11-18
+### Changed
+- Avoid loading the Verticator style multiple times if there are multiple Reveal.js instances
+- Avoid loading the Verticator style through scripting if in a Quarto setup
+
+
 ## [1.2.1] - 2022-11-17
 ### Changed
 - Tooltip styling is not a separate stylesheet anymore

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "reveal.js-verticator",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "description": "A plugin for Reveal.js that adds indicators to show the amount of slides in a vertical stack",
     "keywords": "reveal, reveal.js, vertical bullets, reveal-plugin, plugin, fullPage.js",
     "homepage": "https://github.com/Martinomagnifico/reveal.js-verticator",

diff --git a/plugin/verticator/plugin-src.js b/plugin/verticator/plugin-src.js
@@ -7,18 +7,21 @@ const Plugin = () => {
 	const forceColorVar = `--v-forcecolor`;
 	const activeclass = 'active';
 
-	const loadStyle = function(url, type, callback) {
+	const loadStyle = function(url, title, callback) {
 		let head = document.querySelector('head');
-		let style;
-		style = document.createElement('link');
-		style.rel = 'stylesheet';
-		style.href = url;
-
-		let finish = function () { if (typeof callback === 'function') { callback.call(); callback = null }};
-		style.onload = finish;
-
-		style.onreadystatechange = function () { if (this.readyState === 'loaded') { finish() }};
-		head.appendChild(style);
+		let style = document.querySelector(`[title="${title}"]`);
+		if (typeof(style) == 'undefined' || style == null) {
+			style = document.createElement('link');
+			style.rel = 'stylesheet';
+			style.href = url;
+			style.title=title;
+
+			let finish = function () { if (typeof callback === 'function') { callback.call(); callback = null }};
+			style.onload = finish;
+
+			style.onreadystatechange = function () { if (this.readyState === 'loaded') { finish() }};
+			head.appendChild(style);
+		}
 	}
 
 	const findThemeColors = function(parent, tag) {
@@ -370,13 +373,19 @@ const Plugin = () => {
 			return path;
 		}
 
+
 		let VerticatorStylePath = options.csspath.verticator ? options.csspath.verticator : options.csspath ? options.csspath : null  || `${pluginPath()}verticator.css` || 'plugin/verticator/verticator.css'
 
 		if (options.debug) {
 			console.log(`Plugin path = ${pluginPath()}`);
 			console.log(`Verticator CSS path = ${VerticatorStylePath}`);
 		}
-		loadStyle(VerticatorStylePath, 'stylesheet');
+
+		const generator = document.querySelector('[name=generator]');
+		if (!(generator && generator.content.includes("quarto"))) {
+			loadStyle(VerticatorStylePath, 'verticatorstyle');
+		}
+
 		verticate(deck, options);
 	};
 

diff --git a/plugin/verticator/verticator.esm.js b/plugin/verticator/verticator.esm.js
@@ -4,7 +4,7 @@
  * https://github.com/Martinomagnifico
  *
  * Verticator.js for Reveal.js 
- * Version 1.2.1
+ * Version 1.2.2
  * 
  * @license 
  * MIT licensed
@@ -22,29 +22,33 @@ var Plugin = function Plugin() {
   var forceColorVar = "--v-forcecolor";
   var activeclass = 'active';
 
-  var loadStyle = function loadStyle(url, type, callback) {
+  var loadStyle = function loadStyle(url, title, callback) {
     var head = document.querySelector('head');
-    var style;
-    style = document.createElement('link');
-    style.rel = 'stylesheet';
-    style.href = url;
-
-    var finish = function finish() {
-      if (typeof callback === 'function') {
-        callback.call();
-        callback = null;
-      }
-    };
+    var style = document.querySelector("[title=\"".concat(title, "\"]"));
+
+    if (typeof style == 'undefined' || style == null) {
+      style = document.createElement('link');
+      style.rel = 'stylesheet';
+      style.href = url;
+      style.title = title;
+
+      var finish = function finish() {
+        if (typeof callback === 'function') {
+          callback.call();
+          callback = null;
+        }
+      };
 
-    style.onload = finish;
+      style.onload = finish;
 
-    style.onreadystatechange = function () {
-      if (this.readyState === 'loaded') {
-        finish();
-      }
-    };
+      style.onreadystatechange = function () {
+        if (this.readyState === 'loaded') {
+          finish();
+        }
+      };
 
-    head.appendChild(style);
+      head.appendChild(style);
+    }
   };
 
   var findThemeColors = function findThemeColors(parent, tag) {
@@ -409,7 +413,12 @@ var Plugin = function Plugin() {
       console.log("Verticator CSS path = ".concat(VerticatorStylePath));
     }
 
-    loadStyle(VerticatorStylePath);
+    var generator = document.querySelector('[name=generator]');
+
+    if (!(generator && generator.content.includes("quarto"))) {
+      loadStyle(VerticatorStylePath, 'verticatorstyle');
+    }
+
     verticate(deck, options);
   };
 

diff --git a/plugin/verticator/verticator.js b/plugin/verticator/verticator.js
@@ -4,7 +4,7 @@
  * https://github.com/Martinomagnifico
  *
  * Verticator.js for Reveal.js 
- * Version 1.2.1
+ * Version 1.2.2
  * 
  * @license 
  * MIT licensed
@@ -28,29 +28,33 @@
 	  var forceColorVar = "--v-forcecolor";
 	  var activeclass = 'active';
 
-	  var loadStyle = function loadStyle(url, type, callback) {
+	  var loadStyle = function loadStyle(url, title, callback) {
 	    var head = document.querySelector('head');
-	    var style;
-	    style = document.createElement('link');
-	    style.rel = 'stylesheet';
-	    style.href = url;
-
-	    var finish = function finish() {
-	      if (typeof callback === 'function') {
-	        callback.call();
-	        callback = null;
-	      }
-	    };
+	    var style = document.querySelector("[title=\"".concat(title, "\"]"));
+
+	    if (typeof style == 'undefined' || style == null) {
+	      style = document.createElement('link');
+	      style.rel = 'stylesheet';
+	      style.href = url;
+	      style.title = title;
+
+	      var finish = function finish() {
+	        if (typeof callback === 'function') {
+	          callback.call();
+	          callback = null;
+	        }
+	      };
 
-	    style.onload = finish;
+	      style.onload = finish;
 
-	    style.onreadystatechange = function () {
-	      if (this.readyState === 'loaded') {
-	        finish();
-	      }
-	    };
+	      style.onreadystatechange = function () {
+	        if (this.readyState === 'loaded') {
+	          finish();
+	        }
+	      };
 
-	    head.appendChild(style);
+	      head.appendChild(style);
+	    }
 	  };
 
 	  var findThemeColors = function findThemeColors(parent, tag) {
@@ -415,7 +419,12 @@
 	      console.log("Verticator CSS path = ".concat(VerticatorStylePath));
 	    }
 
-	    loadStyle(VerticatorStylePath);
+	    var generator = document.querySelector('[name=generator]');
+
+	    if (!(generator && generator.content.includes("quarto"))) {
+	      loadStyle(VerticatorStylePath, 'verticatorstyle');
+	    }
+
 	    verticate(deck, options);
 	  };