Make md-expansion-panel emit events on state change

These are the name of the events: * `mdExpansionPanelExpanding`: when it starts to expand * `mdExpansionPanelExpanded`: when it has finished expanding * `mdExpansionPanelCollapsing`: when it starts to collapsed * `mdExpansionPanelCollapsed`: when it has finished to collapse Close issue B-3PO#41
chenlijun99 · Oct 10, 2017 · 876127e · 876127e
1 parent b849786
commit 876127e
Show file tree

Hide file tree

Showing 8 changed files with 251 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -302,7 +302,22 @@ angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);
 | :--: | :--: | :--: |
 | md-component-id | string= | <p>add an id if you want to acces the panel via the <code>$mdExpansionPanel</code> service</p>  |
 
+#### Events
 
+`mdExpansionPanel` emits the following events:
+
+* `mdExpansionPanelExpanding`: when it starts to expand
+* `mdExpansionPanelExpanded`: when it has finished expanding
+* `mdExpansionPanelCollapsing`: when it starts to collapsed
+* `mdExpansionPanelCollapsed`: when it has finished to collapse
+
+The `md-component-id` of the concerned `md-expansion-panel` will be passed as argument.
+
+```js
+$scope.$on("mdExpansionPanelExpanding", function($event, componentId) {
+	...
+})
+```
 
 
 ## <a name="mdExpansionPanelCollapsed"></a> mdExpansionPanelCollapsed

diff --git a/app/app.js b/app/app.js
@@ -30,6 +30,11 @@ function configApp($routeProvider, $locationProvider) {
       controller: 'MultipleController',
       controllerAs: 'vm'
     })
+    .when('/events', {
+      templateUrl: 'pages/events/events.html',
+      controller: 'EventsController',
+      controllerAs: 'vm'
+    })
     .otherwise('/');
 
 	$locationProvider.hashPrefix('');

diff --git a/app/index.html b/app/index.html
@@ -28,6 +28,7 @@
         <md-nav-item md-nav-href="#/group" name="/group">Groups</md-nav-item>
         <md-nav-item md-nav-href="#/autoexpand" name="/autoexpand">Auto Expand</md-nav-item>
         <md-nav-item md-nav-href="#/multiple" name="/multiple">Multiple</md-nav-item>
+        <md-nav-item md-nav-href="#/events" name="/events">Events</md-nav-item>
       </md-nav-bar>
     </div>
 

