Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
feat(panel): add hook for close success. (#9819)
Browse files Browse the repository at this point in the history
  • Loading branch information
Derek Louie authored and jelbourn committed Oct 24, 2016
1 parent c810d5e commit db90283
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 3 deletions.
36 changes: 33 additions & 3 deletions src/components/panel/panel.js
Expand Up @@ -129,6 +129,12 @@ angular
* outside the panel to close it. Defaults to false.
* - `escapeToClose` - `{boolean=}`: Whether the user can press escape to
* close the panel. Defaults to false.
* - `onCloseSuccess` - `{function(!panelRef, string)=}`: Function that is
* called after the close successfully finishes. The first parameter passed
* into this function is the current panelRef and the 2nd is an optional
* string explaining the close reason. The currently supported closeReasons
* can be found in the MdPanelRef.closeReasons enum. These are by default
* passed along by the panel.
* - `trapFocus` - `{boolean=}`: Whether focus should be trapped within the
* panel. If `trapFocus` is true, the user will not be able to interact
* with the rest of the page until the panel is dismissed. Defaults to
Expand Down Expand Up @@ -870,6 +876,18 @@ function MdPanelService($rootElement, $rootScope, $injector, $window) {
* @type {enum}
*/
this.interceptorTypes = MdPanelRef.interceptorTypes;

/**
* Possible values for closing of a panel.
* @type {enum}
*/
this.closeReasons = MdPanelRef.closeReasons;

/**
* Possible values of absolute position.
* @type {enum}
*/
this.absPosition = MdPanelPosition.absPosition;
}


Expand Down Expand Up @@ -1200,20 +1218,24 @@ MdPanelRef.prototype.open = function() {

/**
* Closes the panel.
* @param {string} closeReason The event type that triggered the close.
* @returns {!angular.$q.Promise<!MdPanelRef>} A promise that is resolved when
* the panel is closed and animations finish.
*/
MdPanelRef.prototype.close = function() {
MdPanelRef.prototype.close = function(closeReason) {
var self = this;

return this._$q(function(resolve, reject) {
self._callInterceptors(MdPanelRef.interceptorTypes.CLOSE).then(function() {
var done = self._done(resolve, self);
var detach = self._simpleBind(self.detach, self);
var onCloseSuccess = self.config['onCloseSuccess'] || angular.noop;
onCloseSuccess = angular.bind(self, onCloseSuccess, self, closeReason);

self.hide()
.then(detach)
.then(done)
.then(onCloseSuccess)
.catch(reject);
}, reject);
});
Expand Down Expand Up @@ -1802,7 +1824,7 @@ MdPanelRef.prototype._configureEscapeToClose = function() {
ev.stopPropagation();
ev.preventDefault();

self.close();
self.close(MdPanelRef.closeReasons.ESCAPE);
}
};

Expand Down Expand Up @@ -1845,7 +1867,7 @@ MdPanelRef.prototype._configureClickOutsideToClose = function() {
ev.stopPropagation();
ev.preventDefault();

self.close();
self.close(MdPanelRef.closeReasons.CLICK_OUTSIDE);
}
};

Expand Down Expand Up @@ -2154,6 +2176,14 @@ MdPanelRef.prototype.removeFromGroup = function(groupName) {
}
};

/**
* Possible default closeReasons for the close function.
* @enum {string}
*/
MdPanelRef.closeReasons = {
CLICK_OUTSIDE: 'clickOutsideToClose',
ESCAPE: 'escapeToClose',
};

/*****************************************************************************
* MdPanelPosition *
Expand Down
69 changes: 69 additions & 0 deletions src/components/panel/panel.spec.js
Expand Up @@ -566,6 +566,75 @@ describe('$mdPanel', function() {
expect(PANEL_EL).not.toExist();
});

it('should call onCloseSuccess if provided after the panel finishes ' +
'closing', function() {
var closeReason, closePanelRef;
var onCloseSuccessCalled = false;

var onCloseSuccess = function(panelRef, reason) {
closePanelRef = panelRef;
closeReason = reason;
onCloseSuccessCalled = true;
return $q.when(this);
};

var config = angular.extend(
{'onCloseSuccess': onCloseSuccess }, DEFAULT_CONFIG);

openPanel(config);
closePanel();

expect(onCloseSuccessCalled).toBe(true);
expect(closeReason).toBe(undefined);
expect(closePanelRef).toBe(panelRef);
});

it('should call onCloseSuccess with "clickOutsideToClose" if close ' +
'is triggered by clicking on the panel container', function() {
var closeReason, closePanelRef;
var onCloseSuccessCalled = false;

var onCloseSuccess = function(panelRef, reason) {
closePanelRef = panelRef;
closeReason = reason;
onCloseSuccessCalled = true;
return $q.when(this);
};

var config = angular.extend( {'onCloseSuccess': onCloseSuccess,
clickOutsideToClose: true, }, DEFAULT_CONFIG);

openPanel(config);
clickPanelContainer();

expect(onCloseSuccessCalled).toBe(true);
expect(closeReason).toBe($mdPanel.closeReasons.CLICK_OUTSIDE);
expect(closePanelRef).toBe(panelRef);
});

it('should call onCloseSuccess with "escapeToClose" if close ' +
'is triggered by pressing escape', function() {
var closePanelRef, closeReason;
var onCloseSuccessCalled = false;

var onCloseSuccess = function(panelRef, reason) {
closePanelRef = panelRef;
closeReason = reason;
onCloseSuccessCalled = true;
return $q.when(this);
};

var config = angular.extend( {'onCloseSuccess': onCloseSuccess,
escapeToClose: true }, DEFAULT_CONFIG);

openPanel(config);
pressEscape();

expect(onCloseSuccessCalled).toBe(true);
expect(closeReason).toBe($mdPanel.closeReasons.ESCAPE);
expect(closePanelRef).toBe(panelRef);
});

it('should create and cleanup focus traps', function() {
var config = { template: DEFAULT_TEMPLATE, trapFocus: true };

Expand Down

0 comments on commit db90283

Please sign in to comment.