Version 1.1.0

Added 'autogenerate' option that can be turned off.
Martinomagnifico · Feb 15, 2022 · ff33e89 · ff33e89
1 parent 2fc024b
commit ff33e89
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -75,7 +75,7 @@ If you're using ES modules, you can add it like this:
 
 ### HTML
 
-Verticator needs a UL with the class 'verticator' to insert the indicators. If there is not one already in the HTML, Verticator will generate it automatically for you. 
+Verticator needs a UL with the class 'verticator' to insert the indicators. If there is not one already in the HTML, Verticator will generate it automatically for you. This can be disabled by setting the option `autogenerate` to `false`.
 
 
 ## Configuration
@@ -92,7 +92,8 @@ Reveal.initialize({
 		skipuncounted: false,
 		clickable: true,
 		position: 'right',
-		offset: '3vmin'
+		offset: '3vmin',
+        autogenerate: true
 	},
 	plugins: [ Verticator ]
 	// ... 
@@ -110,6 +111,7 @@ Reveal.initialize({
 * **`clickable`**: Allow navigation to a slide by clicking on the corresponding Verticator bullet. This behaviour is enabled by default.
 * **`position`**: Sets the position of Verticator in the presentation. Set to `right` by default, it can also be set to `left`.
 * **`offset`**: Sets the offset of Verticator from the edge (right or left, see 'position') of the screen. Set to `3vmin` by default, it can be set to any other valid CSS size and unit. 
+* **`autogenerate`**: Autogenerate a UL element with the class `verticator` if none is found. Set to `true` by default.
 
 ## Like it?
 
@@ -119,4 +121,4 @@ If you like it, please star this repo.
 ## License
 MIT licensed
 
-Copyright (C) 2021 Martijn De Jongh (Martino)
+Copyright (C) 2022 Martijn De Jongh (Martino)
diff --git a/demo.html b/demo.html
@@ -8,9 +8,9 @@
     <meta name="author" content="Martinomagnifico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reset.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/theme/white.css">
+    <link rel="stylesheet" href="../dist/reset.css">
+    <link rel="stylesheet" href="../dist/reveal.css">
+    <link rel="stylesheet" href="../dist/theme/white.css">
     <link rel="stylesheet" href="plugin/verticator/verticator.css">
     <link rel="stylesheet" href="css/demo.css">
 </head>
@@ -65,6 +65,7 @@ <h3>Options</h3>
                         <li>clickable</li>
                         <li>position</li>
                         <li>offset</li>
+                        <li>autogenerate</li>
                     </ol>
                 </section>
                 <section class="center">
@@ -145,10 +146,17 @@ <h4>Option 7: offset</h4>
 	verticator: {
 		offset: '40px'
 	},
-	plugins: [ Verticator ]
-
-
-</code></pre>
+	plugins: [ Verticator ]</code></pre>
+                </section>
+                <section class="center">
+                    <h4>Option 7: autogenerate</h4>
+                    <p>Verticator will autogenerate bullets. In presentations with huge vertical stacks, this can result in an unsightly column of bullets. The user can then disable the autogeneration like this:</p>
+                    <pre><code>Reveal.initialize({
+	...
+	verticator: {
+		autogenerate: false
+	},
+	plugins: [ Verticator ]</code></pre>
                 </section>
                 <section class="center">
                     <h4>Option demos</h4>
@@ -170,7 +178,7 @@ <h4>Option demos</h4>
             </section>
         </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js"></script>
+    <script src="../dist/reveal.js"></script>
     <script src="plugin/verticator/verticator.js"></script>
     <script>
         Reveal.initialize({

diff --git a/democolor.html b/democolor.html
@@ -8,9 +8,9 @@
     <meta name="author" content="Martinomagnifico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reset.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/theme/white.css">
+    <link rel="stylesheet" href="../dist/reset.css">
+    <link rel="stylesheet" href="../dist/reveal.css">
+    <link rel="stylesheet" href="../dist/theme/white.css">
     <link rel="stylesheet" href="plugin/verticator/verticator.css">
     <link rel="stylesheet" href="css/demo.css">
 </head>
@@ -53,7 +53,7 @@ <h3>And a regular slide</h3>
             </section>
         </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js"></script>
+    <script src="../dist/reveal.js"></script>
     <script src="plugin/verticator/verticator.js"></script>
     <script>
         Reveal.initialize({

diff --git a/demodark.html b/demodark.html
@@ -8,9 +8,9 @@
     <meta name="author" content="Martinomagnifico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reset.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/theme/black.css">
+    <link rel="stylesheet" href="../dist/reset.css">
+    <link rel="stylesheet" href="../dist/reveal.css">
+    <link rel="stylesheet" href="../dist/theme/black.css">
     <link rel="stylesheet" href="plugin/verticator/verticator.css">
     <link rel="stylesheet" href="css/demo.css">
     <style>
@@ -56,7 +56,7 @@ <h3>And a regular slide</h3>
             </section>
         </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js"></script>
+    <script src="../dist/reveal.js"></script>
     <script src="plugin/verticator/verticator.js"></script>
     <script>
         Reveal.initialize({

diff --git a/demodarkcolor.html b/demodarkcolor.html
@@ -8,9 +8,9 @@
     <meta name="author" content="Martinomagnifico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reset.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/theme/black.css">
+    <link rel="stylesheet" href="../dist/reset.css">
+    <link rel="stylesheet" href="../dist/reveal.css">
+    <link rel="stylesheet" href="../dist/theme/black.css">
     <link rel="stylesheet" href="plugin/verticator/verticator.css">
     <link rel="stylesheet" href="css/demo.css">
     <style>
@@ -59,7 +59,7 @@ <h3>And a regular slide</h3>
             </section>
         </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js"></script>
+    <script src="../dist/reveal.js"></script>
     <script src="plugin/verticator/verticator.js"></script>
     <script>
         Reveal.initialize({

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "reveal.js-verticator",
-    "version": "1.0.9",
+    "version": "1.1.0",
     "description": "A plugin for Reveal.js 4 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",
@@ -9,7 +9,7 @@
         "url": "https://github.com/Martinomagnifico/reveal.js-verticator.git"
     },
     "peerDependencies": {
-        "reveal.js": "^4.0"
+        "reveal.js": "^4.2"
     },
     "author": "Martijn De Jongh",
     "license": "MIT, Copyright (C) 2021 Martijn De Jongh"

diff --git a/plugin/verticator/plugin-src.js b/plugin/verticator/plugin-src.js
@@ -55,9 +55,10 @@ const Plugin = () => {
 		let theVerticator = revealElement.querySelector('ul.verticator');
 
 		if (!theVerticator) {
+			if(!options.autogenerate) return
 			let ul = document.createElement('ul');
 			ul.className += "verticator";
-			revealElement.insertBefore(ul, revealElement.childNodes[0]); 
+			revealElement.insertBefore(ul, revealElement.childNodes[0]);
 			theVerticator = revealElement.querySelector('ul.verticator');
 		}
 
@@ -132,7 +133,7 @@ const Plugin = () => {
 
 		const createBullets = function (event, sections) {
 			theVerticator.classList.remove('visible');
-			
+
 			theVerticator.style.color = options.color;
 
 			let listHtml = '';
@@ -219,7 +220,8 @@ const Plugin = () => {
 			skipuncounted: false,
 			clickable: true,
 			position: 'right',
-			offset: '3vmin'
+			offset: '3vmin',
+			autogenerate: true
 		};
 
 
@@ -255,4 +257,4 @@ const Plugin = () => {
 	};
 };
 
-export default Plugin;
+export default Plugin;
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.0.9
+ * Version 1.1.0
  * 
  * @license 
  * MIT licensed
@@ -79,6 +79,7 @@ var Plugin = function Plugin() {
     var theVerticator = revealElement.querySelector('ul.verticator');
 
     if (!theVerticator) {
+      if (!options.autogenerate) return;
       var ul = document.createElement('ul');
       ul.className += "verticator";
       revealElement.insertBefore(ul, revealElement.childNodes[0]);
@@ -222,7 +223,8 @@ var Plugin = function Plugin() {
       skipuncounted: false,
       clickable: true,
       position: 'right',
-      offset: '3vmin'
+      offset: '3vmin',
+      autogenerate: true
     };
 
     var defaults = function defaults(options, defaultOptions) {

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.0.9
+ * Version 1.1.0
  * 
  * @license 
  * MIT licensed
@@ -85,6 +85,7 @@
 	    var theVerticator = revealElement.querySelector('ul.verticator');
 
 	    if (!theVerticator) {
+	      if (!options.autogenerate) return;
 	      var ul = document.createElement('ul');
 	      ul.className += "verticator";
 	      revealElement.insertBefore(ul, revealElement.childNodes[0]);
@@ -228,7 +229,8 @@
 	      skipuncounted: false,
 	      clickable: true,
 	      position: 'right',
-	      offset: '3vmin'
+	      offset: '3vmin',
+	      autogenerate: true
 	    };
 
 	    var defaults = function defaults(options, defaultOptions) {

diff --git a/screenshot.png b/screenshot.png