From a799e37d10c4c0d9252e2410d3bc50e8c66720ec Mon Sep 17 00:00:00 2001 From: Martino Date: Thu, 18 Jun 2020 10:29:32 +0200 Subject: [PATCH] Version 1.0.6 Auto-insert of ul.verticator. Add package.json, change readme. --- README.md | 21 ++- demo.html | 1 - democolor.html | 1 - demodark.html | 1 - demodarkcolor.html | 1 - package.json | 16 ++ plugin/verticator/plugin-src.js | 240 ++++++++++++++++++++++++++++ plugin/verticator/verticator.esm.js | 12 +- plugin/verticator/verticator.js | 12 +- 9 files changed, 295 insertions(+), 10 deletions(-) create mode 100644 package.json create mode 100644 plugin/verticator/plugin-src.js diff --git a/README.md b/README.md index 83b17dc..b5e0920 100644 --- 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: ``` +### 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 index 365fa54..f43bbba 100644 --- a/demo.html +++ b/demo.html @@ -17,7 +17,6 @@
-

Verticator

diff --git a/democolor.html b/democolor.html index 4354fc8..7c65c28 100644 --- a/democolor.html +++ b/democolor.html @@ -17,7 +17,6 @@
-

    Verticator

    diff --git a/demodark.html b/demodark.html index 85a675b..2c9c55c 100644 --- a/demodark.html +++ b/demodark.html @@ -22,7 +22,6 @@
    -

      Verticator

      diff --git a/demodarkcolor.html b/demodarkcolor.html index 7c709d4..62c55ef 100644 --- a/demodarkcolor.html +++ b/demodarkcolor.html @@ -22,7 +22,6 @@
      -

        Verticator

        diff --git a/package.json b/package.json new file mode 100644 index 0000000..02e0a41 --- /dev/null +++ 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" +} \ No newline at end of file diff --git a/plugin/verticator/plugin-src.js b/plugin/verticator/plugin-src.js new file mode 100644 index 0000000..f865c3a --- /dev/null +++ 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 += '
        • '; + }); + + 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; \ No newline at end of file diff --git a/plugin/verticator/verticator.esm.js b/plugin/verticator/verticator.esm.js index d16ff0a..4d58859 100644 --- 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 index 3ad37e9..266925a 100644 --- 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) {