feat(fixed-btns): add title for fixed buttons (#176)

assets/css/_partial/_fixed-button.scss

@@ -1,11 +1,11 @@
+#fixed-buttons {
+  display: none;
+}
+
 .fixed-button {
   display: none;
-  overflow: hidden;
-  width: auto;
   z-index: 100;
   position: fixed;
-  top: auto;
-  left: auto;
   right: 1.5rem;
   font-size: 1rem;
   line-height: 1.3rem;
@@ -36,6 +36,7 @@
 }
 
 #top-button {
+  display: block;
   bottom: 1.5rem;
 }
 

i18n/en.toml

@@ -1,6 +1,14 @@
 # Translations for English
 # https://gohugo.io/content-management/multilingual/#translation-of-strings
 
+# === baseof ==
+[backToTop]
+other = "Back to Top"
+
+[viewComments]
+other = "View Comments"
+# === baseof ==
+
 # === Post ===
 [posts]
 other = "Posts"

i18n/fr.toml

@@ -1,6 +1,14 @@
 # Translations for French
 # https://gohugo.io/content-management/multilingual/#translation-of-strings
 
+# === baseof ==
+[backToTop]
+other = "Retour en Haut"
+
+[viewComments]
+other = "Afficher les Commentaires"
+# === baseof ==
+
 # === Post ===
 [posts]
 other = "Posts"

i18n/zh-CN.toml

@@ -1,6 +1,14 @@
 # Translations for Simplified Chinese
 # https://gohugo.io/content-management/multilingual/#translation-of-strings
 
+# === baseof ==
+[backToTop]
+other = "回到顶部"
+
+[viewComments]
+other = "查看评论"
+# === baseof ==
+
 # === Post ===
 [posts]
 other = "文章"

layouts/_default/baseof.html

@@ -58,11 +58,16 @@
             {{- partial "footer.html" . -}}
         </div>
 
-        <div id="fixed-btn-container">
+        <div id="fixed-buttons" class="animated faster">
             {{- /* top button */ -}}
-            <a href="#" id="top-button" class="fixed-button animated faster">
+            <a href="#" id="top-button" class="fixed-button" title="{{ T `backToTop` }}">
                 <i class="fas fa-arrow-up fa-fw"></i>
             </a>
+
+            {{- /* comment button */ -}}
+            <a href="#" id="comment-button" class="fixed-button" title="{{ T `viewComments` }}">
+                <i class="fas fa-comment fa-fw"></i>
+            </a>
         </div>
 
         {{- /* Load JavaScript scripts and CSS */ -}}

src/js/theme.js

@@ -250,15 +250,11 @@
             });
             const comments = document.getElementsByClassName('comment') || [];
             if (comments.length) {
-                const container = document.getElementById('fixed-btn-container');
-                const button = document.createElement('a');
+                const button = document.getElementById('comment-button');
                 button.href = `#${comments[0].id}`;
-                button.id = 'comment-button';
-                button.className = 'fixed-button animated faster';
-                button.innerHTML = '<i class="fas fa-comment fa-fw"></i>';
-                container.appendChild(button);
+                button.style.display = 'block';
             }
-            const buttons = document.getElementsByClassName('fixed-button');
+            const fixedButtons = document.getElementById('fixed-buttons');
             const MIN_SCROLL = 10;
             window.addEventListener('scroll', () => {
                 this.newScrollTop = this.util.getScrollTop();
@@ -272,20 +268,18 @@
                         header.classList.add('fadeInDown');
                     }
                 });
-                this.util.forEach(buttons, (button) => {
-                    if (this.newScrollTop > 20) {
-                        if (scroll > MIN_SCROLL) {
-                            button.classList.remove('fadeIn');
-                            button.classList.add('fadeOut');
-                        } else if (scroll < - MIN_SCROLL) {
-                            button.style.display = 'block';
-                            button.classList.remove('fadeOut');
-                            button.classList.add('fadeIn');
-                        }
-                    } else {
-                        button.style.display = 'none';
+                if (this.newScrollTop > 20) {
+                    if (scroll > MIN_SCROLL) {
+                        fixedButtons.classList.remove('fadeIn');
+                        fixedButtons.classList.add('fadeOut');
+                    } else if (scroll < - MIN_SCROLL) {
+                        fixedButtons.style.display = 'block';
+                        fixedButtons.classList.remove('fadeOut');
+                        fixedButtons.classList.add('fadeIn');
                     }
-                });
+                } else {
+                    fixedButtons.style.display = 'none';
+                }
                 if (!this._scrollTimeout) {
                     this._scrollTimeout = window.setTimeout(() => {
                         this._scrollTimeout = null;