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 :
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.
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."
);
});
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 :
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!