Raw Source Toggle Dropdown

• Minified Source

DanielTepesKraus / Derpibooru Image Flip Rotate Buttons

// ==UserScript==
// @name        Derpibooru Image Flip Rotate Buttons
// @namespace   Derpibooru Image Flip Rotate Buttons
// @description Adds buttons to enable image flipping and rotating
// @author      DanielTepesKraus || derpibooru.org/profiles/danieltepeskraus
// @include     https://derpibooru.org*
// @include     derpibooru.org*
// @include     https://trixiebooru.org*
// @include     trixiebooru.org*
// @version     1.0
// @grant       none
// ==/UserScript==

var FlipValue = 0;
var FlippedHoriz = 0;
var FlippedVert = 0;
var setHoriz = 1;
var setVert = 1;
var IsRotated = 0;
var timervar = 0;
var spinny = 0;

var RotateLink = document.createElement("span");
RotateLink.id = "AddNewLinks";
RotateLink.innerHTML = '<a id="RotatePic" href="javascript:return_false;"><span class="hide-mobile"><i class="fa fa-rotate-right"></i>&nbspRotate</span></a><a id="FlipHPic" href="javascript:return_false;"><span class="hide-mobile"><i class="fa fa-arrows-h"></i>&nbspFlip</span></a><a id="FlipVPic" href="javascript:return_false;"><span class="hide-mobile"><i class="fa fa-arrows-v"></i>&nbspFlip</span></a>';
document.getElementById("extrameta").appendChild(RotateLink);
RotatePic.addEventListener('click',doRotate,false);
FlipHPic.addEventListener('click',doFH,false);
FlipVPic.addEventListener('click',doFV,false);

function doRotate(){
  FlipValue += 90;
  if (FlipValue > 359){
    FlipValue = 0;
  }
  IsRotated += 1;
  if (IsRotated > 3){
    IsRotated = 0;
  }
  setFlip();
  spinny += 1;
  if (spinny > 15){
    ohGod();
  }
}

function doFH(){
  if (setHoriz == 1){
    setHoriz = -1;
  }else{
    setHoriz = 1;
  }
  setFlip();
}

function doFV(){
  if (setVert == 1){
    setVert = -1;
  }else{
    setVert = 1;
  }
  setFlip();
}

function setFlip(){
  var offset = [0, (document.getElementById("image-display").width - document.getElementById("image-display").height) / 2, 0, (document.getElementById("image-display").height - document.getElementById("image-display").width) / 2];
  var offsetx = offset[IsRotated];
  var offsety = offset[IsRotated];
  if (setHoriz == -1){
    offsety = -offsety;
  }
  if (setVert == -1){
    offsetx = -offsetx;
  }
  document.getElementById("image-display").style = "border:0;display:inline-block;transform:scale(" + setHoriz + "," + setVert + ") rotate(" + FlipValue + "deg) translate(" + offsetx + "px," + offsety + "px);-webkit-transform:scale(" + setHoriz + "," + setVert + ") rotate(" + FlipValue + "deg) translate(" + offsetx + "px," + offsety + "px);-moz-transform:scale(" + setHoriz + "," + setVert + ") rotate(" + FlipValue + "deg) translate(" + offsetx + "px," + offsety + "px);-o-transform:scale(" + setHoriz + "," + setVert + ") rotate(" + FlipValue + "deg) translate(" + offsetx + "px," + offsety + "px)";
  if ((offset[IsRotated] < 0 && offset[1] > 0) || (offset[IsRotated] > 0 && offset[1] < 0)){
    offset[IsRotated] = -offset[IsRotated];
  }
  document.getElementById("image-display").parentElement.parentElement.style = "padding-bottom:" + (offset[IsRotated] * 2) + "px";
}

function ohGod(){
  spinny = 0;
  document.getElementById("q").value = "OH GOD WHAT HAVE YOU DONE?!";
  FlipValue += 10;
  if (FlipValue > 359){
    FlipValue = 0;
  }
  setFlip();
  clearTimeout(timervar);
  timervar = window.setTimeout(ohGod,10);
}