BM windows appear on top when clicked

dist/BlueMarble-For-GreasyFork.user.js

@@ -2,7 +2,7 @@
 // @name            Blue Marble
 // @name:en         Blue Marble
 // @namespace       https://github.com/SwingTheVine/
-// @version         0.88.525
+// @version         0.88.533
 // @description     A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
 // @description:en  A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
 // @author          SwingTheVine
@@ -1475,6 +1475,7 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
       const dragbar = button.closest(".bm-dragbar");
       const header = window2.querySelector("h1");
       const windowContent = window2.querySelector(".bm-window-content");
+      window2.parentElement.append(window2);
       if (button.dataset["buttonStatus"] == "expanded") {
         windowContent.style.height = windowContent.scrollHeight + "px";
         window2.style.width = window2.scrollWidth + "px";
@@ -1513,13 +1514,13 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
     /** Handles dragging of the overlay.
      * Uses requestAnimationFrame for smooth animations and GPU-accelerated transforms.
      * Make sure to use the appropriate CSS selectors.
-     * @param {string} moveMe - The element to be moved
-     * @param {string} iMoveThings - The drag handle element
+     * @param {string} moveMeSelector - The element to be moved
+     * @param {string} iMoveThingsSelector - The drag handle element
      * @since 0.8.2
     */
-    handleDrag(moveMe, iMoveThings) {
-      moveMe = document.querySelector(moveMe);
-      iMoveThings = document.querySelector(iMoveThings);
+    handleDrag(moveMeSelector, iMoveThingsSelector) {
+      const moveMe = document.querySelector(moveMeSelector);
+      const iMoveThings = document.querySelector(iMoveThingsSelector);
       if (!moveMe || !iMoveThings) {
         this.handleDisplayError(`Can not drag! ${!moveMe ? "moveMe" : ""} ${!moveMe && !iMoveThings ? "and " : ""}${!iMoveThings ? "iMoveThings " : ""}was not found!`);
         return;
@@ -1736,7 +1737,14 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
       if (!document.querySelector(`#bm-window-main`)) {
         style = style.concat("z-index: 9001;").trim();
       }
-      this.window = this.addDiv({ "id": this.windowID, "class": "bm-window", "style": style }).addDragbar().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Template Wizard"', "data-button-status": "expanded" }, (instance, button) => {
+      this.window = this.addDiv({ "id": this.windowID, "class": "bm-window", "style": style }, (instance, div) => {
+        div.onclick = (event) => {
+          if (event.target.closest("button, a, input, select")) {
+            return;
+          }
+          div.parentElement.appendChild(div);
+        };
+      }).addDragbar().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Template Wizard"', "data-button-status": "expanded" }, (instance, button) => {
         button.onclick = () => instance.handleMinimization(button);
         button.ontouchend = () => {
           button.click();
@@ -2635,7 +2643,14 @@ Did you try clicking the canvas first?`);
         this.handleDisplayError("Color Filter window already exists!");
         return;
       }
-      this.window = this.addDiv({ "id": this.windowID, "class": "bm-window" }).addDragbar().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Color Filter"', "data-button-status": "expanded" }, (instance, button) => {
+      this.window = this.addDiv({ "id": this.windowID, "class": "bm-window" }, (instance, div) => {
+        div.onclick = (event) => {
+          if (event.target.closest("button, a, input, select")) {
+            return;
+          }
+          div.parentElement.appendChild(div);
+        };
+      }).addDragbar().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Color Filter"', "data-button-status": "expanded" }, (instance, button) => {
         button.onclick = () => instance.handleMinimization(button);
         button.ontouchend = () => {
           button.click();
@@ -2860,7 +2875,14 @@ Did you try clicking the canvas first?`);
         this.handleDisplayError("Main window already exists!");
         return;
       }
-      this.window = this.addDiv({ "id": this.windowID, "class": "bm-window", "style": "top: 10px; left: unset; right: 75px;" }).addDragbar().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Blue Marble"', "data-button-status": "expanded" }, (instance, button) => {
+      this.window = this.addDiv({ "id": this.windowID, "class": "bm-window", "style": "top: 10px; left: unset; right: 75px;" }, (instance, div) => {
+        div.onclick = (event) => {
+          if (event.target.closest("button, a, input, select")) {
+            return;
+          }
+          div.parentElement.appendChild(div);
+        };
+      }).addDragbar().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Blue Marble"', "data-button-status": "expanded" }, (instance, button) => {
         button.onclick = () => instance.handleMinimization(button);
         button.ontouchend = () => {
           button.click();

docs/README.md

@@ -51,7 +51,7 @@
 <a href="https://discord.gg/tpeBPy46hf" target="_blank" rel="noopener noreferrer"><img alt="Contact Me" src="https://img.shields.io/badge/Contact_Me-gray?style=flat&logo=Discord&logoColor=white&logoSize=auto&labelColor=cornflowerblue"></a>
 <a href="https://bluemarble.lol/" target="_blank" rel="noopener noreferrer"><img alt="Blue Marble Website" src="https://img.shields.io/badge/Blue_Marble_Website-crqch-blue?style=flat&logo=globe&logoColor=white"></a>
 <a href="" target="_blank" rel="noopener noreferrer"><img alt="WakaTime" src="https://img.shields.io/badge/Coding_Time-169hrs_20mins-blue?style=flat&logo=wakatime&logoColor=black&logoSize=auto&labelColor=white"></a>
-<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-1023-black?style=flat"></a>
+<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-1031-black?style=flat"></a>
 <a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Lines of Code" src="https://img.shields.io/badge/Lines_Of_Code-498-blue?style=flat"></a>
 <a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Comments" src="https://img.shields.io/badge/Lines_Of_Comments-498-blue?style=flat"></a>
 <a href="" target="_blank" rel="noopener noreferrer"><img alt="Compression" src="https://img.shields.io/badge/Compression-70.19%25-blue"></a>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.88.525",
+  "version": "0.88.533",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "wplace-bluemarble",
-      "version": "0.88.525",
+      "version": "0.88.533",
       "devDependencies": {
         "esbuild": "^0.25.0",
         "jsdoc": "^4.0.5",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.88.525",
+  "version": "0.88.533",
   "type": "module",
   "homepage": "https://bluemarble.lol/",
   "repository": {

src/BlueMarble.meta.js

@@ -2,7 +2,7 @@
 // @name            Blue Marble
 // @name:en         Blue Marble
 // @namespace       https://github.com/SwingTheVine/
-// @version         0.88.525
+// @version         0.88.533
 // @description     A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
 // @description:en  A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
 // @author          SwingTheVine

src/Overlay.js

@@ -1198,6 +1198,8 @@ export default class Overlay {
     const header = window.querySelector('h1'); // Get the header
     const windowContent = window.querySelector('.bm-window-content'); // Get the window content container
 
+    window.parentElement.append(window); // Moves the window to the top
+
     // If window content is open...
     if (button.dataset['buttonStatus'] == 'expanded') {
       // ...we want to close it
@@ -1250,15 +1252,15 @@ export default class Overlay {
   /** Handles dragging of the overlay.
    * Uses requestAnimationFrame for smooth animations and GPU-accelerated transforms.
    * Make sure to use the appropriate CSS selectors.
-   * @param {string} moveMe - The element to be moved
-   * @param {string} iMoveThings - The drag handle element
+   * @param {string} moveMeSelector - The element to be moved
+   * @param {string} iMoveThingsSelector - The drag handle element
    * @since 0.8.2
   */
-  handleDrag(moveMe, iMoveThings) {
+  handleDrag(moveMeSelector, iMoveThingsSelector) {
 
-    // Retrieves the elements (allows either '#id' or 'id' to be passed in)
-    moveMe = document.querySelector(moveMe);
-    iMoveThings = document.querySelector(iMoveThings);
+    // Retrieves the elements
+    const moveMe = document.querySelector(moveMeSelector);
+    const iMoveThings = document.querySelector(iMoveThingsSelector);
     
     // What to do when one of the two elements are not found
     if (!moveMe || !iMoveThings) {

src/WindowFilter.js

@@ -51,8 +51,12 @@ export default class WindowFilter extends Overlay {
     }
     
     // Creates a new color filter window
-    this.window = this.addDiv({'id': this.windowID, 'class': 'bm-window'})
-      .addDragbar()
+    this.window = this.addDiv({'id': this.windowID, 'class': 'bm-window'}, (instance, div) => {
+      div.onclick = (event) => {
+        if (event.target.closest('button, a, input, select')) {return;} // Exit-early if interactive child was clicked
+        div.parentElement.appendChild(div); // When the window is clicked on, bring to top
+      }
+    }).addDragbar()
         .addButton({'class': 'bm-button-circle', 'textContent': '▼', 'aria-label': 'Minimize window "Color Filter"', 'data-button-status': 'expanded'}, (instance, button) => {
           button.onclick = () => instance.handleMinimization(button);
           button.ontouchend = () => {button.click()}; // Needed only to negate weird interaction with dragbar

src/WindowMain.js

@@ -38,8 +38,12 @@ export default class WindowMain extends Overlay {
     }
 
     // Creates the window
-    this.window = this.addDiv({'id': this.windowID, 'class': 'bm-window', 'style': 'top: 10px; left: unset; right: 75px;'})
-      .addDragbar()
+    this.window = this.addDiv({'id': this.windowID, 'class': 'bm-window', 'style': 'top: 10px; left: unset; right: 75px;'}, (instance, div) => {
+      div.onclick = (event) => {
+        if (event.target.closest('button, a, input, select')) {return;} // Exit-early if interactive child was clicked
+        div.parentElement.appendChild(div); // When the window is clicked on, bring to top
+      }
+    }).addDragbar()
         .addButton({'class': 'bm-button-circle', 'textContent': '▼', 'aria-label': 'Minimize window "Blue Marble"', 'data-button-status': 'expanded'}, (instance, button) => {
           button.onclick = () => instance.handleMinimization(button);
           button.ontouchend = () => {button.click();}; // Needed ONLY to negate weird interaction with dragbar

src/WindowWizard.js

@@ -57,8 +57,12 @@ export default class WindowWizard extends Overlay {
     // Forces the Wizard window to show above the main window if and only if the schema is bad when Blue Marble loads for the first time this session
 
     // Creates a new template wizard window
-    this.window = this.addDiv({'id': this.windowID, 'class': 'bm-window', 'style': style})
-      .addDragbar()
+    this.window = this.addDiv({'id': this.windowID, 'class': 'bm-window', 'style': style}, (instance, div) => {
+      div.onclick = (event) => {
+        if (event.target.closest('button, a, input, select')) {return;} // Exit-early if interactive child was clicked
+        div.parentElement.appendChild(div); // When the window is clicked on, bring to top
+      }
+    }).addDragbar()
         .addButton({'class': 'bm-button-circle', 'textContent': '▼', 'aria-label': 'Minimize window "Template Wizard"', 'data-button-status': 'expanded'}, (instance, button) => {
           button.onclick = () => instance.handleMinimization(button);
           button.ontouchend = () => {button.click()}; // Needed only to negate weird interaction with dragbar