MR Unstagnator

MR Unstagnator.user.js

// ==UserScript==
// @name         MR Unstagnator
// @namespace    http://marginalrevolution.com/
// @version      0.1
// @description  Make MR look better and more usable.
// @author       Aaron Mills
// @match        http*://marginalrevolution.com/*
// @grant        GM_addStyle
// ==/UserScript==

function toggleComments() {
    console.log(this);
    let toggle = this.firstElementChild;
    let comment = this.parentElement.parentElement;

    // Jason told me to do this.
    let rotated = 'rotated';
    let unrotated = 'unrotated';
    let hide = 'closed';
    let show = 'open';

    // Rotate the comment toggle
    toggle.classList.toggle(rotated);

    if (toggle.classList.contains(rotated) === false) {
        toggle.classList.add(unrotated);
    } else {
        toggle.classList.remove(unrotated);
    }

    console.log(toggle);

    // Hide the children!
    for (var i = 1; i < comment.childElementCount; i++) {
        // comment.children[i].hidden = !comment.children[i].hidden;
        comment.children[i].classList.toggle(hide);
    }

}

function cleanupComments() {
    comments = document.getElementsByClassName('blog-comment');
    for (var i=0; i < comments.length; i++) {
        var comment = comments[i];
 
        // Move the respond button to a more appropriate location
        var respondLinks = comment.querySelectorAll('.comment-respond');
        var respond = respondLinks[respondLinks.length - 1];  // the one for this comment
        respond.parentElement.children[1].insertAdjacentElement("afterend", respond);
    }
}

(function() {
    'use strict';

    GM_addStyle(`
.rotated {
transform: rotate(-90deg);
transition-duration: 75ms;
display: inline-block;
}

.unrotated {
transition-duration: 75ms;
display: inline-block;
}

.toggle {
cursor: pointer;
}

.comment-content.closed, .blog-comment.closed, .comment-respond.closed {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}

.comment-content, .blog-comment, .comment-respond {
overflow: hidden;
max-height: 10000px;
transition-duration: 0.1s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.blog-comment{
background-color: #FFFFFF;
}

.byline {
background-color: #FAFAFA;
}

.comment-respond {
margin-top: 10px;
margin-bottom: 10px;
}

`);

    cleanupComments();

    var commentors = document.getElementsByClassName('comment-author');
    for (var i = 0; i < commentors.length; i++) {
        var elem = commentors[i];
        elem.style.fontStyle="normal"; // for real though, who makes this stuff italic?
        elem.insertAdjacentHTML("afterbegin", '<span class="toggle">▼</span> ');
        elem.onclick = toggleComments;
    }
})();