diff --git a/src/api/client.ts b/src/api/client.ts index b6c5278..061899f 100644 --- a/src/api/client.ts +++ b/src/api/client.ts @@ -7,4 +7,13 @@ export default class Client { relaunch() { DiscordNative.remoteApp.relaunch(); } + /** + * The current zoom level as a percentage. + */ + get zoom() { + return Math.round((( window.outerWidth - 10 ) / window.innerWidth) * 100 + 0.6); + } + set zoom(value) { + DiscordNative.window.setZoomFactor(value); + } } diff --git a/src/api/components.ts b/src/api/components.ts index 9cc36e7..f42d6f5 100644 --- a/src/api/components.ts +++ b/src/api/components.ts @@ -144,6 +144,44 @@ export default { }, 135); } }, + tooltip: (options: { element: HTMLElement, text: string }) => { + options.element.addEventListener("mouseenter", () => { + var tooltip = OpenLoader.componentBuilder.parseHTML(`
+
+
+
${options.text}
+
+
`) as HTMLElement; + + document.querySelector(".notDevTools-1zkgfK > .layerContainer-2v_Sit")?.appendChild(tooltip); + + tooltip.style.top = (options.element.getBoundingClientRect().top - options.element.getBoundingClientRect().height - 12) + "px"; + tooltip.style.left = (options.element.getBoundingClientRect().left - tooltip.getBoundingClientRect().width / 2 + OpenLoader.client.zoom / 10) + "px"; + + setTimeout(() => { + tooltip.style.opacity = '1'; + tooltip.style.transform = 'scale(1)'; + }) + }) + + options.element.addEventListener("mouseleave", () => { + var tooltip = document.querySelector(".ol-tooltip") as HTMLElement; + tooltip.style.opacity = '0'; + tooltip.style.transform = 'scale(0.93)'; + setTimeout(() => tooltip.remove(), 85); + }) + + options.element.addEventListener("DOMNodeRemoved", () => { + var tooltip = document.querySelector(".ol-tooltip") as HTMLElement; + tooltip.style.opacity = '0'; + tooltip.style.transform = 'scale(0.93)'; + setTimeout(() => tooltip.remove(), 85); + }); + + (options.element.parentNode as HTMLElement).onclick = () => { + + } + } }, settingsMenu: { separator: () => { @@ -155,7 +193,7 @@ export default { var base = document.createElement("div"); base.classList.add("header-2Kx1US"); var headerContent = document.createElement("div"); - headerContent.classList.add("eyebrow-Ejf06y"); + headerContent.classList.add("eyebrow-1Shfyi"); headerContent.textContent = options.text; base.appendChild(headerContent); return base; diff --git a/src/utils/pluginUI.ts b/src/utils/pluginUI.ts index 636d35d..947b73c 100644 --- a/src/utils/pluginUI.ts +++ b/src/utils/pluginUI.ts @@ -47,6 +47,7 @@ function addContent(content: HTMLElement) { (svgWrapper.querySelector('svg') as SVGElement).onmouseleave = () => svgWrapper.style.color = "var(--button-danger-background)"; elem.onmouseenter = () => svgWrapper.style.right = "8px"; elem.onmouseleave = () => svgWrapper.style.right = "-32px"; + OpenLoader.componentBuilder.createComponent(OpenLoader.components.generic.tooltip, { element: svgWrapper, text: "Remove" }) var bgImage = document.createElement("div"); bgImage.style.width = "100%"; bgImage.style.height = "40%"; diff --git a/types/index.d.ts b/types/index.d.ts index d777d04..cdbb4b5 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -7,6 +7,11 @@ interface Client { * Completely relaunches the client. */ relaunch(): void; + /** + * The current zoom level as a percentage. + */ + get zoom(): number; + set zoom(value); } interface DiscordWindow { @@ -44,7 +49,7 @@ interface ComponentBuilder { * @param options The options to pass to the component function. * @returns the output element of the component function. */ - createComponent(component: Function, options: any): HTMLElement; + createComponent(component: Function, options: any): HTMLElement | void; /** * * @param category The category, which can be something like "hello.world" to have hello as the category and world as the subcategory.