☰

Ye Olde Derpibooru Uploader Description Layout

Move uploader credit to its former location

// ==UserScript==
// @name        Ye Olde Derpibooru Uploader Description Layout
// @description Move uploader credit to its former location
// @version     1.0.17
// @author      Marker
// @license     MIT
// @namespace   https://github.com/marktaiwan/
// @homepageURL https://github.com/marktaiwan/Ye-Olde-Derpibooru-Uploader-Description-Layout
// @supportURL  https://github.com/marktaiwan/Ye-Olde-Derpibooru-Uploader-Description-Layout/issues
// @include     https://derpibooru.org/*
// @include     https://trixiebooru.org/*
// @include     https://www.derpibooru.org/*
// @include     https://www.trixiebooru.org/*
// @grant       none
// @inject-into content
// @noframes
// ==/UserScript==
(function (){
  'use strict';

  const SCRIPT_ID = 'ye_olde_layout';
  const CSS = ` /* Generated by Ye Olde Derpibooru Uploader Description Layout */
#extrameta {
  padding-top: 4px;
}
.image-description {
  background: ${getBackgroundColor()};
}
.image-description h6 {
  font-size: 19px;
  font-weight: normal;
  margin: 5px;
}`;

  function getBackgroundColor() {
    //   Adapt background color to theme, we create an element with the
    //   styles we want, then copy the computed style to the description box
    const ele = document.createElement('div');
    ele.classList.add('button');
    ele.style.padding = '0px';
    ele.style.border = '0px';
    ele.style.margin = '0px';
    document.body.appendChild(ele);
    const backgroundColor = window.getComputedStyle(ele).backgroundColor;
    ele.remove();
    return backgroundColor;
  }

  const extrameta = document.querySelector('#extrameta'),
        imageDescription = document.querySelector('.image-description'),
        imageDescriptionText = document.querySelector('.image-description__text'),
        descriptionForm = document.querySelector('#description-form'),
        content = document.querySelector('#content'),
        tagBox = document.querySelector('.js-tagsauce'),
        tagEdit = document.querySelector('.js-imageform'),
        adBox = document.querySelector('#imagespns');

  // override some site styling
  if (!document.getElementById(`${SCRIPT_ID}-style`)) {
    const styleElement = document.createElement('style');
    styleElement.setAttribute('type', 'text/css');
    styleElement.id = `${SCRIPT_ID}-style`;
    styleElement.innerHTML = CSS;
    document.body.insertAdjacentElement('afterend', styleElement);
  }

  // Revert metadata bar
  if (extrameta !== null) {
    extrameta.classList.add('block__header--light');
  }

  // Run if elements exists on page
  if ([content, imageDescription, tagBox, imageDescriptionText].every(ele => ele !== null)) {
    const newDiv = document.createElement('div');

    // Revert tag width
    newDiv.classList.add('layout--narrow');
    if (tagEdit !== null) {
      tagEdit.classList.add('layout--narrow');
    }
    content.insertBefore(newDiv, imageDescription.parentElement);
    content.insertBefore(tagBox, imageDescription.parentElement);
    if (adBox !== null) {
      newDiv.appendChild(adBox);
    }
    newDiv.appendChild(imageDescription);
    if (descriptionForm !== null) {
      newDiv.appendChild(descriptionForm);
    }
    if (imageDescriptionText.innerText === '' && imageDescription.querySelector('#edit-description') === null) {
      imageDescription.classList.toggle('hidden');
    }
  }
})();