/***************************************************************** * @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com * https://github.com/Martinomagnifico * * Verticator.js for Reveal.js * Version 1.2.3 * * @license * MIT licensed * * Thanks to: * - Hakim El Hattab, Reveal.js ******************************************************************/ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Verticator = factory()); })(this, (function () { 'use strict'; var Plugin = function Plugin() { var lightClass = "has-light-background"; var darkClass = "has-dark-background"; var themeColorVar = "--c-theme-color"; var vertiColorVar = "--v-color"; var forceColorVar = "--v-forcecolor"; var activeclass = 'active'; var loadStyle = function loadStyle(url, title, callback) { var head = document.querySelector('head'); 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.onreadystatechange = function () { if (this.readyState === 'loaded') { finish(); } }; head.appendChild(style); } }; var findThemeColors = function findThemeColors(parent, tag) { var themeColors = {}; var colorSection = document.createElement("section"); var sectionChild = document.createElement(tag); parent.getElementsByClassName('slides')[0].appendChild(colorSection).appendChild(sectionChild); themeColors.regular = getComputedStyle(sectionChild).getPropertyValue('color'); colorSection.classList.add(lightClass); themeColors.inverse = getComputedStyle(sectionChild).getPropertyValue('color'); if (themeColors.regular == themeColors.inverse) { themeColors.theme = "light"; colorSection.classList.remove(lightClass); colorSection.classList.add(darkClass); themeColors.inverse = getComputedStyle(sectionChild).getPropertyValue('color'); } else { themeColors.theme = "dark"; } colorSection.remove(); return themeColors; }; var swapColors = function swapColors(needToSwap, options, colors, revealElement, theVerticator) { if (needToSwap) { revealElement.style.setProperty(themeColorVar, colors.themeinverse); if (options.inversecolor || options.oppositecolor) { theVerticator.style.setProperty(vertiColorVar, colors.verticatorinverse); } else { theVerticator.style.removeProperty(vertiColorVar); } } else { revealElement.style.setProperty(themeColorVar, colors.themeregular); if (options.color) { theVerticator.style.setProperty(vertiColorVar, colors.verticatorregular); } else { theVerticator.style.removeProperty(vertiColorVar); } } }; var verticate = function verticate(deck, options) { var userScale = options.scale; userScale = userScale > 2 ? 2 : userScale < 0.5 ? 0.5 : userScale; var revealElement = deck.getRevealElement(); 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]); theVerticator = revealElement.querySelector('ul.verticator'); } if (!options.clickable) { theVerticator.classList.add('no-click'); } var revealScale = deck.getScale(); var totalScale = revealScale > 1 ? revealScale * userScale : userScale; theVerticator.style.setProperty('--verticator-scale', totalScale.toFixed(2)); var tooltipScaleDamper = 1 / Math.sqrt(totalScale); theVerticator.style.setProperty('--verticator-tooltip-scale', tooltipScaleDamper.toFixed(2)); var colors = {}; var themeColors = findThemeColors(revealElement, options.themetag ? options.themetag : 'section'); colors.theme = themeColors.theme; colors.themeregular = themeColors.regular; colors.themeinverse = themeColors.inverse; colors.verticatorregular = options.color ? options.color : themeColors.regular; colors.verticatorinverse = options.inversecolor ? options.inversecolor : options.oppositecolor ? options.oppositecolor : themeColors.inverse; if (options.debug) { console.log("Theme regular color is: \"".concat(colors.themeregular, "\"")); console.log("Theme inverse color is: \"".concat(colors.themeinverse, "\"")); if (options.color) { console.log("Verticator regular color is: \"".concat(colors.verticatorregular, "\"")); } if (options.inversecolor || options.oppositecolor) { console.log("Verticator inverse color is: \"".concat(colors.verticatorinverse, "\"")); } } revealElement.style.setProperty(themeColorVar, colors.themeregular); if (options.color) { theVerticator.style.setProperty(vertiColorVar, colors.verticatorregular); } var sectionState = {}; sectionState.dark = revealElement.classList.contains(darkClass); sectionState.light = revealElement.classList.contains(lightClass); sectionState.rtl = revealElement.classList.contains('rtl'); var revealElementObserver = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { mutation.target; if (mutation.attributeName === 'class') { var hasLightBg = mutation.target.classList.contains(lightClass); var hasDarkBg = mutation.target.classList.contains(darkClass); var leftAligned = mutation.target.classList.contains('rtl'); if (sectionState.dark !== hasDarkBg || sectionState.light !== hasLightBg) { if (colors.theme == "dark" && sectionState.light !== hasLightBg) { sectionState.light = hasLightBg; swapColors(hasLightBg, options, colors, revealElement, theVerticator); } if (colors.theme == "light" && sectionState.dark !== hasDarkBg) { sectionState.dark = hasDarkBg; swapColors(hasDarkBg, options, colors, revealElement, theVerticator); } } if (options.position == "auto") { if (sectionState.rtl !== leftAligned) { sectionState.rtl = leftAligned; if (leftAligned) { theVerticator.style.left = options.offset; theVerticator.style.right = "auto"; theVerticator.classList.add('left'); } else { theVerticator.style.right = options.offset; theVerticator.style.left = "auto"; theVerticator.classList.remove('left'); } } } } }); }); revealElementObserver.observe(revealElement, { attributes: true, attributeFilter: ['class'] }); deck.on('slidechanged', function (event) { if (event.currentSlide.dataset.verticator) { if (event.currentSlide.dataset.verticator == "regular") { theVerticator.style.setProperty(forceColorVar, colors.verticatorregular); if (options.debug) { console.log("Verticator forced to: \"".concat(colors.verticatorregular, "\"")); } } else if (event.currentSlide.dataset.verticator == "inverse") { theVerticator.style.setProperty(forceColorVar, colors.verticatorinverse); if (options.debug) { console.log("Verticator forced to: \"".concat(colors.verticatorinverse, "\"")); } } else { theVerticator.style.setProperty(forceColorVar, deck.getCurrentSlide().dataset.verticator); if (options.debug) { console.log("Verticator forced to: \"".concat(deck.getCurrentSlide().dataset.verticator, "\"")); } } } else { theVerticator.style.removeProperty(forceColorVar); } }); deck.on('resize', function (event) { revealScale = event.scale; totalScale = revealScale > 1 ? revealScale * userScale : userScale; theVerticator.style.setProperty('--verticator-scale', totalScale.toFixed(2)); }); if (options.offset != '3vmin') { theVerticator.style.right = options.offset; } theVerticator.style.right = options.offset; if (options.position !== "auto") { var opposite = options.position == "left" ? "right" : "left"; theVerticator.style[options.position] = options.offset; theVerticator.style[opposite] = "auto"; if (options.position == "left" && options.tooltip !== false) { theVerticator.classList.add('left'); } } var selectionArray = function selectionArray(container, selectors) { var selections = container.querySelectorAll(selectors); var selectionarray = Array.prototype.slice.call(selections); return selectionarray; }; var clickBullet = function clickBullet(event) { if (event.target.matches('.verticator li a')) { var currIndexh = deck.getIndices().h; var currIndexf = deck.getIndices().v; var i = getNodeindex(event.target.parentNode); event.preventDefault(); deck.slide(currIndexh, i, currIndexf); } }; var activateBullet = function activateBullet(event) { var listItems = selectionArray(theVerticator, 'li'); var bestMatch = options.indexbase - 1; listItems.forEach(function (listItem, i) { if (parseInt(listItem.dataset.index) <= event.indexv + options.indexbase) { bestMatch = i; } listItem.classList.remove(activeclass); }); if (bestMatch >= 0) { listItems[bestMatch].classList.add(activeclass); } }; var ttName = function ttName(element) { if (element.dataset.verticatorTooltip && (element.dataset.verticatorTooltip == "none" || element.dataset.verticatorTooltip == "false") || element.classList.contains('no-verticator-tooltip')) { return; } else if (options.tooltip != "auto" && element.getAttribute("".concat(options.tooltip))) { return element.getAttribute("".concat(options.tooltip)); } else if (options.tooltip == "auto") { for (var _i = 0, _arr = ["data-verticator-tooltip", "data-name", "title"]; _i < _arr.length; _i++) { var attr = _arr[_i]; if (element.getAttribute(attr)) { return element.getAttribute(attr); } } for (var _i2 = 0, _arr2 = ["h1", "h2", "h3", "h4"]; _i2 < _arr2.length; _i2++) { var slctr = _arr2[_i2]; if (element.querySelector(slctr)) { return element.querySelector(slctr).textContent; } } } else return false; }; var createBullets = function createBullets(event, sections) { theVerticator.classList.remove('visible'); var listHtml = ''; sections.forEach(function (section) { var i = section[0]; var tooltipname = section[1]; var link = "href=\"#/".concat(event.indexh + options.indexbase, "/").concat(i + options.indexbase, "\""); var dataname = tooltipname ? "data-name=\"".concat(tooltipname, "\"") : ''; var tooltip = tooltipname ? "