<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;
            }
        }
		.disqus_click_btn {
            background-color: dodgerblue;
            color: white;
            padding: 10px 20px;
            border:0;
            font-size: 14px;
            cursor: pointer
        }
</style>
	
<!-- add data-ripple attribute -->
<div class="btn_click_load"> 
    <button class="disqus_click_btn" 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>
    $('.btn_click_load').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);
        })();
        $('.btn_click_load').css('display','none');
    });
</script>
  	