glove80-editor.user.js

glove80-editor.user.js

// ==UserScript==
// @name         Glove80 editor inprovements
// @namespace    https://gist.github.com/imeredith
// @version      0.11
// @description  Improvments to the 6love80 editor
// @author       imeredith
// @match        https://my.glove80.com/*
// @grant        GM_addStyle
// @downloadURL  https://gist.githubusercontent.com/imeredith/4f156fc3cf86aaee8872cca07c6f8dcb/raw
// @updateURL  https://gist.githubusercontent.com/imeredith/4f156fc3cf86aaee8872cca07c6f8dcb/raw
// ==/UserScript==

(function () {
  "use strict";
  GM_addStyle(`.metadata-form textarea {

      overflow: hidden;
  }
.metadata-form .input-group {
overflow: auto;
height: 500px;
}
  .metadata-form .line-numbers {
  width: 50px;
  padding-right: 20px;
text-align: right;


  }

  .metadata-form .line-numbers span {
counter-increment: linenumber;

}

.metadata-form .line-numbers span::before {
content: counter(linenumber);
display: block;
color: #506882;
}
  `);

  // keyboard element is added 2+ times, so we need to make sure that the event is added
  function elementAdded(selector, fn) {
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (!mutation.addedNodes) return;

        for (const node of mutation.addedNodes) {
          const target = node?.querySelector?.(selector);
          if (target) {
            fn(target);
          }
        }
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  }
  function elementsAdded(...selectors) {
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (!mutation.addedNodes) return;

        for (const node of mutation.addedNodes) {
          selectors.forEach(([selector, fn]) => {
            const target = node?.querySelectorAll?.(selector);
            if (target?.length) {
              fn(target);
            }
          });
        }
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  }
  elementAdded(".keyboard-container", (el) => {
    el.addEventListener(
      "wheel",
      (e) => {
        if (!e.shiftKey) {
          e.stopImmediatePropagation();
        }
      },
      true
    );
  });

  elementsAdded([
    ".metadata-form",
    (forms) => {
      const el = forms[0];

      const inputGroup = el.querySelector?.(".input-group");
      const cardBody = el.querySelector?.(".card-body");

      const lineDiv = document.createElement("div");
      lineDiv.classList.add("line-numbers");
      inputGroup.prepend(lineDiv);
      const textarea = el.querySelector("textarea");
      textarea.dataset.lpignore = "true";
      const textAreaStyles = window.getComputedStyle(textarea);
      lineDiv.style.setProperty("padding-top", textAreaStyles["padding-top"]);
      console.log("sss", textarea);
      function autoResize(event) {
        console.log("stst", this);
        event.stopPropagation();
        this.style.height = "auto";
        this.style.height = this.scrollHeight + "px";
      }
      textarea.addEventListener("input", autoResize, false);

      function addNumbers(t) {
        const numberOfLines = t.split("\n").length;

        lineDiv.innerHTML = Array(numberOfLines).fill("<span></span>").join("");
      }

      textarea.addEventListener("keyup", (event) => {
        addNumbers(event.target.value);
      });
      addNumbers(textarea.value);
    },
  ]);
})();

Thanks for this script! 🙏 I have been using it since you released it and it has been very helpful. 👌

A recent update of the Glove80 Layout Editor added a drag & drop layer reordering feature, which isn't working properly when this userscript is enabled. I'm seeing the following error in the Firefox developer tools console where the layer drag & drop isn't working:

Uncaught TypeError: node.querySelector is not a function
    observer moz-extension://51b503db-5cea-47f1-8705-17f2b2b5c028/userscripts/Glove80-editor-inprovements.user.js?id=0df4ddc4-7465-47c7-80d1-dedf0af73a06:27
    elementAdded moz-extension://51b503db-5cea-47f1-8705-17f2b2b5c028/userscripts/Glove80-editor-inprovements.user.js?id=0df4ddc4-7465-47c7-80d1-dedf0af73a06:22
    window["__f__lny7q95n.muc"]/</< moz-extension://51b503db-5cea-47f1-8705-17f2b2b5c028/userscripts/Glove80-editor-inprovements.user.js?id=0df4ddc4-7465-47c7-80d1-dedf0af73a06:42
    window["__f__lny7q95n.muc"]/< moz-extension://51b503db-5cea-47f1-8705-17f2b2b5c028/userscripts/Glove80-editor-inprovements.user.js?id=0df4ddc4-7465-47c7-80d1-dedf0af73a06:49
    St https://my.glove80.com/#/edit:9
    window["__f__lny7q95n.muc"]/< moz-extension://51b503db-5cea-47f1-8705-17f2b2b5c028/userscripts/Glove80-editor-inprovements.user.js?id=0df4ddc4-7465-47c7-80d1-dedf0af73a06:1
    "__f__lny7q95n.muc" moz-extension://51b503db-5cea-47f1-8705-17f2b2b5c028/userscripts/Glove80-editor-inprovements.user.js?id=0df4ddc4-7465-47c7-80d1-dedf0af73a06:1
    St https://my.glove80.com/#/edit:9
    s https://my.glove80.com/#/edit:72
    <anonymous> https://my.glove80.com/#/edit:75
    g https://my.glove80.com/#/edit:69
2 eval:27:55