Untitled

// ==UserScript==
// @name         8ch browser
// @namespace    d107074fbd9a45c8a8fb0f080fed13db
// @description  Button in catalog that shows all the images in all posts.
// @version      0.1
// @match        http://8ch.net/*/catalog.html
// @match        https://8ch.net/*/catalog.html
// @grant        none
// ==/UserScript==
/*global window*/

(function () {
    "use strict";

    var app;

    app = {};

    app.width = 220;
    app.height = 220;
    app.threadQuery = ".thread";
    app.imageQuery = ".fileinfo + a";
    app.threads = [];

    app.atPageEnd = function () {
        var height;

        height = window.document.documentElement.scrollHeight;

        if (height < window.innerHeight) {
            return true;
        }

        return Math.ceil(window.pageYOffset + window.innerHeight) >= height;
    };

    app.videoLabel = function () {
        var canvas, context;

        canvas = window.document.createElement("canvas");
        canvas.width = app.width;
        canvas.height = app.height;
        context = canvas.getContext("2d");
        context.fillStyle = "hsla(0, 0%, 80%, 0.25)";
        context.strokeStyle = "hsla(0, 0%, 100%, 0.5)";
        context.lineWidth = 2;
        context.moveTo(app.width / 3, app.height / 3);
        context.lineTo(app.width / 3 * 2, app.height / 2);
        context.lineTo(app.width / 3, app.height / 3 * 2);
        context.closePath();
        context.fill();
        context.stroke();

        return canvas;
    };

    app.videoLabel = app.videoLabel();

    app.style = function () {
        var text, style;

        text = [
            "img {",
            "    margin: auto;",
            "    display: block;",
            "    max-height: " + app.height + "px;",
            "    max-width: " + app.width + "px;",
            "}",
            "a.app {",
            "    display: block;",
            "    position: relative;",
            "}",
            "div.app {",
            "    margin: 10px;",
            "    padding: 10px;",
            "    height: " + app.height + "px;",
            "    width: " + app.width + "px;",
            "    display: inline-block;",
            "}",
            "canvas {",
            "    position: absolute;",
            "    top: 0px;",
            "}"
        ];

        text = text.join("\n");

        style = window.document.createElement("style");
        style.innerHTML = text;
        window.document.head.appendChild(style);
    };

    app.processImage = function (link, error) {
        var img, a, div, canvas;

        if (!link.href) {
            return;
        }

        img = window.document.createElement("img");
        img.src = link.querySelector("img").src;
        img.addEventListener("error", error);
        img.addEventListener("load", function () {
            if (img.naturalWidth > img.naturalHeight) {
                img.width = app.width;
            } else {
                img.height = app.height;
            }
        });

        a = window.document.createElement("a");
        a.className = "app";
        a.href = link.href;
        a.target = "_blank";
        a.appendChild(img);

        div = window.document.createElement("div");
        div.className = "app reply post body-not-empty";
        div.appendChild(a);

        if (link.href.indexOf("webm") !== -1) {
            canvas = window.document.createElement("canvas");
            canvas.height = app.height;
            canvas.width = app.width;
            canvas.style.position = "absolute";
            canvas.style.top = "0px";
            canvas.getContext("2d").drawImage(app.videoLabel, 0, 0);
            a.appendChild(canvas);
        }

        return div;
    };

    app.loading = false;

    app.addThread = function () {
        var thread, request, div, p, a, button, subject;

        if (app.loading) {
            return;
        }

        app.loading = true;

        thread = app.threads.pop();

        button = window.document.createElement("button");
        button.innerHTML = "X";
        button.addEventListener("click", function () {
            window.document.body.removeChild(div);
            if (app.atPageEnd()) {
                app.addThread();
            }
        });

        subject = thread.querySelector(".subject");
        if (subject) {
            subject = subject.innerHTML;
        } else {
            subject= "Thread";
        }

        a = window.document.createElement("a");
        a.href = thread.querySelector("a").href;
        a.innerHTML = subject;

        p = window.document.createElement("p");
        p.appendChild(button);
        p.appendChild(window.document.createTextNode(" "));
        p.appendChild(a);

        div = window.document.createElement("div");
        div.appendChild(p);
        window.document.body.appendChild(div)

        request = new window.XMLHttpRequest();
        request.open("GET", a.href);
        request.responseType = "document";
        request.addEventListener("load", function () {
            var images;

            app.loading = false;

            images = request.response.querySelectorAll(app.imageQuery);
            Array.prototype.forEach.call(images, function (image) {
                image = app.processImage(image, function () {
                    div.removeChild(image);
                });
                div.appendChild(image);
            });

            if (app.atPageEnd()) {
                app.addThread();
            }
        });
        request.send();
    };

    app.run = function () {
        app.style();

        window.addEventListener("scroll", function () {
            if (app.atPageEnd()) {
                app.addThread();
            }
        });

        app.threads = window.document.querySelectorAll(app.threadQuery);
        app.threads = Array.prototype.slice.call(app.threads);
        window.document.body.innerHTML = "";

        app.addThread();
    };

    app.button = function () {
        var button, child;

        button = window.document.createElement("button");
        button.innerHTML = "Browse images";
        button.addEventListener("click", app.run);
        child = window.document.body.firstChild;
        window.document.body.insertBefore(button, child);
    };

    app.button();
}());