Raw Source Toggle Dropdown

• Minified Source

DanielTepesKraus / Derpibooru Image Background Color Toggle

// ==UserScript==
// @name        Derpibooru Image Background Color Toggle
// @namespace   Derpibooru Image Background Color Toggle
// @include     https://derpibooru.org/*
// @include     derpibooru.org/*
// @include     https://trixiebooru.org/*
// @include     trixiebooru.org/*
// @description Swaps the background colors of animated images between the light and dark themes
// @author       DanielTepesKraus | https://www.derpibooru.org/profiles/DanielTepesKraus
// @version     3.0
// @grant       none
// ==/UserScript==

// ***** OPTIONS MENU *****


var AlwaysLink = 0;
var UseSliders = 1;

// Set AlwaysLink to 1 to only display the button on images tagged as "transparent background, "derpibooru theme illusion", or "transparent".
// Set UseSliders to 0 to turn off the slider bars and only have the toggle button.


// ************************

var linkset = 0;
var bgcol = window.getComputedStyle(document.body, null).backgroundColor.substring(4, window.getComputedStyle(document.body, null).backgroundColor.length-1).replace(/ /g, '').split(',');
if (bgcol[0] > 200){
  var imgcol = [248, 250, 252];
}else{
  var imgcol = [20, 26, 36];
}
var colored = 0;

var ToggleButton = document.createElement("span");
ToggleButton.id = "ToggleSpan";
ToggleButton.innerHTML = "<a href='javascript:return_false;' id='ToggleLink'><span class='hide-mobile'><i class='fa fa-exchange'></i>Toggle BG Color</span></a>";

if (AlwaysLink === 0) {
  setLink();
  }else{
  [...document.querySelectorAll('.tag__name')].forEach(setLink);
}

function setLink(el) {
  if ((AlwaysLink === 0 || el.textContent == "transparent background" || el.textContent == "transparent" || el.textContent == "derpibooru theme illusion") && linkset === 0){
    if (UseSliders == 1){
      ToggleButton.innerHTML += "<a href='javascript:return_false;' id='SliderDropdown'><span class='hide-mobile' id='arrowtoggle'><i class='fa fa-level-down'></i></span></a>";
    }
    document.getElementById("extrameta").appendChild(ToggleButton);
    ToggleLink.addEventListener('click',colorswap,false);
    linkset = 1;
  }
}

if (UseSliders == 1){
  document.getElementById("SliderDropdown").addEventListener('click',makesliders,false);
  var Sliders = document.createElement("span");
  Sliders.classList.add('hidden');
  Sliders.innerHTML = '<br><input type="range" min="0" max="255" value="127" step="1" title="Red" style="width:100%;box-sizing: border-box;" id="rgbr" class="input header__input"><br><input type="range" min="0" max="255" value="127" step="1" title="Green" style="width:100%;box-sizing: border-box;" id="rgbg" class="input header__input"><br><input type="range" min="0" max="255" value="127" step="1" title="Blue" style="width:100%;box-sizing: border-box;" id="rgbb" class="input header__input">';
  document.getElementById("extrameta").appendChild(Sliders);
  document.getElementById("rgbr").value = imgcol[0];
  document.getElementById("rgbg").value = imgcol[1];
  document.getElementById("rgbb").value = imgcol[2];
  document.getElementById("rgbr").addEventListener('input',slide,false);
  document.getElementById("rgbg").addEventListener('input',slide,false);
  document.getElementById("rgbb").addEventListener('input',slide,false);
}

function colorswap(){
  if (!document.getElementById('image-display').style.backgroundColor){
    document.getElementById('image-display').style.backgroundColor = "transparent";
    colored = 0;
  }
  if (bgcol[0] > 200 && colored === 0){
    document.getElementById('image-display').style.backgroundColor = "rgb(20,26,36)";
    colored = 1;
  }else if (bgcol[0] < 200 && colored === 0){
    document.getElementById('image-display').style.backgroundColor = "rgb(248,250,252)";
    colored = 1;
  }else if(colored == 1){
    document.getElementById('image-display').style.backgroundColor = "transparent";
    colored = 0;
  }
  if (UseSliders == 1){
    setSliders();
  }
}

function makesliders(){
  if (Sliders.classList.contains('hidden')){
    Sliders.classList.remove('hidden');
    document.getElementById('arrowtoggle').innerHTML = "<i class='fa fa-level-up'></i>";
  }else{
    Sliders.classList.add('hidden');
    document.getElementById('arrowtoggle').innerHTML = "<i class='fa fa-level-down'></i>";
  }
}

function slide() {
  document.getElementById('image-display').style.backgroundColor = 'rgb(' + document.getElementById("rgbr").value + ', ' + document.getElementById("rgbg").value + ', ' + document.getElementById("rgbb").value + ')';
}

function setSliders(){
  if (document.getElementById('image-display').style.backgroundColor == "transparent"){
    document.getElementById("rgbr").value = imgcol[0];
    document.getElementById("rgbg").value = imgcol[1];
    document.getElementById("rgbb").value = imgcol[2];
  }else{
    var tempcol = document.getElementById('image-display').style.backgroundColor.substring(4, document.getElementById('image-display').style.backgroundColor.length-1).replace(/ /g, '').split(',');
    document.getElementById("rgbr").value = tempcol[0];
    document.getElementById("rgbg").value = tempcol[1];
    document.getElementById("rgbb").value = tempcol[2];
  }
}

//      XXXXXXXXXX
//    XXXXXXXXXXXXXXXXXX
//    %%%%%%||||%%||
//  %%||%%||||||%%||||||
//  %%||%%%%||||||%%||||||
//  %%%%||||||||%%%%%%%%
//      ||||||||||||||
//    %%%%XX%%%%%%
//  %%%%%%XX%%%%XX%%%%%%
//%%%%%%%%XXXXXXXX%%%%%%%%
//||||%%XX||XXXX||XX%%||||
//||||||XXXXXXXXXXXX||||||
//||||XXXXXXXXXXXXXXXX||||
//    XXXXXX    XXXXXX
//  %%%%%%        %%%%%%
//%%%%%%%%        %%%%%%%%