summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--layouts/_partials/posts/toc.html40
-rw-r--r--layouts/_partials/scripts.html67
-rw-r--r--layouts/_partials/scripts/aplayer-js.html50
-rw-r--r--layouts/_partials/scripts/fancybox-js.html4
-rw-r--r--layouts/_partials/scripts/littlefoot-js.html6
-rw-r--r--layouts/_partials/scripts/toc-js.html41
6 files changed, 105 insertions, 103 deletions
diff --git a/layouts/_partials/posts/toc.html b/layouts/_partials/posts/toc.html
index 0af63e4a..7a4a63cf 100644
--- a/layouts/_partials/posts/toc.html
+++ b/layouts/_partials/posts/toc.html
@@ -6,44 +6,4 @@
class="sticky top-12 text-size-sm 2xl:text-size-base px-8"
>{{ .TableOfContents }}</div>
</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', () => {
- const toc = document.getElementById('toc');
- if (!toc) return;
-
- const headings = document.querySelectorAll('h2, h3');
- const observer = new IntersectionObserver(entries => {
- entries.forEach(entry => {
- if (!entry.isIntersecting) return;
-
- const id = entry.target.id;
- const tocLink = toc.querySelector(`a[href="#${id}"]`);
- if (!tocLink) return;
-
- const listItem = tocLink.parentElement;
- const isH2 = entry.target.tagName === 'H2';
-
- // Clear all active states when a new H2 is encountered
- if (isH2) {
- toc.querySelectorAll('li.active').forEach(el => el.classList.remove('active'));
- }
-
- // Set current item as active
- listItem.classList.add('active');
-
- // If this is an H3, find and activate its parent H2
- if (!isH2) {
- const parentH2Item = listItem.closest('ul').previousElementSibling?.closest('li');
- if (parentH2Item) parentH2Item.classList.add('active');
- }
- });
- }, {
- rootMargin: '0px 0px -50% 0px',
- threshold: 0.5
- });
-
- headings.forEach(heading => observer.observe(heading));
-});
-</script>
{{ end }}
diff --git a/layouts/_partials/scripts.html b/layouts/_partials/scripts.html
index 12beca10..ac62974b 100644
--- a/layouts/_partials/scripts.html
+++ b/layouts/_partials/scripts.html
@@ -1,67 +1,8 @@
-<!-- third-party libraries -->
{{- range .Site.Params.externalJSFiles }}
<script src="{{ $.Site.Params.staticPrefix }}{{ . | relURL }}"></script>
{{- end }}
-{{- if or (in .Section "posts") (in .Section "cards") (in .Section "library") (eq .Type "single") }}
- <script src="/js/fancybox.umd.js"></script>
- <script>Fancybox.bind("[data-fancybox]");</script>
-{{- end }}
-
-{{ if .Params.aplayer }}
-<script>
-document.addEventListener("DOMContentLoaded", function () {
- const lazyPlayers = document.querySelectorAll(".lazy-aplayer");
- if (!lazyPlayers.length) return;
-
- const loadAPlayer = () => {
- if (window.APlayer) return Promise.resolve();
- return new Promise((resolve, reject) => {
- const script = document.createElement('script');
- script.src = "https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js";
- script.onload = resolve;
- script.onerror = reject;
- document.body.appendChild(script);
- });
- };
-
- const observer = new IntersectionObserver((entries, obs) => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- loadAPlayer().then(() => {
- const el = entry.target;
- const id = el.dataset.id ? `-` + el.dataset.id : ``;
- const container = document.createElement('div');
- container.id = `aplayer${id}`;
- el.appendChild(container);
-
- const ap = new APlayer({
- container: container,
- audio: [{
- name: el.dataset.name,
- artist: el.dataset.artist,
- url: el.dataset.url,
- cover: el.dataset.cover
- }]
- });
-
- ap.on('play', () => umami?.track?.('🎵 Play music with aPlayer'));
- ap.on('ended', () => umami?.track?.('🎵 Played entiresong with aPlayer'));
-
- obs.unobserve(el);
- });
- }
- });
- });
-
- lazyPlayers.forEach(player => observer.observe(player));
-});
-</script>
-{{ end }}
-
-<script>
- littlefoot.littlefoot({
- dismissOnUnhover: true,
- activateOnHover: true
- });
-</script>
+{{ partial "scripts/toc-js" . }}
+{{ partial "scripts/littlefoot-js" . }}
+{{ partial "scripts/fancybox-js" . }}
+{{ partial "scripts/aplayer-js" . }}
diff --git a/layouts/_partials/scripts/aplayer-js.html b/layouts/_partials/scripts/aplayer-js.html
new file mode 100644
index 00000000..2b22702c
--- /dev/null
+++ b/layouts/_partials/scripts/aplayer-js.html
@@ -0,0 +1,50 @@
+{{ if .Params.aplayer }}
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+ const lazyPlayers = document.querySelectorAll(".lazy-aplayer");
+ if (!lazyPlayers.length) return;
+
+ const loadAPlayer = () => {
+ if (window.APlayer) return Promise.resolve();
+ return new Promise((resolve, reject) => {
+ const script = document.createElement('script');
+ script.src = "https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js";
+ script.onload = resolve;
+ script.onerror = reject;
+ document.body.appendChild(script);
+ });
+ };
+
+ const observer = new IntersectionObserver((entries, obs) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ loadAPlayer().then(() => {
+ const el = entry.target;
+ const id = el.dataset.id ? `-` + el.dataset.id : ``;
+ const container = document.createElement('div');
+ container.id = `aplayer${id}`;
+ el.appendChild(container);
+
+ const ap = new APlayer({
+ container: container,
+ audio: [{
+ name: el.dataset.name,
+ artist: el.dataset.artist,
+ url: el.dataset.url,
+ cover: el.dataset.cover
+ }]
+ });
+
+ ap.on('play', () => umami?.track?.('🎵 Play music with aPlayer'));
+ ap.on('ended', () => umami?.track?.('🎵 Played entiresong with aPlayer'));
+
+ obs.unobserve(el);
+ });
+ }
+ });
+ });
+
+ lazyPlayers.forEach(player => observer.observe(player));
+});
+</script>
+{{ end }}
diff --git a/layouts/_partials/scripts/fancybox-js.html b/layouts/_partials/scripts/fancybox-js.html
new file mode 100644
index 00000000..c9543a01
--- /dev/null
+++ b/layouts/_partials/scripts/fancybox-js.html
@@ -0,0 +1,4 @@
+{{- if or (in .Section "posts") (in .Section "cards") (in .Section "library") (eq .Type "single") }}
+ <script src="/js/fancybox.umd.js"></script>
+ <script>Fancybox.bind("[data-fancybox]");</script>
+{{- end }}
diff --git a/layouts/_partials/scripts/littlefoot-js.html b/layouts/_partials/scripts/littlefoot-js.html
new file mode 100644
index 00000000..2601b7c4
--- /dev/null
+++ b/layouts/_partials/scripts/littlefoot-js.html
@@ -0,0 +1,6 @@
+<script>
+ littlefoot.littlefoot({
+ dismissOnUnhover: true,
+ activateOnHover: true
+ });
+</script>
diff --git a/layouts/_partials/scripts/toc-js.html b/layouts/_partials/scripts/toc-js.html
new file mode 100644
index 00000000..110f2357
--- /dev/null
+++ b/layouts/_partials/scripts/toc-js.html
@@ -0,0 +1,41 @@
+{{ if .Params.toc }}
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+ const toc = document.getElementById('toc');
+ if (!toc) return;
+
+ const headings = document.querySelectorAll('h2, h3');
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => {
+ if (!entry.isIntersecting) return;
+
+ const id = entry.target.id;
+ const tocLink = toc.querySelector(`a[href="#${id}"]`);
+ if (!tocLink) return;
+
+ const listItem = tocLink.parentElement;
+ const isH2 = entry.target.tagName === 'H2';
+
+ // Clear all active states when a new H2 is encountered
+ if (isH2) {
+ toc.querySelectorAll('li.active').forEach(el => el.classList.remove('active'));
+ }
+
+ // Set current item as active
+ listItem.classList.add('active');
+
+ // If this is an H3, find and activate its parent H2
+ if (!isH2) {
+ const parentH2Item = listItem.closest('ul').previousElementSibling?.closest('li');
+ if (parentH2Item) parentH2Item.classList.add('active');
+ }
+ });
+ }, {
+ rootMargin: '0px 0px -50% 0px',
+ threshold: 0.5
+ });
+
+ headings.forEach(heading => observer.observe(heading));
+});
+</script>
+{{ end }}