fix: 🛠️ improvements for fallback element (#6)

* fix: add display none to the fallback element to override the stylesheet styles and remove the controlling of the default svg height * fix: add a class to the fallback element to select it (backward compatible) * docs: update readme and changelog * docs: update changelog
murtuzaalisurti · Jun 8, 2024 · 6941029 · 6941029
1 parent 244f740
commit 6941029
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [v3.0.1](https://www.npmjs.com/package/@murtuzaalisurti/back-to-top/v/3.0.1)
+
+### Improvements
+
+- fix: add display none to fallback element to prevent style override (hidden attribute gets overridden by display flex). - 9a3fc89
+- fix: supports class `back-to-top-fallback` for the fallback element selection. - 2df7e06
+
+```html
+<back-to-top throttle="350">
+    <a href="#" class="back-to-top-fallback" style="position: fixed;">back-to-top</a>
+    <template>
+        button content here
+    </template>
+</back-to-top>
+```
+
 ## [v3.0.0](https://www.npmjs.com/package/@murtuzaalisurti/back-to-top/v/3.0.0)
 
 ### Added

diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ A `<back-to-top>` button web component with throttle support. Fallbacks to ancho
 ```html
 <back-to-top throttle="600">
     <!-- 👇 fallback anchor link (v3.0) -->
-    <a href="#" style="position: fixed; left: 1rem; bottom: 2rem;">back-to-top</a>
+    <a href="#" class="back-to-top-fallback" style="position: fixed; left: 1rem; bottom: 2rem;">back-to-top</a>
     <!-- 👇 insert button content here -->
     <template>
         button content here
@@ -14,7 +14,7 @@ A `<back-to-top>` button web component with throttle support. Fallbacks to ancho
 ```
 
 ```css
-.back-to-top {
+.back-to-top, a.back-to-top-fallback {
     bottom: 3rem;
     left: 2rem;
     width: 3rem;
@@ -25,6 +25,15 @@ A `<back-to-top>` button web component with throttle support. Fallbacks to ancho
     cursor: pointer;
     transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
 }
+a.back-to-top-fallback {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: lightgray;
+}
+a.back-to-top-fallback svg, .back-to-top svg {
+    height: 70%;
+}
 ```
 
 ## Installation
@@ -75,10 +84,12 @@ With version 3.0 you can specify a fallback anchor link which is useful when jav
 ```html
 <back-to-top throttle="600">
     <!-- 👇 fallback anchor link (v3.0) -->
-    <a href="#" style="position: fixed; left: 1rem; bottom: 2rem;">back-to-top</a>
+    <a href="#" class="back-to-top-fallback" style="position: fixed; left: 1rem; bottom: 2rem;">back-to-top</a>
 </back-to-top>
 ```
 
+From `3.0.1`, you need to specify the `back-to-top-fallback` class for the fallback element if your fallback element is other than an anchor tag.
+
 ### Customizable Button Content
 
 You can now specify the button content using a template element inside the `back-to-top` component.
@@ -94,7 +105,7 @@ You can now specify the button content using a template element inside the `back
 You can style this component however you want (the `.back-to-top` class is automatically added to the button for you), here are some styles to start with:
 
 ```css
-.back-to-top {
+.back-to-top, a.back-to-top-fallback {
     bottom: 3rem;
     left: 2rem;
     width: 3rem;
@@ -105,6 +116,15 @@ You can style this component however you want (the `.back-to-top` class is autom
     cursor: pointer;
     transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
 }
+a.back-to-top-fallback {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: lightgray;
+}
+a.back-to-top-fallback svg, .back-to-top svg {
+    height: 70%;
+}
 ```
 
 ## Options
@@ -114,7 +134,7 @@ Introduced in [v2.0](https://www.npmjs.com/package/@murtuzaalisurti/back-to-top/
 ```html
 <back-to-top throttle="600">
     <!-- 👇 fallback anchor link (v3.0) -->
-    <a href="#" style="position: fixed; left: 1rem; bottom: 2rem;">back-to-top</a>
+    <a href="#" class="back-to-top-fallback" style="position: fixed; left: 1rem; bottom: 2rem;">back-to-top</a>
     <!-- 👇 insert button content here -->
     <template>
         button content here

diff --git a/main.js b/main.js
@@ -47,14 +47,6 @@ class BackToTop extends HTMLElement {
         }).join(";").concat(";");
     }
 
-    get backToTopButton() {
-        return this.querySelector("button");
-    }
-
-    get backToTopLink() {
-        return this.querySelector("a");
-    }
-
     get svg() {
         return this.backToTopButton.querySelector('svg');
     }
@@ -75,6 +67,18 @@ class BackToTop extends HTMLElement {
         this.buttonContent = value;
     }
 
+    backToTopChildElement(selector) {
+        return this.querySelector(selector);
+    }
+
+    get backToTopLink() {
+        return this.backToTopChildElement('.back-to-top-fallback') ?? this.backToTopChildElement('a');
+    }
+
+    get backToTopButton() {
+        return this.backToTopChildElement('button');
+    }
+
     parseHTMLFromString(htmlAsString) {
         return new DOMParser().parseFromString(htmlAsString, "text/html");
     }
@@ -130,6 +134,7 @@ class BackToTop extends HTMLElement {
 
     connectedCallback() {
         this.backToTopLink && this.backToTopLink.setAttribute("hidden", true);
+        this.backToTopLink && (this.backToTopLink.style.display = 'none');
 
         this.append(document.createElement("button"));
         this.backToTopButton.classList.add("back-to-top");
@@ -157,15 +162,10 @@ class BackToTop extends HTMLElement {
 
         if (this.svg) {
             const currentSVGStyles = this.getComputedStyles(this.svg);
-            const currentBackToTopButtonStyles = this.getComputedStyles(this.backToTopButton);
 
             if (currentSVGStyles.getPropertyValue("display") === "inline") {
                 this.svg.style.display = "block";
             }
-
-            if (currentSVGStyles.getPropertyValue("height") === currentBackToTopButtonStyles.getPropertyValue("height")) {
-                this.svg.style.height = "70%";
-            }
         }
     }
 

diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,7 @@
         html {
             scroll-behavior: smooth;
         }
-        .back-to-top {
+        .back-to-top, a.back-to-top-fallback {
             bottom: 3rem;
             left: 2rem;
             width: 3rem;
@@ -20,12 +20,23 @@
             cursor: pointer;
             transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
         }
+        a.back-to-top-fallback {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: lightgray;
+        }
+        a.back-to-top-fallback svg, .back-to-top svg {
+            height: 70%;
+        }
     </style>
 </head>
 
 <body style="min-height: 200rem;">
     <back-to-top throttle="350">
-        <a href="#" style="position: fixed; left: 1rem; bottom: 2rem;">back-to-top</a>
+        <a href="#" class="back-to-top-fallback" style="position: fixed;">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
+        </a>
         <template>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
         </template>

diff --git a/public/main.js b/public/main.js
@@ -147,12 +147,6 @@
         return `${parsedKey}: ${obj[key]}`;
       }).join(";").concat(";");
     }
-    get backToTopButton() {
-      return this.querySelector("button");
-    }
-    get backToTopLink() {
-      return this.querySelector("a");
-    }
     get svg() {
       return this.backToTopButton.querySelector("svg");
     }
@@ -168,6 +162,15 @@
     set setButtonContent(value) {
       this.buttonContent = value;
     }
+    backToTopChildElement(selector) {
+      return this.querySelector(selector);
+    }
+    get backToTopLink() {
+      return this.backToTopChildElement(".back-to-top-fallback") ?? this.backToTopChildElement("a");
+    }
+    get backToTopButton() {
+      return this.backToTopChildElement("button");
+    }
     parseHTMLFromString(htmlAsString) {
       return new DOMParser().parseFromString(htmlAsString, "text/html");
     }
@@ -190,6 +193,7 @@
     }
     connectedCallback() {
       this.backToTopLink && this.backToTopLink.setAttribute("hidden", true);
+      this.backToTopLink && (this.backToTopLink.style.display = "none");
       this.append(document.createElement("button"));
       this.backToTopButton.classList.add("back-to-top");
       this.backToTopButton.style = __privateGet(this, _hidden);
@@ -204,13 +208,9 @@
       this.backToTopButton.addEventListener("click", this.handleClick);
       if (this.svg) {
         const currentSVGStyles = this.getComputedStyles(this.svg);
-        const currentBackToTopButtonStyles = this.getComputedStyles(this.backToTopButton);
         if (currentSVGStyles.getPropertyValue("display") === "inline") {
           this.svg.style.display = "block";
         }
-        if (currentSVGStyles.getPropertyValue("height") === currentBackToTopButtonStyles.getPropertyValue("height")) {
-          this.svg.style.height = "70%";
-        }
       }
     }
     // observing the "throttle" attribute