Skip to content

Commit

Permalink
Version 1.2.6
Browse files Browse the repository at this point in the history 
### Added
- Added a 'cssautoload' option that can be disabled if the user wants to use npm imports for the CSS file. This is useful for users who want to use a bundler like Webpack or Parcel.

### Changed
- Changed some devDependencies
  • Loading branch information
@Martinomagnifico
Martinomagnifico committed Jun 12, 2024
1 parent d86b3af commit 2eb1fb5
Show file tree
Hide file tree
Showing 80 changed files with 6,758 additions and 506 deletions.
38 changes: 38 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# Changelog

## [1.2.6] - 2024-06-12
### Added
- Added a 'cssautoload' option that can be disabled if the user wants to use npm imports for the CSS file. This is useful for users who want to use a bundler like Webpack or Parcel.

### Changed
- Changed some devDependencies


## [1.2.5] - 2024-02-04
### Changed
- Override change in Package.json
- Change for mobile view
- Latest Reveal.js version

## [1.2.4] - 2023-11-21
### Added
- Added detection for light or dark stacks, with or without light or dark sections
- Expanded the above to also fix text for double negative slide backgrounds

### Changed
- Rewrote plugin so that the demo can be easily started from the command line
- Hide Verticator on presentation in scroll mode
- Correct the Verticator state when going back into classic view


## [1.2.3] - 2022-11-19
### Changed
- Changed documentation to show default settings first
- Fix `rtl` setting to read Reveal config correctly
- Fix click on Verticator bullet if embedded with multiple presentations


## [1.2.2] - 2022-11-18
### Changed
- Release parity to the npm version of Verticator

14 changes: 8 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,16 @@

