add open/close methods

Author: marcosmoura

docs/src/pages/components/Snackbar.vue

@@ -28,32 +28,32 @@
 
             <md-snackbar md-position="bottom center" ref="snackbar1">
               <span>Connection timeout. Showing limited messages.</span>
-              <md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar1.close()">Retry</md-button>
+              <md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar1.close()">Retry</md-button>
             </md-snackbar>
 
             <md-snackbar md-position="bottom left" ref="snackbar2">
               <span>Connection timeout. Showing limited messages.</span>
-              <md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar2.close()">Retry</md-button>
+              <md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar2.close()">Retry</md-button>
             </md-snackbar>
 
             <md-snackbar md-position="bottom right" ref="snackbar3">
               <span>Connection timeout. Showing limited messages.</span>
-              <md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar3.close()">Retry</md-button>
+              <md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar3.close()">Retry</md-button>
             </md-snackbar>
 
             <md-snackbar md-position="top center" ref="snackbar4">
               <span>Connection timeout. Showing limited messages.</span>
-              <md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar4.close()">Retry</md-button>
+              <md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar4.close()">Retry</md-button>
             </md-snackbar>
 
             <md-snackbar md-position="top left" ref="snackbar5">
               <span>Connection timeout. Showing limited messages.</span>
-              <md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar5.close()">Retry</md-button>
+              <md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar5.close()">Retry</md-button>
             </md-snackbar>
 
             <md-snackbar md-position="top right" ref="snackbar6">
               <span>Connection timeout. Showing limited messages.</span>
-              <md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar6.close()">Retry</md-button>
+              <md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar6.close()">Retry</md-button>
             </md-snackbar>
           </div>
 

docs/src/routes.js

@@ -21,7 +21,7 @@ const Menu = (resolve) => require(['./pages/components/Menu'], resolve);
 const Radio = (resolve) => require(['./pages/components/Radio'], resolve);
 const Select = (resolve) => require(['./pages/components/Select'], resolve);
 const Sidenav = (resolve) => require(['./pages/components/Sidenav'], resolve);
-/*const Snackbar = (resolve) => require(['./pages/components/Snackbar'], resolve);*/
+const Snackbar = (resolve) => require(['./pages/components/Snackbar'], resolve);
 const Spinner = (resolve) => require(['./pages/components/Spinner'], resolve);
 const Subheader = (resolve) => require(['./pages/components/Subheader'], resolve);
 const Switch = (resolve) => require(['./pages/components/Switch'], resolve);
@@ -143,11 +143,11 @@ const components = [
     name: 'components:sidenav',
     component: Sidenav
   },
-/*  {
+  {
     path: '/components/snackbar',
     name: 'components:snackbar',
     component: Snackbar
-  }, */
+  },
   {
     path: '/components/spinner',
     name: 'components:spinner',

src/components/mdSnackbar/manager.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+
+const manager = new Vue({
+  data() {
+    return {
+      current: null
+    };
+  }
+});
+
+export default manager;

src/components/mdSnackbar/mdSnackbar.scss

@@ -1,6 +1,8 @@
 @import '../../core/stylesheets/variables.scss';
+@import '../../core/stylesheets/mixins.scss';
 
 .md-snackbar {
+  width: auto;
   min-width: 288px;
   max-width: 568px;
   min-height: 48px;
@@ -14,6 +16,11 @@
   color: #fff;
   font-size: 14px;
 
+  @include layout-xsmall {
+    max-width: 100%;
+    border-radius: 0;
+  }
+
   &.md-position-bottom-center {
     bottom: 0;
     left: 50%;

src/components/mdSnackbar/mdSnackbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="md-snackbar" :class="classes">
+  <div class="md-snackbar" :class="classes" :id="snackbarId">
     <div class="md-snackbar-content">
       <slot></slot>
     </div>
@@ -9,8 +9,13 @@
 <style lang="scss" src="./mdSnackbar.scss"></style>
 
 <script>
+  import uniqueId from '../../core/utils/uniqueId';
+  import transitionEndEventName from '../../core/utils/transitionEndEventName';
+  import manager from './manager';
+
   export default {
     props: {
+      id: [String, Number],
       mdPosition: {
         type: String,
         default: 'bottom center'
@@ -22,9 +27,11 @@
     },
     data() {
       return {
+        snackbarId: this.id || 'snackbar-' + uniqueId(),
         active: false,
         rootElement: {},
-        snackbarElement: {}
+        snackbarElement: {},
+        closeTimeout: null
       };
     },
     computed: {
@@ -40,22 +47,43 @@
     },
     methods: {
       open() {
+        if (manager.current) {
+          manager.current.close();
+        }
+
+        manager.current = this;
+        this.rootElement.appendChild(this.snackbarElement);
+        window.getComputedStyle(this.snackbarElement).backgroundColor;
         this.active = true;
         this.$emit('open');
+        //this.closeTimeout = window.setTimeout(this.close, this.mdDuration);
       },
       close() {
+        const removeElement = () => {
+          this.snackbarElement.removeEventListener(transitionEndEventName, removeElement);
+
+          if (this.rootElement.contains(this.snackbarElement)) {
+            this.rootElement.removeChild(this.snackbarElement);
+          }
+        };
+
+        manager.current = null;
         this.active = false;
         this.$emit('close');
+        this.snackbarElement.removeEventListener(transitionEndEventName, removeElement);
+        this.snackbarElement.addEventListener(transitionEndEventName, removeElement);
+        window.clearTimeout(this.closeTimeout);
       }
     },
     mounted() {
       this.$nextTick(() => {
         this.rootElement = this.$root.$el;
         this.snackbarElement = this.$el;
+        this.snackbarElement.parentNode.removeChild(this.snackbarElement);
       });
     },
     beforeDestroy() {
-
+      this.close();
     }
   };
 </script>

src/index.js

@@ -16,7 +16,7 @@ import MdMenu from './components/mdMenu';
 import MdRadio from './components/mdRadio';
 import MdSelect from './components/mdSelect';
 import MdSidenav from './components/mdSidenav';
-/*import MdSnackbar from './components/mdSnackbar';*/
+import MdSnackbar from './components/mdSnackbar';
 import MdSpinner from './components/mdSpinner';
 import MdSubheader from './components/mdSubheader';
 import MdSwitch from './components/mdSwitch';
@@ -45,7 +45,7 @@ const options = {
   MdRadio,
   MdSelect,
   MdSidenav,
-  /*MdSnackbar,*/
+  MdSnackbar,
   MdSpinner,
   MdSubheader,
   MdSwitch,