fix(snackbar): fix missing adapter api

also add align-start prop
stasson · Nov 1, 2017 · c6fb19e · c6fb19e
1 parent e9e3594
commit c6fb19e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 44 deletions.
diff --git a/components/snackbar/README.md b/components/snackbar/README.md
@@ -13,17 +13,17 @@ vm.$root.$emit('show-snackbar', { message: 'A message' })
 
 You can also specify an action handler:
 ```javascript
-vm.$root.$emit('show-snackbar', { 
+vm.$root.$emit('show-snackbar', {
   message: 'A message with action',
   actionText: 'undo',
   actionHandler: function () {
-    //... 
+    //...
   }
 })
 
 ```
 
-Alternatively, you can also use the `show` method to trigger the display of the 
+Alternatively, you can also use the `show` method to trigger the display of the
 snackbar
 
 ```html
@@ -55,16 +55,17 @@ properties and their usage.
 
 | props | Type | Default | Description |
 |-------|------|---------|-------------|
-| `event` | String | default `show-snackbar` | specifies the name of the event the snackbar listens to.| 
+| `event` | String | default `show-snackbar` | specifies the name of the event the snackbar listens to.|
 | `event-source`|Vue| `vm.$root` | specifies the source of the event. must be a vue instance or component ref|
 | `dismisses-on-action` |Boolean| true| Whether the snackbar will be dimissed when the user presses the action button.  |
+| `align-start` |Boolean| false| Whether the snackbar is start aligned. |
 
 
 ### methods
 
 | method | Description |
 |--------|-------------|
-| `show(data)` |  trigger the display of a message with optional action.| 
+| `show(data)` |  trigger the display of a message with optional action.|
 
 ### Reference
 - <https://material.io/components/web/catalog/snackbars

diff --git a/components/snackbar/mdc-snackbar.vue b/components/snackbar/mdc-snackbar.vue
@@ -3,7 +3,7 @@
     aria-live="assertive" aria-atomic="true" :aria-hidden="hidden">
   <div class="mdc-snackbar__text">{{message}}</div>
   <div class="mdc-snackbar__action-wrapper">
-    <button type="button" @click="actionClicked"
+    <button ref="actionButton" type="button"
         class="mdc-snackbar__action-button"
         :aria-hidden="actionHidden">{{actionText}}</button>
   </div>
@@ -17,6 +17,7 @@ import { getCorrectEventName } from '@material/animation'
 export default {
   name: 'mdc-snackbar',
   props: {
+    'align-start': Boolean,
     'event': {
       type: String,
       required: false,
@@ -31,58 +32,43 @@ export default {
   },
   data () {
     return {
-      classes: {},
+      classes: {
+        'mdc-snackbar--align-start': this['align-start']
+      },
       message: '',
       actionText: '',
       hidden: false,
       actionHidden: false,
       animHandlers: [],
-      actionClickHandlers: []
     }
   },
   methods: {
-    actionClicked (event) {
-      this.actionClickHandlers.forEach((h) => h(event))
-    },
     show (data) {
       this.foundation.show(data)
     }
   },
   mounted () {
     this.foundation = new MDCSnackbarFoundation({
-      addClass: (className) => {
-        this.$set(this.classes, className, true)
-      },
-      removeClass: (className) => {
-        this.$delete(this.classes, className)
-      },
-      setAriaHidden: () => {
-        this.hidden = true
-      },
-      unsetAriaHidden: () => {
-        this.hidden = false
-      },
-      setActionAriaHidden: () => {
-        this.actionHidden = true
-      },
-      unsetActionAriaHidden: () => {
-        this.actionHidden = false
-      },
-      setMessageText: (message) => {
-        this.message = message
-      },
-      setActionText: (actionText) => {
-        this.actionText = actionText
-      },
-      registerActionClickHandler: (handler) => {
-        this.actionClickHandlers.push(handler)
-      },
-      deregisterChangeHandler: (handler) => {
-        let index = this.actionClickHandlers.indexOf(handler)
-        if (index >= 0) {
-          this.actionClickHandlers.splice(index, 1)
-        }
-      },
+      addClass: (className) => this.$set(this.classes, className, true),
+      removeClass: (className) => this.$delete(this.classes, className),
+      setAriaHidden: () => this.hidden = true,
+      unsetAriaHidden: () => this.hidden = false,
+      setActionAriaHidden: () => this.actionHidden = true,
+      unsetActionAriaHidden: () => this.actionHidden = false,
+      setActionText: (text) => { this.actionText = actionText },
+      setMessageText: (text) => { this.message = message  },
+      setFocus: () => this.$refs.actionButton.focus(),
+      visibilityIsHidden: () => document.hidden,
+      registerCapturedBlurHandler: (handler) => this.$refs.actionButton.addEventListener('blur', handler, true),
+      deregisterCapturedBlurHandler: (handler) => this.$refs.actionButton.removeEventListener('blur', handler, true),
+      registerVisibilityChangeHandler: (handler) => document.addEventListener('visibilitychange', handler),
+      deregisterVisibilityChangeHandler: (handler) => document.removeEventListener('visibilitychange', handler),
+      registerCapturedInteractionHandler: (evt, handler) =>
+        document.body.addEventListener(evt, handler, true),
+      deregisterCapturedInteractionHandler: (evt, handler) =>
+        document.body.removeEventListener(evt, handler, true),
+      registerActionClickHandler: (handler) => this.$refs.actionButton.addEventListener('click', handler),
+      deregisterActionClickHandler: (handler) => this.$refs.actionButton.removeEventListener('click', handler),
       registerTransitionEndHandler: (handler) => {
         this.$refs.root.addEventListener(getCorrectEventName(window, 'transitionend'), handler)
       },