Skip to content

Commit

Permalink
Version 1.1.5
Browse files Browse the repository at this point in the history 
- In some cases the 'has-dark-background' (or light) was not correctly applied to the Reveal element. This fix now also looks at the slides that request these class changes.
- Verticator margin set to 0.
- Increase specificity of the tooltip.
  • Loading branch information
@Martinomagnifico
Martinomagnifico committed Oct 14, 2022
1 parent 5afa7db commit 02899fd
Show file tree
Hide file tree
Showing 9 changed files with 267 additions and 161 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# Changelog


## [1.1.5] - 2022-10-14
### Changed
- In some cases the 'has-dark-background' (or light) was not correctly applied to the Reveal element. This fix now also looks at the slides that request these class changes.
- Verticator margin set to 0.
- Increase specificity of the tooltip.


## [1.1.4] - 2022-06-04
### Changed
- Typo fix
Expand Down
2 changes: 1 addition & 1 deletion LICENSE
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2021 Martijn De Jongh (Martino)
Copyright (c) 2022 Martijn De Jongh (Martino)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
116 changes: 69 additions & 47 deletions css/demo.css
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,31 @@
.small {
font-size: .7em; }
font-size: 0.7em;
}

.smallitalic {
font-size: .7em;
font-style: italic; }
font-size: 0.7em;
font-style: italic;
}

.reveal pre {
width: 100%;
margin: 0 auto;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 4px;
background: rgba(180, 180, 180, 0.5); }
background: rgba(180, 180, 180, 0.5);
}

p code, p kbd {
background: rgba(180, 180, 180, 0.2);
font-size: 0.8em;
padding: 5px 10px;
border-radius: 4px; }
border-radius: 4px;
}

p kbd {
font-family: monospace; }
font-family: monospace;
}

.centerblock {
height: 100%;
Expand All @@ -32,7 +37,8 @@ p kbd {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: auto; }
margin: auto;
}

ol.twocol {
padding: 0;
Expand All @@ -44,17 +50,20 @@ ol.twocol {
column-count: 2;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px; }
ol.twocol li {
counter-increment: item;
padding-left: 1.7em; }
ol.twocol li:before {
content: counter(item) ".";
margin-left: -1.7em;
margin-right: 0.5em;
display: inline-block;
width: 1.2em;
text-align: right; }
column-gap: 20px;
}
ol.twocol li {
counter-increment: item;
padding-left: 1.7em;
}
ol.twocol li:before {
content: counter(item) ".";
margin-left: -1.7em;
margin-right: 0.5em;
display: inline-block;
width: 1.2em;
text-align: right;
}

a.github-corner {
position: absolute;
Expand All @@ -64,24 +73,31 @@ a.github-corner {
line-height: 0;
color: var(--r-main-color);
opacity: 0.5;
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s; }
.has-dark-background a.github-corner {
color: white; }
.has-light-background a.github-corner {
color: black; }
a.github-corner.bottom {
top: auto;
bottom: 3px; }
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.has-dark-background a.github-corner {
color: white;
}
.has-light-background a.github-corner {
color: black;
}
a.github-corner.bottom {
top: auto;
bottom: 3px;
}

a.github-corner:hover {
color: var(--r-main-color);
opacity: 1; }
.has-dark-background a.github-corner:hover {
color: white; }
.has-light-background a.github-corner:hover {
color: black; }
opacity: 1;
}
.has-dark-background a.github-corner:hover {
color: white;
}
.has-light-background a.github-corner:hover {
color: black;
}

.reveal pre {
font-size: 18px;
Expand All @@ -98,22 +114,28 @@ a.github-corner:hover {
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
cursor: default; }
.reveal pre:focus {
outline: none; }
.reveal pre code {
border-radius: 4px;
padding: 10px 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 30px; }
.reveal pre code:focus {
outline: none; }
.reveal pre + pre {
margin-top: 20px; }
cursor: default;
}
.reveal pre:focus {
outline: none;
}
.reveal pre code {
border-radius: 4px;
padding: 10px 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 30px;
}
.reveal pre code:focus {
outline: none;
}
.reveal pre + pre {
margin-top: 20px;
}

