mdPanel: Implement group logic. #8971
Description
Tasks
Add this config option to the panel:
* TODO(ErinCoughlan): Add the following config options.
* - `groupName` - `{string=}`: Name of panel groups. This group name is
* used for configuring the number of open panels and identifying specific
* behaviors for groups. For instance, all tooltips will be identified
* using the same groupName.
Keep track of what panels are opened for a particular group (in order).
Implement/Extend the following methods:
/**
* @ngdoc method
* @name $mdPanel#setGroupMaxOpen
* @description
* Sets the maximum number of panels in a group that can be opened at a given
* time.
*
* @param groupName {string} The name of the group to configure.
* @param maxOpen {number} The max number of panels that can be opened.
*/
setGroupMaxOpen is a global configuration for a specific group. When this max is reached, the panel should close the panel that was first opened, keeping only a specific number of panels open at a time.
An alternative to closing the first panel is to close the panel the user interacted with first. For example, assume there is a max of 2 panels open. The user interacts with panel 1, opens panel 2, goes back to panel 1, then opens panel 3. Panel 2 should close because it was interacted with the farthest back. I can see benefits to either implementation and I think either is understandable from a user's point of view. Perhaps make it configurable.
clickOutsideToClose and pressEscapeToClose should optionally close either all of the panels in a group or only the last panel. Add a config option for specifying which behavior is desired.
Rationale for this Feature
Grouping allows the user to specify logic for a collection of panels. For instance, all popups in the header can be considered one group with a max of one popup open at the same time. Dialogs within dialogs are another example of groups. A "dialog group" may be able to have a max of 3 opened at a time, and then after this point, old dialogs close. This prevents the panel from storing a ridiculous amount of data in memory or polluting the DOM with several panels. This helps performance and gives the user more flexibility about how to use panels.