Is there any way to intercept a panel's event, and cancel it if needed?

[azeyad]

For example the EVENT.CLOSED, I want to be able to cancel it from the event handler function, like asking the user if he really wants to close the panel and in case he answered no I want to mark the event as handled without actually closing the panel

[Lochemage]

@azeyad

Currently, there is no feature like this; by the time you receive the close event, it is already too late. I'll need to investigate the best way to implement this, but it most likely will require you to change a value passed in to the event handler:

myPanel.on(wcDocker.EVENT.CLOSED, function(e) {
  // Show your confirmation box and then set the cancel 
  // property true if you want to cancel the close event.
  if (confirm('Are you sure you want to close this panel?')) {
    e.cancel = true;
  }
});

This will probably get a little more complicated if your confirmation box does not block the thread. Here we assume a function showConfirmation exists that displays a non-blocking confirmation screen:

var hasConfirmed = false;
myPanel.on(wcDocker.EVENT.CLOSED, function(e) {
  // In this case, immediately cancel the event if the user has not confirmed yet.
  if (!hasConfirmed) {
    e.cancel = true;

    // Show the confirmation box, which registers a handler for when a response is made.
    showConfirmation(function(response) {
      // If the user has confirmed the close...
      if (response) {
        // Make sure we flag it confirmed, so the next time the closed event is fired,
        // we don't show the confirmation box again.
        hasConfirmed = true;
        myPanel.close();
      }
    });
  }
});

Let me know if this works for you, and I will begin implementing it.

[azeyad]

@Lochemage: Thanks a lot for your response and yes this is what I am looking for, I think this is somehow similar to the windows forms events I used to deal with in the past.

[Lochemage]

@gbaumgart

I would like to do a simple return value as well, the only problem with it is what to do if you have multiple event handlers all returning their own result. In your solution above, it seems you simply use the latest event's result that is not empty and ignore all others. I don't quite like the idea of losing potentially important event results like that, so I think what I will do is store all results in an array that can be handled however the trigger-er intends (whether it be just ignoring all but one or somehow combining the results).

In light of this, the new close event would look more like this instead:

myPanel.on(wcDocker.EVENT.CLOSED, function() {
  // Return false to cancel the event.  If undefined or anything else is returned, I will assume the panel should close as normal.
  return false;
});

And similar for the asynchronous version:

var hasConfirmed = false;
myPanel.on(wcDocker.EVENT.CLOSED, function() {
  // In this case, immediately cancel the event if the user has not confirmed yet.
  if (!hasConfirmed) {
    // Show the confirmation box, which registers a handler for when a response is made.
    showConfirmation(function(response) {
      // If the user has confirmed the close...
      if (response) {
        // Make sure we flag it confirmed, so the next time the closed event is fired,
        // we don't show the confirmation box again.
        hasConfirmed = true;
        myPanel.close();
      }
    });

    return false;
  }
});

[Lochemage]

@azeyad, @gbaumgart

Alright, I have implemented it, but it ended up being a little different than the above. It occurred to me that, in some cases, as soon as wcDocker.EVENT.CLOSED has been triggered, things may be unloaded. For example, the wcIFrame object ties directly into it's owner panels' closed event, as soon as it is triggered, it will shut down and remove the frame. The solution was to create a new event type wcDocker.EVENT.CLOSING that is called first before the closed event. If any handler within this new event returns any falsey value, the closed event will be cancelled and therefore will never be triggered.

Here is some example code:

var hasConfirmed = false;
myPanel.on(wcDocker.EVENT.CLOSING, function() {
  // If we have not received confirmation to
  // close this panel, ask for it now!
  if (!hasConfirmed) {
    // For testing purposes, I add a quick timeout to make
    // it simulate an asynchronous action.
    setTimeout(function() {
      // Show the confirmation popup.
      if (confirm('Are you sure you wish to close this panel?')) {
        // If the user confirms, we first flag that the 
        // user has made the confirmation, so when it
        // returns to this event handler, it will actually
        // allow the panel to close.
        hasConfirmed = true;
        myPanel.close();
      }
    }, 1);

    // Return false immediately to cancel the close event.
    return false;
  }

  // If we get here, the user has confirmed the event, we should
  // allow the panel to close now.
  return true;
});

Also, documentation on this new event can be found here: http://docker.api.webcabin.org/module-wcDocker.html#toc4

Please let me know if there are any issues, otherwise I ask that you close this issue :)

[Lochemage]

Also note, the return value for the events can now be used for other things, as well as your own private events you may be using. All result values are returned from wcDocker.trigger and wcPanel.trigger as an array of values.

[azeyad]

@Lochemage: I just wanted to thank you for the quick turnaround, the fix would work for me but I still did not try yet, I couldn't see the new event in the documentation though, but I am closing the issue anyway.

[Lochemage]

@azeyad:

Most likely, you're looking at an old cashed version of the API doc page. Try clearing your browser cache and view again.