Alert when leaving page with unsaved form(Refactoring)

Question

I have code that alert user, when he has "not saved" form in View

Here is script that does it

  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 __("Du har olagrade ändringar på den här sidan. Vill du lämna den här sidan och kasta bort dina ändringar eller stanna kvar på den här sidan?");
        }
    }

}

And here is how I call it in main script

 const unsaveChecker = new Unsave();
unsaveChecker.register();
window.onbeforeunload = () => unsaveChecker.unloadPage();

How I can to refactor it to just write Unsave.*** in main script?

Answer 1

I find a way to refactor this code

Here is code

export class Unsave {
private static unsaved: boolean = false;
public static unsave_check(): void {
    $(":button, :submit").on("click", () : void => {
        window.onbeforeunload = (): void => null;
    });
    Unsave.unsaved = false;
    $(":input" || ":checked").change(() => {
        Unsave.unsaved = true;
    });
    window.onbeforeunload = (): string => this.unloadPage();
}
public static unloadPage() : string {
    if (Unsave.unsaved) {
        return __("Du har olagrade ändringar på den här sidan. Vill du lämna den här sidan och kasta bort dina ändringar eller stanna kvar på den här sidan?");
    }
}

}

And then in main script just add

    Unsave.unsave_check();

UPDATE

Some more refactoring

You can usу bind/unbind function

export class Unsave {
private static unsaved: boolean = false;
public static unsave_check(): void {
    $(":button, :submit").on("click", () : void => {
        $(window).unbind("beforeunload");
    });
    Unsave.unsaved = false;
    $(":input" || ":checked").change(() => {
        Unsave.unsaved = true;
    });
    $(window).bind("beforeunload", (): string => {
        return this.unloadPage();
    });
}
public static unloadPage() : string {
    if (Unsave.unsaved) {
        return __("Du har olagrade ändringar på den här sidan. Vill du lämna den här sidan och kasta bort dina ändringar eller stanna kvar på den här sidan?");
    }
}

}