Skip to content

Commit

Permalink
formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@adecrown
adecrown committed Feb 16, 2020
1 parent a6d41c8 commit f080713
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 146 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
},
"release-it": {
"hooks": {
"before:bump": "source app-env",
"after:bump": "npm run build-bundle"
},
"git": {
Expand Down
176 changes: 94 additions & 82 deletions src/components/Whoosh/Card.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,131 +2,144 @@
<transition name="slide-fade">
<div
class="card"
:style="{'margin-bottom':setMargin,'color':textColor,'background-color': fill ? statusColor : white,width:setWidth,height:setHeight}"
:style="{
'margin-bottom': setMargin,
color: textColor,
'background-color': fill ? statusColor : white,
width: setWidth,
height: setHeight
}"
@mouseover="paused = true"
@mouseleave="paused = false"
@click="$emit('click')"
>
<div
class="card__status"
:style="{'background-color': statusColor,height:setStatusHeight}"
:style="{ 'background-color': statusColor, height: setStatusHeight }"
v-if="!fill"
></div>
<div class="card__body">
<div class="card__title" v-if="content.title">{{content.title}}</div>
<div class="card__message" v-if="content.message">{{content.message}}</div>
<div class="card__title" v-if="content.title">{{ content.title }}</div>
<div class="card__message" v-if="content.message">
{{ content.message }}
</div>
</div>
</div>
</transition>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import { TimerCup, isCustomStatusesDefined } from './Util';
import { status, DEFAULT_HEIGHT,MARGIN_GAP } from './Constant';
import {CardContent,TimerType} from '../types/index'
import { TimerCup, isCustomStatusesDefined } from "./Util";
import { status, DEFAULT_HEIGHT, MARGIN_GAP } from "./Constant";
import { CardContent, TimerType } from "../types/index";
@Component
export default class Card extends Vue {
@Prop({ default: 0 }) private position!: number ;
@Prop({ required:true}) private list!: Array<CardContent>;
@Prop({ required: true }) private content!: CardContent ;
@Prop({ required: true }) private masterDuration!: number;
@Prop({ required: false }) private closeOnClick!: boolean ;
@Prop({ default: 0 }) private position!: number;
@Prop({ required: true }) private list!: Array<CardContent>;
@Prop({ required: true }) private content!: CardContent;
@Prop({ required: true }) private masterDuration!: number;
@Prop({ required: false }) private closeOnClick!: boolean;
@Prop({ required: false }) private fill!: boolean;
@Prop({ required: false }) private textColor!: string;
@Prop({ required: true }) private size!: CardContent["size"];
timer: any = {};
paused = false;
get heightWasDefined(){
return this.content.size && this.content.size.height
}
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
}
return this.position > 0 ? marg + 'px' : '0px'
get heightWasDefined() {
return this.content.size && this.content.size.height;
}
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;
}
get setWidth(){
if(this.content.size && this.content.size.width){
return this.content.size.width+'px'
}
return this.size!.width+'px'
return this.position > 0 ? marg + "px" : "0px";
}
get setWidth() {
if (this.content.size && this.content.size.width) {
return this.content.size.width + "px";
}
get setHeight(){
if(this.content.size && this.content.size.height){
return this.content.size.height+'px'
}
return this.size!.height+'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.content.size.height - MARGIN_GAP + "px";
}
get setStatusHeight(){
if(this.content.size && this.content.size.height){
return (this.content.size.height - MARGIN_GAP)+'px'
}
return (this.size!.height - MARGIN_GAP)+'px'
return this.size!.height - MARGIN_GAP + "px";
}
get statusColor() {
if (isCustomStatusesDefined(this.content.statuses)) {
return this.content.statuses!.find(
element => element.name === this.content.status
)!.color;
}
get statusColor() {
if(isCustomStatusesDefined(this.content.statuses)){
return this.content.statuses!.find(element => element.name === this.content.status)!.color;
}
switch (this.content.status) {
case status.success:
return "#4caf50ad";
case status.warning:
return "#00bcd4b0";
case status.error:
return "#ff0000";
default:
return "#f7a104b5";
}
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
return this.content;
}
mounted() {
if (!this.closeOnClick) {
this.startTimer()
this.startTimer();
}
}
@Watch('paused')
pausedChanged(newVal: boolean, old: boolean) {
if (!this.closeOnClick) {
if (newVal) {
this.timer.pause()
} else {
this.timer.resume()
}
@Watch("paused")
pausedChanged(newVal: boolean, old: boolean) {
if (!this.closeOnClick) {
if (newVal) {
this.timer.pause();
} else {
this.timer.resume();
}
}
startTimer() {
const useDuration = this.content.duration ? this.content.duration : this.masterDuration;
this.timer = new TimerCup(() => {
this.close();
}, useDuration * 1000);
}
}
add(whatsBelow: CardContent){
let whatsBelowSize = 0;
whatsBelowSize = this.size!.height;
whatsBelow.size && whatsBelow.size.height ? whatsBelowSize = whatsBelow.size.height : null
return whatsBelowSize
}
startTimer() {
const useDuration = this.content.duration
? this.content.duration
: this.masterDuration;
this.timer = new TimerCup(() => {
this.close();
}, useDuration * 1000);
}
add(whatsBelow: CardContent) {
let whatsBelowSize = 0;
whatsBelowSize = this.size!.height;
whatsBelow.size && whatsBelow.size.height
? (whatsBelowSize = whatsBelow.size.height)
: null;
return whatsBelowSize;
}
}
</script>

Expand Down Expand Up @@ -162,4 +175,3 @@ export default class Card extends Vue {
padding-top: 10px;
}
</style>

47 changes: 26 additions & 21 deletions src/components/Whoosh/Whoosh.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<transition-group name="card">
<Card
v-for="(whoosh,index) in whooshList"
v-for="(whoosh, index) in whooshList"
:content="whoosh"
:key="whoosh.id"
:position="index"
Expand All @@ -20,54 +20,59 @@
</template>

<script lang="ts">
import Card from './Card.vue'
import { events } from './events'
import { generateId } from './Util'
import {DEFAULT_WIDTH,DEFAULT_HEIGHT} from './Constant'
import Card from "./Card.vue";
import { events } from "./events";
import { generateId } from "./Util";
import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from "./Constant";
import { Component, Prop, Vue } from "vue-property-decorator";
import {CardContent} from '../types/index' ;
import { CardContent } from "../types/index";
@Component({
components: {
Card
}
})
export default class Whoosh extends Vue{
export default class Whoosh extends Vue {
show = false;
whooshList: Array<CardContent> = [];
id = 0;
@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:Object, required: false ,default:() => ({width:DEFAULT_WIDTH,height:DEFAULT_HEIGHT})}) private size!: CardContent["size"];
@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: Object,
required: false,
default: () => ({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT })
})
private size!: CardContent["size"];
mounted() {
events.$on('startWhoosh', this.makeAWhooshList);
events.$on("startWhoosh", this.makeAWhooshList);
}
makeAWhooshList(event: CardContent) {
event.id = generateId();
this.whooshList.push(event)
this.whooshList.push(event);
}
removeCard(event: CardContent) {
this.whooshList = this.whooshList.filter(x => x.id !== event.id)
this.whooshList = this.whooshList.filter(x => x.id !== event.id);
}
actionOnClick(data: CardContent) {
if (this.closeOnClick) {
this.removeCard(data)
this.removeCard(data);
}
}
}
</script>

