Skip to content

Commit

Permalink
Expandable Notification
Browse files Browse the repository at this point in the history
  • Loading branch information
@adecrown
adecrown committed Mar 27, 2020
1 parent c8e94c6 commit 9610205
Show file tree
Hide file tree
Showing 11 changed files with 558 additions and 253 deletions.
15 changes: 13 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,21 @@ this.$whoosh({
size: {
width: 400,
height: 250
}
},

// (optional) Provide a callback function that gets called when the notification closes
onClose: () =>{}
onClose: () =>{},

// (optional) allows the notification to reveal extra data
expandable:{
data:"New Data" | Login // (required) string or a registered component,
height:600, //(optional) will expand to this height
isComponent:false, //(optional) but required and should be set to true if expandable is to display a component
noBackground: boolean // (optional);
buttonColor: string // (optional);
hideHeader: boolean // (optional);
headerStyle: object // (optional);
},

});
```
Expand Down
14 changes: 9 additions & 5 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
Expand Down
15 changes: 11 additions & 4 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,40 @@
<template>
<div id="app">
<Card
<DefaultCard
:content="content"
:list="list"
:masterDuration="masterDuration"
:size="size"
progressColor="red"
:expandable="expandi"
fill
display="left"
/>
</div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Card from "./components/Whoosh/Card.vue";
import DefaultCard from "./components/Whoosh/DefaultCard.vue";
@Component({
components: {
Card
DefaultCard
}
})
export default class App extends Vue {
pro = 20;
list = [];
masterDuration = 5;
size = {};
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
}
}
</script>

Expand Down
239 changes: 7 additions & 232 deletions src/components/Whoosh/Card.vue
View file
Original file line number Diff line number Diff line change
@@ -1,203 +1,14 @@
<template>
<transition name="slide-fade">
<div
class="card"
:style="mainStyle"
@mouseover="paused = true"
@mouseleave="paused = false"
@click="$emit('click')"
>
<Progress
class="progressCard"
:progress="moveProgress"
v-if="!closeOnClick"
:color="progressColor"
/>
<div class="card-noti">
<div
class="card__status"
:class="{'card__status-left':display==='left'}"
:style="{ 'background-color': statusColor, height: setStatusHeight }"
v-if="!fill"
></div>
<div class="card__body" :class="{'card__body-left':display==='left' && !fill}">
<div
class="card__title"
v-if="content.title"
:style="titleStyle"
>{{ content.title }}</div>
<div
class="card__message"
v-if="content.message"
:style="messageStyle"
>{{ content.message }}</div>
</div>
</div>
</div>
</transition>
<div class="card" :style="mainStyle">
<slot />
</div>
</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 { CardContent } from "../types/index";
import Progress from "./Progress.vue";
@Component({
components: {
Progress
}
})
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class Card extends Vue {
@Prop({ type: Number, default: 0 }) private position!: number;
@Prop({ type: Array, required: true }) private list!: Array<CardContent>;
@Prop({ type: Object, required: true }) private content!: CardContent;
@Prop({ type: Number, required: true }) private masterDuration!: number;
@Prop({ type: Boolean, required: false }) private closeOnClick!: boolean;
@Prop({ type: Boolean, required: false }) private fill!: boolean;
@Prop({ type: String, required: false }) 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;
@Prop({ type: Object, required: true }) private size!: CardContent["size"];
@Prop({ type: String, required: true, validator: (value) => {return value === 'right' || value === 'left'} })
private display!: 'right' | 'left';
// eslint-disable-next-line @typescript-eslint/no-empty-function
timer: any = {
getTimeLeft: () => {
return 0;
}
};
paused = false;
now = 0;
get mainStyle(){
const style = {
'margin-bottom': this.setMargin,
color: this.textColor,
'background-color': this.fill ? this.statusColor : 'white',
width: this.setWidth,
height: this.setHeight,
[this.display]:"10px"
}
return style
}
get moveProgress() {
const total = this.useDuration() * 1000; //1000 = 1 seconds;
return ((total - this.now) / total) * 100;
}
get setMargin() {
let marg = this.position * (DEFAULT_HEIGHT + MARGIN_GAP);
let whatsBelowSize = 0;
const notMe = this.list.filter((x, index) => index < this.position);
whatsBelowSize = notMe.reduce(
(a: any, b: any) => a + (this.add(b) || 0),
0
);
if (whatsBelowSize > 0) {
marg = whatsBelowSize + (MARGIN_GAP * this.position);
}
return this.position > 0 ? marg + "px" : "0px";
}
get setWidth() {
if (this.content.size && this.content.size.width) {
return this.content.size.width + "px";
}
return this.size!.width + "px";
}
get setHeight() {
if (this.content.size && this.content.size.height) {
return this.content.size.height + "px";
}
return this.size!.height + "px";
}
get setStatusHeight() {
if (this.content.size && this.content.size.height) {
return (
this.isProgressVisible(this.content.size.height - MARGIN_GAP) + "px"
);
}
return this.isProgressVisible(this.size!.height - MARGIN_GAP) + "px";
}
get statusColor() {
if (isCustomStatusesDefined(this.content.statuses)) {
const isCustom = this.content.statuses!.find(
element => element.name === this.content.status
);
if (isCustom) {
return isCustom.color;
}
}
switch (this.content.status) {
case status.success:
return "#4caf50ad";
case status.warning:
return "#00bcd4b0";
case status.error:
return "#ff0000";
default:
return "#f7a104b5";
}
}
@Emit()
close() {
return this.content;
}
mounted() {
if (!this.closeOnClick) {
this.startTimer();
}
}
@Watch("paused")
pausedChanged(newVal: boolean, old: boolean) {
if (!this.closeOnClick) {
if (newVal) {
this.timer.pause();
} else {
this.timer.resume();
}
}
}
useDuration(): number {
return this.content.duration ? this.content.duration : this.masterDuration;
}
isProgressVisible(height: number) {
return this.closeOnClick ? height : height - 5;
}
startTimer() {
this.timer = new TimerCup(() => {
this.close();
}, this.useDuration() * 1000);
this.getSetTimeOutTimeLeft();
}
getSetTimeOutTimeLeft() {
const setIntervalTRef = setInterval(() => {
this.now = this.timer.getTimeLeft();
if (this.now <= 0) {
clearInterval(setIntervalTRef);
}
}, 17);
}
add(whatsBelow: CardContent) {
let whatsBelowSize: number;
whatsBelowSize = this.size!.height;
whatsBelow.size && whatsBelow.size.height
? (whatsBelowSize = whatsBelow.size.height)
: null;
return whatsBelowSize;
}
@Prop({ type: Object, required: false }) private mainStyle!: object;
}
</script>

Expand All @@ -211,42 +22,6 @@ export default class Card extends Vue {
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
background-color: white;
display: inline-block;
}
.card__status {
width: 10px;
height: 190px;
border-radius: 20px;
margin-top: 5px;
margin-left: 5px;
}
.card__status-left {
position: absolute;
right: 5px;
}
.card__body {
width: 100%;
margin: 10px;
text-align: left;
font-weight: 500;
}
.card__body-left{
margin-right: 20px
}
.card__title {
border-bottom: #0000001a 1px solid;
padding-bottom: 8px;
}
.card__message {
padding-top: 10px;
}
.progressCard {
position: relative;
float: left;
}
.card-noti {
display: flex;
position: relative;
float: left;
width: 100%;
z-index: 9999;
}
</style>
Loading

0 comments on commit 9610205

Please sign in to comment.