universal/infinite_scroll_template.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="//media.disquscdn.com/disqus-install-examples/assets/css/kube.min.css" />
<style>
    #container {
        margin: auto;
        max-width: 1128px;
        padding: 12px;
    }

    .article {
        margin: 32px 0;
    }

    #disqus_thread {
        margin-top: 10px;
    }
</style>
</head>

<body>
    <div id="container">
        <h1>Infinite Scroll Template</h1>
        <p>Demonstrates how to load Disqus on a page that continuously adds content to the bottom of the page, each with their own discussion.</p>

        <div id="articles-list"></div>

        <button id="load-more-articles" class="button w100">
            Load More Articles
        </button>
    </div>
    <script>
        var doc = window.document;
        var articlesList = doc.getElementById('articles-list');
        var articleText = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt' +
            ' ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris' +
            ' nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse' +
            ' cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa' +
            ' qui officia deserunt mollit anim id est laborum.';

        var disqus_config;
        var disqusLoaded = false;
        var initDisqus = function () {
            if (disqusLoaded)
                return;

            disqusLoaded = true;
            var scr = doc.createElement('script');
            scr.src = '//kaffepausen.disqus.com/embed.js';
            scr.setAttribute('data-timestamp', +new Date());
            (doc.head || doc.body).appendChild(scr);
        };

        var resetDisqus = function (newIdentifier, newUrl, newTitle) {
            if (!disqusLoaded) {
                disqus_config = function () {
                    this.page.url = newUrl;
                    this.page.identifier = newIdentifier;
                    this.page.title = newTitle;
                };
                initDisqus();
            } else {
                window.DISQUS.reset({
                    reload: true,
                    config: function () {
                        this.page.identifier = newIdentifier;
                        this.page.url = newUrl;
                        this.page.title = newTitle;
                    }
                });
            }
        };

        var handleDisqusButtonClick = function (event) {
            // Get new thread values
            var newIdentifier = event.target.getAttribute('data-disqus-identifier');
            var newUrl = event.target.getAttribute('data-disqus-url');
            var newTitle = event.target.getAttribute('data-disqus-title');

            // Remove existing Disqus thread if in DOM
            var disqusThread = doc.getElementById('disqus_thread');
            if (disqusThread)
                disqusThread.parentElement.removeChild(disqusThread);

            // Create new disqus thread div below button
            disqusThread = doc.createElement('div');
            disqusThread.id = 'disqus_thread';
            event.target.parentElement.appendChild(disqusThread);

            // Reset Disqus script
            resetDisqus(newIdentifier, newUrl, newTitle);
        };

        var createArticle = function (index) {
            // Outer div
            var wrapper = doc.createElement('div');
            wrapper.id = 'article-' + index;
            wrapper.className = 'article';

            // Article title
            var title = doc.createElement('h2');
            title.innerHTML = 'Article ' + index;

            // Paragraph contents
            var paragraphs = [1, 2, 3].map(function (number) {
                var par = doc.createElement('p');
                par.innerText = articleText;
                return par;
            });

            // Load comments button
            var commentsButton = doc.createElement('button');
            commentsButton.className = 'button small outline secondary';
            commentsButton.setAttribute('data-disqus-identifier', 'new-ident-' + index);
            commentsButton.setAttribute('data-disqus-url', 'https://example.com/article-' + index);
            commentsButton.setAttribute('data-disqus-title', 'Article ' + index);
            commentsButton.innerText = 'Load Comments';
            commentsButton.onclick = handleDisqusButtonClick;

            // Comments div
            var commentsWrapper = doc.createElement('div');
            commentsWrapper.className = 'disqus-comments';
            commentsWrapper.appendChild(commentsButton);

            // Assemble the final template
            wrapper.appendChild(title);
            paragraphs.forEach(function (par) {
                wrapper.appendChild(par);
            });
            wrapper.appendChild(commentsWrapper);

            return wrapper;
        };

        var globalArticleIndex = 0;
        var addMoreContent = function (numArticles) {
            for (idx = 0; idx <= numArticles; idx++) {
                articlesList.appendChild(createArticle(globalArticleIndex));
                globalArticleIndex++
            }
        };

        var loadMoreButton = doc.getElementById('load-more-articles');
        loadMoreButton.onclick = addMoreContent.bind(this, 3);
        addMoreContent(3);
    </script>
</body>
</html>