Skip to content

Commit

Permalink
Version 1.0.7
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
Martino committed Jul 10, 2020
1 parent a799e37 commit 3c98c99
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 166 deletions.
8 changes: 4 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ Reveal.initialize({
// ...
verticator: {
darktheme: false,
color: '',
oppositecolor: '',
color: 'black',
oppositecolor: 'white',
skipuncounted: false,
clickable: true
},
Expand All @@ -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 `<section(data-background-color="#000")></section>` 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.
Expand All @@ -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)
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
69 changes: 30 additions & 39 deletions plugin/verticator/plugin-src.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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) {
Expand All @@ -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) {

Expand Down Expand Up @@ -190,7 +172,6 @@ const Plugin = () => {
};

if (theVerticator) {
createStyle();
deck.on('slidechanged', event => {
slideAppear(event)
});
Expand All @@ -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)) {
Expand All @@ -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);

};
Expand Down
91 changes: 45 additions & 46 deletions plugin/verticator/verticator.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
67 changes: 29 additions & 38 deletions plugin/verticator/verticator.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* https://github.com/Martinomagnifico
*
* Verticator.js for Reveal.js
* Version 1.0.6
* Version 1.0.7
*
* @license
* MIT licensed
Expand Down Expand Up @@ -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) {
Expand All @@ -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 + '"';
Expand All @@ -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;
Expand Down Expand Up @@ -198,7 +179,6 @@ var Plugin = function Plugin() {
};

if (theVerticator) {
createStyle();
deck.on('slidechanged', function (event) {
slideAppear(event);
});
Expand All @@ -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
};
Expand All @@ -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);
};
Expand Down
Loading

0 comments on commit 3c98c99

Please sign in to comment.