Skip to content

Commit 53b58c3

Browse files
mcanouilmcanouil
authored
feat: Add tabset flow functionality (#47)
1 parent 1e71f2e commit 53b58c3

File tree

3 files changed

+122
-30
lines changed

3 files changed

+122
-30
lines changed

‎_extensions/coeos/_extension.yml

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -18,33 +18,4 @@ contributes:
1818
- text: |
1919
<link rel="shortcut icon" href="https://raw.githubusercontent.com/mcanouil/hex-stickers/main/SVG/coeos.svg" />
2020
include-after-body:
21-
- text: |
22-
<script type="text/javascript">
23-
const dateElements = document.querySelectorAll("p.date, div.listing-date");
24-
dateElements.forEach((el) => {
25-
el.innerHTML = el.innerHTML.replace(
26-
/(\d+)(st|nd|rd|th)/g,
27-
"$1<sup style='font-size:0.5em;font-style:italic;'>$2</sup>"
28-
);
29-
});
30-
</script>
31-
<script type="text/javascript">
32-
Reveal.addEventListener('ready', (event) => {
33-
if (event.indexh === 0) {
34-
document.querySelector("div.slide-menu-button").style.display = "none";
35-
document.querySelector("div.has-logo > img.slide-logo").style.display = "none";
36-
} else {
37-
document.querySelector("div.slide-menu-button").style.display = "block";
38-
document.querySelector("div.has-logo > img.slide-logo").style.display = null;
39-
}
40-
});
41-
Reveal.addEventListener('slidechanged', (event) => {
42-
if (event.indexh === 0) {
43-
document.querySelector("div.slide-menu-button").style.display = "none";
44-
document.querySelector("div.has-logo > img.slide-logo").style.display = "none";
45-
} else {
46-
document.querySelector("div.slide-menu-button").style.display = "block";
47-
document.querySelector("div.has-logo > img.slide-logo").style.display = null;
48-
}
49-
});
50-
</script>
21+
- file: coeos.html

‎_extensions/coeos/coeos.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!--
2+
# MIT License
3+
#
4+
# Copyright (c) 2025 Mickaël Canouil
5+
#
6+
# Permission is hereby granted, free of charge, to any person obtaining a copy
7+
# of this software and associated documentation files (the "Software"), to deal
8+
# in the Software without restriction, including without limitation the rights
9+
# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
# copies of the Software, and to permit persons to whom the Software is
11+
# furnished to do so, subject to the following conditions:
12+
13+
# The above copyright notice and this permission notice shall be included in all
14+
# copies or substantial portions of the Software.
15+
16+
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
# SOFTWARE.
23+
-->
24+
25+
<script type="text/javascript">
26+
const dateElements = document.querySelectorAll("p.date, div.listing-date");
27+
dateElements.forEach((el) => {
28+
el.innerHTML = el.innerHTML.replace(
29+
/(\d+)(st|nd|rd|th)/g,
30+
"$1<sup style='font-size:0.5em;font-style:italic;'>$2</sup>"
31+
);
32+
});
33+
</script>
34+
<script type="text/javascript">
35+
Reveal.addEventListener("ready", (event) => {
36+
if (event.indexh === 0) {
37+
document.querySelector("div.slide-menu-button").style.display = "none";
38+
document.querySelector("div.has-logo > img.slide-logo").style.display = "none";
39+
} else {
40+
document.querySelector("div.slide-menu-button").style.display = "block";
41+
document.querySelector("div.has-logo > img.slide-logo").style.display = null;
42+
}
43+
});
44+
Reveal.addEventListener("slidechanged", (event) => {
45+
if (event.indexh === 0) {
46+
document.querySelector("div.slide-menu-button").style.display = "none";
47+
document.querySelector("div.has-logo > img.slide-logo").style.display = "none";
48+
} else {
49+
document.querySelector("div.slide-menu-button").style.display = "block";
50+
document.querySelector("div.has-logo > img.slide-logo").style.display = null;
51+
}
52+
});
53+
</script>
54+
<script type="text/javascript">
55+
Reveal.on("ready", function () {
56+
const tabsetSlides = document.querySelectorAll(".reveal .slides section .panel-tabset");
57+
tabsetSlides.forEach(function (tabset) {
58+
const tabCount = tabset.querySelectorAll("ul li").length;
59+
for (let i = 0; i < tabCount - 1; i++) {
60+
const fragmentDiv = document.createElement("div");
61+
fragmentDiv.className = "panel-tabset-fragment fragment";
62+
fragmentDiv.dataset.tabIndex = i + 1;
63+
fragmentDiv.style.display = "none";
64+
tabset.parentNode.appendChild(fragmentDiv);
65+
}
66+
});
67+
});
68+
69+
Reveal.on("fragmentshown", (event) => {
70+
if (event.fragment.classList.contains("panel-tabset-fragment")) {
71+
const tabIndex = parseInt(event.fragment.dataset.tabIndex);
72+
const tabset = Reveal.getCurrentSlide().querySelector(".panel-tabset");
73+
const tabLinks = tabset.querySelectorAll("ul li a");
74+
if (tabIndex < tabLinks.length) {
75+
tabLinks[tabIndex].click();
76+
}
77+
}
78+
});
79+
80+
Reveal.on("fragmenthidden", (event) => {
81+
if (event.fragment.classList.contains("panel-tabset-fragment")) {
82+
const tabIndex = parseInt(event.fragment.dataset.tabIndex);
83+
const tabset = Reveal.getCurrentSlide().querySelector(".panel-tabset");
84+
const tabLinks = tabset.querySelectorAll("ul li a");
85+
if (tabIndex > 0) {
86+
tabLinks[tabIndex - 1].click();
87+
} else {
88+
tabLinks[0].click();
89+
}
90+
}
91+
});
92+
</script>
93+
<style>
94+
.panel-tabset ul li a:focus,
95+
.panel-tabset ul li a:active {
96+
outline: none;
97+
box-shadow: none;
98+
}
99+
</style>

‎template.qmd

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,25 @@ format:
1818
## Another slide {.smaller}
1919

2020
![An image]({{< placeholder 900 300>}})
21+
22+
## Tabset {.smaller}
23+
24+
:::: {.panel-tabset}
25+
26+
### Lipsum
27+
28+
{{< lipsum 1-1 >}}
29+
30+
### Placeholder
31+
32+
{{< placeholder 600 400 >}}
33+
34+
### Lipsum 2
35+
36+
{{< lipsum 2-2 >}}
37+
38+
### Placeholder 2
39+
40+
{{< placeholder 600 400 >}}
41+
42+
:::

0 commit comments

Comments
 (0)