feat(panel): allow panels to be part of multiple groups. (#9830)

The groupName parameter has been changed from allowing only a
string to allowing a string or an array of strings. All of the
necessary functionality has been changed to accompany the array.

Fixes #9565

Author: bradrich

src/components/panel/demoGroups/index.html

@@ -41,6 +41,43 @@ <h2>Toolbar with grouped panels (Maximum open: 2)</h2>
       can be useful in limiting the number of menu panels allowed open at a
       time, etc.
     </p>
+
+    <div layout="row">
+      <div layout="column" flex>
+        <h2>Multiple Groups</h2>
+        <p>
+          Panels can be added to multiple groups. The <code>groupName</code>
+          parameter in the panel configuration can be a string or an array of
+          strings. This allows for the functionality or constraints of multiple
+          groups to apply to each created panel.
+        </p>
+        <p>
+          To give an example, the menus within the toolbar above have been added
+          to the <strong>toolbar</strong> and <strong>menus</strong> groups.
+          The menus to the right have been added to the <strong>menus</strong>
+          group as well. The maximum number of open panels within the
+          <strong>toolbar</strong> group is <strong>2</strong>. Within the
+          <strong>menus</strong> group it is <strong>3</strong>. Opening the
+          menus to the right and more than one in the toolbar will result in
+          the first opened panel to the right to close.
+        </p>
+      </div>
+      <div style="width: 45px;"></div>
+      <div layout="row" flex="nogrow">
+        <md-button
+          class="md-fab md-primary"
+          aria-label="Tools"
+          ng-click="ctrl.showContentMenu($event, ctrl.tools)">
+          <md-icon md-svg-icon="img/icons/ic_build_24px.svg"></md-icon>
+        </md-button>
+        <md-button
+          class="md-fab md-accent"
+          aria-label="Code"
+          ng-click="ctrl.showContentMenu($event, ctrl.code)">
+          <md-icon md-svg-icon="img/icons/ic_code_24px.svg"></md-icon>
+        </md-button>
+      </div>
+    </div>
   </md-content>
 
 </div>

src/components/panel/demoGroups/script.js

@@ -28,24 +28,48 @@
         'Sign Out'
       ]
     };
+    this.tools = {
+      name: 'tools',
+      items: [
+        'Create',
+        'Delete'
+      ]
+    };
+    this.code = {
+      name: 'code',
+      items: [
+        'See Source',
+        'See Commits'
+      ]
+    };
+
+    this.menuTemplate = '' +
+        '<div class="menu-panel" md-whiteframe="4">' +
+        '  <div class="menu-content">' +
+        '    <div class="menu-item" ng-repeat="item in ctrl.items">' +
+        '      <button class="md-button">' +
+        '        <span>{{item}}</span>' +
+        '      </button>' +
+        '    </div>' +
+        '    <md-divider></md-divider>' +
+        '    <div class="menu-item">' +
+        '      <button class="md-button" ng-click="ctrl.closeMenu()">' +
+        '        <span>Close Menu</span>' +
+        '      </button>' +
+        '    </div>' +
+        '  </div>' +
+        '</div>';
+
+    $mdPanel.newPanelGroup('toolbar', {
+      maxOpen: 2
+    });
+
+    $mdPanel.newPanelGroup('menus', {
+      maxOpen: 3
+    });
 
     this.showToolbarMenu = function($event, menu) {
-      var template = '' +
-          '<div class="menu-panel" md-whiteframe="4">' +
-          '  <div class="menu-content">' +
-          '    <div class="menu-item" ng-repeat="item in ctrl.items">' +
-          '      <button class="md-button">' +
-          '        <span>{{item}}</span>' +
-          '      </button>' +
-          '    </div>' +
-          '    <md-divider></md-divider>' +
-          '    <div class="menu-item">' +
-          '      <button class="md-button" ng-click="ctrl.closeMenu()">' +
-          '        <span>Close Menu</span>' +
-          '      </button>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>';
+      var template = this.menuTemplate;
 
       var position = $mdPanel.newPanelPosition()
           .relativeTo($event.srcElement)
@@ -54,10 +78,6 @@
             $mdPanel.yPosition.BELOW
           );
 
