feat(button): add 'comment' fixed button (#169)

assets/css/_core/_base.scss

@@ -76,4 +76,4 @@ a {
   }
 }
 
-@import "../_partial/dynamic-to-top";
+@import "../_partial/fixed-button";

assets/css/_partial/_fixed-button.scss

@@ -1,13 +1,12 @@
-#dynamic-to-top {
+.fixed-button {
   display: none;
   overflow: hidden;
   width: auto;
   z-index: 100;
   position: fixed;
-  bottom: 2rem;
-  right: 2rem;
   top: auto;
   left: auto;
+  right: 1.5rem;
   font-size: 1rem;
   line-height: 1.3rem;
   padding: .6rem .6rem;
@@ -35,3 +34,11 @@
     }
   }
 }
+
+#top-button {
+  bottom: 1.5rem;
+}
+
+#comment-button {
+  bottom: 4.5rem;
+}

layouts/_default/baseof.html

@@ -54,10 +54,12 @@
             {{- partial "footer.html" . -}}
         </div>
 
-        {{- /* Dynamic to top button */ -}}
+        <div id="fixed-btn-container">
-        <a href="#" class="dynamic-to-top animated faster" id="dynamic-to-top">
+            {{- /* top button */ -}}
-            <i class="fas fa-arrow-up fa-fw"></i>
+            <a href="#" id="top-button" class="fixed-button animated faster">
-        </a>
+                <i class="fas fa-arrow-up fa-fw"></i>
+            </a>
+        </div>
 
         {{- /* Load JavaScript scripts and CSS */ -}}
         {{- partial "assets.html" . -}}

layouts/partials/comment.html

@@ -5,7 +5,7 @@
 
     {{- /* Disqus Comment System */ -}}
     {{- if .Site.Params.comment.disqus.enable -}}
-        <div id="disqus_thread"></div>
+        <div id="disqus_thread" class="comment"></div>
         {{- $script := printf `<script defer src="https://%s.disqus.com/embed.js"></script>` .Site.Params.comment.disqus.shortname -}}
         {{- slice $script | $scratch.Add "scriptCDN" -}}
         <noscript>
@@ -16,7 +16,7 @@
     {{- /* Gitalk Comment System */ -}}
     {{- if .Site.Params.comment.gitalk.enable -}}
         {{- $gitalk := .Site.Params.comment.gitalk -}}
-        <div id="gitalk"></div>
+        <div id="gitalk" class="comment"></div>
         {{- with $CDN.gitalkCSS -}}
             {{- slice . | $scratch.Add "linkCDN" -}}
         {{- else -}}
@@ -50,7 +50,7 @@
     {{- /* Valine Comment System */ -}}
     {{- if .Site.Params.comment.valine.enable -}}
         {{- $valine := .Site.Params.comment.valine -}}
-        <div id="valine"></div>
+        <div id="valine" class="comment"></div>
         {{- slice "lib/valine/valine.scss" | $scratch.Add "linkLocal" -}}
         {{- with $CDN.valineJS -}}
             {{- slice . | $scratch.Add "scriptCDN" -}}
@@ -99,7 +99,7 @@
     {{- /* Facebook Comment System */ -}}
     {{- if .Site.Params.comment.facebook.enable -}}
         {{- $facebook := .Site.Params.comment.facebook -}}
-        <div id="fb-root"></div>
+        <div id="fb-root" class="comment"></div>
         <div
             class="fb-comments"
             data-href="{{ .Site.Params.baseURL }}{{ .Permalink | absURL }}"

layouts/posts/single.html

@@ -83,10 +83,8 @@
         {{- partial "single/footer.html" . -}}
 
         {{- /* Comment */ -}}
-        <div class="comment">
+        {{- if ( .Params.comment | default true ) -}}
-            {{- if ( .Params.comment | default true ) -}}
+            {{- partial "comment.html" . -}}
-                {{- partial "comment.html" . -}}
+        {{- end -}}
-            {{- end -}}
-        </div>
     </article>
 {{- end -}}

src/js/theme.js

@@ -248,7 +248,17 @@
                 header.classList.add('animated');
                 header.classList.add('faster');
             });
-            const toTopButton = document.getElementById('dynamic-to-top');
+            const comments = document.getElementsByClassName('comment') || [];
+            if (comments.length) {
+                const container = document.getElementById('fixed-btn-container');
+                const button = document.createElement('a');
+                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);
+            }
+            const buttons = document.getElementsByClassName('fixed-button');
             const MIN_SCROLL = 10;
             window.addEventListener('scroll', () => {
                 this.newScrollTop = this.util.getScrollTop();
@@ -262,18 +272,20 @@
                         header.classList.add('fadeInDown');
                     }
                 });
-                if (this.newScrollTop > 200) {
+                this.util.forEach(buttons, (button) => {
-                    if (scroll > MIN_SCROLL) {
+                    if (this.newScrollTop > 20) {
-                        toTopButton.classList.remove('fadeIn');
+                        if (scroll > MIN_SCROLL) {
-                        toTopButton.classList.add('fadeOut');
+                            button.classList.remove('fadeIn');
-                    } else if (scroll < - MIN_SCROLL) {
+                            button.classList.add('fadeOut');
-                        toTopButton.style.display = 'block';
+                        } else if (scroll < - MIN_SCROLL) {
-                        toTopButton.classList.remove('fadeOut');
+                            button.style.display = 'block';
-                        toTopButton.classList.add('fadeIn');
+                            button.classList.remove('fadeOut');
+                            button.classList.add('fadeIn');
+                        }
+                    } else {
+                        button.style.display = 'none';
                     }
-                } else {
+                });
-                    toTopButton.style.display = 'none';
-                }
                 if (!this._scrollTimeout) {
                     this._scrollTimeout = window.setTimeout(() => {
                         this._scrollTimeout = null;