A quarto extension for [Reveal.js](https://revealjs.com) that adds indicators to show the amount of slides in a vertical stack.

[<img src="https://martinomagnifico.github.io/reveal.js-verticator/screenshot.png" width="100%">](https://martinomagnifico.github.io/reveal.js-verticator/demo.html)
[<img src="https://martinomagnifico.github.io/reveal.js-verticator/screenshot.png" width="100%">](https://martinomagnifico.github.io/quarto-verticator/demo.html)

Sometimes you would like to have an indication of how many slides are remaining in a vertical stack. This plugin does just that. It is visually similar to the indicators at [fullPage.js](https://alvarotrigo.com/fullPage/).

* [Demo (dark theme, no options set)](https://martinomagnifico.github.io/reveal.js-verticator/demo.html)
* [Dark theme with color options](https://martinomagnifico.github.io/reveal.js-verticator/demodarkcolor.html)
* [Light theme, no color options](https://martinomagnifico.github.io/reveal.js-verticator/demolight.html)
* [Light theme with color options](https://martinomagnifico.github.io/reveal.js-verticator/demolightcolor.html)

The following demos are from the regular Reveal.js plugin, but the Quarto plugin works the same way:
* [Demo (dark theme, no options set)](https://martinomagnifico.github.io/reveal.js-verticator/demo/demo.html)
* [Dark theme with color options](https://martinomagnifico.github.io/reveal.js-verticator/demo/demodarkcolor.html)
* [Light theme, no color options](https://martinomagnifico.github.io/reveal.js-verticator/demo/demolight.html)
* [Light theme with color options](https://martinomagnifico.github.io/reveal.js-verticator/demo/demolightcolor.html)
* [Tooltip demo](https://martinomagnifico.github.io/reveal.js-verticator/demotooltip.html)

Don't overdo it. You probably don’t want 30 bullets on the right-hand side of your presentation.
Expand Down Expand Up @@ -90,4 +92,4 @@ If you like it, please star this repo.
## License
MIT licensed

Copyright (C) 2022 Martijn De Jongh (Martino)
Copyright (C) 2024 Martijn De Jongh (Martino)
175 changes: 108 additions & 67 deletions _extensions/verticator/verticator.css
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,107 @@
ul.verticator {

/*****************************************************************
*
* Verticator for Reveal.js
* Version 1.2.6
*
* @author: Martijn De Jongh (Martino), [email protected]
* https://github.com/martinomagnifico
*
* @license
* MIT licensed
*
* Copyright (C) 2023 Martijn De Jongh (Martino)
*
******************************************************************/



ul.verticator,
.reveal ul.verticator {
opacity: 0;
pointer-events: none;
will-change: color;
color: white;
color: var(--v-forcecolor, var(--v-color, var(--c-theme-color, white)));
-webkit-transition: opacity 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: opacity 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: opacity 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
list-style: none;
right: auto;
left: auto;
margin: 0;
top: 50%;
-webkit-transform: translateY(-50%) translateZ(0);
transform: translateY(-50%) translateZ(0);
z-index: 10;
transform: translateY(-50%) translateZ(0);
z-index: 2;
position: sticky;
width: max-content;
display: flex;
flex-direction: column;
}
ul.verticator .verticator-holder,
.reveal ul.verticator .verticator-holder {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
top: 0;
right: 0;
transform: translateY(-50%);
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 12px;
flex-direction: column;
padding: calc(12px * var(--verticator-scale));
}
ul.verticator.visible {
ul.verticator:not(.left),
.reveal ul.verticator:not(.left) {
margin: 0 0 0 auto;
}
ul.verticator.left,
.reveal ul.verticator.left {
margin: 0 auto 0 0;
}
ul.verticator.left .verticator-holder,
.reveal ul.verticator.left .verticator-holder {
right: auto;
left: 0;
}
ul.verticator.visible,
.reveal ul.verticator.visible {
opacity: 0.6;
pointer-events: inherit;
}
ul.verticator.visible:hover {
ul.verticator.visible:hover,
.reveal ul.verticator.visible:hover {
opacity: 1;
}
ul.verticator.no-click {
ul.verticator.resizing, ul.verticator.resizing.visible,
.reveal ul.verticator.resizing,
.reveal ul.verticator.resizing.visible {
opacity: 0;
pointer-events: none;
}
ul.verticator.no-click,
.reveal ul.verticator.no-click {
pointer-events: none;
}
ul.verticator li {
ul.verticator li,
.reveal ul.verticator li {
display: block;
position: relative;
will-change: color;
color: inherit;
margin: 0;
-webkit-transition: opacity 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: opacity 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: opacity 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
opacity: 0;
}
ul.verticator li:before {
ul.verticator li:before,
.reveal ul.verticator li:before {
display: none;
}
ul.verticator li a {
ul.verticator li a,
.reveal ul.verticator li a {
color: inherit;
will-change: color;
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;
align-items: center;
justify-content: center;
text-decoration: none;
width: calc(18px * var(--verticator-scale));
height: calc(18px * var(--verticator-scale));
}
ul.verticator li a:after {
ul.verticator li a:after,
.reveal ul.verticator li a:after {
content: "";
will-change: color;
color: inherit;
Expand All @@ -73,43 +110,57 @@ ul.verticator li a:after {
width: calc(12px * var(--verticator-scale));
height: calc(12px * var(--verticator-scale));
opacity: 0.6;
-webkit-transform: translateZ(0) scale(0.4);
transform: translateZ(0) scale(0.4);
border-radius: 100%;
-webkit-transition: opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 300ms 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 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: transform 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: transform 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: transform 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 200ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-webkit-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms;
transition-delay: 50ms;
}
ul.verticator li a:hover {
ul.verticator li a:hover,
.reveal ul.verticator li a:hover {
color: inherit;
}
ul.verticator li a:hover:after {
ul.verticator li a:hover:after,
.reveal ul.verticator li a:hover:after {
opacity: 1;
-webkit-transform: translateZ(0) scale(0.75);
transform: translateZ(0) scale(0.75);
transform: translateZ(0) scale(0.75);
}
ul.verticator li.active a {
ul.verticator li.active a,
.reveal ul.verticator li.active a {
cursor: default;
}
ul.verticator li.active a:after {
-webkit-transform: translateZ(0) scale(1);
transform: translateZ(0) scale(1);
ul.verticator li.active a:after,
.reveal ul.verticator li.active a:after {
transform: translateZ(0) scale(1);
opacity: 1;
}
ul.verticator.visible li {
ul.verticator.visible li,
.reveal ul.verticator.visible li {
opacity: 1;
}
.reveal-viewport.reveal-scroll ul.verticator,
.reveal-viewport.reveal-scroll .reveal ul.verticator {
display: none;
}

.print-pdf .verticator,
.overview .verticator {
display: none;
}

section.has-light-background section.has-dark-background,
section.has-dark-background section.has-light-background {
color: var(--r-main-color);
}
section.has-light-background section.has-dark-background h1, section.has-light-background section.has-dark-background h2, section.has-light-background section.has-dark-background h3, section.has-light-background section.has-dark-background h4, section.has-light-background section.has-dark-background h5, section.has-light-background section.has-dark-background h6,
section.has-dark-background section.has-light-background h1,
section.has-dark-background section.has-light-background h2,
section.has-dark-background section.has-light-background h3,
section.has-dark-background section.has-light-background h4,
section.has-dark-background section.has-light-background h5,
section.has-dark-background section.has-light-background h6 {
color: var(--r-heading-color);
}

.verticator {
--verticator-tooltip-scale: 1;
}
Expand All @@ -120,10 +171,8 @@ ul.verticator.visible li {
right: 30px;
top: calc(9px * var(--verticator-scale));
right: calc(30px * var(--verticator-scale) + 1.5px * var(--verticator-tooltip-scale) * var(--verticator-tooltip-scale));
-webkit-transform: translate3d(0, -50%, 1px);
transform: translate3d(0, -50%, 1px);
-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);
transform: translate3d(0, -50%, 1px);
box-shadow: calc(4px * var(--verticator-scale)) calc(6px * var(--verticator-scale)) calc(16px * var(--verticator-scale)) rgba(0, 0, 0, 0.25);
pointer-events: none;
background: white;
font-size: calc(1.25rem * var(--verticator-tooltip-scale) * var(--verticator-scale));
Expand All @@ -139,8 +188,7 @@ ul.verticator.visible li {
white-space: nowrap;
display: block;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
text-overflow: ellipsis;
line-height: 1.25;
}
.verticator .tooltip::after {
Expand All @@ -152,33 +200,26 @@ ul.verticator.visible li {
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translate3d(45%, -50%, -1px) rotate(45deg);
transform: translate3d(45%, -50%, -1px) rotate(45deg);
transform: translate3d(45%, -50%, -1px) rotate(45deg);
}

.verticator.left .tooltip {
right: auto;
left: calc(30px * var(--verticator-scale) + 1.5px * var(--verticator-tooltip-scale) * var(--verticator-tooltip-scale));
-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);
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(-45%, -50%, -1px) rotate(45deg);
transform: translate3d(-45%, -50%, -1px) rotate(45deg);
transform: translate3d(-45%, -50%, -1px) rotate(45deg);
}

.verticator li a + .tooltip {
pointer-events: none;
display: block;
opacity: 0;
-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: 0.0625s;
-o-transition-delay: 0.0625s;
transition-delay: 0.0625s;
transition-delay: 0.0625s;
}

.verticator li a:hover + .tooltip {
Expand Down
Loading

0 comments on commit 2eb1fb5

Please sign in to comment.