-      $mdPanel.newPanelGroup('toolbar', {
-        maxOpen: 2
-      });
-
       var config = {
         id: 'toolbar_' + menu.name,
         attachTo: angular.element(document.body),
@@ -73,11 +93,42 @@
         focusOnOpen: false,
         zIndex: 100,
         propagateContainerEvents: true,
-        groupName: 'toolbar'
+        groupName: ['toolbar', 'menus']
       };
 
       $mdPanel.open(config);
-    }
+    };
+
+    this.showContentMenu = function($event, menu) {
+      var template = this.menuTemplate;
+
+      var position = $mdPanel.newPanelPosition()
+          .relativeTo($event.srcElement)
+          .addPanelPosition(
+            $mdPanel.xPosition.ALIGN_START,
+            $mdPanel.yPosition.BELOW
+          );
+
+      var config = {
+        id: 'content_' + menu.name,
+        attachTo: angular.element(document.body),
+        controller: PanelMenuCtrl,
+        controllerAs: 'ctrl',
+        template: template,
+        position: position,
+        panelClass: 'menu-panel-container',
+        locals: {
+          items: menu.items
+        },
+        openFrom: $event,
+        focusOnOpen: false,
+        zIndex: 100,
+        propagateContainerEvents: true,
+        groupName: 'menus'
+      };
+
+      $mdPanel.open(config);
+    };
   }
 
   function PanelMenuCtrl(mdPanelRef) {

src/components/panel/panel.js

@@ -14,6 +14,7 @@ angular
  *                            PUBLIC DOCUMENTATION                           *
  *****************************************************************************/
 
+
 /**
  * @ngdoc service
  * @name $mdPanel
@@ -155,10 +156,11 @@ angular
  *     on when the panel closes. This is commonly the element which triggered
  *     the opening of the panel. If you do not use `origin`, you need to control
  *     the focus manually.
- *   - `groupName` - `{string=}`: Name of a panel group. This group name is used
- *     for configuring the number of open panels and identifying specific
- *     behaviors for groups. For instance, all tooltips could be identified
- *     using the same groupName.
+ *   - `groupName` - `{(string|!Array<string>)=}`: A group name or an array of
+ *     group names. The group name is used for creating a group of panels. The
+ *     group is used for configuring the number of open panels and identifying
+ *     specific behaviors for groups. For instance, all tooltips could be
+ *     identified using the same groupName.
  *
  * @returns {!MdPanelRef} panelRef
  */
@@ -685,6 +687,7 @@ angular
  *                               MdPanelAnimation                            *
  *****************************************************************************/
 
+
 /**
  * @ngdoc type
  * @name MdPanelAnimation
@@ -895,7 +898,12 @@ MdPanelService.prototype.create = function(config) {
   this._config.scope.$on('$destroy', angular.bind(panelRef, panelRef.detach));
 
   if (this._config.groupName) {
-    panelRef.addToGroup(this._config.groupName);
+    if (angular.isString(this._config.groupName)) {
+      this._config.groupName = [this._config.groupName];
+    }
+    angular.forEach(this._config.groupName, function(group) {
+      panelRef.addToGroup(group);
+    });
   }
 
   return panelRef;
@@ -987,7 +995,7 @@ MdPanelService.prototype.setGroupMaxOpen = function(groupName, maxOpen) {
  * @private
  */
 MdPanelService.prototype._openCountExceedsMaxOpen = function(groupName) {
-  if (groupName && this._groups[groupName]) {
+  if (this._groups[groupName]) {
     var group = this._groups[groupName];
     return group.maxOpen > 0 && group.openPanels.length > group.maxOpen;
   }
@@ -1001,9 +1009,7 @@ MdPanelService.prototype._openCountExceedsMaxOpen = function(groupName) {
  * @private
  */
 MdPanelService.prototype._closeFirstOpenedPanel = function(groupName) {
-  if (groupName) {
-    this._groups[groupName].openPanels[0].close();
-  }
+  this._groups[groupName].openPanels[0].close();
 };
 
 
@@ -1137,8 +1143,12 @@ MdPanelRef.prototype.open = function() {
     var done = self._done(resolve, self);
     var show = self._simpleBind(self.show, self);
     var checkGroupMaxOpen = function() {
-      if (self._$mdPanel._openCountExceedsMaxOpen(self.config.groupName)) {
-        self._$mdPanel._closeFirstOpenedPanel(self.config.groupName);
+      if (self.config.groupName) {
+        angular.forEach(self.config.groupName, function(group) {
+          if (self._$mdPanel._openCountExceedsMaxOpen(group)) {
+            self._$mdPanel._closeFirstOpenedPanel(group);
+          }
+        });
       }
     };
 
@@ -1258,8 +1268,11 @@ MdPanelRef.prototype.detach = function() {
  * Destroys the panel. The Panel cannot be opened again after this.
  */
 MdPanelRef.prototype.destroy = function() {
+  var self = this;
   if (this.config.groupName) {
-    this.removeFromGroup(this.config.groupName);
+    angular.forEach(this.config.groupName, function(group) {
+      self.removeFromGroup(group);
+    });
   }
   this.config.scope.$destroy();
   this.config.locals = null;
@@ -1294,8 +1307,9 @@ MdPanelRef.prototype.show = function() {
     var onOpenComplete = self.config['onOpenComplete'] || angular.noop;
     var addToGroupOpen = function() {
       if (self.config.groupName) {
-        var group = self._$mdPanel._groups[self.config.groupName];
-        group.openPanels.push(self);
+        angular.forEach(self.config.groupName, function(group) {
+          self._$mdPanel._groups[group].openPanels.push(self);
+        });
       }
     };
 
@@ -1336,11 +1350,14 @@ MdPanelRef.prototype.hide = function() {
     };
     var removeFromGroupOpen = function() {
       if (self.config.groupName) {
-        var group = self._$mdPanel._groups[self.config.groupName];
-        var index = group.openPanels.indexOf(self);
-        if (index > -1) {
-          group.openPanels.splice(index, 1);
-        }
+        var group, index;
+        angular.forEach(self.config.groupName, function(group) {
+          group = self._$mdPanel._groups[group];
+          index = group.openPanels.indexOf(self);
+          if (index > -1) {
+            group.openPanels.splice(index, 1);
+          }
+        });
       }
     };
     var focusOnOrigin = function() {
@@ -1884,6 +1901,7 @@ MdPanelRef.prototype._animateClose = function() {
   });
 };
 
+
 /**
  * Registers a interceptor with the panel. The callback should return a promise,
  * which will allow the action to continue when it gets resolved, or will
@@ -1914,6 +1932,7 @@ MdPanelRef.prototype.registerInterceptor = function(type, callback) {
   return this;
 };
 
+
 /**
  * Removes a registered interceptor.
  * @param {string} type Type of interceptor to be removed.
@@ -2169,6 +2188,7 @@ MdPanelPosition.prototype.absolute = function() {
   return this;
 };
 
+
 /**
  * Sets the value of a position for the panel. Clears any previously set
  * position.
@@ -3037,6 +3057,7 @@ MdPanelAnimation.prototype._getBoundingClientRect = function(element) {
  *                                Util Methods                               *
  *****************************************************************************/
 
+
 /**
  * Returns the angular element associated with a css selector or element.
  * @param el {string|!angular.JQLite|!Element}
@@ -3048,6 +3069,7 @@ function getElement(el) {
   return angular.element(queryResult);
 }
 
+
 /**
  * Gets the computed values for an element's translateX and translateY in px.
  * @param {!angular.JQLite|!Element} el