From 3c98c997124de6cf8ee21b31d51919a92a6c7453 Mon Sep 17 00:00:00 2001 From: Martino Date: Fri, 10 Jul 2020 14:08:11 +0200 Subject: [PATCH] Version 1.0.7 This version no longer wites a style block, but the colors are injected in the HTML. This way you can have multiple Reveal instances with Verticator, each respecting its own colors. --- README.md | 8 +-- package.json | 2 +- plugin/verticator/plugin-src.js | 69 ++++++++++------------ plugin/verticator/verticator.css | 91 ++++++++++++++--------------- plugin/verticator/verticator.esm.js | 67 +++++++++------------ plugin/verticator/verticator.js | 67 +++++++++------------ 6 files changed, 138 insertions(+), 166 deletions(-) diff --git a/README.md b/README.md index b5e0920..4e26d80 100644 --- a/README.md +++ b/README.md @@ -85,8 +85,8 @@ Reveal.initialize({ // ... verticator: { darktheme: false, - color: '', - oppositecolor: '', + color: 'black', + oppositecolor: 'white', skipuncounted: false, clickable: true }, @@ -97,7 +97,7 @@ Reveal.initialize({ ``` * **`darktheme`**: Verticator assumes a light theme by default. Let Verticator know if your theme is dark with this option. - * By default, the Verticator bullets are black, and will be white on a dark slide. By setting `darktheme: true`, this behaviour is inverted. + * By default, the Verticator bullets are black, and will be white on a dark slide. By setting `darktheme: true`, this behaviour is inverted. * Reveal.js offers an option to let certain slides have an other background than the rest. For example, if the theme is light, and you use `` on one or more slides, those slides will then be black. For dark themes, you simply use a light color in the data-attribute. The value of the data-attribute needs to be hexadecimal, because Reveal.js does a calculation on it to see if that color is light or dark. The Verticator bullets will invert on those slides. * Some of the themes ('simple', 'black' and 'white') will also invert the text colors in that case. If you use another theme, you need to copy that CSS to your own theme. The Verticator inverting behaviour will always work, even if the theme text colors are not inverted. * **`color`**: To override the default black color (or the white color if `darktheme` is `true`), simply give a new color here. You can use standard CSS -, hexadecimal - or RGB colors. @@ -116,4 +116,4 @@ If you like it, please star this repo. ## License MIT licensed -Copyright (C) 2019 Martijn De Jongh (Martino) +Copyright (C) 2020 Martijn De Jongh (Martino) diff --git a/package.json b/package.json index 02e0a41..fe5600e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reveal.js-verticator", - "version": "1.0.6", + "version": "1.0.7", "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", diff --git a/plugin/verticator/plugin-src.js b/plugin/verticator/plugin-src.js index f865c3a..2e88f3a 100644 --- a/plugin/verticator/plugin-src.js +++ b/plugin/verticator/plugin-src.js @@ -82,6 +82,20 @@ const Plugin = () => { const activateBullet = function (event) { + if (revealElement.classList.contains('has-dark-background')) { + theVerticator.style.color = options.oppositecolor; + } else { + theVerticator.style.color = options.color; + } + + if (options.darktheme) { + if (revealElement.classList.contains('has-light-background')) { + theVerticator.style.color = options.oppositecolor; + } else { + theVerticator.style.color = options.color; + } + } + let listItems = selectionArray(theVerticator, 'li'); var bestMatch = -1; @@ -101,6 +115,9 @@ const Plugin = () => { const createBullets = function (event, sections) { theVerticator.classList.remove('visible'); + + theVerticator.style.color = options.color; + let listHtml = ''; sections.forEach(function (i) { @@ -116,41 +133,6 @@ const Plugin = () => { }, 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) { @@ -190,7 +172,6 @@ const Plugin = () => { }; if (theVerticator) { - createStyle(); deck.on('slidechanged', event => { slideAppear(event) }); @@ -210,12 +191,13 @@ const Plugin = () => { let defaultOptions = { darktheme: false, - color: '', - oppositecolor: '', + color: 'black', + oppositecolor: 'white', skipuncounted: false, clickable: true }; + const defaults = function (options, defaultOptions) { for (let i in defaultOptions) { if (!options.hasOwnProperty(i)) { @@ -225,8 +207,17 @@ const Plugin = () => { } let options = deck.getConfig().verticator || {}; - defaults(options, defaultOptions); + if (options.darktheme) { + if (!options.hasOwnProperty('color')) { + defaultOptions.color = 'white'; + } + if (!options.hasOwnProperty('oppositecolor')) { + defaultOptions.oppositecolor = 'black'; + } + } + + defaults(options, defaultOptions); verticate(deck, options); }; diff --git a/plugin/verticator/verticator.css b/plugin/verticator/verticator.css index 8d2e4a5..fabd0f8 100644 --- a/plugin/verticator/verticator.css +++ b/plugin/verticator/verticator.css @@ -18,53 +18,52 @@ ul.verticator { -ms-flex-direction: column; flex-direction: column; padding: 12px; - -webkit-transition: all 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -o-transition: all 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - transition: all 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } + -webkit-transition: background-color 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: background-color 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: background-color 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: background-color 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: background-color 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } ul.verticator.visible { opacity: 0.6; } ul.verticator.visible:hover { opacity: 1; } - ul.verticator li a { - width: 14.4px; - height: 18px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } - ul.verticator li a:after { - display: block; - content: ''; - width: 12px; - height: 12px; - opacity: 0.6; - -webkit-transform: translateZ(0) scale(0.4); - transform: translateZ(0) scale(0.4); - background-color: black; - border-radius: 100%; - -webkit-transition: background-color 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - transition: background-color 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -o-transition: background-color 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - transition: background-color 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - transition: background-color 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - ul.verticator li a:hover { - color: currentColor; } - ul.verticator li a:hover:after { - opacity: 1; - -webkit-transform: translateZ(0) scale(0.75); - transform: translateZ(0) scale(0.75); } - ul.verticator li.active a:after { - -webkit-transform: translateZ(0) scale(1); - transform: translateZ(0) scale(1); - opacity: 1; } - .dark-theme ul.verticator li a:after { - background-color: white; } - .has-light-background ul.verticator li a:after, .dark-theme.has-light-background ul.verticator li a:after { - background-color: black; } - .has-dark-background ul.verticator li a:after, .light-theme.has-dark-background ul.verticator li a:after { - background-color: white; } + ul.verticator li { + color: inherit; } + ul.verticator li a { + color: inherit; + width: 14.4px; + height: 18px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + ul.verticator li a:after { + display: block; + content: ''; + width: 12px; + height: 12px; + opacity: 0.6; + -webkit-transform: translateZ(0) scale(0.4); + transform: translateZ(0) scale(0.4); + background-color: currentColor; + border-radius: 100%; + -webkit-transition: opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } + ul.verticator li a:hover { + color: inherit; } + ul.verticator li a:hover:after { + opacity: 1; + -webkit-transform: translateZ(0) scale(0.75); + transform: translateZ(0) scale(0.75); } + ul.verticator li.active a:after { + -webkit-transform: translateZ(0) scale(1); + transform: translateZ(0) scale(1); + opacity: 1; } diff --git a/plugin/verticator/verticator.esm.js b/plugin/verticator/verticator.esm.js index 4d58859..68ce7ef 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.6 + * Version 1.0.7 * * @license * MIT licensed @@ -104,6 +104,20 @@ var Plugin = function Plugin() { }; var activateBullet = function activateBullet(event) { + if (revealElement.classList.contains('has-dark-background')) { + theVerticator.style.color = options.oppositecolor; + } else { + theVerticator.style.color = options.color; + } + + if (options.darktheme) { + if (revealElement.classList.contains('has-light-background')) { + theVerticator.style.color = options.oppositecolor; + } else { + theVerticator.style.color = options.color; + } + } + var listItems = selectionArray(theVerticator, 'li'); var bestMatch = -1; listItems.forEach(function (listItem, i) { @@ -121,6 +135,7 @@ var Plugin = function Plugin() { var createBullets = function createBullets(event, sections) { theVerticator.classList.remove('visible'); + theVerticator.style.color = options.color; var listHtml = ''; sections.forEach(function (i) { var link = ' href="#/' + event.indexh + "/" + i + '"'; @@ -133,40 +148,6 @@ var Plugin = function Plugin() { }, 200); }; - var createStyle = function createStyle() { - var oppositeSlide = options.darktheme ? 'light' : 'dark'; - var parentStyle = options.darktheme ? '.dark-theme' : ''; - - if (options.darktheme) { - revealElement.classList.add('dark-theme'); - } - - if (options.color || options.oppositecolor) { - var styleCss = ''; - - if (options.color) { - var colorStyle = parentStyle + ' ul.verticator li a:after { background-color: ' + options.color + '; }'; - styleCss += colorStyle; - - if (!options.darktheme) { - var samecolorStyle = '.has-light-background ul.verticator li a:after { background-color: ' + options.color + '; }'; - styleCss += samecolorStyle; - } - } - - if (options.oppositecolor) { - var oppositecolorStyle = parentStyle + '.has-' + oppositeSlide + '-background ul.verticator li a:after { background-color: ' + options.oppositecolor + '; }'; - styleCss += oppositecolorStyle; - } - - if (styleCss.length) { - var style = document.createElement('style'); - style.textContent = styleCss; - document.head.appendChild(style); - } - } - }; - var slideAppear = function slideAppear(event) { var slide = event.currentSlide; var parent = slide.parentNode; @@ -198,7 +179,6 @@ var Plugin = function Plugin() { }; if (theVerticator) { - createStyle(); deck.on('slidechanged', function (event) { slideAppear(event); }); @@ -217,8 +197,8 @@ var Plugin = function Plugin() { var init = function init(deck) { var defaultOptions = { darktheme: false, - color: '', - oppositecolor: '', + color: 'black', + oppositecolor: 'white', skipuncounted: false, clickable: true }; @@ -232,6 +212,17 @@ var Plugin = function Plugin() { }; var options = deck.getConfig().verticator || {}; + + if (options.darktheme) { + if (!options.hasOwnProperty('color')) { + defaultOptions.color = 'white'; + } + + if (!options.hasOwnProperty('oppositecolor')) { + defaultOptions.oppositecolor = 'black'; + } + } + defaults(options, defaultOptions); verticate(deck, options); }; diff --git a/plugin/verticator/verticator.js b/plugin/verticator/verticator.js index 266925a..a882a72 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.6 + * Version 1.0.7 * * @license * MIT licensed @@ -110,6 +110,20 @@ }; var activateBullet = function activateBullet(event) { + if (revealElement.classList.contains('has-dark-background')) { + theVerticator.style.color = options.oppositecolor; + } else { + theVerticator.style.color = options.color; + } + + if (options.darktheme) { + if (revealElement.classList.contains('has-light-background')) { + theVerticator.style.color = options.oppositecolor; + } else { + theVerticator.style.color = options.color; + } + } + var listItems = selectionArray(theVerticator, 'li'); var bestMatch = -1; listItems.forEach(function (listItem, i) { @@ -127,6 +141,7 @@ var createBullets = function createBullets(event, sections) { theVerticator.classList.remove('visible'); + theVerticator.style.color = options.color; var listHtml = ''; sections.forEach(function (i) { var link = ' href="#/' + event.indexh + "/" + i + '"'; @@ -139,40 +154,6 @@ }, 200); }; - var createStyle = function createStyle() { - var oppositeSlide = options.darktheme ? 'light' : 'dark'; - var parentStyle = options.darktheme ? '.dark-theme' : ''; - - if (options.darktheme) { - revealElement.classList.add('dark-theme'); - } - - if (options.color || options.oppositecolor) { - var styleCss = ''; - - if (options.color) { - var colorStyle = parentStyle + ' ul.verticator li a:after { background-color: ' + options.color + '; }'; - styleCss += colorStyle; - - if (!options.darktheme) { - var samecolorStyle = '.has-light-background ul.verticator li a:after { background-color: ' + options.color + '; }'; - styleCss += samecolorStyle; - } - } - - if (options.oppositecolor) { - var oppositecolorStyle = parentStyle + '.has-' + oppositeSlide + '-background ul.verticator li a:after { background-color: ' + options.oppositecolor + '; }'; - styleCss += oppositecolorStyle; - } - - if (styleCss.length) { - var style = document.createElement('style'); - style.textContent = styleCss; - document.head.appendChild(style); - } - } - }; - var slideAppear = function slideAppear(event) { var slide = event.currentSlide; var parent = slide.parentNode; @@ -204,7 +185,6 @@ }; if (theVerticator) { - createStyle(); deck.on('slidechanged', function (event) { slideAppear(event); }); @@ -223,8 +203,8 @@ var init = function init(deck) { var defaultOptions = { darktheme: false, - color: '', - oppositecolor: '', + color: 'black', + oppositecolor: 'white', skipuncounted: false, clickable: true }; @@ -238,6 +218,17 @@ }; var options = deck.getConfig().verticator || {}; + + if (options.darktheme) { + if (!options.hasOwnProperty('color')) { + defaultOptions.color = 'white'; + } + + if (!options.hasOwnProperty('oppositecolor')) { + defaultOptions.oppositecolor = 'black'; + } + } + defaults(options, defaultOptions); verticate(deck, options); };