Want few event names

I want to trigger some actions based on the following events, please share the code/resources if you know for any of the following :

  • When user will hover the cursor over the Obsidian Window Close Button
  • When user switches from Obsidian to other window. Or in other words, when user will loose focus from Obsidian Application.

At present, I am using the following event to detect the action, when user switches from the current editor to some other leaf within the Obsidian itself :

		this.registerEvent(
			this.app.workspace.on(
				"active-leaf-change",
				(editor: CodeMirror.Editor) => {
					// my code...
					}
				}
			)
		);

But this doesnt work when the user directly switches from the active leaf/editor to some other application or minimizes the Obsidian Application. I also havent found any specific event for the required functionality from the Obsidian Docs.

There are no such events in the Obsidian API.

You might be interested in this: Page Visibility API - Web APIs | MDN, might do what you want.

And sidenote, the type for the active-leaf-change is wrong, it’s returning WorkspaceLeaf | null

1 Like

Thanks for sharing the resources, i presumed that Obsidian might not have those API, but didnt knew where to look for such events. Thank you for sharing the link.

Also, for pointing out the mistake.
Ill go through the docs and to find out the required event.

For the first event : When user will hover the cursor over the Obsidian Window Close Button, I am using the following method, which has met my requirement :

		const closeButton = document.querySelector(
			".titlebar-button.mod-close"
		);
		if (closeButton) {
			closeButton.addEventListener("mouseenter", () => {
				console.log("User hovered over the close button.");
				// Your custom code for hover event
			});
			closeButton.addEventListener("mouseleave", () => {
				console.log("User stopped hovering over the close button.");
				// Your custom code for leaving the hover event
			});
		}

For the second event : When user switches from Obsidian to other window. Or in other words, when user will loose focus from Obsidian Application., I actually have found two method, but the second method meets my requirement.

Method 1 :

		document.addEventListener("visibilitychange", () => {
			if (document.hidden) {
				console.log(
					"User has switched from Obsidian to another app or minimized it."
				);
			} else {
				console.log("User has returned to Obsidian.");
			}
		});

Method 2 :

		window.addEventListener("blur", () => {
			console.log(
				"User switched away from Obsidian or Obsidian lost focus."
			);
		});

		window.addEventListener("focus", () => {
			console.log(
				"User switched back to Obsidian or Obsidian gained focus."
			);
		});

Let me know if I am doing any mistake.

If you are doing those for your plugin, wrap them

1 Like

I am using the following method to create the DOM events now. Only the first event is working as expected, the second event is not working :

		this.registerDomEvent(window, "blur", () => {
			console.log(
				"User switched away from Obsidian or Obsidian lost focus."
			);
			this.onFileModifiedAndLostFocus();
		});

		const closeButton = document.querySelector(
			".titlebar-button.mod-close"
		);
		if (closeButton) {
			this.registerDomEvent(
				window,
				"mouseenter",
				() => {
					console.log(
						"User hovered over the close button."
					);
				}
			);
		}

I tried using document.win for the second event. After that it starts acting wiered, even hovering over the Application title bar(the top handle bar, using which we drag and move Obsidian application) it was getting activated, which is not what i want.

I also tried following method, for this too, its acting wiered :

		requireApiVersion("0.15.0")
			? (activeDocument = activeWindow.document)
			: (activeDocument = window.document);
		if (closeButton) {
			this.registerDomEvent(
				activeDocument, ...

Can anyone help me with the issue i am facing for the above second event?

It seems you meant

this.registerDomEvent(closeButton, 'mouseenter', () => { console.log('User hovered over the close button.'); });

In your code you were attaching event to window, where mouseenter that never triggers.

1 Like

That was a very silly mistake of mine. I assumed since the Close button is a part of the Window, so i used the if statement to only trigger it when user will activate the Close button. My bad!

Thanks for the answer.

1 Like

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.