diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f85f0c..c300d59 100644
--- 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
+
+ button content here
+
+
+```
+
## [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
index 89def9c..b2eb475 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ A `` button web component with throttle support. Fallbacks to ancho
```html
- back-to-top
+ back-to-top
button content here
@@ -14,7 +14,7 @@ A `` 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 `` 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
+ 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
+ back-to-top
button content here
diff --git a/main.js b/main.js
index c5cfa2b..56bd8fb 100644
--- 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
index 3b1e212..cdf3350 100644
--- 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%;
+ }
- back-to-top
+
+
+
diff --git a/public/main.js b/public/main.js
index 68d7a8b..01a9297 100644
--- 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