A few fixes and improvements and stuff

Author: rgantzos

features/align-to-center/data.json

@@ -1,6 +1,6 @@
 {
   "title": "Align to Center",
-  "description": "Use Control + U / Command + U to center text within the instruction box on projects",
+  "description": "Allows you to align text in Instructions and Notes & Credits boxes to the center of the input.",
   "credits": [
     {
       "username": "Brass_Glass",
@@ -14,5 +14,23 @@
   "type": ["Website"],
   "tags": ["New", "Recommended"],
   "dynamic": true,
-  "scripts": [{ "file": "script.js", "runOn": "/projects/*" }]
+  "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
+  "styles": [{ "file": "style.css", "runOn": "/projects/*" }],
+  "resources": [{ "name": "center-align", "path": "/icon.svg" }],
+  "options": [{ "id": "use-align-hotkey", "name": "Use Hotkey (Ctrl + U)", "type": "boolean" }],
+  "components": [
+    {
+      "type": "info",
+      "content": "For Mac users, use Command + U when the hotkey option is enabled to center text.",
+      "if": {
+        "type": "all",
+        "conditions": [
+          {
+            "type": "os",
+            "value": "Macintosh"
+          }
+        ]
+      }
+    }
+  ]
 }

features/align-to-center/icon.svg

@@ -31,10 +31,12 @@ export default async function ({ feature, console }) {
     textarea.value = uncenteredLines.join("\n");
   }
 
-  function centerAlignText() {
+  function centerAlignText(textarea) {
+    if (!feature.self.enabled) return;
+
     const form = document.querySelector(".project-notes");
     if (form) {
-      const activeElement = document.activeElement;
+      const activeElement = textarea || document.activeElement;
       if (
         activeElement.tagName === "TEXTAREA" &&
         form.contains(activeElement)
@@ -46,7 +48,8 @@ export default async function ({ feature, console }) {
         const centeredLines = lines.map((line) => {
           const textWidth = getTextWidth(line);
           const totalSpaces = (availableWidth - textWidth) / spaceWidth / 2;
-          const spaces = " ".repeat(Math.floor(totalSpaces));
+          const spaces =
+            totalSpaces > 0 ? " ".repeat(Math.floor(totalSpaces)) : "";
           return spaces + line;
         });
         activeElement.value = centeredLines.join("\n");
@@ -56,7 +59,38 @@ export default async function ({ feature, console }) {
 
   window.addEventListener("keydown", (event) => {
     if ((event.ctrlKey || event.metaKey) && event.key === "u") {
-      centerAlignText();
+      if (feature.settings.get("use-align-hotkey")) {
+        centerAlignText();
+      }
     }
   });
+
+  console.log("hey");
+
+  ScratchTools.waitForElements(
+    ".project-notes .project-textlabel",
+    function (div) {
+      if (div.querySelector(".ste-align-center")) return;
+
+      let textarea = div.parentElement.querySelector("textarea");
+
+      let img = document.createElement("img");
+      img.src = feature.self.getResource("center-align");
+      img.className = "ste-align-center";
+      img.addEventListener("click", function () {
+        centerAlignText(textarea);
+      });
+      feature.self.hideOnDisable(img);
+
+      div.appendChild(img);
+
+      textarea.addEventListener("focusin", function () {
+        img.classList.add("show");
+      });
+
+      textarea.addEventListener("focusout", function () {
+        img.classList.remove("show");
+      });
+    }
+  );
 }

features/align-to-center/script.js

@@ -0,0 +1,17 @@
+.project-notes .project-textlabel {
+    position: relative;
+    width: 100%;
+}
+
+.ste-align-center {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    height: 100%;
+    cursor: pointer;
+    display: none;
+}
+
+.ste-align-center.show {
+    display: block;
+}