diff --git a/app/pages/events/events.controller.js b/app/pages/events/events.controller.js
@@ -0,0 +1,30 @@
+angular
+  .module('angularMaterialExpansionPanel')
+  .controller('EventsController', EventsController);
+
+
+function EventsController($scope, $mdExpansionPanel) {
+  $mdExpansionPanel().waitFor('expansionPanelOne').then(function (instance) {
+    instance.expand();
+  });
+
+  $scope.$on("mdExpansionPanelExpanding", function($event, componentId) {
+    alert("expansion panel " + componentId + " expanding");
+  });
+  $scope.$on("mdExpansionPanelExpanded", function($event, componentId) {
+    alert("expansion panel " + componentId + " expanded");
+  });
+  $scope.$on("mdExpansionPanelCollapsing", function($event, componentId) {
+    alert("expansion panel " + componentId + " collapsing");
+  });
+  $scope.$on("mdExpansionPanelCollapsed", function($event, componentId) {
+    alert("expansion panel " + componentId + " collapsed");
+  });
+
+
+  $scope.collapseOne = function () {
+    $mdExpansionPanel('expansionPanelOne').collapse();
+  };
+
+  $scope.isDisabled = true;
+}
diff --git a/app/pages/events/events.html b/app/pages/events/events.html
@@ -0,0 +1,191 @@
+<h2>Events</h2>
+
+
+<p>
+	<b>Expansion Panels</b> $emit the following events 
+	<ul>
+		<li><code>mdExpansionPanelExpanding</code>: when it starts to expand</li>
+		<li><code>mdExpansionPanelExpanded</code>: when it has finished expanding</li>
+		<li><code>mdExpansionPanelCollapsing</code>: when it starts to collapsed</li>
+		<li><code>mdExpansionPanelCollapsed</code>: when it has finished to collapse</li>
+	</ul>
+	The <code>md-component-id</code> of the concerned <code>md-expansion-panel</code> will be passed as argument.
+</p>
+
+<div style="padding-top: 12px; padding-bottom: 36px;">
+	<md-divider></md-divider>
+</div>
+
+
+
+<md-expansion-panel md-component-id="expansionPanelOne">
+
+	<md-expansion-panel-collapsed>
+		<div class="md-title">Title</div>
+		<div class="md-summary">Summary</div>
+		<md-expansion-panel-icon></md-expansion-panel-icon>
+	</md-expansion-panel-collapsed>
+
+	<md-expansion-panel-expanded>
+
+		<md-expansion-panel-header>
+			<div class="md-title">Expanded Title</div>
+			<div class="md-summary">Expanded Summary</div>
+			<md-expansion-panel-icon></md-expansion-panel-icon>
+		</md-expansion-panel-header>
+
+		<md-expansion-panel-content>
+			<h4>Content</h4>
+			<p>Put content in here</p>
+		</md-expansion-panel-content>
+
+		<md-expansion-panel-footer>
+			<div flex></div>
+			<md-button class="md-warn" ng-click="collapseOne()">Collapse</md-button>
+		</md-expansion-panel-footer>
+
+	</md-expansion-panel-expanded>
+
+</md-expansion-panel>
+
+
+<md-expansion-panel>
+
+	<md-expansion-panel-collapsed>
+		<md-expansion-panel-icon></md-expansion-panel-icon>
+		<div class="md-title">Sticky</div>
+		<div class="md-summary">header and footer will stick</div>
+	</md-expansion-panel-collapsed>
+
+	<md-expansion-panel-expanded>
+
+		<md-expansion-panel-header>
+			<md-expansion-panel-icon></md-expansion-panel-icon>
+			<div class="md-title">Sticky</div>
+			<div class="md-summary">header and footer will stick</div>
+		</md-expansion-panel-header>
+
+		<md-expansion-panel-content>
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+		</md-expansion-panel-content>
+
+		<md-expansion-panel-footer>
+			<div flex></div>
+			<md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
+		</md-expansion-panel-footer>
+
+	</md-expansion-panel-expanded>
+
+</md-expansion-panel>
+
+
+
+
+<md-expansion-panel>
+
+	<md-expansion-panel-collapsed>
+		<div class="md-title">No Sticky</div>
+		<div class="md-summary">header and footer sticky disabled</div>
+	</md-expansion-panel-collapsed>
+
+	<md-expansion-panel-expanded>
+
+		<md-expansion-panel-header md-no-sticky>
+			<div class="md-title">No Sticky</div>
+			<div class="md-summary">header and footer sticky disabled</div>
+		</md-expansion-panel-header>
+
+		<md-expansion-panel-content>
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+
+			<h4>Content</h4>
+			<p>Put content in here</p>
+		</md-expansion-panel-content>
+
+		<md-expansion-panel-footer md-no-sticky>
+			<div flex></div>
+			<md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
+		</md-expansion-panel-footer>
+
+	</md-expansion-panel-expanded>
+
+</md-expansion-panel>
+
+
+
+<md-expansion-panel ng-disabled="isDisabled">
+
+	<md-expansion-panel-collapsed>
+		<div class="md-title">Disabled Panel</div>
+		<span flex></span>
+		<md-expansion-panel-icon></md-expansion-panel-icon>
+	</md-expansion-panel-collapsed>
+
+	<md-expansion-panel-expanded>
+
+		<md-expansion-panel-header>
+			<div class="md-title">Disabled Panel</div>
+			<div class="md-summary">Expanded Summary</div>
+			<md-expansion-panel-icon></md-expansion-panel-icon>
+		</md-expansion-panel-header>
+
+		<md-expansion-panel-content>
+			<h4>Content</h4>
+			<p>Put content in here</p>
+		</md-expansion-panel-content>
+
+		<md-expansion-panel-footer>
+			<div flex></div>
+			<md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
+		</md-expansion-panel-footer>
+
+	</md-expansion-panel-expanded>
+
+</md-expansion-panel>
diff --git a/dist/md-expansion-panel.js b/dist/md-expansion-panel.js
@@ -232,6 +232,7 @@ function expansionPanelDirective() {
       options = options || {};
 
       var deferred = $q.defer();
+        $scope.$emit("mdExpansionPanelExpanding", vm.componentId);
 
       if (vm.epxansionPanelGroupCtrl) {
         vm.epxansionPanelGroupCtrl.expandPanel(vm.componentId);
@@ -254,6 +255,7 @@ function expansionPanelDirective() {
 
       $timeout(function () {
         deferred.resolve();
+        $scope.$emit("mdExpansionPanelExpanded", vm.componentId);
       }, options.animation === false ? 0 : ANIMATION_TIME);
       return deferred.promise;
     }
@@ -265,6 +267,7 @@ function expansionPanelDirective() {
       options = options || {};
 
       var deferred = $q.defer();
+      $scope.$emit("mdExpansionPanelCollapsing", vm.componentId);
 
       $element.addClass('md-close');
       $element.removeClass('md-open');
@@ -283,6 +286,7 @@ function expansionPanelDirective() {
 
       $timeout(function () {
         deferred.resolve();
+        $scope.$emit("mdExpansionPanelCollapsed", vm.componentId);
       }, options.animation === false ? 0 : ANIMATION_TIME);
       return deferred.promise;
     }