☰

RotateImage

Adds a button to rotate images when they are opened in the browser.

// ==UserScript==
// @name         RotateImage
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds a button to rotate images when they are opened in the browser.
// @author       idjawoo
// @include      *.jpg
// @include      *.png
// @include      *.gif
// @icon         https://cdn.discordapp.com/attachments/816751871896453120/920381149484822590/unknown.png
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let button = document.createElement("div")
    button.innerHTML = `<img width="100%" height="100%" margin="0px" padding="0px" src="https://cdn.discordapp.com/attachments/816751871896453120/920388895462547476/rotation.png"></img>`
    let body = document.evaluate("/html/body", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue

    button.style.cursor = "pointer"
    button.style.position = "absolute"
    button.style.margin = "20px"
    button.style.width = "40px"
    button.style.height = "40px"
    button.style.background = "#fff"
    button.style.padding = "5px"
    button.style.borderRadius = "10px"
    button.style.transition = "0.2s ease-in-out"
    button.style.boxShadow = "inset 0 0 4px rgba(0, 0, 0, 0.5)"

    button.onmouseenter = () => {button.style.boxShadow = "inset 0 0 8px rgba(0, 0, 0, 1)"}
    button.onmouseleave = () => {button.style.boxShadow = "inset 0 0 4px rgba(0, 0, 0, 0.8)"}

    let image = document.evaluate("html[1]/body[1]/img[1]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
    let degrees = 0

    function applyStyle() {
        image.style.transform = String(`rotate(${String(degrees)}deg)`)
    }

    button.addEventListener ("click", () => {
        degrees += 90
        applyStyle()
    }, false);

    let callback = function(m) {
        applyStyle()
    }

    let observer = new MutationObserver(callback)
    observer.observe(image, {attributes: true, childList: true})
    body.appendChild(button)
})();