feat(comments): add "Disqus_click_to_load" to improve in-GFW-users

_config.template.yml

@@ -167,7 +167,7 @@ topPost: false
 
 # Comment Systems
 # Available value of "use":
-#     duoshuo | disqus
+#     duoshuo | disqus | disqus_click
 comment:
     use:
     shortname:

languages/ar.yml

@@ -10,6 +10,7 @@ post:
     newer: "أحدث"
     private: "منشور خاص, مخفي مؤقتا"
     qrcode: "اقرأ هذا المقال على جهاز آخر"
+    comments_load_button: "قراءة تعليقات 「تأكد !disq.us & disquscdn.com & disqus.com يمكن تحميل」"
 share:
     article_rss: "مقالات RSS"
     comment_rss: "تعليقات RSS"

languages/de.yml

@@ -10,6 +10,7 @@ post:
     newer: "Neuren"
     private: "Private Beiträge sind temporär verborgen"
     qrcode: "Lesen Sie diesen Artikel auf anderem Gerät"
+    comments_load_button: "Lesen Sie Kommentare 「Stellen Sie sicher, dass 'disq.us & disquscdn.com & disqus.com' geladen werden kann 」"    
 share:
     article_rss: "Artikel als RSS"
     comment_rss: "Kommentare als RSS"

languages/en.yml

@@ -10,6 +10,7 @@ post:
     newer: "Newer"
     private: "Private post, temporarily hidden"
     qrcode: "Read this article on other device"
+    comments_load_button: "Read Comments 「Be sure 'disq.us & disquscdn.com & disqus.com' can be loaded 」"    
 share:
     article_rss: "Article RSS"
     comment_rss: "Comment RSS"

languages/es.yml

@@ -10,6 +10,7 @@ post:
     newer: "Más nuevo"
     private: "Mensajes privados, ocultar temporalmente"
     qrcode: "Lea este artículo en otro dispositivo"
+    comments_load_button: "Leer comentarios 「Asegúrese de que 'disq.us & disquscdn.com & disqus.com' se puede cargar」"    
 share:
     article_rss: "Artículo RSS"
     comment_rss: "Comentario RSS"

languages/fr.yml

@@ -10,6 +10,7 @@ post:
     newer: "Récent"
     private: "Article privé, caché temporairement"
     qrcode: "Lire cet article depuis un autre appareil"
+    comments_load_button: "Lire les commentaires 「Assurez-vous que 'disq.us & disquscdn.com & disqus.com' peut être chargé 」"    
 share:
     article_rss: "Flux RSS des articles"
     comment_rss: "Flux RSS des commentaires"

languages/ja.yml

@@ -10,6 +10,7 @@ post:
     newer: "新しい"
     private: "プライベート記事、一時的に非表示にします"
     qrcode: "他のデバイスでこの記事を読む"
+    comments_load_button: "論評を読む「 あなたは disqus & disquscdn.com & disqus.com をロードできることを確認します」"    
 share:
     article_rss: "記事 RSS"
     comment_rss: "論評 RSS"

languages/ms.yml

@@ -10,6 +10,7 @@ post:
     newer: "Baru"
     private: "Siaran peribadi, disembunyikan buat sementara"
     qrcode: "Baca artikel ini pada peranti lain"
+    comments_load_button: "Read  comments 「Pastikan 'disq.us & disquscdn.com & disqus.com' boleh dimuatkan」"    
 share:
     article_rss: "RSS Artikel"
     comment_rss: "RSS Ulasan"

languages/zh-CN.yml

@@ -10,6 +10,7 @@ post:
     newer: "新篇"
     private: "私有文章，暂不公开"
     qrcode: "在其它设备中阅读本文章"
+    comments_load_button: "阅读评论 「请确保 disq.us & disquscdn.com & disqus.com 可以正常加载」"    
 share:
     article_rss: "文章 RSS"
     comment_rss: "评论 RSS"

languages/zh-TW.yml

@@ -10,6 +10,7 @@ post:
     newer: "新篇"
     private: "私有文章，暫不公開"
     qrcode: "在其他設備中閱讀本文章"
+    comments_load_button: "閱讀評論 「請確認 disq.us & disquscdn.com & disqus.com 可正常載入」"    
 share:
     article_rss: "文章 RSS"
     comment_rss: "評論 RSS"

