feat: indicates current position of page via filling the icon (#110)

hbstack · Jan 3, 2024 · 7a1c51e · 7a1c51e
1 parent f8e5456
commit 7a1c51e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/assets/hb/modules/back-to-top/js/button.ts b/assets/hb/modules/back-to-top/js/button.ts
@@ -7,7 +7,7 @@ export default class Button {
         const btn = document.createElement('button')
         btn.className = 'hb-back-to-top'
         btn.ariaLabel = 'Back to top'
-        btn.innerHTML = icon
+        btn.innerHTML = this.transformIcon(icon)
         document.body.appendChild(btn)
         this.btn = btn
 
@@ -23,6 +23,7 @@ export default class Button {
                 btn.classList.remove('scrolling')
             }
             y = top
+            this.updatePos()
         });
 
         this.btn.addEventListener('click', () => {
@@ -35,6 +36,24 @@ export default class Button {
         })
     }
 
+    transformIcon(icon) {
+        return icon.replace(/<svg(.*)>((.|\n)*)<\/svg>/, `<svg$1>
+  <defs><clipPath id="icon">$2</clipPath></defs>
+  <rect x="0" y="0" fill="currentColor" width="100%" height="100%" clip-path="url(#icon)" />
+  <rect x="0" y="100%" width="100%" height="100%" clip-path="url(#icon)" />
+</svg>`)
+    }
+
+    private posIcon: HTMLElement
+
+    updatePos() {
+        if (!this.posIcon) {
+            this.posIcon = this.btn.querySelectorAll<HTMLElement>('rect')[1]
+        }
+        const pos = document.documentElement.scrollTop / (document.documentElement.offsetHeight - document.documentElement.clientHeight)
+        this.posIcon.setAttribute('y', (1 - pos) * 100 + '%')
+    }
+
     show() {
         this.btn.classList.add('show')
     }

diff --git a/assets/hb/modules/back-to-top/scss/index.scss b/assets/hb/modules/back-to-top/scss/index.scss
@@ -31,6 +31,12 @@
 
 .hb-back-to-top-icon {
     display: flex;
+
+    rect {
+        &:nth-of-type(2) {
+            fill: var(--#{$prefix}primary);
+        }
+    }
 }
 
 /*! purgecss end ignore */