JSFiddle - React, Tailwind, and code Playground

by ethertank

JavaScript

// ==UserScript==

// @name		直リン画像回転くん
// @namespace	http://ethertank.jp
// @version		0.1
// @description	直リン画像回転くん
// @include		*.jpg
// @include		*.jpeg
// @include		*.png
// @include		*.gif
// @include		*.woff
// @include		*.bmp
// @include		*.tiff
// @copyright	2013+, ethertank

// ==/UserScript==
;(function() {
    var DOC = document,
        BODY = DOC.body,
        IMG = DOC.images[0],
        BUTTONS = "",
        H = ["-90°", "90°", "180°", "0°"],
        i = 0;
    
    for(i = 0; i < 4; ++i) {
        BUTTONS += '<button id="b' + i + '">' + H[i] + '<\/button>';
    }
    
    BUTTONS = '<div id="buttons" style="z-index:2;position:fixed;top:0;left:0;">' +
        BUTTONS +
        '</div>';
    BODY.style.backgroundColor = "#000";
    BODY.style.marginTop ="1.75em";
    BODY.insertAdjacentHTML("afterbegin", BUTTONS);
    
    DOC.getElementById("b0").addEventListener("click", function() {
        IMG.style.webkitTransformOrigin = "100% 0";
        IMG.style.webkitTransform = "rotate(-90deg) translate(0, -" + IMG.width + "px)";        
    }, false);
    
    DOC.getElementById("b1").addEventListener("click", function() {
        IMG.style.webkitTransformOrigin = "0 0";
        IMG.style.webkitTransform = "rotate(90deg) translate(0, -" + IMG.height + "px)";        
    }, false);
    
    DOC.getElementById("b2").addEventListener("click", function() {
        IMG.style.webkitTransformOrigin = "50% 50%";
        IMG.style.webkitTransform = "rotate(180deg)";        
    }, false);
    
    DOC.getElementById("b3").addEventListener("click", function() {
        IMG.style.webkitTransform = "none";        
    }, false);

	function fix() {
        var transform = IMG.style.webkitTransform.replace(/rotate\(/,"").replace(/deg.*/, "");
        //console.log(transform);
        switch (transform) {
            case "-90":
                IMG.style.webkitTransform = "rotate(-90deg) translate(0, -" + IMG.width + "px)";        
                break;
           ...