layout/_partial/comment.ejs

@@ -15,3 +15,16 @@
         }
     </style>
 <% } %>
+
+<% if(theme.comment.use === 'disqus_click') { %>
+    <!-- 使用 DISQUS_CLICK -->
+    <div id="disqus-comment">	
+        <%- partial('_widget/disqus_click') %>
+    </div>
+    <style>
+        #disqus-comment{
+            background-color: #eee;
+            padding: 2pc;
+        }
+    </style>
+<% } %>

layout/_widget/disqus_click.ejs

@@ -0,0 +1,66 @@
+<div id="disqus_thread"></div>
+<!-- include js -->
+<script src="/js/ripple.js"></script>
+
+<!-- add animation -->
+<style>
+        .ripple-container {
+        }
+        .ripple-container .ripple{
+            background-color: rgba(255,255,255,0.4);
+            animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
+        }
+        @keyframes ripple {
+            0% {
+                transform: scale(0);
+                opacity: 1;
+            }
+            80% {
+                transform: scale(1);
+            }
+            100% {
+                opacity: 0;
+            }
+        }
+		button {
+            background-color: dodgerblue;
+            color: white;
+            padding: 10px 20px;
+            border:0;
+            font-size: 14px;
+            cursor: pointer
+        }
+</style>
+
+<!-- add data-ripple attribute -->
+<div class="btn1"> 
+    <button data-ripple><%= __('post.comments_load_button') %></button>
+</div>
+
+<script>
+    // add effect to elements
+    Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element){
+        // find all elements and attach effect
+        new RippleEffect(element); // element is instance of javascript element node
+    });
+</script>
+
+<script>
+    $('html').ready(function() {
+        $(".btn1").click(function() {  //click to load comments
+            var disqus_config = function () {
+                this.page.url = '<%- config.url + url_for(path) %>';  // Replace PAGE_URL with your page's canonical URL variable
+                this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+            };
+
+            (function() { // DON'T EDIT BELOW THIS LINE
+                var d = document;
+                var s = d.createElement('script');
+                s.src = '//<%= theme.comment.shortname %>.disqus.com/embed.js';
+                s.setAttribute('data-timestamp', + new Date());
+                (d.head || d.body).appendChild(s);
+            })();
+       });
+    });
+</script>
+

source/js/ripple.js

@@ -0,0 +1,44 @@
+/**
+ *
+ *
+ */
+function RippleEffect(element){
+    this.element = element;
+    this.element.addEventListener('click', this.run.bind(this), false);
+}
+RippleEffect.prototype = {
+    run: function(event){
+        var ripplerContainer = this.element.querySelector('.ripple-container');
+        var offsetInfo = this.element.getBoundingClientRect();
+        if(ripplerContainer) {
+            ripplerContainer.remove();
+        }
+        var rippleContainer = document.createElement('div');
+        rippleContainer.style.position = 'fixed';
+        rippleContainer.style.zIndex = 99;
+        rippleContainer.style.width = offsetInfo.width + 'px';
+        rippleContainer.style.left = offsetInfo.left + 'px';
+        rippleContainer.style.top = offsetInfo.top + 'px';
+        rippleContainer.style.height = offsetInfo.height + 'px';
+        rippleContainer.className = 'ripple-container';
+        rippleContainer.style.overflow = 'hidden';
+        this.element.appendChild(rippleContainer);
+
+         // fixed the bug
+        var maxLength = offsetInfo.width > offsetInfo.height ? offsetInfo.width : offsetInfo.height;
+        var circleD = maxLength * 2;
+
+        var ripple = document.createElement('div');
+        ripple.style.position = 'absolute';
+        ripple.style.width = circleD + 'px';
+        ripple.style.height = circleD + 'px';
+        ripple.style.borderRadius = '500px';
+        ripple.style.left = ((event.pageX - offsetInfo.left) - circleD/2) + 'px';
+        ripple.style.top = ((event.pageY - offsetInfo.top) - circleD/2) + 'px';
+        ripple.className = 'ripple';
+        rippleContainer.appendChild(ripple);
+        ripple.addEventListener('animationend', function(){
+            rippleContainer.remove();
+        }.bind(this), false);
+    }
+};