Show You can drag it tooltip fix #60

.gitignore

@@ -1,2 +1,3 @@
 /node_modules/
-/.idea/
+/.idea/
+/.vscode/

dist/templateManager.user.js

@@ -97,6 +97,13 @@
         margin: 8px;
     }
 
+    .osuplaceTooltip {
+        color: #eee;
+        background-color: rgba(0, 0, 0, 0.5);
+        border-radius: 5px;
+        font-size: 14px;
+    }
+
     #settingsOverlay {
         transition: opacity 300ms ease 0s;
         width: 100vw;
@@ -1255,6 +1262,7 @@
             this.contactInfoEnabled = false;
             this.previewModeEnabled = false;
             this.hideTemplate = false;
+            this.onToggleListeners = [];
             this.templateLinksWrapper.className = "settingsWrapper";
             this.templateLinksWrapper.id = "templateLinksWrapper";
             this.notificationsWrapper.className = "settingsWrapper";
@@ -1339,11 +1347,13 @@
             clickHandler.appendChild(this.notificationsWrapper);
         }
         open() {
+            this.callOnToggleListeners(true);
             this.overlay.style.opacity = "1";
             this.overlay.style.pointerEvents = "auto";
             this.populateAll();
         }
         close() {
+            this.callOnToggleListeners(false);
             this.overlay.style.opacity = "0";
             this.overlay.style.pointerEvents = "none";
             if (this.reloadTemplatesWhenClosed) {
@@ -1359,6 +1369,12 @@
                 this.close();
             }
         }
+        onToggle(listener) {
+            this.onToggleListeners.push(listener);
+        }
+        callOnToggleListeners(isOpened) {
+            this.onToggleListeners.forEach(fn => fn(isOpened));
+        }
         changeMouseEvents(enabled) {
             if (this.overlay.style.opacity === "0")
                 this.overlay.style.pointerEvents = enabled ? "auto" : "none";
@@ -1465,6 +1481,14 @@
     }
 
     let SLIDERS_SVG = '<button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 416c0-17.7 14.3-32 32-32l54.7 0c12.3-28.3 40.5-48 73.3-48s61 19.7 73.3 48L480 384c17.7 0 32 14.3 32 32s-14.3 32-32 32l-246.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 448c-17.7 0-32-14.3-32-32zm192 0a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM384 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-32-80c32.8 0 61 19.7 73.3 48l54.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-54.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l246.7 0c12.3-28.3 40.5-48 73.3-48zM192 64a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm73.3 0L480 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l-214.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 128C14.3 128 0 113.7 0 96S14.3 64 32 64l86.7 0C131 35.7 159.2 16 192 16s61 19.7 73.3 48z"/></svg></button>';
