Skip to content

Commit

Permalink
Delayed items indicator
Browse files Browse the repository at this point in the history
A huge pain point has been to know when you’re done with delayed items. Pressing the next arrow key could move to the next slide or advance the current item and you had no way to tell! Well, now you do.
  • Loading branch information
LeaVerou committed Jun 26, 2024
1 parent 49aa2d5 commit 1de9498
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 2 deletions.
19 changes: 19 additions & 0 deletions inspire.css
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,25 @@ body {
text-align: center;
font-weight: bold;

&:is(.has-items *)::before {
--size: .5em;
--on-size: 60%;
--off-size: 40%;
--on-color: canvastext;
--off-color: color-mix(in oklab, canvas, canvastext);
--circles: radial-gradient(circle closest-side, canvastext 40%, transparent 0) top / var(--size) var(--size) repeat-y;
content: "";
position: absolute;
top: calc(100% + .3em);
left: calc(50% - var(--size) / 2);
aspect-ratio: 1 / var(--total-items);
width: var(--size);
background:
linear-gradient(var(--on-color) calc(100% * var(--items-done) / var(--total-items)), transparent 0),
radial-gradient(circle closest-side, var(--off-color) var(--off-size), transparent 0) top / var(--size) var(--size) repeat-y;
-webkit-mask: radial-gradient(circle closest-side, white var(--on-size), transparent 0) top / var(--size) var(--size) repeat-y;
}

&:not(:empty)::after {
counter-reset: total var(--total-slides);
content: counter(total);
Expand Down
16 changes: 14 additions & 2 deletions src/inspire.js
Original file line number Diff line number Diff line change
Expand Up @@ -575,13 +575,22 @@ let _ = {
_.items = _.items.sort((a, b) => {
return (a.getAttribute("data-index") || 0) - (b.getAttribute("data-index") || 0);
});
document.documentElement.style.setProperty("--total-items", _.items.length);
document.documentElement.classList.toggle("has-items", _.items.length > 0);

if (_.items.length > 0) {
document.documentElement.style.setProperty("--items-done", 0);
}
else {
document.documentElement.style.removeProperty("--items-done");
}
},

/**
* Go to a specific item in the current slide
* @param {number} which 1-based index of the item to go to (0 means no items are current, just the slide itself)
*/
gotoItem(which) {
gotoItem (which) {
_.item = which;

if (_.items.length > 0 && !_.items[which - 1]?.isConnected) {
Expand Down Expand Up @@ -614,6 +623,10 @@ let _ = {
}
}

// Update item index
let done = _.items.length - _.items.filter(item => item.matches(":not(.current, .displayed)")).length;
document.documentElement.style.setProperty("--items-done", done);

// Deal with data-steps
if (stepElement) {
let step;
Expand All @@ -639,7 +652,6 @@ let _ = {
stepElement.setAttribute("data-step-all", "0");
}
}

}

_.hooks.run("gotoitem-end", {which, context: this});
Expand Down

0 comments on commit 1de9498

Please sign in to comment.