From 39efc85a96988fd747228db7678d26b6df978304 Mon Sep 17 00:00:00 2001
From: Patrik Lundqvist <pat.lundqvist@gmail.com>
Date: Thu, 24 Sep 2015 19:34:26 +0200
Subject: [PATCH] feat(interimElement): add onShowing event

Currently hideElement has an onRemoving event, this is the showElement equivalent. Useful when dealing with loading spinners that should disappear before the dialog shows.

Closes #4820.
---
 src/components/dialog/dialog.js               |  2 ++
 src/components/dialog/dialog.spec.js          | 25 +++++++++++++++++++
 .../services/interimElement/interimElement.js |  3 +++
 .../interimElement/interimElement.spec.js     | 22 ++++++++++++++++
 4 files changed, 52 insertions(+)

diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index b91984549ed..ba78b9fa96c 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -361,6 +361,8 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
  *   - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
  *   - `parent` - `{element=}`: The element to append the dialog to. Defaults to appending
  *     to the root element of the application.
+ *   - `onShowing` `{function=} Callback function used to announce the show() action is
+ *     starting.
  *   - `onComplete` `{function=}`: Callback function used to announce when the show() action is
  *     finished.
  *   - `onRemoving` `{function=} Callback function used to announce the close/hide() action is
diff --git a/src/components/dialog/dialog.spec.js b/src/components/dialog/dialog.spec.js
index d29b2b2a088..ae4ea2f1c44 100644
--- a/src/components/dialog/dialog.spec.js
+++ b/src/components/dialog/dialog.spec.js
@@ -359,6 +359,31 @@ describe('$mdDialog', function() {
   });
 
   describe('#build()', function() {
+    it('should support onShowing callbacks before `show()` starts', inject(function($mdDialog, $rootScope) {
+
+      var template = '<md-dialog>Hello</md-dialog>';
+      var parent = angular.element('<div>');
+      var showing = false;
+
+      $mdDialog.show({
+        template: template,
+        parent: parent,
+        onShowing: onShowing
+      });
+      $rootScope.$apply();
+
+      runAnimation();
+
+      function onShowing(scope, element, options) {
+        showing = true;
+        container = angular.element(parent[0].querySelector('.md-dialog-container'));
+        expect(arguments.length).toEqual(3);
+        expect(container.length).toBe(0);
+      }
+
+      expect(showing).toBe(true);
+    }));
+
     it('should support onComplete callbacks within `show()`', inject(function($mdDialog, $rootScope, $timeout, $mdConstant) {
 
       var template = '<md-dialog>Hello</md-dialog>';
diff --git a/src/core/services/interimElement/interimElement.js b/src/core/services/interimElement/interimElement.js
index e81f91490ba..00b41017477 100644
--- a/src/core/services/interimElement/interimElement.js
+++ b/src/core/services/interimElement/interimElement.js
@@ -596,11 +596,14 @@ function InterimElementProvider() {
          * optional auto-Hide
          */
         function showElement(element, options, controller) {
+          // Trigger onShowing callback before the `show()` starts
+          var notifyShowing = options.onShowing || angular.noop;
           // Trigger onComplete callback when the `show()` finishes
           var notifyComplete = options.onComplete || angular.noop;
 
           return $q(function (resolve, reject) {
             try {
+              notifyShowing(options.scope, element, options);
 
               // Start transitionIn
               $q.when(options.onShow(options.scope, element, options, controller))
diff --git a/src/core/services/interimElement/interimElement.spec.js b/src/core/services/interimElement/interimElement.spec.js
index c5ed623e82d..de19f2b76f0 100644
--- a/src/core/services/interimElement/interimElement.spec.js
+++ b/src/core/services/interimElement/interimElement.spec.js
@@ -362,6 +362,28 @@ describe('$$interimElement service', function() {
         expect(autoClosed).toBe(true);
       }));
 
+      it('calls onShowing before onShow', inject(function() {
+        var onShowingCalled = false;
+
+        Service.show({
+          template: '<some-element />',
+          passingOptions: true,
+          onShowing: onShowing,
+          onShow: onShow
+        });
+
+        expect(onShowingCalled).toBe(true);
+
+        function onShowing(scope, el, options) {
+          expect(arguments.length).toEqual(3);
+          onShowingCalled = true;
+        }
+
+        function onShow(scope, el, options) {
+          expect(onShowingCalled).toBe(true);
+        }
+      }));
+
       it('calls onRemove', inject(function() {
         var onRemoveCalled = false;
         Service.show({