How to hook on library function (Golden Layout) and call additional methods

Question

I'm using a library called Golden Layout, it has a function called destroy which will close all the application window, on window close or refesh

I need to add additional method to the destroy function. I need to removeall the localstorage aswell.

How do i do it ? Please help

Below is the plugin code.

lm.LayoutManager = function( config, container ) {
....    
destroy: function() {
            if( this.isInitialised === false ) {
                return;
            }
            this._onUnload();
            $( window ).off( 'resize', this._resizeFunction );
            $( window ).off( 'unload beforeunload', this._unloadFunction );
            this.root.callDownwards( '_$destroy', [], true );
            this.root.contentItems = [];
            this.tabDropPlaceholder.remove();
            this.dropTargetIndicator.destroy();
            this.transitionIndicator.destroy();
            this.eventHub.destroy();

            this._dragSources.forEach( function( dragSource ) {
                dragSource._dragListener.destroy();
                dragSource._element = null;
                dragSource._itemConfig = null;
                dragSource._dragListener = null;
            } );
            this._dragSources = [];
        },

I can access the destroy method in the component like this

this.layout = new GoldenLayout(this.config, this.layoutElement.nativeElement);

this.layout.destroy();`

My code

@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
  var originalDestroy = this.layout.destroy;
  this.layout.destroy = function() {
      // Call the original
      originalDestroy.apply(this, arguments);
        localStorage.clear();
  };
}

I don't see any localstorage in that code. – Barmar Mar 23 '18 at 09:24 — Barmar, Mar 23 '18 at 09:24

T.J. Crowder · Answer 1 · 2018-03-23T09:27:59.793

Looking at the documentation, GoldenLayout offers an itemDestroyed event you could hook to do your custom cleanup. The description is:

Fired whenever an item gets destroyed.

If for some reason you can't, the general answer is that you can easily wrap the function:

var originalDestroy = this.layout.destroy;
this.layout.destroy = function() {
    // Call the original
    originalDestroy.apply(this, arguments);
    // Do your additional work here
};

You may be able to do this for all instances if necessary by modifying GoldenLayout.prototype:

var originalDestroy = GoldenLayout.prototype.destroy;
GoldenLayout.prototype.destroy = function() {
    // Call the original
    originalDestroy.apply(this, arguments);
    // Do your additional work here
};

Example:

// Stand-in for golden laout
function GoldenLayout() {
}
GoldenLayout.prototype.destroy = function() {
    console.log("Standard functionality");
};

// Your override:
var originalDestroy = GoldenLayout.prototype.destroy;
GoldenLayout.prototype.destroy = function() {
    // Call the original
    originalDestroy.apply(this, arguments);
    // Do your additional work here
    console.log("Custom functionality");
};

// Use
var layout = new GoldenLayout();
layout.destroy();

score 2 · Answer 2 · answered Jan 17 '20 at 17:27

Hooking into golden layout is the intended purpose for the events.

As briefly touched on by @T.J. Crowder, there is the itemDestroyed event which is called when an item in the layout is destroyed.

You can just listen for this event like such:

this.layout.on('itemDestroyed', function() {
    localStorage.clear();
})

However, this event is called every time anything is destroyed, and propagates down the tree, even just by closing a tab. This means that if you call destroy on the layout root, you will get an event for every RowOrColumn, Stack and Component

I would recommend to check the item passed into the event and ignore if not the main window (root item)

this.layout.on('itemDestroyed', function(item) {
    if (item.type === "root") {
        localStorage.clear();
    }
})

How to hook on library function (Golden Layout) and call additional methods

2 Answers2