Skip to content

Commit

Permalink
Move settings into shadow dom
Browse files Browse the repository at this point in the history
  • Loading branch information
@LittleEndu
LittleEndu committed Jul 18, 2023
1 parent a9d6ea3 commit 3fe2f22
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 43 deletions.
14 changes: 8 additions & 6 deletions constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -153,3 +154,4 @@ export const GLOBAL_CANVAS_CSS = css`
background-color: rgba(128, 0, 0, 0.5);
}
`

54 changes: 33 additions & 21 deletions dist/templateManager.user.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -60,7 +60,7 @@
width: auto;
}
`;
const GLOBAL_CANVAS_CSS = css `
const GLOBAL_CSS = css `
#osuplaceNotificationContainer {
width: 200px;
height: 66%;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
4 changes: 2 additions & 2 deletions templateManager.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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(() => {
Expand Down
41 changes: 28 additions & 13 deletions ui/settingsContainer.ts
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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() {
Expand Down

0 comments on commit 3fe2f22

Please sign in to comment.