Merge pull request #3 from Ade94/cardswork

close on click prop

src/components/HelloWorld.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Card :content="content"/>
+    <Card :content="content" />
   </div>
 </template>
 
@@ -12,11 +12,13 @@ export default {
   props: {
     msg: String
   },
-  data(){
-    return{
-      content:{title:"My name is "+this.id,
-               message:"This is my message "
-           }
+  data() {
+    return {
+      content: {
+        title: "My name is go sgi sisd sidsoiosdvosdin wefewuifewfiun " + this.id,
+        message: "This is my message ",
+        status: 'error'
+      }
     }
   }
 }

src/components/Whoosh/Card.vue

@@ -1,72 +1,105 @@
 <template>
-<transition name="slide-fade">
-  <div
-    class="card"
-    :style="{'margin-bottom':setMargin}"
-    @mouseover="paused = true"
-    @mouseleave="paused = false"
-  >
-    <div class="card__status"></div>
-    <div class="card__title">{{content.title}}</div>
-    <div class="card__message">{{content.message}}</div>
-  </div>
-</transition>
+  <transition name="slide-fade">
+    <div
+      class="card"
+      :style="{'margin-bottom':setMargin}"
+      @mouseover="paused = true"
+      @mouseleave="paused = false"
+      @click="$emit('click')"
+    >
+      <div
+        class="card__status"
+        :style="{'background-color': statusColor}"
+      ></div>
+      <div class="card__body">
+        <div class="card__title">{{content.title}}</div>
+        <div class="card__message">{{content.message}}</div>
+      </div>
+    </div>
+  </transition>
 </template>
 
 <script>
-import {TimerCup} from './Util'
+import { TimerCup } from './Util'
+import { status } from './Constant'
+import { thistle } from 'color-name';
 export default {
   props: {
     position: {
       type: Number,
       required: false,
       default: 0
     },
-    content:{
+    content: {
       type: Object,
       required: true
+    },
+    masterDuration: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    closeOnClick: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
     setMargin() {
       const marg = this.position * 210
       return this.position > 0 ? marg + 'px' : '0px'
+    },
+    statusColor() {
+      switch (this.content.status) {
+        case status.success:
+          return "green";
+        case status.warning:
+          return "blue";
+        case status.error:
+          return "red";
+        default:
+          return "yellow";
+      }
     }
   },
-  data(){
-    return{
-      timer:{},
-      paused:false
+  data() {
+    return {
+      timer: {},
+      paused: false,
+      duration: 5, // 5 seconds
     }
   },
-  mounted(){
+  mounted() {
     console.log(this.content)
-    this.close()
+    if (!this.closeOnClick) {
+      this.close()
+    }
   },
-  watch:{
-    paused(newVal,old){
-      if(newVal){
-        console.log('pausedW')
-        this.timer.pause()
-      }else{
-        console.log('resumeW')
-        this.timer.resume()
+  watch: {
+    paused(newVal, old) {
+      if (!this.closeOnClick) {
+        if (newVal) {
+          console.log('pausedW')
+          this.timer.pause()
+        } else {
+          console.log('resumeW')
+          this.timer.resume()
+        }
       }
-
     }
   },
-  methods:{
-    close(){
-      const vThis = this;
-      this.timer = new TimerCup(function() {
-       console.log(vThis.content)
-        vThis.$emit('close',vThis.content)
-        }, 2000);
-     /*  setTimeout(function() { 
-        console.log(vThis.content)
-        vThis.$emit('close',vThis.content)
-      }, 5000); */
-    }
+  methods: {
+    close() {
+      const useDuration = this.content.duration ?
+        this.content.duration
+        :
+        this.masterDuration > 0 ? this.masterDuration : this.duration
+      console.log(useDuration);
+      this.timer = new TimerCup(() => {
+        this.$emit('close', this.content);
+      }, useDuration * 1000);
+    },
   }
 }
 </script>
@@ -80,12 +113,26 @@ export default {
   right: 10px;
   box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.07);
   background-color: white;
+  display: flex;
 }
 .card__status {
-  background-color: green;
   width: 10px;
   height: 190px;
   border-radius: 20px;
+  margin-top: 5px;
+  margin-left: 5px;
+}
+.card__body {
+  width: 100%;
+  margin: 10px;
+  text-align: left;
+}
+.card__title {
+  border-bottom: black 1px solid;
+  padding-bottom: 8px;
+}
+.card__message {
+  padding-top: 10px;
 }
 </style>
 

src/components/Whoosh/Constant.js

@@ -0,0 +1,5 @@
+export const status = {
+  success: "success",
+  warning: "warning",
+  error: "error"
+}

src/components/Whoosh/Whoosh.vue

@@ -1,29 +1,44 @@
 <template>
   <div>
     <transition-group name="card">
-    <Card
-      v-for="(whoosh,index) in whooshList"
-      :content="whoosh"
-      :key="whoosh.id"
-      :position="index"
-      @close="removeCard"
-    />
+      <Card
+        v-for="(whoosh,index) in whooshList"
+        :content="whoosh"
+        :key="whoosh.id"
+        :position="index"
+        @close="removeCard"
+        :masterDuration="duration"
+        :closeOnClick="closeOnClick"
+        @click="actionOnClick(whoosh)"
+      />
     </transition-group>
   </div>
 </template>
 
 <script>
 import Card from './Card'
 import { events } from './events.js'
-import {generateId} from './Util'
+import { generateId } from './Util'
 export default {
   name: 'Whoosh',
   components: { Card },
   data() {
     return {
       show: false,
       whooshList: [],
-      id:0
+      id: 0
+    }
+  },
+  props: {
+    duration: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    closeOnClick: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   mounted() {
@@ -35,22 +50,22 @@ export default {
       event.id = generateId();
       this.whooshList.push(event)
     },
-    removeCard(event){
+    removeCard(event) {
       console.log(event)
       this.whooshList = this.whooshList.filter(x => x.id !== event.id)
-      //this.whooshList.splice(event,1)
-    
+    },
+    actionOnClick(data) {
+      if (this.closeOnClick) {
+        this.removeCard(data)
+      }
     }
   }
 }
 </script>
 
 <style scoped>
-
-
 .card {
   transition: all 0.5s;
-
 }
 .card-enter, .card-leave-to
 /* .card-leave-active for <2.1.8 */ {
@@ -62,10 +77,6 @@ export default {
   transform: scale(1);
 }
 
-.card-leave-active {
-  /*position: absolute;*/
-}
-
 .card-move {
   opacity: 1;
   transition: all 0.5s;