Ways to invoke a controller function from a window listener function

Question

Ways to invoke a controller function from a window listener function

Is there a way to trigger the close function from window.onbeforeunload even when closing the app through 'right click' -> 'close window'? It seems that this.close() is not working in this scenario, possibly due to scope issues.

The listener is meant to handle situations where the app does not close properly, but I still need certain tasks to be performed every time the app is closed.

this.close = function () {
    var _PACKAGES_FOLDER = process.env.TEMP + '/dmv/packages';
    this.rmDir(_PACKAGES_FOLDER, false);
    DataFolder.createFolder('packages');
    win.close();
}

window.onbeforeunload = function(){  
    this.close()
}

Is there any solution to this issue?

javascript angularjs node.js addeventlistener fs

Answer 1

Answer №1

Just an update: process.env is a specific variable used in node.js and cannot be utilized on the client side (when it's served to users).

Additionally, for the onbeforeunload function to work properly, you must include a return statement. In this scenario, simply use return null;.

Here's an example:

window.onbeforeunload = function(){  
  this.close();
  return null;
}

Answer 2

Just an update: process.env is a specific variable used in node.js and cannot be utilized on the client side (when it's served to users).

Additionally, for the onbeforeunload function to work properly, you must include a return statement. In this scenario, simply use return null;.

Here's an example:

window.onbeforeunload = function(){  
  this.close();
  return null;
}

Answer 3

Answer №2

JavaScript code:

(function () {
    dmvMainController.$inject = ['DataFolder','$rootScope','$window'];
    function dmvMainController(DataFolder,$rootScope,$window) {
    // Starts maximized by default (set by main.js)
    var maximized = true;
    var fs = require('fs'),
    path = require('path'),
    filePath = path.join(__dirname,'/../','/../config.json');
    this.configFile = JSON.parse(fs.readFileSync(filePath, 'utf8'));


    // Remove packages folder
    this.rmDir = function (dirPath) {
        var fs = require('fs');
        try { var files = fs.readdirSync(dirPath); }
        catch (e) { return; }
        if (files.length > 0)
            for (var i = 0; i < files.length; i++) {
                var filePath = dirPath + '/' + files[i];
                if (fs.statSync(filePath).isFile())
                    fs.unlinkSync(filePath);
                else
                    this.rmDir(filePath, false);
            }
        fs.rmdirSync(dirPath);
    };

    this.close = function () {
        var _PACKAGES_FOLDER = process.env.TEMP + '/dmv/packages';
        this.rmDir(_PACKAGES_FOLDER, false);
        DataFolder.createFolder('packages');
        win.close();
    } 

    $window.onbeforeunload = function(){
    this.close();
  }
}

angular.module('dmv.core.components').
    component('dmvMain', {
        templateUrl: 'app/views/dmvMain.view.html',
        controller: dmvMainController,
    });

})();

HTML:

<md-toolbar class="root-container">
    <div id="dmv-toolbar" class="md-toolbar-tools no-selectable" layout="row">

        <p class="no-selectable" style="font-size: 16px;">DIGITAL MANUFACTURING <strong>VIEWER</strong></p>

        <div class="draggable" flex></div>

         <md-icon class="siemens-logo" md-svg-src="app/assets/siemens_logo.svg" ng-if="$ctrl.configFile.showSiemensLogo === true"></md-icon>
        <span>
            <md-button class="md-icon-button no-outline" aria-label="Minimize" ng-click="$ctrl.minimize()">
                <md-icon class="control s-18" md-svg-src="app/assets/icon_minimize.svg"></md-icon>
            </md-button>

            <md-button class="md-icon-button no-outline" aria-label="Maximize" ng-click="$ctrl.maximize()">
                <md-icon class="control s-18" md-svg-src="app/assets/icon_maximize.svg"></md-icon>
            </md-button>

            <md-button class="md-icon-button no-outline" id="yourcontainer" aria-label="Close" ng-click="$ctrl.close()">
                <md-icon class="control s-18" md-svg-src="app/assets/icon_close.svg"></md-icon>
            </md-button>
        </span>
    </div>
</md-toolbar>

<tabs-container flex layout="column"></tabs-container>

Answer 4

JavaScript code:

(function () {
    dmvMainController.$inject = ['DataFolder','$rootScope','$window'];
    function dmvMainController(DataFolder,$rootScope,$window) {
    // Starts maximized by default (set by main.js)
    var maximized = true;
    var fs = require('fs'),
    path = require('path'),
    filePath = path.join(__dirname,'/../','/../config.json');
    this.configFile = JSON.parse(fs.readFileSync(filePath, 'utf8'));


    // Remove packages folder
    this.rmDir = function (dirPath) {
        var fs = require('fs');
        try { var files = fs.readdirSync(dirPath); }
        catch (e) { return; }
        if (files.length > 0)
            for (var i = 0; i < files.length; i++) {
                var filePath = dirPath + '/' + files[i];
                if (fs.statSync(filePath).isFile())
                    fs.unlinkSync(filePath);
                else
                    this.rmDir(filePath, false);
            }
        fs.rmdirSync(dirPath);
    };

    this.close = function () {
        var _PACKAGES_FOLDER = process.env.TEMP + '/dmv/packages';
        this.rmDir(_PACKAGES_FOLDER, false);
        DataFolder.createFolder('packages');
        win.close();
    } 

    $window.onbeforeunload = function(){
    this.close();
  }
}

angular.module('dmv.core.components').
    component('dmvMain', {
        templateUrl: 'app/views/dmvMain.view.html',
        controller: dmvMainController,
    });

})();

HTML:

<md-toolbar class="root-container">
    <div id="dmv-toolbar" class="md-toolbar-tools no-selectable" layout="row">

        <p class="no-selectable" style="font-size: 16px;">DIGITAL MANUFACTURING <strong>VIEWER</strong></p>

        <div class="draggable" flex></div>

         <md-icon class="siemens-logo" md-svg-src="app/assets/siemens_logo.svg" ng-if="$ctrl.configFile.showSiemensLogo === true"></md-icon>
        <span>
            <md-button class="md-icon-button no-outline" aria-label="Minimize" ng-click="$ctrl.minimize()">
                <md-icon class="control s-18" md-svg-src="app/assets/icon_minimize.svg"></md-icon>
            </md-button>

            <md-button class="md-icon-button no-outline" aria-label="Maximize" ng-click="$ctrl.maximize()">
                <md-icon class="control s-18" md-svg-src="app/assets/icon_maximize.svg"></md-icon>
            </md-button>

            <md-button class="md-icon-button no-outline" id="yourcontainer" aria-label="Close" ng-click="$ctrl.close()">
                <md-icon class="control s-18" md-svg-src="app/assets/icon_close.svg"></md-icon>
            </md-button>
        </span>
    </div>
</md-toolbar>

<tabs-container flex layout="column"></tabs-container>

Ways to invoke a controller function from a window listener function

Answer №1

Answer №2

Similar questions

AngularJS: Unable to preserve the data

Developing a Node.js and Express REST API for generating tailored routes for custom fields

What is the best way to deliver hefty files to users? Utilize the node-telegram-bot-api

conceal elements using the <option> class隐藏

Struggling to create a line break within an SVG using the <tspan> element?

Display identical text using JavaScript filter

Alternate routing based on conditions in Angular

Warning: Node 23468 has encountered an unhandled promise rejection, specifically a MongoServerError that states field names cannot begin with '$'. It is advised to use $getField or $setField instead

Coordinating multiple API requests for optimal performance

What is the best way to select a specific button to handle the onSubmit event in a React form with multiple buttons

Decoding JSON using JavaScript

Exploring the process of iterating through a JSON post response and displaying its contents within image divs

Issue with Node.js: npm is failing to install now

Store Express app session data in Mocha and Supertest for persistent use

Is it possible to create a translucent glass floating box over HTML elements, similar to the frosted glass effect seen in iOS7?

Deactivate the button while you wait for the Google Maps directionService

Customizing the MUI X Sparkline: Incorporating the percentage symbol at the end of the tooltip data within the MUI Sparklinechart

Tips for managing open and closed components within a React accordion and ensuring only the clicked component is opened

Managing Emails with Vue and Firestore

What is the method for configuring the URL of an ajax request to open in a separate window?