Raw Source Toggle Dropdown

• Minified Source

LittleEndu / pxls.space template

// ==UserScript==
// @name         pxls.space template
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  try to take over the world!
// @author       LittleEndu
// @match        http://*/*
// @grant        http://pxls.space/
// ==/UserScript==

/**
 * Created by Endrik on 04-Apr-17.
 */

(function () {
    'use strict';
    function toHtml(str) {
        var htmlObject = document.createElement('div');
        htmlObject.innerHTML = str;
        return htmlObject.firstChild;
    }

    const params = (location.search || "?").substr(1).split("&").map(x => x.split("=").map(a => unescape(a))).reduce((o, [k, v]) => Object.assign(o, {[k]: v}), {});
    var img = document.createElement("img");
    img.src = params.template;
    img.className = "place-canvas";
    Object.assign(img.style, {
        transform: `translate(${params.ox}px,${params.oy}px)`,
        position: "absolute",
        top: 0,
        left: 0,
        width: params.tw ? `${params.tw}px` : undefined,
        pointerEvents: "none",
        zIndex: 5,
        opacity: 0.5,
    });
    if (params.oo){
        img.style.opacity = params.oo;
    }
    try {
        img.style.imageRendering = "pixelated";
        if (!img.style.imageRendering || img.style.imageRendering == "none")
            img.style.imageRendering = "-moz-crisp-edges";
        if (!img.style.imageRendering || img.style.imageRendering == "none")
            img.style.imageRendering = "grisp-edges";
    }
    catch (e) {
    }

    const v = document.querySelector(".board-mover");
    if (!v) return;
    v.appendChild(img);
    const cb = document.querySelector("div#ui.ui");

    var slider = document.createElement("input");
    slider.setAttribute("id", "slider-control");
    slider.setAttribute("type", "range");
    slider.setAttribute("min", "0");
    slider.setAttribute("max", "1");
    slider.setAttribute("step", "0.01");
    slider.setAttribute("value", img.style.opacity);
    Object.assign(slider.style, {
        right: "24px",
        top: "10px",
        position: "absolute",
    });
    cb.appendChild(slider);

    var handleSliderEvent = function (event) {
        img.style.opacity = event.target.value;
    };

    slider.addEventListener("change", handleSliderEvent);
    slider.addEventListener("input", handleSliderEvent);

    var checkbox = document.createElement("INPUT");
    checkbox.setAttribute("type", "checkbox");
    Object.assign(checkbox.style, {
        right: "24px",
        top: "30px",
        position: "absolute",
    });
    cb.appendChild(checkbox);

    var multiplier = 1;
    var waitTimer = 0;
    var changeOpacity = function () {
        //console.log(img.style.opacity + ", " + multiplier + ", " + waitTimer);
        if (checkbox.checked === true) {
            if (+img.style.opacity === 1.0 || +img.style.opacity === 0.0) {
                waitTimer = +waitTimer + 1;
                if (waitTimer === 20) {
                    multiplier *= -1;
                    waitTimer = 0;
                }
            }
            if (waitTimer === 0) {
                slider.value = +slider.value + (0.02 * multiplier);
                img.style.opacity = slider.value;
            }
        }
    };

    var changer = setInterval(function () {
        changeOpacity();
    }, 15);


    console.log("/r/place template added");
})();