Raw Source Toggle Dropdown

• Minified Source

NaNraptor / HordesMoveableUI

// ==UserScript==
// @name         HordesMoveableUI
// @namespace    https://hordes.io/
// @version      1.0.5
// @description  title says it all
// @author       NaNraptor
// @match        https://hordes.io/play
// @grant        none
// @copyright    2019, NaNraptor
// @license      GPL-3.0-only
// @icon         https://i.ibb.co/Cz6VJQp/favicon.png
// @updateURL    https://openuserjs.org/meta/NaNraptor/HordesMoveableUI.user.js
// ==/UserScript==

/**********
 *
 * Currently supports pretty much all windows, except hot bar, party menu, and minimap
 *
 **********/

(function () {
  "use strict"

  let DOMdragEl, DOMdragElWindow, DOMdragElWindowRect

  document.addEventListener("mousedown", function (event) {
    if (!event) event = window.event;
    if (!event.path) event.path = (event.composedPath && event.composedPath())
    for (let i = 0; i < event.path.length - 3 /*Dont need doc, html, body*/ ; ++i) {
      DOMdragEl = event.path[i]
      DOMdragElWindow = event.path[i + 1]
      DOMdragElWindowRect = DOMdragElWindow.getBoundingClientRect()

      if (DOMdragEl.classList.contains("titleframe")) { //we only drag if click is here
        if (DOMdragElWindow.classList.contains("window")) { //check.. just in case? there may be titleframes that are not within a window
          setNeccessaryStylesForThisAbominationToWork(DOMdragElWindow, DOMdragEl, DOMdragElWindowRect)
          drag(DOMdragEl, event)
        }
      }
    }
  }, false)
})()

let setNeccessaryStylesForThisAbominationToWork = function (parent, child, parentRect) {
  let totalPadding = 10

  parent.style.height = child.innerText === "Inventory" ? "auto" : (parentRect.height - totalPadding) + "px"
  parent.style.width = (parentRect.width - totalPadding) + "px"
  parent.style.position = "fixed"
  parent.parentNode.style.margin = "0 0 0 0"
  parent.parentNode.style.transform = "none"
  parent.parentNode.parentNode.style.transform = "none"
  parent.style.top = ( /*savedPos.top*/ false || parentRect.top) + "px"
  parent.style.left = ( /*savedPos.left*/ false || parentRect.left) + "px"
}

let drag = function (elmnt, event) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0

  //elmnt.onmousedown = dragMouseDown
  dragMouseDown(event) //mouse is alraedy down so just execute straight away

  function dragMouseDown(e) {
    e = e || window.event
    e.preventDefault()
    // get the mouse cursor position at startup:
    pos3 = e.clientX
    pos4 = e.clientY
    document.onmouseup = closeDragElement
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag
  }

  function elementDrag(e) {
    e = e || window.event
    e.preventDefault()
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX
    pos2 = pos4 - e.clientY
    pos3 = e.clientX
    pos4 = e.clientY
    // set the element's new position:

    elmnt.parentNode.style.top = (elmnt.parentNode.offsetTop - pos2) + "px"
    elmnt.parentNode.style.left = (elmnt.parentNode.offsetLeft - pos1) + "px"
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null
    document.onmousemove = null
  }
}