From 8d04b82fae5c03d86dcae756d2a5d6421cbe1448 Mon Sep 17 00:00:00 2001 From: SwingTheVine Date: Sun, 27 Jul 2025 10:19:52 -0400 Subject: [PATCH] Tried directly overriding "sources" --- build/build.js | 8 ++++---- dist/BlueMarble.user.js | 4 ++-- dist/BlueMarble.user.js.map | 2 +- docs/README.md | 2 +- package-lock.json | 4 ++-- package.json | 2 +- src/BlueMarble.meta.js | 2 +- 7 files changed, 12 insertions(+), 12 deletions(-) diff --git a/build/build.js b/build/build.js index f4fd82c..6d0e427 100644 --- a/build/build.js +++ b/build/build.js @@ -64,11 +64,11 @@ const resultEsbuildJS = resultEsbuild.outputFiles.find(file => file.path.endsWit const resultEsbuildMap = resultEsbuild.outputFiles.find(file => file.path.endsWith('.map')); // Obfuscates the JS file -const resultTerser = await terser.minify(resultEsbuildJS.text, { +let resultTerser = await terser.minify(resultEsbuildJS.text, { sourceMap: { - content: resultEsbuildMap.text, // The esbundle sourcemap + //content: resultEsbuildMap.text, // The esbundle sourcemap filename: 'BlueMarble.user.js', // The file to make a sourcemap for - url: ' ' // (This setting is intentional) The sourcemap url to point to. + url: ' ' // (This value is intentional) The sourcemap url to point to. }, mangle: { toplevel: true, // Obfuscate top-level class/function names @@ -87,7 +87,7 @@ const resultTerser = await terser.minify(resultEsbuildJS.text, { }); // Creates the sourcemap file -fs.writeFileSync('dist/BlueMarble.user.js.map', resultTerser.map, 'utf8'); +fs.writeFileSync('dist/BlueMarble.user.js.map', resultTerser.map.replace(`"sources":["0"]`, `"sources":["BlueMarble.user.js"]`), 'utf8'); // Adds the banner fs.writeFileSync('dist/BlueMarble.user.js', metaContent + resultTerser.code, 'utf8'); \ No newline at end of file diff --git a/dist/BlueMarble.user.js b/dist/BlueMarble.user.js index 8a6dc6f..fcaf195 100644 --- a/dist/BlueMarble.user.js +++ b/dist/BlueMarble.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name Blue Marble // @namespace https://github.com/SwingTheVine/ -// @version 0.50.0 +// @version 0.50.4 // @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. // @author SwingTheVine // @license MPL-2.0 @@ -21,4 +21,4 @@ // License --> https://www.mozilla.org/en-US/MPL/2.0/ (()=>{var t,e,s=t=>{throw TypeError(t)},n=(t,e,n)=>(((t,e,n)=>{e.has(t)||s("Cannot "+n)})(t,e,"access private method"),n);t=new WeakSet,e=function(t,e={},s={}){const n=document.createElement(t);this.t?(this.i.appendChild(n),this.o.push(this.i),this.i=n):(this.t=n,this.i=n);for(const[t,s]of Object.entries(e))n[t]=s;for(const[t,e]of Object.entries(s))n[t]=e;return n};var i=class{static h(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}},o=GM_info.script.name.toString(),a=GM_info.script.version.toString();!function(t){const e=document.createElement("script");e.textContent=`(${t})();`,document.documentElement.appendChild(e),e.remove()}(()=>{const t=window.fetch;window.fetch=async function(...e){const s=await t.apply(this,e),n=s.clone();if((n.headers.get("content-type")||"").includes("application/json")){let t=(e[0]instanceof Request?e[0]?.url:e[0])||"ignore";console.log(`Sending JSON message about endpoint "${t}"`),n.json().then(e=>{window.postMessage({source:"blue-marble",endpoint:t,jsonData:e},"*")}).catch(t=>{console.error("BM - Failed to parse JSON:",t)})}return s}});var r=GM_getResourceText("CSS-BM-File");GM_addStyle(r);var c=document.createElement("link");c.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap",c.rel="preload",c.as="style",c.onload=function(){this.onload=null,this.rel="stylesheet"},document.head.appendChild(c);new class{constructor(){this.l=null,this.u=null,this.m="#bm-display-coords"}p(t){return this.u=t,this.l=new MutationObserver(t=>{for(const e of t)for(const t of e.addedNodes)t instanceof HTMLElement&&t.matches?.(this.m)}),this}v(){return this.l}observe(t,e=!1,s=!1){t.observe(this.u,{childList:e,subtree:s})}};var h=new class{constructor(e,n){var i,o,a;i=this,(o=t).has(i)?s("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(i):o.set(i,a),this.name=e,this.version=n,this.$=null,this.M="bm-output-status",this.t=null,this.i=null,this.o=[]}C(t){this.$=t}T(){return this.o.length>0&&(this.i=this.o.pop()),this}k(t){t.appendChild(this.t),this.t=null,this.i=null,this.o=[]}N(s={},i=()=>{}){return i(this,n(this,t,e).call(this,"div",{},s)),this}S(s={},i=()=>{}){return i(this,n(this,t,e).call(this,"p",{},s)),this}I(s={},i=()=>{}){return i(this,n(this,t,e).call(this,"img",{},s)),this}H(s,i={},o=()=>{}){return o(this,n(this,t,e).call(this,"h"+s,{},i)),this}B(s={},i=()=>{}){return i(this,n(this,t,e).call(this,"hr",{},s)),this}L(s={},i=()=>{}){return i(this,n(this,t,e).call(this,"br",{},s)),this}D(s={},i=()=>{}){const o=n(this,t,e).call(this,"label",{textContent:s.textContent??""});delete s.textContent;const a=n(this,t,e).call(this,"input",{type:"checkbox"},s);return o.insertBefore(a,o.firstChild),this.T(),i(this,o,a),this}O(s={},i=()=>{}){return i(this,n(this,t,e).call(this,"button",{},s)),this}P(s={},i=()=>{}){const o=s.title??s.textContent??"Help: No info";delete s.textContent,s.title=`Help: ${o}`;const a={textContent:"?",className:"bm-help",onclick:()=>{this.R(this.M,o)}};return i(this,n(this,t,e).call(this,"button",a,s)),this}j(s={},i=()=>{}){return i(this,n(this,t,e).call(this,"input",{},s)),this}F(s={},i=()=>{}){const o=s.textContent??"";delete s.textContent;const a=n(this,t,e).call(this,"div"),r=n(this,t,e).call(this,"input",{type:"file",style:"display: none;"},s);this.T();const c=n(this,t,e).call(this,"button",{textContent:o});return this.T(),this.T(),c.addEventListener("click",()=>{r.click()}),r.addEventListener("change",()=>{c.style.maxWidth=`${c.offsetWidth}px`,r.files.length>0?c.textContent=r.files[0].name:c.textContent=o}),i(this,a,r,c),this}G(s={},i=()=>{}){return i(this,n(this,t,e).call(this,"textarea",{},s)),this}R(t,e,s=!1){const n=document.getElementById(t.replace(/^#/,""));n&&(n instanceof HTMLInputElement?n.value=e:s?n.textContent=e:n.innerHTML=e)}U(t,e){let s,n=!1,i=0;t=document.querySelector("#"==t?.[0]?t:"#"+t),e=document.querySelector("#"==e?.[0]?e:"#"+e),t&&e?(e.addEventListener("mousedown",function(o){n=!0,s=o.clientX-t.getBoundingClientRect().left,i=o.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging")}),e.addEventListener("touchstart",function(o){n=!0;const a=o?.touches?.[0];a&&(s=a.clientX-t.getBoundingClientRect().left,i=a.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(e){n&&(t.style.left=e.clientX-s+"px",t.style.top=e.clientY-i+"px",t.style.right="")}),document.addEventListener("touchmove",function(e){if(n){const n=e?.touches?.[0];if(!n)return;t.style.left=n.clientX-s+"px",t.style.top=n.clientY-i+"px",e.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){n=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchend",function(){n=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){n=!1,document.body.style.userSelect="",e.classList.remove("dragging")})):this.W(`Can not drag! ${t?"":"moveMe"} ${t||e?"":"and "}${e?"":"iMoveThings "}was not found!`)}W(t){(0,console.error)(`${this.name}: ${t}`),this.R(this.M,"Error: "+t,!0)}}(o,a),l=new class{X(t,e){return[parseInt(t[0])%4*1e3+parseInt(e[0]),parseInt(t[1])%4*1e3+parseInt(e[1])]}},d=new class{constructor(t){this.Y=t,this._=!1,this.q=[]}J(t){window.addEventListener("message",e=>{const s=e.data,n=s.jsonData;if(!s||"blue-marble"!==s.source)return;const o=s.endpoint.split("?")[0].split("/").filter(t=>t&&isNaN(Number(t))).pop();switch(console.log(`Recieved message about "${o}"`),o){case"me":if(n.status&&"2"!=n.status?.toString()[0])return void t.W("The game is down!\nCould not fetch userdata.");const e=Math.ceil(Math.pow(Math.floor(n.level)*Math.pow(30,.65),1/.65)-n.pixelsPainted),o=console.log;o(n),o(n?.droplets),t.R("bm-user-name",`Username: ${i.h(n.name)}`),t.R("bm-user-droplets",`Droplets: ${(new Intl.NumberFormat).format(n.droplets)}`),t.R("bm-user-nextlevel",`Next level in ${(new Intl.NumberFormat).format(e)} pixel${1==e?"":"s"}`);break;case"pixel":const a=s.endpoint.split("?")[0].split("/").filter(t=>t&&!isNaN(Number(t))),r=new URLSearchParams(s.endpoint.split("?")[1]),c=[r.get("x"),r.get("y")];this.q=[...a,...c];const h=this.Y.X(a,c),l=document.querySelectorAll("span");for(const t of l)if(t.textContent.trim().includes(`${h[0]}, ${h[1]}`)){let e=document.querySelector("#bm-display-coords");const s=`(Tl X: ${a[0]}, Tl Y: ${a[1]}, Px X: ${c[0]}, Px Y: ${c[1]})`;e?e.textContent=s:(e=document.createElement("span"),e.id="bm-display-coords",e.textContent=s,e.style="margin-left: calc(var(--spacing)*3); font-size: small;",t.parentNode.parentNode.parentNode.insertAdjacentElement("afterend",e))}break;case"robots":this._="false"==n.userscript?.toString().toLowerCase()}})}}(l);h.C(d),h.N({id:"bm-overlay",style:"top: 10px; right: 75px;"}).N({id:"bm-contain-header"}).N({id:"bm-bar-drag"}).T().I({alt:"Blue Marble Icon",src:"https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/src/assets/Favicon.png"}).T().H(1,{textContent:o}).T().T().B().T().N({id:"bm-contain-userinfo"}).S({id:"bm-user-name",textContent:"Username:"}).T().S({id:"bm-user-droplets",textContent:"Droplets:"}).T().S({id:"bm-user-nextlevel",textContent:"Next level in..."}).T().T().B().T().N({id:"bm-contain-automation"}).D({id:"bm-input-stealth",textContent:"Stealth",checked:!0}).T().P({title:"Waits for the website to make requests, instead of sending requests."}).T().L().T().D({id:"bm-input-possessed",textContent:"Possessed",checked:!0}).T().P({title:"Controls the website as if it were possessed."}).T().L().T().N({id:"bm-contain-coords"}).O({id:"bm-button-coords",className:"bm-help",style:"margin-top: 0;",innerHTML:''},(t,e)=>{e.onclick=()=>{const e=t.$?.q;e?.[0]?(t.R("bm-input-tx",e?.[0]||""),t.R("bm-input-ty",e?.[1]||""),t.R("bm-input-px",e?.[2]||""),t.R("bm-input-py",e?.[3]||"")):t.W("Coordinates are malformed! Did you try clicking on the canvas first?")}}).T().j({type:"number",id:"bm-input-tx",placeholder:"Tl X",min:0,max:2047,step:1}).T().j({type:"number",id:"bm-input-ty",placeholder:"Tl Y",min:0,max:2047,step:1}).T().j({type:"number",id:"bm-input-px",placeholder:"Px X",min:0,max:2047,step:1}).T().j({type:"number",id:"bm-input-py",placeholder:"Px Y",min:0,max:2047,step:1}).T().T().F({id:"bm-input-file-template",textContent:"Upload Template"}).T().N({id:"bm-contain-buttons"}).O({id:"bm-button-enable",textContent:"Enable"}).T().O({id:"bm-button-disable",textContent:"Disable"}).T().T().G({id:h.M,placeholder:`Status: Sleeping...\nVersion: ${a}`,readOnly:!0}).T().T().k(document.body),h.U("#bm-overlay","#bm-bar-drag"),d.J(h),console.log(`${o} (${a}) userscript has loaded!`)})(); -//# sourceMappingURL=https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/708108f9cb796e860acbb83cbb0f0d3a1a9a4130/dist/BlueMarble.user.js.map \ No newline at end of file +//# sourceMappingURL= \ No newline at end of file diff --git a/dist/BlueMarble.user.js.map b/dist/BlueMarble.user.js.map index ecd506f..f165dec 100644 --- a/dist/BlueMarble.user.js.map +++ b/dist/BlueMarble.user.js.map @@ -1 +1 @@ -{"version":3,"file":"BlueMarble.user.js","names":["_Overlay_instances","createElement_fn","WeakSet","tag","properties","additionalProperties","element","document","createElement","this","overlay","currentParent","appendChild","parentStack","push","property","value","Object","entries","Utils","escapeHTML","text","div","textContent","innerHTML","name","GM_info","script","toString","version","fn","documentElement","remove","inject","originalFetch","window","fetch","async","args","response","apply","cloned","clone","headers","get","includes","endpointName","Request","url","console","log","json","then","jsonData","postMessage","source","endpoint","catch","err","error","cssOverlay","GM_getResourceText","GM_addStyle","stylesheetLink","href","rel","as","onload","head","constructor","observerBody","observerBodyTarget","targetDisplayCoords","createObserverBody","target","MutationObserver","mutations","mutation","node","addedNodes","HTMLElement","matches","getObserverBody","observe","observer","watchChildList","watchSubtree","childList","subtree","apiHandler","outputStatusId","setApiHandler","buildElement","length","pop","buildOverlay","parent","addDiv","callback","__privateMethod","call","addP","addImg","addHeader","level","addHr","addBr","addCheckbox","label","checkbox","type","insertBefore","firstChild","addButton","addButtonHelp","tooltip","className","onclick","updateInnerHTML","addInput","addInputFile","container","input","style","button","addEventListener","click","maxWidth","offsetWidth","files","addTextarea","id","html","doSafe","getElementById","replace","HTMLInputElement","handleDrag","moveMe","iMoveThings","offsetX","isDragging","offsetY","querySelector","event","clientX","getBoundingClientRect","left","clientY","top","body","userSelect","classList","add","touch","touches","passive","right","preventDefault","handleDisplayError","consoleError","coordsHandler","serverTPtoDisplayTP","tile","pixel","parseInt","disableAll","coordsTilePixel","spontaneousResponseListener","data","dataJSON","endpointText","split","filter","s","isNaN","Number","nextLevelPixels","Math","ceil","pow","floor","clog","droplets","Intl","NumberFormat","format","coordsTile","payloadExtractor","URLSearchParams","coordsPixel","displayTP","spanElements","querySelectorAll","trim","displayCoords","parentNode","insertAdjacentElement","toLowerCase","alt","src","checked","title","instance","coords","placeholder","min","max","step","readOnly"],"sources":["../src/overlay.js","../src/observers.js","../src/utils.js","../src/main.js","../src/coordsHandler.js","../src/apiHandler.js"],"sourcesContent":["/** The overlay builder for the Blue Marble script.\n * @description This class handles the overlay UI for the Blue Marble script.\n * @since 0.0.2\n * @example\n * const overlay = new Overlay();\n * overlay.addDiv('overlay')\n * .addHeader(1, {'textContent': 'Your Overlay'}).buildElement()\n * .addP({'textContent': 'This is your overlay. It is versatile.'}).buildElement()\n * .addHr().buildElement()\n * .buildOverlay(document.body);\n * // Output:\n * // (Assume already exists in the webpage)\n * \n *
\n *

Your Overlay

\n *

This is your overlay. It is versatile.

\n *
\n * \n*/\nexport default class Overlay {\n\n /** Constructor for the Overlay class.\n * @param {string} name - The name of the userscript\n * @param {string} version - The version of the userscript\n * @since 0.0.2\n * @see {@link Overlay}\n */\n constructor(name, version) {\n this.name = name; // Name of userscript\n this.version = version; // Version of userscript\n\n this.apiHandler = null; // The API handler instance. Later populated when setApiHandler is called\n \n this.outputStatusId = 'bm-output-status'; // ID for status element\n\n this.overlay = null; // The overlay root DOM HTMLElement\n this.currentParent = null; // The current parent HTMLElement in the overlay\n this.parentStack = []; // Tracks the parent elements BEFORE the currentParent so we can nest elements\n }\n\n /** Populates the apiHandler variable with the apiHandler class.\n * @param {apiHandler} apiHandler - The apiHandler class instance\n * @since 0.41.4\n */\n setApiHandler(apiHandler) {this.apiHandler = apiHandler;}\n\n /** Creates an element.\n * For **internal use** of the {@link Overlay} class.\n * @param {string} tag - The tag name as a string.\n * @param {Object.} [properties={}] - The DOM properties of the element.\n * @returns {HTMLElement} HTML Element\n * @since 0.43.2\n */\n #createElement(tag, properties = {}, additionalProperties={}) {\n\n const element = document.createElement(tag); // Creates the element\n\n // If this is the first element made...\n if (!this.overlay) {\n this.overlay = element; // Declare it the highest overlay element\n this.currentParent = element;\n } else {\n this.currentParent.appendChild(element); // ...else delcare it the child of the last element\n this.parentStack.push(this.currentParent);\n this.currentParent = element;\n }\n\n // For every passed in property (shared by all like-elements), apply the it to the element\n for (const [property, value] of Object.entries(properties)) {\n element[property] = value;\n }\n\n // For every passed in additional property, apply the it to the element\n for (const [property, value] of Object.entries(additionalProperties)) {\n element[property] = value;\n }\n \n return element;\n }\n\n /** Finishes building an element.\n * Call this after you are finished adding children.\n * If the element will have no children, call it anyways.\n * @returns {Overlay} Overlay class instance (this)\n * @since 0.43.2\n * @example\n * overlay\n * .addDiv()\n * .addHeader(1).buildElement() // Breaks out of the

\n * .addP().buildElement() // Breaks out of the

\n * .buildElement() // Breaks out of the

\n * .addHr() // Since there are no more elements, calling buildElement() is optional\n * .buildOverlay(document.body);\n */\n buildElement() {\n if (this.parentStack.length > 0) {\n this.currentParent = this.parentStack.pop();\n }\n return this;\n }\n\n /** Finishes building the overlay and displays it.\n * Call this when you are done chaining methods.\n * @param {HTMLElement} parent - The parent HTMLElement this overlay should be appended to as a child.\n * @since 0.43.2\n * @example\n * overlay\n * .addDiv()\n * .addP().buildElement()\n * .buildElement()\n * .buildOverlay(document.body); // Adds DOM structure to document body\n * //

\n */\n buildOverlay(parent) {\n parent.appendChild(this.overlay);\n\n // Resets the class-bound variables of this class instance back to default so overlay can be build again later\n this.overlay = null;\n this.currentParent = null;\n this.parentStack = [];\n }\n\n /** Adds a `
` to the overlay.\n * This `
` element will have properties shared between all `
` elements in the overlay.\n * You can override the shared properties by using a callback.\n * @param {Object.} [additionalProperties={}] - The DOM properties of the `
` that are NOT shared between all overlay `
` elements. These should be camelCase.\n * @param {function(Overlay, HTMLDivElement):void} [callback=()=>{}] - Additional JS modification to the `
`.\n * @returns {Overlay} Overlay class instance (this)\n * @since 0.43.2\n * @example\n * // Assume all
elements have a shared class (e.g. {'className': 'bar'})\n * overlay.addDiv({'id': 'foo'}).buildOverlay(document.body);\n * // Output:\n * // (Assume already exists in the webpage)\n * \n *
\n * \n */\n addDiv(additionalProperties = {}, callback = () => {}) {\n\n const properties = {}; // Shared
DOM properties\n\n const div = this.#createElement('div', properties, additionalProperties); // Creates the
element\n callback(this, div); // Runs any script passed in through the callback\n return this;\n }\n\n /** Adds a `

` to the overlay.\n * This `

` element will have properties shared between all `

` elements in the overlay.\n * You can override the shared properties by using a callback.\n * @param {Object.} [additionalProperties={}] - The DOM properties of the `

` that are NOT shared between all overlay `

` elements. These should be camelCase.\n * @param {function(Overlay, HTMLParagraphElement):void} [callback=()=>{}] - Additional JS modification to the `

`.\n * @returns {Overlay} Overlay class instance (this)\n * @since 0.43.2\n * @example\n * // Assume all

elements have a shared class (e.g. {'className': 'bar'})\n * overlay.addP({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);\n * // Output:\n * // (Assume already exists in the webpage)\n * \n *

Foobar.

\n * \n */\n addP(additionalProperties = {}, callback = () => {}) {\n\n const properties = {}; // Shared

DOM properties\n\n const p = this.#createElement('p', properties, additionalProperties); // Creates the

element\n callback(this, p); // Runs any script passed in through the callback\n return this;\n }\n\n /** Adds a `` to the overlay.\n * This `` element will have properties shared between all `` elements in the overlay.\n * You can override the shared properties by using a callback.\n * @param {Object.} [additionalProperties={}] - The DOM properties of the `` that are NOT shared between all overlay `` elements. These should be camelCase.\n * @param {function(Overlay, HTMLImageElement):void} [callback=()=>{}] - Additional JS modification to the ``.\n * @returns {Overlay} Overlay class instance (this)\n * @since 0.43.2\n * @example\n * // Assume all elements have a shared class (e.g. {'className': 'bar'})\n * overlay.addimg({'id': 'foo', 'src': './img.png'}).buildOverlay(document.body);\n * // Output:\n * // (Assume already exists in the webpage)\n * \n * \n * \n */\n addImg(additionalProperties = {}, callback = () => {}) {\n\n const properties = {}; // Shared DOM properties\n\n const img = this.#createElement('img', properties, additionalProperties); // Creates the element\n callback(this, img); // Runs any script passed in through the callback\n return this;\n }\n\n /** Adds a header to the overlay.\n * This header element will have properties shared between all header elements in the overlay.\n * You can override the shared properties by using a callback.\n * @param {number} level - The header level. Must be between 1 and 6 (inclusive)\n * @param {Object.} [additionalProperties={}] - The DOM properties of the header that are NOT shared between all overlay header elements. These should be camelCase.\n * @param {function(Overlay, HTMLHeadingElement):void} [callback=()=>{}] - Additional JS modification to the header.\n * @returns {Overlay} Overlay class instance (this)\n * @since 0.43.7\n * @example\n * // Assume all header elements have a shared class (e.g. {'className': 'bar'})\n * overlay.addHeader(6, {'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);\n * // Output:\n * // (Assume already exists in the webpage)\n * \n *

Foobar.
\n * \n */\n addHeader(level, additionalProperties = {}, callback = () => {}) {\n\n const properties = {}; // Shared header DOM properties\n\n const header = this.#createElement('h' + level, properties, additionalProperties); // Creates the header element\n callback(this, header); // Runs any script passed in through the callback\n return this;\n }\n\n /** Adds a `
` to the overlay.\n * This `
` element will have properties shared between all `
` elements in the overlay.\n * You can override the shared properties by using a callback.\n * @param {Object.} [additionalProperties={}] - The DOM properties of the `
` that are NOT shared between all overlay `
` elements. These should be camelCase.\n * @param {function(Overlay, HTMLHRElement):void} [callback=()=>{}] - Additional JS modification to the `
`.\n * @returns {Overlay} Overlay class instance (this)\n * @since 0.43.7\n * @example\n * // Assume all
elements have a shared class (e.g. {'className': 'bar'})\n * overlay.addhr({'id': 'foo'}).buildOverlay(document.body);\n * // Output:\n * // (Assume already exists in the webpage)\n * \n *
\n * \n */\n addHr(additionalProperties = {}, callback = () => {}) {\n\n const properties = {}; // Shared
DOM properties\n\n const hr = this.#createElement('hr', properties, additionalProperties); // Creates the
element\n callback(this, hr); // Runs any script passed in through the callback\n return this;\n }\n\n /** Adds a `
` to the overlay.\n * This `
` element will have properties shared between all `
` elements in the overlay.\n * You can override the shared properties by using a callback.\n * @param {Object.} [additionalProperties={}] - The DOM properties of the `
` that are NOT shared between all overlay `
` elements. These should be camelCase.\n * @param {function(Overlay, HTMLBRElement):void} [callback=()=>{}] - Additional JS modification to the `
`.\n * @returns {Overlay} Overlay class instance (this)\n * @since 0.43.11\n * @example\n * // Assume all
elements have a shared class (e.g. {'className': 'bar'})\n * overlay.addbr({'id': 'foo'}).buildOverlay(document.body);\n * // Output:\n * // (Assume already exists in the webpage)\n * \n *
\n * \n */\n addBr(additionalProperties = {}, callback = () => {}) {\n\n const properties = {}; // Shared
DOM properties\n\n const br = this.#createElement('br', properties, additionalProperties); // Creates the
element\n callback(this, br); // Runs any script passed in through the callback\n return this;\n }\n\n /** Adds a checkbox to the overlay.\n * This checkbox element will have properties shared between all checkbox elements in the overlay.\n * You can override the shared properties by using a callback. Note: the checkbox element is inside a label element.\n * @param {Object.} [additionalProperties={}] - The DOM properties of the checkbox that are NOT shared between all overlay checkbox elements. These should be camelCase.\n * @param {function(Overlay, HTMLLabelElement, HTMLInputElement):void} [callback=()=>{}] - Additional JS modification to the checkbox.\n * @returns {Overlay} Overlay class instance (this)\n * @since 0.43.10\n * @example\n * // Assume all checkbox elements have a shared class (e.g. {'className': 'bar'})\n * overlay.addCheckbox({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);\n * // Output:\n * // (Assume already exists in the webpage)\n * \n * \n * \n */\n addCheckbox(additionalProperties = {}, callback = () => {}) {\n\n const properties = {'type': 'checkbox'}; // Shared checkbox DOM properties\n\n const label = this.#createElement('label', {'textContent': additionalProperties['textContent'] ?? ''}); // Creates the label element\n delete additionalProperties['textContent']; // Deletes 'textContent' DOM property before adding the properties to the checkbox\n const checkbox = this.#createElement('input', properties, additionalProperties); // Creates the checkbox element\n label.insertBefore(checkbox, label.firstChild); // Makes the checkbox the first child of the label (before the text content)\n this.buildElement(); // Signifies that we are done adding children to the checkbox\n callback(this, label, checkbox); // Runs any script passed in through the callback\n return this;\n }\n \n /** Adds a `\n * \n */\n addButton(additionalProperties = {}, callback = () => {}) {\n\n const properties = {}; // Shared \n * \n * @example\n * // Assume all help button elements have a shared class (e.g. {'className': 'bar'})\n * overlay.addButtonHelp({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);\n * // Output:\n * // (Assume already exists in the webpage)\n * \n * \n * \n */\n addButtonHelp(additionalProperties = {}, callback = () => {}) {\n\n const tooltip = additionalProperties['title'] ?? additionalProperties['textContent'] ?? 'Help: No info'; // Retrieves the tooltip\n\n // Makes sure the tooltip is stored in the title property\n delete additionalProperties['textContent'];\n additionalProperties['title'] = `Help: ${tooltip}`;\n\n // Shared help button DOM properties\n const properties = {\n 'textContent': '?',\n 'className': 'bm-help',\n 'onclick': () => {\n this.updateInnerHTML(this.outputStatusId, tooltip);\n }\n };\n\n const help = this.#createElement('button', properties, additionalProperties); // Creates the \n *
\n * \n */\n addInputFile(additionalProperties = {}, callback = () => {}) {\n \n const properties = {'type': 'file', 'style': 'display: none;'}; // Shared file input DOM properties\n const text = additionalProperties['textContent'] ?? ''; // Retrieves the text content\n\n delete additionalProperties['textContent']; // Deletes the text content before applying the additional properties to the file input\n\n const container = this.#createElement('div'); // Container for file input\n const input = this.#createElement('input', properties, additionalProperties); // Creates the file input\n this.buildElement(); // Signifies that we are done adding children to the file input\n const button = this.#createElement('button', {'textContent': text});\n this.buildElement(); // Signifies that we are done adding children to the button\n this.buildElement(); // Signifies that we are done adding children to the container\n\n button.addEventListener('click', () => {\n input.click(); // Clicks the file input\n });\n\n // Changes the button text content (and trims the file name)\n input.addEventListener('change', () => {\n button.style.maxWidth = `${button.offsetWidth}px`;\n if (input.files.length > 0) {\n button.textContent = input.files[0].name;\n } else {\n button.textContent = text;\n }\n });\n\n callback(this, container, input, button); // Runs any script passed in through the callback\n return this;\n }\n\n /** Adds a `\n * \n */\n addTextarea(additionalProperties = {}, callback = () => {}) {\n\n const properties = {}; // Shared