Version 1.0.6

Auto-insert of ul.verticator. Add package.json, change readme.
Martinomagnifico · Jun 18, 2020 · a799e37 · a799e37
1 parent 46a31a7
commit a799e37
Show file tree

Hide file tree

Showing 9 changed files with 295 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -19,11 +19,25 @@ Don't overdo it. You probably don’t want 30 bullets on the right-hand side of
 
 ## Installation
 
-Copy the verticator folder to the plugins folder of the reveal.js folder, like this: `plugin/verticator`. Now add it to the dependencies of Reveal.js:
+### Regular installation
+
+Copy the verticator folder to the plugins folder of the reveal.js folder, like this: `plugin/verticator`.
+
+### npm installation
+
+This plugin is published to, and can be installed from, npm.
+
+```javascript
+npm install reveal.js-verticator
+```
+The Verticator plugin folder can then be referenced from `node_modules/reveal.js-verticator/plugin/verticator `
+
+
+## Setup
 
 ### JavaScript
 
-The Verticator plugin has been rewritten for Reveal.js version 4.
+The Verticator plugin has been rewritten for Reveal.js version 4. Verticator also works in setups with multiple Reveal instances.
 
 If you want to use Verticator with an older version of Reveal, use the [1.0.2 version](https://github.com/Martinomagnifico/reveal.js-verticator/releases).
 
@@ -57,6 +71,9 @@ If you're using ES modules, you can add it like this:
 </script>
 ```
 
+### 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. 
 
 
 ## Configuration

diff --git a/demo.html b/demo.html
@@ -17,7 +17,6 @@
 
 <body>
     <div class="reveal">
-        <ul class="verticator"></ul>
         <div class="slides">
             <section class="center">
                 <h1>Verticator</h1>

diff --git a/democolor.html b/democolor.html
@@ -17,7 +17,6 @@
 
 <body>
     <div class="reveal" data-fs-toggle="fullscreen">
-        <ul class="verticator"></ul>
         <div class="slides">
             <section class="center">
                 <h1>Verticator</h1>

diff --git a/demodark.html b/demodark.html
@@ -22,7 +22,6 @@
 
 <body>
     <div class="reveal" data-fs-toggle="fullscreen">
-        <ul class="verticator"></ul>
         <div class="slides">
             <section class="center">
                 <h1>Verticator</h1>

diff --git a/demodarkcolor.html b/demodarkcolor.html
@@ -22,7 +22,6 @@
 
 <body>
     <div class="reveal" data-fs-toggle="fullscreen">
-        <ul class="verticator"></ul>
         <div class="slides">
             <section class="center">
                 <h1>Verticator</h1>

diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+    "name": "reveal.js-verticator",
+    "version": "1.0.6",
+    "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",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Martinomagnifico/reveal.js-verticator.git"
+    },
+    "peerDependencies": {
+        "reveal.js": "^4.0"
+    },
+    "author": "Martijn De Jongh",
+    "license": "MIT, Copyright (C) 2020 Martijn De Jongh"
+}
diff --git a/plugin/verticator/plugin-src.js b/plugin/verticator/plugin-src.js
@@ -0,0 +1,240 @@
+const Plugin = () => {
+
+	// Scope support polyfill
+	try {
+		document.querySelector(":scope *")
+	} catch (t) {
+		! function (t) {
+			let e = /:scope(?![\w-])/gi,
+				r = u(t.querySelector);
+			t.querySelector = function (t) {
+				return r.apply(this, arguments)
+			};
+			let c = u(t.querySelectorAll);
+			if (t.querySelectorAll = function (t) {
+					return c.apply(this, arguments)
+				}, t.matches) {
+				let n = u(t.matches);
+				t.matches = function (t) {
+					return n.apply(this, arguments)
+				}
+			}
+			if (t.closest) {
+				let o = u(t.closest);
+				t.closest = function (t) {
+					return o.apply(this, arguments)
+				}
+			}
+
+			function u(t) {
+				return function (r) {
+					if (r && e.test(r)) {
+						let c = "q" + Math.floor(9e6 * Math.random()) + 1e6;
+						arguments[0] = r.replace(e, "[" + c + "]"), this.setAttribute(c, "");
+						let n = t.apply(this, arguments);
+						return this.removeAttribute(c), n
+					}
+					return t.apply(this, arguments)
+				}
+			}
+		}(Element.prototype)
+	}
+
+
+	const getNodeindex = function (elm) {
+		var c = elm.parentNode.children,
+			i = 0;
+		for (; i < c.length; i++)
+			if (c[i] == elm) return i;
+	}
+
+	const verticate = function (deck, options) {
+
+		let revealElement = deck.getRevealElement();
+
+		let theVerticator = revealElement.querySelector('ul.verticator');
+
+		if (!theVerticator) {
+			let ul = document.createElement('ul');
+			ul.className += "verticator";
+			revealElement.insertBefore(ul, revealElement.childNodes[0]); 
+			theVerticator = revealElement.querySelector('ul.verticator');
+		}
+
+		let activeclass = 'active';
+
+
+		const selectionArray = function (container, selectors) {
+			let selections = container.querySelectorAll(selectors);
+			let selectionarray = Array.prototype.slice.call(selections);
+			return selectionarray;
+		};
+
+		const clickBullet = function (event) {
+			if ((event.target).matches('.verticator li a')) {
+				let currIndexh = (deck.getIndices()).h;
+				let currIndexf = (deck.getIndices()).v;
+				let i = getNodeindex(event.target.parentNode);
+				event.preventDefault();
+				deck.slide(currIndexh, i, currIndexf);
+			}
+		}
+
+		const activateBullet = function (event) {
+
+			let listItems = selectionArray(theVerticator, 'li');
+			var bestMatch = -1;
+
+			listItems.forEach(function (listItem, i) {
+				if (parseInt(listItem.getAttribute("data-index")) <= event.indexv) {
+					bestMatch = i;
+				}
+
+				listItem.classList.remove(activeclass);
+			});
+
+			if (bestMatch >= 0) {
+				listItems[bestMatch].classList.add(activeclass);
+			}
+
+		};
+
+		const createBullets = function (event, sections) {
+			theVerticator.classList.remove('visible');
+			let listHtml = '';
+
+			sections.forEach(function (i) {
+				var link = ' href="#/' + event.indexh + "/" + i + '"';
+				listHtml += '<li data-index="' + i + '"><a ' +
+					(options.clickable ? link : '') + '></li>';
+			});
+
+			setTimeout(function () {
+				theVerticator.innerHTML = listHtml;
+				activateBullet(event);
+				theVerticator.classList.add('visible');
+			}, 200);
+		}
+
+		const createStyle = function () {
+
+			let oppositeSlide = options.darktheme ? 'light' : 'dark';
+			let parentStyle = options.darktheme ? '.dark-theme' : '';
+
+			if (options.darktheme) {
+				revealElement.classList.add('dark-theme');
+			}
+
+			if (options.color || options.oppositecolor) {
+
+				let styleCss = '';
+
+				if (options.color) {
+					let colorStyle = parentStyle + ' ul.verticator li a:after { background-color: ' + options.color + '; }'
+					styleCss += colorStyle;
+
+					if (!options.darktheme) {
+						let samecolorStyle = '.has-light-background ul.verticator li a:after { background-color: ' + options.color + '; }'
+						styleCss += samecolorStyle;
+					}
+				}
+
+				if (options.oppositecolor) {
+					let oppositecolorStyle = parentStyle + '.has-' + oppositeSlide + '-background ul.verticator li a:after { background-color: ' + options.oppositecolor + '; }'
+					styleCss += oppositecolorStyle;
+				}
+
+				if (styleCss.length) {
+					let style = document.createElement('style');
+					style.textContent = styleCss;
+					document.head.appendChild(style);
+				}
+			}
+		}
+
+		const slideAppear = function (event) {
+
+			let slide = event.currentSlide;
+			let parent = slide.parentNode;
+
+			let sections = Array.from(parent.children)
+				.map(function (elem, index) {
+					return [index, elem];
+				})
+				.filter(function (indexedElem) {
+					return indexedElem[1].tagName == 'SECTION' &&
+						(!options.skipuncounted ||
+							indexedElem[1].getAttribute('data-visibility') !== 'uncounted')
+				})
+				.map(function (indexedElem) {
+					return indexedElem[0];
+				});
+
+			if (!parent.classList.contains('stack')) {
+				theVerticator.classList.remove('visible');
+			} else if (sections.length > 1) {
+				if (event.previousSlide) {
+					let lastParent = event.previousSlide.parentNode;
+
+					if (parent != lastParent) {
+						createBullets(event, sections);
+					}
+				} else {
+					createBullets(event, sections);
+				}
+
+				setTimeout(function () {
+					activateBullet(event);
+				}, 150);
+			}
+		};
+
+		if (theVerticator) {
+			createStyle();
+			deck.on('slidechanged', event => {
+				slideAppear(event)
+			});
+			deck.on('ready', event => {
+				slideAppear(event)
+			});
+			if ((deck.getConfig()).embedded) {
+				deck.on('click', event => {
+					clickBullet(event)
+				});
+			}
+		}
+
+	};
+
+	const init = function (deck) {
+
+		let defaultOptions = {
+			darktheme: false,
+			color: '',
+			oppositecolor: '',
+			skipuncounted: false,
+			clickable: true
+		};
+
+		const defaults = function (options, defaultOptions) {
+			for (let i in defaultOptions) {
+				if (!options.hasOwnProperty(i)) {
+					options[i] = defaultOptions[i];
+				}
+			}
+		}
+
+		let options = deck.getConfig().verticator || {};
+		defaults(options, defaultOptions);
+
+		verticate(deck, options);
+
+	};
+
+	return {
+		id: 'verticator',
+		init: init
+	};
+};
+
+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.5
+ * Version 1.0.6
  * 
  * @license 
  * MIT licensed
@@ -76,7 +76,15 @@ var Plugin = function Plugin() {
 
   var verticate = function verticate(deck, options) {
     var revealElement = deck.getRevealElement();
-    var theVerticator = revealElement.querySelector('.verticator');
+    var theVerticator = revealElement.querySelector('ul.verticator');
+
+    if (!theVerticator) {
+      var ul = document.createElement('ul');
+      ul.className += "verticator";
+      revealElement.insertBefore(ul, revealElement.childNodes[0]);
+      theVerticator = revealElement.querySelector('ul.verticator');
+    }
+
     var activeclass = 'active';
 
     var selectionArray = function selectionArray(container, selectors) {

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.5
+ * Version 1.0.6
  * 
  * @license 
  * MIT licensed
@@ -82,7 +82,15 @@
 
 	  var verticate = function verticate(deck, options) {
 	    var revealElement = deck.getRevealElement();
-	    var theVerticator = revealElement.querySelector('.verticator');
+	    var theVerticator = revealElement.querySelector('ul.verticator');
+
+	    if (!theVerticator) {
+	      var ul = document.createElement('ul');
+	      ul.className += "verticator";
+	      revealElement.insertBefore(ul, revealElement.childNodes[0]);
+	      theVerticator = revealElement.querySelector('ul.verticator');
+	    }
+
 	    var activeclass = 'active';
 
 	    var selectionArray = function selectionArray(container, selectors) {