Discourse Threader

// ==UserScript==
// @name         Mistie Discourse Threader
// @namespace    https://forums.mst3k.com/*
// @version      0.1
// @description  Scroot the Inscrutible
// @author       You
// @match        https://forums.mst3k.com/*
// @grant        all
// ==/UserScript==


(function() {
    'use strict';

    const { REPLY } = require('discourse/models/composer').default;
    const composer = Discourse.__container__.lookup('controller:composer');


    var pageType;
    var pageId;
    var topicPost;

    setInterval(
        function(){
            if ((window.location.pathname.split("/")[1] == "t") && !(window.location.pathname.split("/")[3] == pageId)){
                pageType = window.location.pathname.split("/")[1];
                pageId   = window.location.pathname.split("/")[3];

                loadPostJson();
            }
            if ( !(window.location.pathname.split("/")[1] == "t") ){
                pageType = window.location.pathname.split("/")[1];
                pageId   = null;
            }
        }
    ,1000);

    function loadPostJson(){
        /*
        fetch( window.location.pathname + ".json" )
            .then(response => response.json())
            .then(data => createThreadedView(data));
            */
        var topic = Discourse.__container__.lookup("controller:topic").get("model");
        createThreadedView(topic);
    }

    function createThreadedView(data){
        console.log(data);
        var postContainer = document.querySelector(".container.posts");
        postContainer.style.display = "block";
        var posts = data.postStream.posts;
        postContainer.innerHTML = `
        <STYLE>
        .container.posts {
        }
        .threaded-post {
            display:block;
            box-sizing:border-box;
            width:100%;
            margin:0px;
            margin-top:10px;
            padding:10px;
            background:rgba(128,128,128,0.1);
            border-radius:8px;
            box-shadow:0px 2px 4px rgba(0,0,0,0.33);
        }
        .threaded-avatar {
            border-radius:50%;
        }
        .threaded-username {
            font-size:larger;
            font-weight:600;
            margin:10px;
        }
        .threaded-user-title, .threaded-post-date {
            color:#888;
        }
        .threaded-post-date {
            float:right;
        }
        .threaded-collapse-toggle {
            float:right;
            margin:5px;
            width:16px;
            height:16px;
            line-height:8px;
            text-align:center;
        }
        .threaded-post.collapsed > * {
           display:none;
        }
        .threaded-post.collapsed > .threaded-post-header {
           display:block;
           font-size:smaller;
           color:#888;
        }
        .threaded-post.collapsed > .threaded-post-header > img {
           display:none;
        }
        </STYLE>`;

        for ( var i = 0; i < posts.length; i++ ){
            createPostElement(posts[i], i);

            console.log( posts[i] );

            var parentPost = posts[ posts[i].reply_to_post_number-1 ];
            var parentElement = postContainer;

            if ( parentPost ){
                parentElement = parentPost.repliesElement;
            } else {
                if ( i > 0 ){ parentElement = posts[0].repliesElement; }
            }
            console.log(posts[i].element);
            parentElement.appendChild( posts[i].element );
        }
    }

    function createPostElement(post, postId){
        var postDate = new Date(post.created_at);

        post.element;
        post.element = document.createElement("div");
        post.element.setAttribute("id","post-"+postId);
        post.element.setAttribute("class","threaded-post");

        post.headerElement;
        post.headerElement = document.createElement("div");
        post.headerElement.setAttribute("id","post-header-"+postId);
        post.headerElement.setAttribute("class","threaded-post-header");
        post.headerElement.innerHTML = `
        <img src="`+post.avatar_template.replace("{size}","40")+`" class="threaded-avatar">
        <span class="threaded-username">`+post.username+`</span>
        <span class="threaded-user-title">`+post.user_title+`</span>
        `;

        post.dateTime = document.createElement("span");
        post.dateTime.setAttribute("class","threaded-post-date");
        post.dateTime.innerText = postDate.toLocaleDateString()+" "+postDate.toLocaleTimeString();

        post.collapse = document.createElement("button");
        post.collapse.setAttribute("class","threaded-collapse-toggle");
        post.collapse.innerText = "-";
        post.collapse.addEventListener("click",toggleCollapse);

        post.headerElement.appendChild(post.collapse);
        post.headerElement.appendChild(post.dateTime);

        post.bodyElement;
        post.bodyElement = document.createElement("div");
        post.bodyElement.setAttribute("id","post-body-"+postId);
        post.bodyElement.setAttribute("class","threaded-post-body");
        post.bodyElement.innerHTML = post.cooked;

        post.repliesElement;
        post.repliesElement = document.createElement("div");
        post.repliesElement.setAttribute("id","post-replies-"+postId);
        post.repliesElement.setAttribute("class","threaded-post-replies");

        post.replyButton;
        post.replyButton = document.createElement("button");
        post.replyButton.setAttribute("id","post-reply-button-"+postId);
        post.replyButton.setAttribute("class","threaded-post-reply-button");
        post.replyButton.innerText = "Reply";
        post.replyButton.addEventListener("click",function(){
            composer.open({
                action: REPLY,
                draftKey: 'post_'+post.id,
                post
            })
        });

        post.element.appendChild(post.headerElement);
        post.element.appendChild(post.bodyElement);
        post.element.appendChild(post.replyButton);
        post.element.appendChild(post.repliesElement);

    }

    function toggleCollapse(event){
        console.log(event);
        var thread = event.target.closest(".threaded-post");

        if ( thread.classList.contains("collapsed") ){
            thread.classList.remove("collapsed");
        } else {
            thread.classList.add("collapsed");
        }
    }

})();