+    function createTooltip(content, width = 100) {
+        let tooltipElement = document.createElement('span');
+        tooltipElement.classList.add('osuplaceTooltip');
+        tooltipElement.textContent = content;
+        tooltipElement.style.width = `${width}px`;
+        tooltipElement.style.position = "relative";
+        return tooltipElement;
+    }
     async function init(manager) {
         let settings = new Settings(manager);
         while (window.innerWidth === 0 || window.innerHeight === 0) {
@@ -1474,7 +1498,14 @@
         let yKey = `${window.location.host}_settingsY`;
         let GMx = await GM.getValue(xKey, null) || 10;
         let GMy = await GM.getValue(yKey, null) || 10;
+        let tooltipElement = createTooltip('You can click and drag this icon around');
+        tooltipElement.style.display = "none";
+        tooltipElement.style.top = `-44px`;
+        settings.onToggle(isOpened => {
+            tooltipElement.style.display = isOpened ? "block" : "none";
+        });
         let iconElement = stringToHtml(SLIDERS_SVG);
+        iconElement.appendChild(tooltipElement);
         document.body.append(iconElement);
         let setPosition = async (mouseX, mouseY) => {
             let xMin = 16 / window.innerWidth * 100;
@@ -1483,6 +1514,9 @@
             let y = (mouseY) / window.innerHeight * 100;
             await GM.setValue(xKey, x);
             await GM.setValue(yKey, y);
+            let tooltipXMargin = 126 / window.innerWidth * 100;
+            let left = x < tooltipXMargin ? 42 : -110;
+            tooltipElement.style.left = `${left}px`;
             if (x < 50) {
                 x = Math.max(xMin, x - xMin);
                 iconElement.style.left = `${x}vw`;

src/constants.ts

@@ -67,6 +67,13 @@ export const GLOBAL_CSS = css`
         margin: 8px;
     }
 
+    .osuplaceTooltip {
+        color: #eee;
+        background-color: rgba(0, 0, 0, 0.5);
+        border-radius: 5px;
+        font-size: 14px;
+    }
+
     #settingsOverlay {
         transition: opacity 300ms ease 0s;
         width: 100vw;
@@ -153,5 +160,4 @@ export const SETTINGS_CSS = css`
     .templateLink:hover {
         background-color: rgba(128, 0, 0, 0.5);
     }
-`
-
+`

src/ui/settingsContainer.ts

@@ -86,6 +86,7 @@ export class Settings {
     contactInfoEnabled = false
     previewModeEnabled = false
     hideTemplate = false
+    onToggleListeners: ((isOpened: boolean) => void)[] = [];
 
     constructor(manager: TemplateManager) {
         this.templateLinksWrapper.className = "settingsWrapper"
@@ -182,12 +183,14 @@ export class Settings {
     }
 
     open() {
+        this.callOnToggleListeners(true);
         this.overlay.style.opacity = "1"
         this.overlay.style.pointerEvents = "auto"
         this.populateAll()
     }
 
     close() {
+        this.callOnToggleListeners(false);
         this.overlay.style.opacity = "0"
         this.overlay.style.pointerEvents = "none"
         if (this.reloadTemplatesWhenClosed) {
@@ -204,6 +207,14 @@ export class Settings {
         }
     }
 
+    onToggle(listener: (isOpened: boolean) => void) {
+        this.onToggleListeners.push(listener);
+    }
+
+    callOnToggleListeners(isOpened: boolean) {
+        this.onToggleListeners.forEach(fn => fn(isOpened));
+    }
+
     changeMouseEvents(enabled: boolean) {
         if (this.overlay.style.opacity === "0")
             this.overlay.style.pointerEvents = enabled ? "auto" : "none"

src/ui/settingsIcon.ts

@@ -4,6 +4,15 @@ import { Settings } from "./settingsContainer";
 
 let SLIDERS_SVG = '<button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 416c0-17.7 14.3-32 32-32l54.7 0c12.3-28.3 40.5-48 73.3-48s61 19.7 73.3 48L480 384c17.7 0 32 14.3 32 32s-14.3 32-32 32l-246.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 448c-17.7 0-32-14.3-32-32zm192 0a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM384 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-32-80c32.8 0 61 19.7 73.3 48l54.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-54.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l246.7 0c12.3-28.3 40.5-48 73.3-48zM192 64a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm73.3 0L480 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l-214.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 128C14.3 128 0 113.7 0 96S14.3 64 32 64l86.7 0C131 35.7 159.2 16 192 16s61 19.7 73.3 48z"/></svg></button>'
 
+function createTooltip(content: string, width=100) {
+    let tooltipElement = document.createElement('span');
+    tooltipElement.classList.add('osuplaceTooltip')
+    tooltipElement.textContent = content;
+    tooltipElement.style.width = `${width}px`;
+    tooltipElement.style.position = "relative";
+    return tooltipElement;
+}
+
 export async function init(manager: TemplateManager) {
     let settings = new Settings(manager);
 
@@ -16,7 +25,15 @@ export async function init(manager: TemplateManager) {
     let GMx = await GM.getValue(xKey, null) || 10
     let GMy = await GM.getValue(yKey, null) || 10
 
+    let tooltipElement = createTooltip('You can click and drag this icon around');
+    tooltipElement.style.display = "none";
+    tooltipElement.style.top = `-44px`;
+    settings.onToggle(isOpened => {
+        tooltipElement.style.display = isOpened ? "block" : "none";
+    });
+
     let iconElement = utils.stringToHtml(SLIDERS_SVG)
+    iconElement.appendChild(tooltipElement);
     document.body.append(iconElement)
 
     let setPosition = async (mouseX: number, mouseY: number) => {
@@ -26,6 +43,11 @@ export async function init(manager: TemplateManager) {
         let y = (mouseY) / window.innerHeight * 100
         await GM.setValue(xKey, x)
         await GM.setValue(yKey, y)
+
+        let tooltipXMargin = 126 / window.innerWidth * 100
+        let left = x < tooltipXMargin ? 42 : -110;
+        tooltipElement.style.left = `${left}px`;
+
         if (x < 50) {
             x = Math.max(xMin, x - xMin)
             iconElement.style.left = `${x}vw`