Creating a code that alerts the user when they have any "unsaved" form in the View
Check out this script:
import { __ } from "./translation";
export class Unsave {
private unsaved: boolean = false;
public register(): void {
$(":button, :submit").on("click", () : void => {
window.onbeforeunload = (): void => null;
});
$(":input" || ":checked").change(() => {
this.unsaved = true;
});
}
public unloadPage() : string {
if (this.unsaved) {
return __("You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?");
}
}
}
And here's how it's called in the main script:
const unsaveChecker = new Unsave();
unsaveChecker.register();
window.onbeforeunload = () => unsaveChecker.unloadPage();
Is there a way to refactor it so we can just write Unsave.*** in the main script?