confirm-on-exit-angular-1.ts

/**
 * Controls the actions of the confirm on exit component
 * 
 * @export
 * @class ConfirmOnExitController
 */
export class ConfirmOnExitController {
    public confirmOnExit: Function;
    public confirmMessageRoute: string;
    public confirmMessage: string;

    /* @ngInject */
    constructor(private $transitions: any) {
    }

    /**
     * Initialiser for the confirm on exit component. This will add hooks to the window.onbeforeunload and $transition to ensure
     * a user is prompted if they have unsaved changes on the page.
     * 
     * @returns {void}
     * 
     * @memberOf ConfirmOnExitController
     */
    public $onInit(): void {
        if(!this.confirmOnExit || !this.confirmMessageRoute || !this.confirmMessage) {
            console.log('Not all required parameters supplied for on exit directive');
            return;
        }
        
        // this stops the user from navigating outside of the current portal or closing the window
        window.onbeforeunload = () => {
            if (this.confirmOnExit()) {
                return this.confirmMessage;
            }
        };

        // stops the user from navigating to other parts of the application with unsaved changes
        this.$transitions.onStart({from: this.confirmMessageRoute, to: '*'}, (transition: any) => {
            if (this.confirmOnExit()) {
                if (!confirm(this.confirmMessage)) {
                    return false;
                }
            }
        });
    }

    /**
     * Unbinds the onbeforeunload event handler from the window
     * 
     * 
     * @memberOf ConfirmOnExitController
     */
    public $onDestroy() {
        window.onbeforeunload = null;
    }
}

/**
 * Component options for the confirm on exit component
 * @type {ng.IComponentOptions}
 */
export const ConfirmOnExitComponent: ng.IComponentOptions = {
    controller: ConfirmOnExitController,
    controllerAs: 'ctrl',
    bindings: {
        confirmOnExit: '&',
        confirmMessageRoute: '@',
        confirmMessage: '@'
    }
};