Custom Monitor Opacity

Author: rgantzos

extras/popup/popup.css

@@ -122,7 +122,7 @@ a {
 }
 
 .feature input {
-  color: var(--color);
+  color: var(--primary-color);
   background-color: var(--feature-input-bg);
   padding-left: 1rem !important;
 }
@@ -233,7 +233,7 @@ a {
   border-radius: 1rem;
   outline: none;
   border: 0px;
-  color: white;
+  color: var(--primary-color);
   background-color: var(--feature-input-bg);
 }
 

extras/popup/popup.js

@@ -769,6 +769,7 @@ async function getFeatures() {
           ];
           input.value = optionData || "";
           input.placeholder = `Enter ${input.type}`;
+          input.dataset.validators = JSON.stringify(option.validators || {})
           var optionDiv = document.createElement("div");
           optionDiv.className = "option";
           var label = document.createElement("label");
@@ -799,6 +800,7 @@ async function getFeatures() {
             var validation = JSON.parse(atob(this.dataset.validation));
             var ready = true;
             var input = this;
+            let validators = JSON.parse(this.dataset.validators)
             validation.forEach(function (validate) {
               if (ready) {
                 input.style.outline = "none";
@@ -822,6 +824,16 @@ async function getFeatures() {
               }
             });
             if (ready) {
+              if (validators.min) {
+                if (this.value < validators.min) {
+                  this.value = validators.min
+                }
+              }
+              if (validators.max) {
+                if (this.value > validators.max) {
+                  this.value = validators.max
+                }
+              }
               if (this.type !== "checkbox") {
                 finalValue = this.value;
               } else {

features/change-monitor-opacity/data.json

@@ -0,0 +1,22 @@
+{
+  "title": "Custom Monitor Opacity",
+  "description": "Set the opacity of variables and lists on the stage to a custom number.",
+  "credits": [
+    { "username": "rgantzos", "url": "https://scratch.mit.edu/users/rgantzos/" }
+  ],
+  "tags": [],
+  "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
+  "dynamic": true,
+  "options": [
+    {
+      "id": "monitor-opacity",
+      "name": "Monitor Opacity (0% - 100%)",
+      "type": 2,
+      "validators": {
+        "min": 0,
+        "max": 100
+      }
+    }
+  ],
+  "type": ["Website", "Editor"]
+}

features/change-monitor-opacity/script.js

@@ -0,0 +1,19 @@
+export default async function ({ feature, console }) {
+    let MONITORS = []
+
+    feature.page.waitForElements("div.monitor-overlay[class*='monitor-list_monitor-list_']", function(monitors) {
+        MONITORS.push(monitors)
+
+        monitors.style.opacity = feature.self.enabled ? (((feature.settings.get("monitor-opacity")) || 0) / 100).toString() : "100%"
+    })
+
+    function updateMonitors(opacity) {
+        for (var i in MONITORS) {
+            MONITORS[i].style.opacity = feature.self.enabled ? (((feature.settings.get("monitor-opacity")) || 0) / 100).toString() : "100%"
+        }
+    }
+
+    feature.addEventListener("enabled", updateMonitors)
+    feature.addEventListener("disabled", updateMonitors)
+    feature.settings.addEventListener("changed", updateMonitors)
+}

features/features.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "change-monitor-opacity",
+    "versionAdded": "v4.0.0"
+  },
   {
     "version": 2,
     "id": "custom-explore",