<style scoped>
.card {
transition: all 0.5s;
}
.card-enter, .card-leave-to {
.card-enter,
.card-leave-to {
opacity: 0;
transform: scale(0);
}
Expand All @@ -79,4 +84,4 @@ export default class Whoosh extends Vue{
opacity: 1;
transition: all 0.5s;
}
</style>
</style>
39 changes: 17 additions & 22 deletions src/components/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,26 @@
import ButtonField from './ButtonField.vue'
import Whoosh from './Whoosh/Whoosh.vue'
import {
events
} from './Whoosh/events'
import {isCustomStatusesDefined} from './Whoosh/Util'
import {CardContent,WhooshOptions} from './types/index'
import ButtonField from "./ButtonField.vue";
import Whoosh from "./Whoosh/Whoosh.vue";
import { events } from "./Whoosh/events";
import { isCustomStatusesDefined } from "./Whoosh/Util";
import { CardContent, WhooshOptions } from "./types/index";
const WhooshOn = {
install(Vue: any, options: WhooshOptions = {}) {
//this.params = args

Vue.component('ButtonField', ButtonField)
Vue.component('Whoosh', Whoosh)

Vue.component("ButtonField", ButtonField);
Vue.component("Whoosh", Whoosh);

Vue.prototype.$whoosh = (params: CardContent) => {
isCustomStatusesDefined(options.statuses) ? params.statuses = options.statuses : null;
events.$emit('startWhoosh', params)
}
isCustomStatusesDefined(options.statuses)
? (params.statuses = options.statuses)
: null;
events.$emit("startWhoosh", params);
};
}
}
};

if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(WhooshOn)
if (typeof window !== "undefined" && window.Vue) {
window.Vue.use(WhooshOn);
}

export default WhooshOn
export {
ButtonField,
Whoosh
}
export default WhooshOn;
export { ButtonField, Whoosh };
Loading

0 comments on commit f080713

Please sign in to comment.