mirror of
https://github.com/SwingTheVine/Wplace-BlueMarble.git
synced 2026-04-20 18:32:04 +00:00
Fixed h1 overflow on window minimization
This commit is contained in:
SwingTheVine
parent
91e0f814d8
commit
87dd8ac4f3
12 changed files with 93 additions and 43 deletions
12
dist/BlueMarble-For-GreasyFork.user.css
vendored
12
dist/BlueMarble-For-GreasyFork.user.css
vendored
|
|
@ -19,10 +19,9 @@
|
|||
letter-spacing: 0.05em;
|
||||
}
|
||||
.bm-dragbar {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
gap: 0.5ch;
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;
|
||||
cursor: grab;
|
||||
|
|
@ -56,8 +55,10 @@
|
|||
}
|
||||
.bm-dragbar h1 {
|
||||
font-size: 1.2em;
|
||||
margin-left: 0.5ch;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow:
|
||||
3px 0px rgba(21, 48, 99, 0.5),
|
||||
-3px 0px rgba(21, 48, 99, 0.5),
|
||||
|
|
@ -68,6 +69,9 @@
|
|||
3px -3px rgba(21, 48, 99, 0.5),
|
||||
-3px -3px rgba(21, 48, 99, 0.5);
|
||||
}
|
||||
.bm-dragbar div:has(h1) {
|
||||
display: contents;
|
||||
}
|
||||
.bm-container {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
|
|
|||
27
dist/BlueMarble-For-GreasyFork.user.js
vendored
27
dist/BlueMarble-For-GreasyFork.user.js
vendored
|
|
@ -2,7 +2,7 @@
|
|||
// @name Blue Marble
|
||||
// @name:en Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.88.149
|
||||
// @version 0.88.160
|
||||
// @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
|
||||
|
|
@ -558,9 +558,6 @@
|
|||
const header = window2.querySelector("h1");
|
||||
const windowContent = window2.querySelector(".bm-window-content");
|
||||
if (button.dataset["buttonStatus"] == "expanded") {
|
||||
const dragbarHeader1 = header.cloneNode(true);
|
||||
const dragbarHeader1Text = dragbarHeader1.textContent;
|
||||
button.parentNode.appendChild(dragbarHeader1);
|
||||
windowContent.style.height = windowContent.scrollHeight + "px";
|
||||
window2.style.width = window2.scrollWidth + "px";
|
||||
windowContent.style.height = "0";
|
||||
|
|
@ -570,6 +567,9 @@
|
|||
button.style.textDecoration = "";
|
||||
windowContent.removeEventListener("transitionend", handler);
|
||||
});
|
||||
const dragbarHeader1 = header.cloneNode(true);
|
||||
const dragbarHeader1Text = dragbarHeader1.textContent;
|
||||
button.nextElementSibling.appendChild(dragbarHeader1);
|
||||
button.textContent = "\u25B6";
|
||||
button.dataset["buttonStatus"] = "collapsed";
|
||||
button.ariaLabel = `Unminimize window "${dragbarHeader1Text}"`;
|
||||
|
|
@ -1798,10 +1798,10 @@ Time Since Blink: ${String(Math.floor(elapsed / 6e4)).padStart(2, "0")}:${String
|
|||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
function buildWindowMain() {
|
||||
overlayMain.addDiv({ "id": "bm-window-main", "class": "bm-window", "style": "top: 10px; right: 75px;" }).addDragbar().addDiv().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Blue Marble"', "data-button-status": "expanded" }, (instance, button) => {
|
||||
overlayMain.addDiv({ "id": "bm-window-main", "class": "bm-window", "style": "top: 10px; right: 75px;" }).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 = () => instance.handleMinimization(button);
|
||||
}).buildElement().buildElement().buildElement().addDiv({ "class": "bm-window-content" }).addDiv({ "class": "bm-container" }).addImg({ "class": "bm-favicon", "src": "https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png" }).buildElement().addHeader(1, { "textContent": name }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container" }).addP({ "id": "bm-user-droplets", "textContent": "Droplets:" }).buildElement().addP({ "id": "bm-user-nextlevel", "textContent": "Next level in..." }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container" }).addDiv({ "class": "bm-container" }).addButton(
|
||||
}).buildElement().addDiv().buildElement().buildElement().addDiv({ "class": "bm-window-content" }).addDiv({ "class": "bm-container" }).addImg({ "class": "bm-favicon", "src": "https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png" }).buildElement().addHeader(1, { "textContent": name }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container" }).addP({ "id": "bm-user-droplets", "textContent": "Droplets:" }).buildElement().addP({ "id": "bm-user-nextlevel", "textContent": "Next level in..." }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container" }).addDiv({ "class": "bm-container" }).addButton(
|
||||
{ "class": "bm-button-circle bm-button-pin", "style": "margin-top: 0;", "innerHTML": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 6"><circle cx="2" cy="2" r="2"></circle><path d="M2 6 L3.7 3 L0.3 3 Z"></path><circle cx="2" cy="2" r="0.7" fill="white"></circle></svg></svg>' },
|
||||
(instance, button) => {
|
||||
button.onclick = () => {
|
||||
|
|
@ -1879,8 +1879,7 @@ Time Since Blink: ${String(Math.floor(elapsed / 6e4)).padStart(2, "0")}:${String
|
|||
instance.handleDisplayStatus(`Drew to canvas!`);
|
||||
};
|
||||
}).buildElement().addButton({ "textContent": "Filter" }, (instance, button) => {
|
||||
button.onclick = () => {
|
||||
};
|
||||
button.onclick = () => buildWindowFilter();
|
||||
}).buildElement().buildElement().addDiv({ "class": "bm-container" }).addTextarea({ "id": overlayMain.outputStatusId, "placeholder": `Status: Sleeping...
|
||||
Version: ${version}`, "readOnly": true }).buildElement().buildElement().addDiv({ "class": "bm-container bm-flex-between", "style": "margin-bottom: 0;" }).addDiv({ "class": "bm-flex-between" }).addButton({ "class": "bm-button-circle", "innerHTML": "\u{1F3A8}", "title": "Template Color Converter" }, (instance, button) => {
|
||||
button.onclick = () => {
|
||||
|
|
@ -1920,4 +1919,16 @@ Version: ${version}`, "readOnly": true }).buildElement().buildElement().addDiv({
|
|||
};
|
||||
}).buildElement().buildElement().addBr().buildElement().addP({ "textContent": "We collect anonymous telemetry data such as your browser, OS, and script version to make the experience better for everyone. The data is never shared personally. The data is never sold. You can turn this off by pressing the 'Disable' button, but keeping it on helps us improve features and reliability faster. Thank you for supporting the Blue Marble!" }).buildElement().addP({ "textContent": 'You can disable telemetry by pressing the "Disable" button below.' }).buildElement().buildElement().buildElement().buildOverlay(document.body);
|
||||
}
|
||||
function buildWindowFilter() {
|
||||
if (document.querySelector("#bm-window-filter")) {
|
||||
overlayMain.handleDisplayError("Color Filter window already exists!");
|
||||
return;
|
||||
}
|
||||
const overlayFilter = new Overlay(name, version);
|
||||
overlayFilter.addDiv({ "id": "bm-window-filter", "class": "bm-window", "style": "top: 10px; left: 75px;" }).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 = () => instance.handleMinimization(button);
|
||||
}).buildElement().addDiv().buildElement().addButton({ "class": "bm-button-circle", "textContent": "\u{1F7AA}", "aria-label": 'Close window "Color Filter"' }).buildElement().buildElement().addDiv({ "class": "bm-window-content" }).addHeader(1, { "textContent": "Color Filter" }).buildElement().buildElement().buildElement().buildOverlay(document.body);
|
||||
overlayFilter.handleDrag("#bm-window-filter.bm-window", "#bm-window-filter .bm-dragbar");
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
4
dist/BlueMarble-Standalone.user.js
vendored
4
dist/BlueMarble-Standalone.user.js
vendored
File diff suppressed because one or more lines are too long
2
dist/BlueMarble.user.css
vendored
2
dist/BlueMarble.user.css
vendored
|
|
@ -1 +1 @@
|
|||
.bm-16{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000;transition:all .3s ease,transform 0s;max-width:300px;width:auto;font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}.bm-14{display:flex;align-items:center;flex-wrap:nowrap;justify-content:space-between;gap:.5ch;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:fit-content}.bm-14.bm-_{cursor:grabbing}.bm-16:has(.bm-14.bm-_){pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.bm-14.bm-_{pointer-events:auto}.bm-15{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle}.bm-16 h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}.bm-14 h1{font-size:1.2em;margin-left:.5ch;user-select:none;text-shadow:3px 0px rgba(21,48,99,.5),-3px 0px rgba(21,48,99,.5),0px 3px rgba(21,48,99,.5),0px -3px rgba(21,48,99,.5),3px 3px rgba(21,48,99,.5),-3px 3px rgba(21,48,99,.5),3px -3px rgba(21,48,99,.5),-3px -3px rgba(21,48,99,.5)}.bm--{margin:.5em 0}.bm-16 button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}.bm-16 button:hover,.bm-16 button:focus-visible{background-color:#1061e5}.bm-16 button:active .bm-16 button:disabled{background-color:#2e97ff}.bm-16 button:disabled{text-decoration:line-through}.bm-T{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}.bm-Y{vertical-align:middle}.bm-Y svg{width:50%;margin:0 auto;fill:#111}input[type=number].bm-U{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}input[type=number].bm-U::-webkit-outer-spin-button,input[type=number].bm-U::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}div:has(>.bm-Z)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bm-Z,input[type=file]{display:none!important;visibility:hidden!important;position:absolute!important;left:-9999px!important;top:-9999px!important;width:0!important;height:0!important;opacity:0!important;z-index:-9999!important;pointer-events:none!important}.bm-O{overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1)}.bm-16 textarea{font-size:small;background-color:#0003;padding:0 .5ch;height:5.25em;width:100%}.bm-16 small{font-size:x-small;color:#d3d3d3}.bm-V{display:flex;align-content:center;justify-content:space-between;align-items:center;gap:.5ch}.bm-flex-center{display:flex;align-content:center;justify-content:center;align-items:center;gap:.5ch}
|
||||
.bm-17{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000;transition:all .3s ease,transform 0s;max-width:300px;width:auto;font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}.bm-15{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5ch;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:fit-content}.bm-15.bm-10{cursor:grabbing}.bm-17:has(.bm-15.bm-10){pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.bm-15.bm-10{pointer-events:auto}.bm-16{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle}.bm-17 h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}.bm-15 h1{font-size:1.2em;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:3px 0px rgba(21,48,99,.5),-3px 0px rgba(21,48,99,.5),0px 3px rgba(21,48,99,.5),0px -3px rgba(21,48,99,.5),3px 3px rgba(21,48,99,.5),-3px 3px rgba(21,48,99,.5),3px -3px rgba(21,48,99,.5),-3px -3px rgba(21,48,99,.5)}.bm-15 div:has(h1){display:contents}.bm-_{margin:.5em 0}.bm-17 button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}.bm-17 button:hover,.bm-17 button:focus-visible{background-color:#1061e5}.bm-17 button:active .bm-17 button:disabled{background-color:#2e97ff}.bm-17 button:disabled{text-decoration:line-through}.bm-T{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}.bm-Z{vertical-align:middle}.bm-Z svg{width:50%;margin:0 auto;fill:#111}input[type=number].bm-V{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}input[type=number].bm-V::-webkit-outer-spin-button,input[type=number].bm-V::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}div:has(>.bm--)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bm--,input[type=file]{display:none!important;visibility:hidden!important;position:absolute!important;left:-9999px!important;top:-9999px!important;width:0!important;height:0!important;opacity:0!important;z-index:-9999!important;pointer-events:none!important}.bm-O{overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1)}.bm-17 textarea{font-size:small;background-color:#0003;padding:0 .5ch;height:5.25em;width:100%}.bm-17 small{font-size:x-small;color:#d3d3d3}.bm-W{display:flex;align-content:center;justify-content:space-between;align-items:center;gap:.5ch}.bm-flex-center{display:flex;align-content:center;justify-content:center;align-items:center;gap:.5ch}
|
||||
|
|
|
|||
4
dist/BlueMarble.user.js
vendored
4
dist/BlueMarble.user.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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-111hrs_12mins-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-647-black?style=flat"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-658-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>
|
||||
|
|
|
|||
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.88.149",
|
||||
"version": "0.88.160",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.88.149",
|
||||
"version": "0.88.160",
|
||||
"devDependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"jsdoc": "^4.0.5",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.88.149",
|
||||
"version": "0.88.160",
|
||||
"type": "module",
|
||||
"homepage": "https://bluemarble.lol/",
|
||||
"repository": {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
// @name Blue Marble
|
||||
// @name:en Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.88.149
|
||||
// @version 0.88.160
|
||||
// @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
|
||||
|
|
|
|||
|
|
@ -672,12 +672,7 @@ export default class Overlay {
|
|||
// If window content is open...
|
||||
if (button.dataset['buttonStatus'] == 'expanded') {
|
||||
// ...we want to close it
|
||||
|
||||
// Makes a clone of the h1 element inside the window, and adds it to the dragbar
|
||||
const dragbarHeader1 = header.cloneNode(true);
|
||||
const dragbarHeader1Text = dragbarHeader1.textContent;
|
||||
button.parentNode.appendChild(dragbarHeader1);
|
||||
|
||||
|
||||
// Logic for the transition animation to collapse the window
|
||||
windowContent.style.height = windowContent.scrollHeight + 'px';
|
||||
window.style.width = window.scrollWidth + 'px'; // So the width of the window does not change due to the lack of content
|
||||
|
|
@ -688,7 +683,12 @@ export default class Overlay {
|
|||
button.style.textDecoration = ''; // Resets the text decoration to default
|
||||
windowContent.removeEventListener('transitionend', handler); // Removes the event listener
|
||||
});
|
||||
|
||||
|
||||
// Makes a clone of the h1 element inside the window, and adds it to the dragbar
|
||||
const dragbarHeader1 = header.cloneNode(true);
|
||||
const dragbarHeader1Text = dragbarHeader1.textContent;
|
||||
button.nextElementSibling.appendChild(dragbarHeader1);
|
||||
|
||||
button.textContent = '▶'; // Swap button icon
|
||||
button.dataset['buttonStatus'] = 'collapsed'; // Swap button status tracker
|
||||
button.ariaLabel = `Unminimize window "${dragbarHeader1Text}"`; // Screen reader label
|
||||
|
|
|
|||
48
src/main.js
48
src/main.js
|
|
@ -273,12 +273,11 @@ function buildWindowMain() {
|
|||
// Creates the window
|
||||
overlayMain.addDiv({'id': 'bm-window-main', 'class': 'bm-window', 'style': 'top: 10px; right: 75px;'})
|
||||
.addDragbar()
|
||||
.addDiv()
|
||||
.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 = () => instance.handleMinimization(button);
|
||||
}).buildElement()
|
||||
.buildElement()
|
||||
.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 = () => instance.handleMinimization(button);
|
||||
}).buildElement()
|
||||
.addDiv().buildElement() // Contains the minimized h1 element
|
||||
.buildElement()
|
||||
.addDiv({'class': 'bm-window-content'})
|
||||
.addDiv({'class': 'bm-container'})
|
||||
|
|
@ -369,9 +368,7 @@ function buildWindowMain() {
|
|||
}
|
||||
}).buildElement()
|
||||
.addButton({'textContent': 'Filter'}, (instance, button) => {
|
||||
button.onclick = () => {
|
||||
|
||||
}
|
||||
button.onclick = () => buildWindowFilter();
|
||||
}).buildElement()
|
||||
.buildElement()
|
||||
.addDiv({'class': 'bm-container'})
|
||||
|
|
@ -451,6 +448,39 @@ function buildTelemetryOverlay(overlay) {
|
|||
.buildOverlay(document.body);
|
||||
}
|
||||
|
||||
/** Spawns a Color Filter window.
|
||||
* If another color filter window already exists, we DON'T spawn another!
|
||||
* Parent/child relationships in the DOM structure below are indicated by indentation.
|
||||
* @since 0.88.149
|
||||
*/
|
||||
function buildWindowFilter() {
|
||||
|
||||
// If a color filter window already exists, throw an error and return early
|
||||
if (document.querySelector('#bm-window-filter')) {
|
||||
overlayMain.handleDisplayError('Color Filter window already exists!');
|
||||
return;
|
||||
}
|
||||
|
||||
// Creates a new color filter window
|
||||
const overlayFilter = new Overlay(name, version);
|
||||
overlayFilter.addDiv({'id': 'bm-window-filter', 'class': 'bm-window', 'style': 'top: 10px; left: 75px;'})
|
||||
.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 = () => instance.handleMinimization(button);
|
||||
}).buildElement()
|
||||
.addDiv().buildElement() // Contains the minimized h1 element
|
||||
.addButton({'class': 'bm-button-circle', 'textContent': '🞪', 'aria-label': 'Close window "Color Filter"'}).buildElement()
|
||||
.buildElement()
|
||||
.addDiv({'class': 'bm-window-content'})
|
||||
.addHeader(1, {'textContent': 'Color Filter'}).buildElement()
|
||||
.buildElement()
|
||||
.buildElement().buildOverlay(document.body);
|
||||
|
||||
// Creates dragging capability on the drag bar for dragging the window
|
||||
overlayFilter.handleDrag('#bm-window-filter.bm-window', '#bm-window-filter .bm-dragbar');
|
||||
}
|
||||
|
||||
function buildOverlayTabTemplate() {
|
||||
overlayTabTemplate.addDiv({'id': 'bm-tab-template', 'style': 'top: 20%; left: 10%;'})
|
||||
.addDiv()
|
||||
|
|
|
|||
|
|
@ -25,10 +25,9 @@
|
|||
|
||||
/* The drag bar */
|
||||
.bm-dragbar {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
gap: 0.5ch;
|
||||
/* For background circles, width & height should be odd, cx & cy should be half of width & height, and r should be less than or equal to cx & cy */
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;
|
||||
|
|
@ -64,7 +63,6 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/* Header 1 */
|
||||
.bm-window h1 {
|
||||
display: inline-block;
|
||||
|
|
@ -76,8 +74,10 @@
|
|||
/* Header 1 when inside dragbar */
|
||||
.bm-dragbar h1 {
|
||||
font-size: 1.2em;
|
||||
margin-left: 0.5ch;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow:
|
||||
3px 0px rgba(21, 48, 99, 0.5),
|
||||
-3px 0px rgba(21, 48, 99, 0.5),
|
||||
|
|
@ -89,6 +89,11 @@
|
|||
-3px -3px rgba(21, 48, 99, 0.5);
|
||||
}
|
||||
|
||||
/* Container for Header 1 when inside dragbar */
|
||||
.bm-dragbar div:has(h1) {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/* Containers for "sections" of elements */
|
||||
.bm-container {
|
||||
margin: 0.5em 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue