From e341e089b7a074057f79f63c8f177c68608887b0 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Wed, 7 Jul 2021 12:48:01 +0200
Subject: [PATCH] feat(sidebar): sticky sidebar using  vursen/FloatSidebar.js

---
 README.md                                     |  2 +-
 assets/scss/partials/sidebar.scss             |  9 +++---
 data/external.yaml                            |  6 ++--
 layouts/_default/single.html                  | 22 +++++++------
 .../partials/footer/components/script.html    | 14 +--------
 .../footer/components/sticky-sidebar.html     | 31 +++++++++++++++++++
 layouts/partials/sidebar/right.html           | 10 +++---
 7 files changed, 58 insertions(+), 36 deletions(-)
 create mode 100644 layouts/partials/footer/components/sticky-sidebar.html

diff --git a/README.md b/README.md
index 734d97f..75df4c4 100644
--- a/README.md
+++ b/README.md
@@ -74,4 +74,4 @@ Your support is greatly appreciated :)
   - [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo)
   - [lepture/yue.css](https://github.com/lepture/yue.css)
   - Markdown gallery syntax from [Typlog](https://typlog.com/)
-  - [somewebmedia/hc-sticky](https://github.com/somewebmedia/hc-sticky)
+  - [vursen/FloatSidebar.js](https://github.com/vursen/FloatSidebar.js)
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 28b105c..69d0cac 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -39,6 +39,10 @@
 .right-sidebar {
     flex-shrink: 0;
     display: none;
+    
+    /// Take full max-width, set in grid.scss
+    width: 100%;
+    position: relative;
 
     &.sticky {
         top: 0;
@@ -49,11 +53,6 @@
     }
 }
 
-/// For HC Sticky plugin, since it doesn't provide a option to customize class name
-.sticky-spacer {
-    max-width: var(--right-sidebar-max-width);
-}
-
 .site-info {
     z-index: 1;
     transition: box-shadow 0.5s ease;
diff --git a/data/external.yaml b/data/external.yaml
index 82b9e63..5f74de8 100644
--- a/data/external.yaml
+++ b/data/external.yaml
@@ -37,8 +37,8 @@ KaTeX:
       type: script
       defer: true
 
-HCSticky:
-    - src: https://cdn.jsdelivr.net/npm/hc-sticky@2.2.7/dist/hc-sticky.js
-      integrity: sha256-ZQb/nC8ArgZEjGauwabpmi57wvKmjsuXZbFcIKw4G/Y=
+FloatSidebar:
+    - src: https://cdn.jsdelivr.net/npm/float-sidebar@1.2.3/dist/float-sidebar.min.js
+      integrity: sha256-mOZMic3UnZLVOJXhVOhJ2zGsyrGHEQ3LVT5O98ya9kI=
       type: script
       defer: true
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 040b547..3d2f833 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -42,16 +42,18 @@
 {{ define "right-sidebar" }}
     {{ if (.Scratch.Get "hasTOC") }}
         <aside class="sidebar right-sidebar sticky">
-            <section class="widget archives">
-                <div class="widget-icon">
-                    {{ partial "helper/icon" "hash" }}
-                </div>
-                <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
-                
-                <div class="widget--toc">
-                    {{ .TableOfContents }}
-                </div>
-            </section>
+            <div class="sidebar__inner">
+                <section class="widget">
+                    <div class="widget-icon">
+                        {{ partial "helper/icon" "hash" }}
+                    </div>
+                    <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
+                    
+                    <div class="widget--toc">
+                        {{ .TableOfContents }}
+                    </div>
+                </section>
+            </div>
         </aside>
     {{ end }}
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/footer/components/script.html b/layouts/partials/footer/components/script.html
index 8c11a39..7e26ced 100644
--- a/layouts/partials/footer/components/script.html
+++ b/layouts/partials/footer/components/script.html
@@ -1,17 +1,5 @@
 {{- partial "helper/external" (dict "Context" . "Namespace" "Vibrant") -}}
-
-{{- partial "helper/external" (dict "Context" . "Namespace" "HCSticky") -}}
-<script>
-    window.addEventListener("load", () => {
-        const rightSiderbar = document.querySelector(".right-sidebar");
-        if (rightSiderbar) {
-            new hcSticky(".right-sidebar", {
-                stickTo: '.main-container',
-                stickyClass: 'js-sticked'
-            });
-        }
-    })
-</script>
+{{- partial "footer/components/sticky-sidebar" . -}}}
 
 {{- $opts := dict "minify" hugo.IsProduction -}}
 {{- $script := resources.Get "ts/main.ts" | js.Build $opts -}}
diff --git a/layouts/partials/footer/components/sticky-sidebar.html b/layouts/partials/footer/components/sticky-sidebar.html
new file mode 100644
index 0000000..5d81806
--- /dev/null
+++ b/layouts/partials/footer/components/sticky-sidebar.html
@@ -0,0 +1,31 @@
+{{- partial "helper/external" (dict "Context" . "Namespace" "FloatSidebar") -}}
+
+<script>
+    window.addEventListener("load", () => {
+        const rightSiderbar = document.querySelector(".right-sidebar");
+        const mainContainer = document.querySelector(".main-container");
+        const rightSidebarInner = rightSiderbar.querySelector(".sidebar__inner");
+        const padding = window.getComputedStyle(document.documentElement).getPropertyValue('--main-top-padding').replace('px', '');
+
+        if (rightSiderbar) {
+            const floatSidebar = FloatSidebar({
+                sidebar: rightSiderbar,
+                relative: mainContainer,
+                sidebarInner: rightSidebarInner,
+                topSpacing: padding,
+                bottomSpacing: padding
+            });
+
+            const updateMaxWidth = () => {
+                rightSidebarInner.style.maxWidth = `${rightSiderbar.offsetWidth}px`;
+            }
+            updateMaxWidth();
+
+            /**
+                Because the right sidebar does not have a fixed width,
+                we need to update the max-width of the sidebarInner when the window is resized.
+            */
+            window.addEventListener("resize", updateMaxWidth);
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/layouts/partials/sidebar/right.html b/layouts/partials/sidebar/right.html
index 24763bb..29656d4 100644
--- a/layouts/partials/sidebar/right.html
+++ b/layouts/partials/sidebar/right.html
@@ -1,8 +1,10 @@
 {{ if .Site.Params.widgets.enabled }}
     {{ $context := . }}
-    <aside class="sidebar right-sidebar sticky">
-        {{ range $widget := .Site.Params.widgets.enabled }}
-            {{ partial (printf "widget/%s" $widget) $context }}
-        {{ end }}
+    <aside class="sidebar right-sidebar">
+        <div class="sidebar__inner">
+            {{ range $widget := .Site.Params.widgets.enabled }}
+                {{ partial (printf "widget/%s" $widget) $context }}
+            {{ end }}
+        </div>
     </aside>
 {{ end }}
\ No newline at end of file