Mobile View

README.md

@@ -89,7 +89,9 @@ All props below are optional.
 | size          | Object  | {width:500,height:210} | use it to set your prefered width and height                           |
 | messageStyle  | Object  |                        | give a custom style to the message section                             |
 | titleStyle    | Object  |                        | give a custom style to the title section                               |
-|display| left or right | right| controls which side the notification should come out from |
+| display | left or right | right| controls which side the notification should come out from |
+| mobileDisplay | top or bottom | top | controls which position the notification should be displayed on mobile
+| isResponsive |  Boolean | true | handles responsiveness of notifications. Set it to false if you don't want the mobile view.
 
 #### Custom Status
 

src/App.vue

@@ -25,16 +25,16 @@ export default class App extends Vue {
   pro = 20;
   list = [];
   masterDuration = 5;
-  size = {height:200};
+  size = { height: 200 };
   content = {
     title: "My name is go sgi sisd sidsoiosdvosdin wefewuifewfiun ",
     message: "This is my message ",
     status: "error"
   };
-  expandi={
-    data:"Just us",
-    noBackground:true
-  }
+  expandi = {
+    data: "Just us",
+    noBackground: true
+  };
 }
 </script>
 

src/components/Whoosh/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card" :style="mainStyle">
+  <div class="card" :style="mainStyle" @click="$emit('click')" >
     <slot />
   </div>
 </template>

src/components/Whoosh/DefaultCard.vue

@@ -1,5 +1,18 @@
 <template>
   <transition name="slide-fade">
+    <Mobile 
+    v-if="isMobile"
+    @click="$emit('click')" 
+    :textColor="textColor" 
+    :content="content" 
+    :statusColor="statusColor"
+    :position="position"
+    :closeOnClick="closeOnClick"
+    :progressColor="progressColor"
+    :moveProgress="moveProgress"
+    :mobileDisplay="mobileDisplay"
+  />
+    <div v-else>
     <ExpandedCard 
       v-if="expand" 
       @expandDefault="expandDefault" 
@@ -48,27 +61,30 @@
         </div>
       </div>
     </Card>
+    </div>
   </transition>
 </template>
 
 <script lang="ts">
 import { Component, Emit, Prop, Vue, Watch } from "vue-property-decorator";
-import { isCustomStatusesDefined, TimerCup } from "./Util";
-import { DEFAULT_HEIGHT, MARGIN_GAP, status } from "./Constant";
+import { isCustomStatusesDefined, TimerCup } from "./helpers/Util";
+import { DEFAULT_HEIGHT, MARGIN_GAP, status } from "./helpers/Constant";
 import { CardContent,expandData } from "../types/index";
 import Progress from "./Progress.vue";
 import More from "./More.vue";
 import Card from "./Card.vue";
 import ExpandedCard from "./ExpandedCard.vue";
 import Status from "./Status.vue";
+import Mobile from "./Mobile.vue";
 
 @Component({
   components: {
     Progress,
     Card,
     ExpandedCard,
     More,
-    Status
+    Status,
+    Mobile
   }
 })
 export default class DefaultCard extends Vue {
@@ -92,6 +108,9 @@ export default class DefaultCard extends Vue {
     }
   })
   private display!: "right" | "left";
+  @Prop({ type: Boolean, required: false, default:false}) private isMobile!: boolean;
+  @Prop({ type: String, required: false }) private mobileDisplay!: string;
+  
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   timer: any = {
@@ -202,6 +221,7 @@ export default class DefaultCard extends Vue {
       }
     }
   }
+
   useDuration(): number {
     return this.content.duration ? this.content.duration : this.masterDuration;
   }
@@ -276,5 +296,6 @@ export default class DefaultCard extends Vue {
   position: relative;
   float: left;
   width: 100%;
+  height: 100%;
 }
 </style>

src/components/Whoosh/Mobile.vue

@@ -0,0 +1,73 @@
+<template>
+  <Card :mainStyle="mainStyle" @click="$emit('click')">
+    <Progress
+      :class="{'mobile_progress': mobileDisplay === 'bottom'}"
+      :progress="moveProgress"
+      v-if="!closeOnClick"
+      :color="progressColor"
+    />
+    <div class="mobile">
+      <div class="mobile_title" v-if="content.title">{{content.title}}</div>
+      <div 
+        class="mobile_message" 
+        :style="{'padding-top':content.title ? '10px': 0 }" 
+        v-if="content.message"
+      >
+        {{content.message}}
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script lang="ts">
+import Card from "./Card.vue"
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { CardContent } from "../types/index";
+import Progress from "./Progress.vue";
+
+@Component({
+  components: {
+    Card,
+    Progress
+  }
+})
+export default class Mobile extends Vue {
+  @Prop({ type: Object, required: true }) private content!: CardContent;
+  @Prop({ type: String, required: false }) private textColor!: string;
+  @Prop({ type: String, required: false }) private statusColor!: string;
+  @Prop({ type: Boolean, required: false }) private closeOnClick!: boolean;
+  @Prop({ type: String, required: false }) private progressColor!: string;
+  @Prop({ type: Number, required: false }) private moveProgress!: number;
+  @Prop({ type: String, required: false }) private mobileDisplay!: string;
+
+   get mainStyle() {
+    const style: any = {
+      color: this.textColor,
+      "background-color": this.statusColor,
+      width: "100%",
+      height: "max-content",
+      right:0
+    };
+    this.mobileDisplay === "bottom" ? style.bottom = 0 : style.top = 0;
+    return style;
+  }
+
+}
+</script>
+
+<style scoped>
+.mobile{
+  text-align: left;
+  padding: 10px;
+  font-family: sans-serif;
+}
+.mobile_title {
+  font-weight: bold;
+}
+.mobile_message {
+}
+.mobile_progress{
+  position: absolute;
+  bottom: 0;
+}
+</style>

