From 3fe2f2280423b1d20ec609564857c0870e6e996f Mon Sep 17 00:00:00 2001 From: Endrik Tombak Date: Tue, 18 Jul 2023 20:21:51 +0300 Subject: [PATCH] Move settings into shadow dom --- constants.ts | 14 ++++++---- dist/templateManager.user.js | 54 ++++++++++++++++++++++-------------- package.json | 2 +- templateManager.ts | 4 +-- ui/settingsContainer.ts | 41 ++++++++++++++++++--------- 5 files changed, 72 insertions(+), 43 deletions(-) diff --git a/constants.ts b/constants.ts index 053b780..4f524e3 100644 --- a/constants.ts +++ b/constants.ts @@ -32,7 +32,7 @@ export const CONTACT_INFO_CSS = css` width: auto; } ` -export const GLOBAL_CANVAS_CSS = css` +export const GLOBAL_CSS = css` #osuplaceNotificationContainer { width: 200px; height: 66%; @@ -85,24 +85,25 @@ export const GLOBAL_CANVAS_CSS = css` overflow-y: auto; font-size: 14px; } +` - #settingsOverlay label, - #settingsOverlay button{ +export const SETTINGS_CSS = css` + label, + button{ height: auto; white-space: normal; word-break: break-word; text-shadow: -1px -1px 1px #111, 1px 1px 1px #111, -1px 1px 1px #111, 1px -1px 1px #111; color: #eee; } - - #settingsOverlay input { + + input { width: auto; max-width: 100%; height: auto; color: #eee; background-color: #111; -webkit-appearance: auto; - padding: 5px; border-radius: 5px; font-size: 14px; } @@ -153,3 +154,4 @@ export const GLOBAL_CANVAS_CSS = css` background-color: rgba(128, 0, 0, 0.5); } ` + diff --git a/dist/templateManager.user.js b/dist/templateManager.user.js index 136f11c..8e37843 100644 --- a/dist/templateManager.user.js +++ b/dist/templateManager.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name template-manager -// @version 0.5.5 +// @version 0.5.6 // @description Manages your templates on various canvas games // @author LittleEndu, Mikarific, April // @license MIT @@ -60,7 +60,7 @@ width: auto; } `; - const GLOBAL_CANVAS_CSS = css ` + const GLOBAL_CSS = css ` #osuplaceNotificationContainer { width: 200px; height: 66%; @@ -113,24 +113,24 @@ overflow-y: auto; font-size: 14px; } - - #settingsOverlay label, - #settingsOverlay button{ +`; + const SETTINGS_CSS = css ` + label, + button{ height: auto; white-space: normal; word-break: break-word; text-shadow: -1px -1px 1px #111, 1px 1px 1px #111, -1px 1px 1px #111, 1px -1px 1px #111; color: #eee; } - - #settingsOverlay input { + + input { width: auto; max-width: 100%; height: auto; color: #eee; background-color: #111; -webkit-appearance: auto; - padding: 5px; border-radius: 5px; font-size: 14px; } @@ -685,7 +685,7 @@ style.innerHTML = CONTACT_INFO_CSS; this.selectedCanvas.parentElement.appendChild(style); let globalStyle = document.createElement("style"); - globalStyle.innerHTML = GLOBAL_CANVAS_CSS; + globalStyle.innerHTML = GLOBAL_CSS; document.body.appendChild(globalStyle); this.canvasObserver = new MutationObserver(() => { let css = getComputedStyle(this.selectedCanvas); @@ -1027,15 +1027,6 @@ document.body.appendChild(this.overlay); this.overlay.id = "settingsOverlay"; this.overlay.style.opacity = "0"; - this.overlay.onclick = (ev) => { - if (ev.target === ev.currentTarget) - this.close(); - }; - window.addEventListener("keydown", (ev) => { - if (ev.key === "Escape") { - this.close(); - } - }); this.overlay.addEventListener("wheel", (ev) => { ev.preventDefault(); var direction = (ev.deltaY > 0) ? 1 : -1; @@ -1069,9 +1060,30 @@ this.contactInfoEnabled = a; })); div.appendChild(document.createElement('br')); - this.overlay.appendChild(div); - this.overlay.appendChild(this.templateLinksWrapper); - this.overlay.appendChild(this.notificationsWrapper); + let clickHandler = document.createElement('div'); + clickHandler.style.width = '100vw'; + clickHandler.style.height = '100vh'; + clickHandler.style.position = 'absolute'; + clickHandler.style.left = '-0.1px'; + clickHandler.style.right = '-0.1px'; + clickHandler.style.overflowY = 'auto'; + clickHandler.onclick = (ev) => { + if (ev.target === ev.currentTarget) + this.close(); + }; + window.addEventListener("keydown", (ev) => { + if (ev.key === "Escape") { + this.close(); + } + }); + this.overlay.attachShadow({ mode: 'open' }); + let globalStyle = document.createElement("style"); + globalStyle.innerHTML = SETTINGS_CSS; + this.overlay.shadowRoot.appendChild(globalStyle); + this.overlay.shadowRoot.appendChild(clickHandler); + clickHandler.appendChild(div); + clickHandler.appendChild(this.templateLinksWrapper); + clickHandler.appendChild(this.notificationsWrapper); } open() { this.overlay.style.opacity = "1"; diff --git a/package.json b/package.json index a314848..1aadc30 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "template-manager", - "version": "0.5.5", + "version": "0.5.6", "description": "Manages your templates on various canvas games", "main": "main.ts", "scripts": { diff --git a/templateManager.ts b/templateManager.ts index e605b8d..0485a31 100644 --- a/templateManager.ts +++ b/templateManager.ts @@ -1,4 +1,4 @@ -import { CACHE_BUST_PERIOD, CONTACT_INFO_CSS, GLOBAL_CANVAS_CSS, MAX_TEMPLATES, NO_JSON_TEMPLATE_IN_PARAMS } from './constants'; +import { CACHE_BUST_PERIOD, CONTACT_INFO_CSS, GLOBAL_CSS, MAX_TEMPLATES, NO_JSON_TEMPLATE_IN_PARAMS } from './constants'; import { Template, JsonParams, NamedURL } from './template'; import { NotificationManager } from './ui/notificationsManager'; import * as utils from './utils'; @@ -50,7 +50,7 @@ export class TemplateManager { this.selectedCanvas.parentElement!.appendChild(style) let globalStyle = document.createElement("style") - globalStyle.innerHTML = GLOBAL_CANVAS_CSS; + globalStyle.innerHTML = GLOBAL_CSS; document.body.appendChild(globalStyle); this.canvasObserver = new MutationObserver(() => { diff --git a/ui/settingsContainer.ts b/ui/settingsContainer.ts index 3a9bae7..c9b8e35 100644 --- a/ui/settingsContainer.ts +++ b/ui/settingsContainer.ts @@ -1,4 +1,4 @@ -import { MAX_TEMPLATES } from "../constants"; +import { MAX_TEMPLATES, SETTINGS_CSS } from "../constants"; import { TemplateManager } from "../templateManager"; import * as utils from "../utils"; @@ -93,15 +93,7 @@ export class Settings { this.overlay.id = "settingsOverlay" this.overlay.style.opacity = "0" - this.overlay.onclick = (ev) => { - if (ev.target === ev.currentTarget) - this.close(); - } - window.addEventListener("keydown", (ev) => { - if (ev.key === "Escape") { - this.close(); - } - }) + this.overlay.addEventListener("wheel", (ev) => { ev.preventDefault(); var direction = (ev.deltaY > 0) ? 1 : -1; @@ -138,10 +130,33 @@ export class Settings { })) div.appendChild(document.createElement('br')) + let clickHandler = document.createElement('div') + clickHandler.style.width = '100vw' + clickHandler.style.height = '100vh' + clickHandler.style.position = 'absolute' + clickHandler.style.left = '-0.1px' + clickHandler.style.right = '-0.1px' + clickHandler.style.overflowY = 'auto' + + clickHandler.onclick = (ev) => { + if (ev.target === ev.currentTarget) + this.close(); + } + window.addEventListener("keydown", (ev) => { + if (ev.key === "Escape") { + this.close(); + } + }) + + this.overlay.attachShadow({ mode: 'open' }) + let globalStyle = document.createElement("style") + globalStyle.innerHTML = SETTINGS_CSS; - this.overlay.appendChild(div) - this.overlay.appendChild(this.templateLinksWrapper) - this.overlay.appendChild(this.notificationsWrapper) + this.overlay.shadowRoot!.appendChild(globalStyle) + this.overlay.shadowRoot!.appendChild(clickHandler) + clickHandler.appendChild(div) + clickHandler.appendChild(this.templateLinksWrapper) + clickHandler.appendChild(this.notificationsWrapper) } open() {