feat(snackbar): Emit show or hide event. fixes #1603

demos/snackbar.html

@@ -254,6 +254,15 @@ <h2 class="mdc-typography--title">Basic Example</h2>
           }
         });
 
+        // Show and hide events demo
+        snackbar.listen('MDCSnackbar:show', function () {
+          console.log('Received MDCSnackbar:show');
+        });
+
+        snackbar.listen('MDCSnackbar:hide', function () {
+          console.log('Received MDCSnackbar:hide');
+        });
+
         document.getElementById('show-snackbar').addEventListener('click', function() {
           show(snackbar);
         });

packages/mdc-snackbar/README.md

@@ -126,6 +126,11 @@ import {MDCSnackbar} from '@material/snackbar';
 const snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
 ```
 
+#### Handling events
+
+When snackbar is shown or dismissed, the component will emit a `MDCSnackbar:show` or 
+`MDCSnackbar:hide` custom event with no data attached.
+
 ### Showing a message and action
 
 Once you have obtained an MDCSnackbar instance attached to the DOM, you can use
@@ -214,6 +219,8 @@ The adapter for snackbars must provide the following functions, with correct sig
 | `deregisterActionClickHandler(handler: EventListener) => void` | Deregisters an event handler from a `click` event on the action element. This will only be called with handlers that have previously been passed to `registerActionClickHandler` calls. |
 | `registerTransitionEndHandler(handler: EventListener) => void` | Registers an event handler to be called when an `transitionend` event is triggered on the root element. Note that you must account for vendor prefixes in order for this to work correctly. |
 | `deregisterTransitionEndHandler(handler: EventListener) => void` | Deregisters an event handler from an `transitionend` event listener. This will only be called with handlers that have previously been passed to `registerTransitionEndHandler` calls. |
+| `notifyShow() => void` | Dispatches an event notifying listeners that the snackbar has been shown. |
+| `notifyHide() => void` | Dispatches an event notifying listeners that the snackbar has been hidden. |
 
 ## Avoiding Flash-Of-Unstyled-Content (FOUC)
 

packages/mdc-snackbar/constants.js

@@ -27,6 +27,8 @@ export const strings = {
   TEXT_SELECTOR: '.mdc-snackbar__text',
   ACTION_WRAPPER_SELECTOR: '.mdc-snackbar__action-wrapper',
   ACTION_BUTTON_SELECTOR: '.mdc-snackbar__action-button',
+  SHOW_EVENT: 'MDCSnackbar:show',
+  HIDE_EVENT: 'MDCSnackbar:hide',
 };
 
 export const numbers = {

packages/mdc-snackbar/foundation.js

@@ -48,6 +48,8 @@ export default class MDCSnackbarFoundation extends MDCFoundation {
       deregisterActionClickHandler: (/* handler: EventListener */) => {},
       registerTransitionEndHandler: (/* handler: EventListener */) => {},
       deregisterTransitionEndHandler: (/* handler: EventListener */) => {},
+      notifyShow: () => {},
+      notifyHide: () => {},
     };
   }
 
@@ -166,6 +168,7 @@ export default class MDCSnackbarFoundation extends MDCFoundation {
     this.active_ = true;
     this.adapter_.addClass(ACTIVE);
     this.adapter_.unsetAriaHidden();
+    this.adapter_.notifyShow();
 
     this.timeoutId_ = setTimeout(this.cleanup_.bind(this), this.snackbarData_.timeout || numbers.MESSAGE_TIMEOUT);
   }
@@ -218,6 +221,7 @@ export default class MDCSnackbarFoundation extends MDCFoundation {
         this.adapter_.setAriaHidden();
         this.active_ = false;
         this.snackbarHasFocus_ = false;
+        this.adapter_.notifyHide();
         this.showNext_();
       };
 

packages/mdc-snackbar/index.js

@@ -45,8 +45,8 @@ export class MDCSnackbar extends MDCComponent {
       unsetAriaHidden: () => this.root_.removeAttribute('aria-hidden'),
       setActionAriaHidden: () => getActionButton().setAttribute('aria-hidden', 'true'),
       unsetActionAriaHidden: () => getActionButton().removeAttribute('aria-hidden'),
-      setActionText: (text) => { getActionButton().textContent = text; },
-      setMessageText: (text) => { getText().textContent = text; },
+      setActionText: (text) => {getActionButton().textContent = text;},
+      setMessageText: (text) => {getText().textContent = text;},
       setFocus: () => getActionButton().focus(),
       visibilityIsHidden: () => document.hidden,
       registerCapturedBlurHandler: (handler) => getActionButton().addEventListener('blur', handler, true),
@@ -63,6 +63,8 @@ export class MDCSnackbar extends MDCComponent {
         (handler) => this.root_.addEventListener(getCorrectEventName(window, 'transitionend'), handler),
       deregisterTransitionEndHandler:
         (handler) => this.root_.removeEventListener(getCorrectEventName(window, 'transitionend'), handler),
+      notifyShow: () => this.emit(MDCSnackbarFoundation.strings.SHOW_EVENT),
+      notifyHide: () => this.emit(MDCSnackbarFoundation.strings.HIDE_EVENT),
     });
   }
 

test/unit/mdc-snackbar/foundation.test.js

@@ -50,6 +50,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'deregisterCapturedInteractionHandler', 'registerActionClickHandler',
     'deregisterActionClickHandler', 'registerTransitionEndHandler',
     'deregisterTransitionEndHandler',
+    'notifyShow', 'notifyHide',
   ]);
   // Test default methods
   methods.forEach((m) => assert.doesNotThrow(defaultAdapter[m]));

test/unit/mdc-snackbar/mdc-snackbar.test.js

@@ -54,6 +54,22 @@ test('show() delegates to the foundation', () => {
   td.verify(component.foundation_.show('data'));
 });
 
+test(`adapter#notifyShow fires an ${strings.SHOW_EVENT} custom event`, () => {
+  const {root, component} = setupTest();
+  const handler = td.func('notifyShow handler');
+  root.addEventListener(strings.SHOW_EVENT, handler);
+  component.getDefaultFoundation().adapter_.notifyShow();
+  td.verify(handler(td.matchers.anything()));
+});
+
+test(`adapter#notifyHide fires an ${strings.HIDE_EVENT} custom event`, () => {
+  const {root, component} = setupTest();
+  const handler = td.func('notifyHide handler');
+  root.addEventListener(strings.HIDE_EVENT, handler);
+  component.getDefaultFoundation().adapter_.notifyHide();
+  td.verify(handler(td.matchers.anything()));
+});
+
 test('show() and click', () => {
   const {root, component} = setupTest();
   const data = {