multi-tab-detection/lib/multi-tab-detection.js

Used to detect multiple tabs being opened

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var rxjs_1 = require("rxjs");
var MultiTabDetection = /** @class */ (function () {
    function MultiTabDetection() {
        /**
         * @description Informs the listener that a new tab has been detected for the same browser session.
         * It also pass in the total number of tabs opened for the same browser session.
         */
        this.NewTabDetectedEvent = new rxjs_1.Subject();
        /**
         * @description Informs the listener that an existing tab existed for the same browser session.
         */
        this.ExistingTabDetectedEvent = new rxjs_1.Subject();
        /**
         * @description Informs the listener that a tab for the same browser session has been closed.
         * It also pass in the updated total number of tabs opened for the same browser session.
         */
        this.ClosedTabDetectedEvent = new rxjs_1.Subject();
        this.prefix = 'mtd-';
        this.initiatedNewTabMessage = false;
        this.numberOfTabsOpened = 1;
        this.newTabValue = null;
        this.addListener();
        this.setNewTab();
        this.initiatedNewTabMessage = true;
    }
    Object.defineProperty(MultiTabDetection.prototype, "NumberOfTabsOpened", {
        /**
         * @description Gets the total number of tabs opened. It is recommended to wait for 1 second
         * after receiving existingTabDetectedEvent before calling this property to get the accurate
         * total number of tabs opened.
         * @returns {number}
         */
        get: function () {
            return this.numberOfTabsOpened;
        },
        enumerable: true,
        configurable: true
    });
    MultiTabDetection.prototype.addListener = function () {
        var thisInstance = this;
        window.addEventListener('storage', function (ev) {
            if (ev.key === thisInstance.newTabKey) {
                thisInstance.incrementNumberOfTabsOpened();
                thisInstance.NewTabDetectedEvent.next(thisInstance.numberOfTabsOpened);
                thisInstance.setKey(thisInstance.existingTabKey);
            }
            else if (ev.key === thisInstance.existingTabKey) {
                // only process the event if this is the new tab that has been opened
                var newTabValue = thisInstance.getLocalStorageValue(thisInstance.newTabKey);
                if (newTabValue === thisInstance.newTabValue) {
                    if (thisInstance.initiatedNewTabMessage) {
                        thisInstance.initiatedNewTabMessage = false;
                        thisInstance.numberOfTabsOpened = 1;
                        thisInstance.ExistingTabDetectedEvent.next();
                    }
                    thisInstance.incrementNumberOfTabsOpened();
                }
            }
            else if (ev.key === thisInstance.closingTabKey) {
                thisInstance.decrementNumberOfTabsOpened();
                thisInstance.ClosedTabDetectedEvent.next(thisInstance.numberOfTabsOpened);
            }
        }, false);
        window.addEventListener('beforeunload', function (ev) {
            thisInstance.setKey(thisInstance.closingTabKey);
        }, false);
    };
    MultiTabDetection.prototype.setNewTab = function () {
        this.newTabValue = this.createUniqueValue();
        this.setLocalStorageKeyValue(this.newTabKey, this.newTabValue);
    };
    Object.defineProperty(MultiTabDetection.prototype, "newTabKey", {
        // keys
        get: function () {
            return this.createUniqueKey('new-tab');
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MultiTabDetection.prototype, "existingTabKey", {
        get: function () {
            return this.createUniqueKey('existing-tab');
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MultiTabDetection.prototype, "closingTabKey", {
        get: function () {
            return this.createUniqueKey('closing-tab');
        },
        enumerable: true,
        configurable: true
    });
    // methods to increment/decrement
    MultiTabDetection.prototype.incrementNumberOfTabsOpened = function () {
        this.numberOfTabsOpened++;
    };
    MultiTabDetection.prototype.decrementNumberOfTabsOpened = function () {
        if (this.numberOfTabsOpened > 0) {
            this.numberOfTabsOpened--;
        }
    };
    // local storage methods
    MultiTabDetection.prototype.setKey = function (key) {
        this.setLocalStorageKeyValue(key, this.createUniqueValue());
    };
    MultiTabDetection.prototype.setLocalStorageKeyValue = function (key, value) {
        window.localStorage.setItem(key, value);
    };
    MultiTabDetection.prototype.getLocalStorageValue = function (key) {
        return window.localStorage.getItem(key);
    };
    // utility methods
    MultiTabDetection.prototype.createUniqueKey = function (key) {
        return "" + this.prefix + key;
    };
    MultiTabDetection.prototype.createUniqueValue = function () {
        var randomString = Math.random()
            .toString(36)
            .substring(2, 15) +
            Math.random()
                .toString(36)
                .substring(2, 15);
        return Date.now().toString() + randomString;
    };
    return MultiTabDetection;
}());
exports.MultiTabDetection = MultiTabDetection;