src/components/Whoosh/Whoosh.vue

@@ -20,18 +20,22 @@
         :display="display"
         :expandable="whoosh.expandable"
         @expand="removeOthers($event, whoosh)"
+        :isMobile="displayMobile"
+        :mobileDisplay="mobileDisplay"
       />
     </transition-group>
   </div>
 </template>
 
 <script lang="ts">
 import DefaultCard from "./DefaultCard.vue";
-import { events } from "./events";
-import { generateId } from "./Util";
-import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from "./Constant";
+import { events } from "./helpers/events";
+import { generateId } from "./helpers/Util";
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from "./helpers/Constant";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { CardContent } from "../types/index";
+import { isMobile } from "./helpers/Screen"
+
 @Component({
   components: {
     DefaultCard
@@ -43,12 +47,13 @@ export default class Whoosh extends Vue {
   pendingWhooshList: Array<CardContent> = [];
   activatePending = false;
   id = 0;
+  displayMobile=false;
 
   @Prop({ type: Number, required: false, default: 5 })
   private duration!: number;
   @Prop({ type: Boolean, default: false }) private closeOnClick!: boolean;
-  @Prop({ type: Boolean, default: false }) private fill!: boolean;
-  @Prop({ type: String, default: "black" }) private textColor!: string;
+  @Prop({ type: Boolean, required:false, default: false }) private fill!: boolean;
+  @Prop({ type: String, required:false, default: "black" }) private textColor!: string;
   @Prop({ type: Object, required: false }) private messageStyle!: object;
   @Prop({ type: Object, required: false }) private titleStyle!: object;
   @Prop({ type: String, required: false }) private progressColor!: string;
@@ -67,21 +72,46 @@ export default class Whoosh extends Vue {
     }
   })
   private display!: "right" | "left";
+  @Prop({
+    type: String,
+    required: false,
+    default: "top",
+    validator: value => {
+      return value === "top" || value === "bottom";
+    }
+  })
+  private mobileDisplay!: "top" | "bottom";
+  @Prop({ type: Boolean,required:false, default: true }) private isResponsive!: boolean;
 
   mounted() {
+    if(this.isResponsive){
+      this.displayMobile = isMobile();
+      window.addEventListener('resize',this.displayMobileScreen);
+    }
     events.$on("startWhoosh", this.makeAWhooshList);
   }
 
+  beforeDestroy(){
+    if(this.isResponsive) window.removeEventListener('resize',this.displayMobileScreen);
+  }
+
+  displayMobileScreen(){
+    this.displayMobile = isMobile();
+  }
+
   makeAWhooshList(event: CardContent) {
     event.id = generateId();
-    this.activatePending
-      ? this.pendingWhooshList.push(event)
-      : this.whooshList.push(event);
+    (this.activatePending || this.displayMobile) && this.whooshList.length
+    ? this.pendingWhooshList.push(event)
+    : this.whooshList.push(event);
   }
 
   removeCard(event: CardContent) {
     this.whooshList = this.whooshList.filter(x => x.id !== event.id);
     event.onClose ? event.onClose() : null;
+    if(this.displayMobile){
+      this.whooshList = [...this.pendingWhooshList.splice(0, 1)];
+    }
   }
 
   removeOthers(expanded: boolean, content: CardContent) {

src/components/Whoosh/helpers/Screen.ts

@@ -0,0 +1,9 @@
+export const screenWidth = screen.width;
+export const isActualMobile = /iPhone|iPad|iPod|Android|BlackBerry|Windows Phone|webOS/i.test(
+  navigator.userAgent
+);
+
+export const isMobile = () => {
+  const mq = window.matchMedia("(max-width: 700px)");
+  return isActualMobile || mq.matches;
+};

src/components/Whoosh/Util.ts → src/components/Whoosh/helpers/Util.ts

@@ -1,4 +1,4 @@
-import {status} from '../types/index'
+import {status} from '../../types/index'
 export const generateId = (i => () => i++)(0)
 
 export const isCustomStatusesDefined = (statuses?: Array<status>) =>{

src/components/index.ts

@@ -1,6 +1,6 @@
 import Whoosh from "./Whoosh/Whoosh.vue";
-import { events } from "./Whoosh/events";
-import { isCustomStatusesDefined } from "./Whoosh/Util";
+import { events } from "./Whoosh/helpers/events";
+import { isCustomStatusesDefined } from "./Whoosh/helpers/Util";
 import { CardContent, WhooshOptions } from "./types/index";
 import Card from "./Whoosh/Card.vue";