Raw Source Toggle Dropdown

• Minified Source

Luzifix / pxls.space template

// ==UserScript==
// @name         pxls.space template
// @namespace    http://tampermonkey.net/
// @version      0.7
// @description  try to take over the world!
// @author       Luzifix
// @match        http://*/*
// @grant        http://pxls.space/
// @updateURL    https://openuserjs.org/meta/Luzifix/pxls.space_template.meta.js
// ==/UserScript==

/**
 * Created by Endrik on 04-Apr-17.
 * Edit by Luzifix on 11-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}), {});

    if(!params.template)
    {
        return;
    }

    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,
    });
    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(".palette");
    console.log(cb);

    var divWrapper = document.createElement("div");
    Object.assign(divWrapper.style, {
        'position': 'absolute',
        'top': '-40px',
        'left': '10px',
        'background-color': 'rgba(0,0,0,0.7)',
        'border-radius': '5px',
        'padding': '5px'
    });

    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");

    divWrapper.appendChild(slider);
    cb.appendChild(divWrapper);

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

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

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