☰

Sleazy Fork is available in English.

barchive image and quote fixer (4chan archive)

replaces thumbnails with full image, gif, or webm on click and inlines "quoted by" posts on click (can also expand/collapse all), also fixes page title on thebarchive (archive for 4chan's /b/), can tessellate inlined posts or entire thread

ของเมื่อวันที่ 24-11-2018 ดู เวอร์ชันล่าสุด

// ==UserScript==
// @name         barchive image and quote fixer (4chan archive)
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  replaces thumbnails with full image, gif, or webm on click and inlines "quoted by" posts on click (can also expand/collapse all), also fixes page title on thebarchive (archive for 4chan's /b/), can tessellate inlined posts or entire thread
// @author       You
// @match        https://thebarchive.com/b/thread/*
// @match        https://archived.moe/*/thread/*
// @grant        none
// ==/UserScript==

Array.from($(".post_data")).forEach(el => {
    el.innerHTML += `<span class="expandAllQuotes" style="font-size: 10px;position: relative;top: -2px;padding-left: 1px;color: #7fa5c6;opacity: 0.95;padding-right: 0px;" title="Expand all 'quoted by' posts">[↓]</span>`;
});

Array.from($(".post_data")).forEach(el => {
    el.innerHTML += `<span class="collapseAllQuotes" style="font-size: 10px;position: relative;top: -2px;padding-left: 3px;color: #7fa5c6;opacity: 0.95;padding-right: 6px;" title="Collapse all 'quoted by' posts">[↑]</span>`;
});

Array.from($(".post_data")).forEach(el => {
    el.innerHTML += '<span class="tessellatePost" style="font-size: 10px;position: relative;top: -2px;padding-left: 4px;color: #7fa5c6;opacity: 0.95;padding-right: 13px;">[Tessellate]</span>';
});

document.querySelector(".post_data").innerHTML += '<span class="tessellateThread" style="font-size: 10px;position: relative;top: -2px;padding-left: 2px;color: #7fa5c6;opacity: 0.95;padding-right: 11px;">[Tessellate Thread]</span>';

Array.from($(".post_data")).forEach(el => {
    el.children[8].children[0].style.paddingLeft = "0px";
    el.children[8].children[0].style.marginLeft = "-3px";
    el.innerHTML += '<span class="postRemove" style="font-size: 9.5px;position: relative;top: -1px;padding-left: 3px;color: darkgrey;opacity: 0.45;">Remove</span>';
});

Array.from(document.querySelectorAll(".text")).forEach(el => el.innerHTML += '<span class="inlinedQuotesContainer"></span>');


$(".postRemove").on("click", function(e) {
    postRemove(e, this);
});

$(".backlink").on("click", function(e) {
    inOnClickFunc(e, this);
});

function postRemove(e, node) {
    node.parentNode.parentNode.parentNode.remove();
}

function inOnClickFunc(e, node) {
    e.preventDefault();
    backlinkClick(e, node);
    backlinkReset(e, node);
}

document.querySelector("head").innerHTML += '<style>.clicked {opacity: 0.3;}</style>';

document.querySelector("title").innerText = "/b/ - " + document.querySelector(".text").innerText;

$(".tessellatePost").on("click", function(e) {
    tessellatePost(e, this);
});

$(".tessellateThread").on("click", function(e) {
    tessellateThread(e, this);
});

function tessellatePost(e, node) {
  let container = node.parentNode.parentNode.parentNode.parentNode.querySelector(".inlinedQuotesContainer");
  let tesSpan = node.parentNode.parentNode.parentNode.parentNode.querySelector(".tessellatePost");
  if (container.style.display !== "flex") {
    container.style.display = "flex";
    container.style.flexWrap = "wrap";
    tesSpan.style.opacity = "0.45";
    tesSpan.style.color = "darkgrey";
  } else {
    container.style.display = "";
    container.style.flexWrap = "";
    tesSpan.style.opacity = "0.95";
    tesSpan.style.color = "#7fa5c6";
  }
}

function tessellateThread(e, node) {
  let container = document.querySelector(".posts");
  let tesSpan = node;
  if (container.style.display !== "flex") {
    container.style.display = "flex";
    container.style.flexWrap = "wrap";
    tesSpan.style.opacity = "0.45";
    tesSpan.style.color = "darkgrey";
  } else {
    container.style.display = "";
    container.style.flexWrap = "";
    tesSpan.style.opacity = "0.95";
    tesSpan.style.color = "#7fa5c6";
  }
}

$(".expandAllQuotes").on("click", function(e) {
  expandAllQuotes(e, this);
});

$(".collapseAllQuotes").on("click", function(e) {
  collapseAllQuotes(e, this);
});

function expandAllQuotes(e, node) {
  Array.from(node.parentNode.parentNode.parentNode.querySelector(".backlink_list").children[0].children).filter(el => !el.classList.contains("clicked")).forEach(el => $(el).trigger("click"));
}

function collapseAllQuotes(e, node) {
  Array.from(node.parentNode.parentNode.parentNode.querySelector(".backlink_list").children[0].children).filter(el => el.classList.contains("clicked")).forEach(el => $(el).trigger("click"));
}

function backlinkClick(e, node) {
    e.preventDefault();
    let targetID = node.innerHTML.slice(8);
    if (!node.classList.contains("clicked")) {
        node.classList.add("clicked");
        //console.log("targetID is", targetID, $("#"+targetID));
        let newPost = $("#"+targetID)[0].cloneNode(true);
        newPost.style.border = "1px solid #0b0e1580";
        newPost.style.borderRadius = "6px";
        newPost.style.marginTop = "13px";
        setTimeout(function(){newPost.classList.remove("highlight");}, 10);
        node.parentNode.parentNode.parentNode.children[node.parentNode.parentNode.parentNode.children[0].classList.contains("post_file") ? 4 : 2].getElementsByClassName("inlinedQuotesContainer")[0].appendChild(newPost);
    } else {
        node.classList.remove("clicked");
        Array.from(node.parentNode.parentNode.parentNode.children[node.parentNode.parentNode.parentNode.children[0].classList.contains("post_file") ? 4 : 2].getElementsByClassName("inlinedQuotesContainer")[0].children)
            .filter(el => el.id === targetID).forEach(el => el.remove());
    }
}

function backlinkReset(e, node) {
    $(".backlink").off();
    $(".backlink").on("click", function(e) {
        inOnClickFunc(e, this);
    });
    $(".post_image").off();
    $(".post_image").on("click", function(e) {
        settingClickHandler(e, this);
    });
    $(".tessellatePost").off();
    $(".tessellatePost").on("click", function(e) {
        tessellatePost(e, this);
    });
    //$(".postRemove").off();
    //$(".postRemove").on("click", function(e) {
    //    postRemove(e, node);
    //});
    $(".expandAllQuotes").off();
    $(".expandAllQuotes").on("click", function(e) {
      expandAllQuotes(e, this);
    });
    $(".collapseAllQuotes").off();
    $(".collapseAllQuotes").on("click", function(e) {
      collapseAllQuotes(e, this);
    });
}

$(".post_image").on("click", function(e) {
    settingClickHandler(e, this);
});

function settingClickHandler(e, node) {
    e.preventDefault();
    if (node === document.getElementsByClassName("post_image")[0]) {
        node.src = node.parentNode.href;
        node.attributes.removeNamedItem("height");
        node.attributes.removeNamedItem("width");
    } else {
        if (node.src.split("/")[5] === "thumb") {
            if (node.parentNode.parentNode.parentNode.children[0].children[1].href.slice(-4) === "webm") {
                let newVideoNode = document.createElement("video");
                newVideoNode.src = node.parentNode.parentNode.parentNode.children[0].children[1].href;
                newVideoNode.controls = true;
                newVideoNode.autoplay = true;
                newVideoNode.loop = true;
                node.parentNode.parentNode.parentNode.appendChild(newVideoNode);
                node.style.display = "none";
                let newSpan = document.createElement("span");
                newSpan.style.paddingLeft = "5px";
                newSpan.style.color = "#81a2be";
                newSpan.innerText = "[close webm]";
                node.parentNode.parentNode.parentNode.children[0].appendChild(newSpan);
                newSpan.addEventListener("click", function(e) {
                  newVideoNode.remove();
                  node.style.display = "";
                  newSpan.remove();
                });
                return;
            }
            let widthHeightArr = node.parentNode.parentNode.parentNode.children[0].children[2].innerText.split(", ")[1].split("x");
            let fileExt = node.parentNode.parentNode.parentNode.children[0].children[1].href.split(".")[2];
            node.src = node.src.replace("thumb", "image").replace("s.jpg", "." + fileExt);
            node.style.width = widthHeightArr[0] + "px";
            node.style.height = widthHeightArr[1] + "px";
        } else {
            node.src = node.src.replace(/(\d+)(\.)(\w+)/, "$1s$2jpg").replace("image", "thumb");
            node.style.width = "";
            node.style.height = "";
        }
    }
}

Array.from(document.querySelectorAll(".backlink.op")).forEach(el => el.innerText += "  (OP)");