li code {
padding: 0.05em 0.3em;
font-size: 0.8em;
border-radius: 4px;
background-color: rgba(39, 40, 34, 0.2); }
background-color: rgba(39, 40, 34, 0.2);
}
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.1.4",
"version": "1.1.5",
"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
24 changes: 20 additions & 4 deletions plugin/verticator/plugin-src.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,27 @@ const Plugin = () => {
const activateBullet = function(event) {

let listItems = selectionArray(theVerticator, 'li');
let hasDarkBackground = false;
let hasLightBackground = false;

if (revealElement.classList.contains('has-dark-background')) {
hasDarkBackground = true;
}
if (revealElement.classList.contains('has-light-background')) {
hasLightBackground = true;
}

if (event.currentSlide.dataset.state) {
let currentState = event.currentSlide.dataset.state.split(' ');
if (currentState.includes("has-dark-background")) {
hasDarkBackground = true;
}
if (currentState.includes("has-light-background")) {
hasLightBackground = true;
}
}

if (hasDarkBackground) {
theVerticator.style.color = options.oppositecolor;
theVerticator.style.setProperty('--bullet-maincolor', options.oppositecolor);
} else {
Expand All @@ -101,7 +120,7 @@ const Plugin = () => {
}

if (options.darktheme) {
if (revealElement.classList.contains('has-light-background')) {
if (hasLightBackground) {
theVerticator.style.color = options.oppositecolor;
theVerticator.style.setProperty('--bullet-maincolor', options.oppositecolor);
} else {
Expand Down Expand Up @@ -214,9 +233,6 @@ const Plugin = () => {
deck.on('slidechanged', event => {
slideAppear(event)
});
deck.on('ready', event => {
slideAppear(event)
});
if ((deck.getConfig())
.embedded) {
deck.on('click', event => {
Expand Down
70 changes: 39 additions & 31 deletions plugin/verticator/tooltip.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
:root {
--verticator-scale: 1; }
--verticator-scale: 1;
}

.tooltip {
.verticator .tooltip {
position: absolute;
top: 9px;
right: 24px;
Expand All @@ -26,36 +27,41 @@
max-width: 15em;
display: block;
-webkit-font-smoothing: antialiased;
color: black; }
.tooltip span {
white-space: nowrap;
display: block;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
line-height: 1.25; }
.tooltip::after {
content: '';
display: block;
width: .66em;
height: .66em;
background: white;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translate3d(50%, -50%, -1px) rotate(45deg);
transform: translate3d(50%, -50%, -1px) rotate(45deg); }
color: black;
}
.verticator .tooltip span {
white-space: nowrap;
display: block;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
line-height: 1.25;
}
.verticator .tooltip::after {
content: "";
display: block;
width: 0.66em;
height: 0.66em;
background: white;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translate3d(50%, -50%, -1px) rotate(45deg);
transform: translate3d(50%, -50%, -1px) rotate(45deg);
}

.verticator.left .tooltip {
right: auto;
left: calc(12px * var(--verticator-scale) * 2);
-webkit-box-shadow: calc(-4px * var(--verticator-scale)) calc(6px * var(--verticator-scale)) calc(16px * var(--verticator-scale)) rgba(0, 0, 0, 0.25);
box-shadow: calc(-4px * var(--verticator-scale)) calc(6px * var(--verticator-scale)) calc(16px * var(--verticator-scale)) rgba(0, 0, 0, 0.25); }
.verticator.left .tooltip::after {
right: auto;
left: 0;
-webkit-transform: translate3d(-50%, -50%, -1px) rotate(45deg);
transform: translate3d(-50%, -50%, -1px) rotate(45deg); }
box-shadow: calc(-4px * var(--verticator-scale)) calc(6px * var(--verticator-scale)) calc(16px * var(--verticator-scale)) rgba(0, 0, 0, 0.25);
}
.verticator.left .tooltip::after {
right: auto;
left: 0;
-webkit-transform: translate3d(-50%, -50%, -1px) rotate(45deg);
transform: translate3d(-50%, -50%, -1px) rotate(45deg);
}

.verticator li a + .tooltip {
pointer-events: none;
Expand All @@ -64,9 +70,11 @@
-webkit-transition: opacity 0.125s ease-in-out;
-o-transition: opacity 0.125s ease-in-out;
transition: opacity 0.125s ease-in-out;
-webkit-transition-delay: .125s;
-o-transition-delay: .125s;
transition-delay: .125s; }
-webkit-transition-delay: 0.125s;
-o-transition-delay: 0.125s;
transition-delay: 0.125s;
}

.verticator li a:hover + .tooltip {
opacity: 1; }
opacity: 1;
}
Loading

0 comments on commit 02899fd

Please sign in to comment.