Sharkey/src/web/app/common/views/components/reaction-picker.vue

189 lines
5.5 KiB
Vue
Raw Normal View History

2018-02-07 08:16:01 +02:00
<template>
<div>
<div class="backdrop" ref="backdrop" @click="close"></div>
2018-02-08 07:03:43 +02:00
<div class="popover" :class="{ compact }" ref="popover">
2018-02-07 08:34:08 +02:00
<p v-if="!compact">{{ title }}</p>
2018-02-07 08:16:01 +02:00
<div>
<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button>
<button @click="react('hmm')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="4" title="%i18n:common.reactions.hmm%"><mk-reaction-icon reaction='hmm'/></button>
<button @click="react('surprise')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="5" title="%i18n:common.reactions.surprise%"><mk-reaction-icon reaction='surprise'/></button>
<button @click="react('congrats')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="6" title="%i18n:common.reactions.congrats%"><mk-reaction-icon reaction='congrats'/></button>
<button @click="react('angry')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="4" title="%i18n:common.reactions.angry%"><mk-reaction-icon reaction='angry'/></button>
<button @click="react('confused')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="5" title="%i18n:common.reactions.confused%"><mk-reaction-icon reaction='confused'/></button>
<button @click="react('pudding')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="6" title="%i18n:common.reactions.pudding%"><mk-reaction-icon reaction='pudding'/></button>
</div>
</div>
</div>
</template>
2018-02-07 11:47:29 +02:00
<script lang="typescript">
2018-02-07 08:16:01 +02:00
import anime from 'animejs';
import api from '../scripts/api';
2018-02-08 07:25:49 +02:00
import MkReactionIcon from './reaction-icon.vue';
2018-02-07 08:16:01 +02:00
2018-02-07 08:34:08 +02:00
const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
2018-02-07 08:16:01 +02:00
export default {
2018-02-08 07:25:49 +02:00
components: {
MkReactionIcon
},
2018-02-07 11:17:59 +02:00
props: ['post', 'source', 'compact', 'cb'],
2018-02-08 07:25:49 +02:00
data() {
return {
title: placeholder
};
2018-02-07 08:34:08 +02:00
},
2018-02-08 07:25:49 +02:00
created() {
2018-02-07 11:17:59 +02:00
const rect = this.source.getBoundingClientRect();
const width = this.$refs.popover.offsetWidth;
const height = this.$refs.popover.offsetHeight;
if (this.compact) {
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
this.$refs.popover.style.left = (x - (width / 2)) + 'px';
this.$refs.popover.style.top = (y - (height / 2)) + 'px';
} else {
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
this.$refs.popover.style.left = (x - (width / 2)) + 'px';
this.$refs.popover.style.top = y + 'px';
}
anime({
targets: this.$refs.backdrop,
opacity: 1,
duration: 100,
easing: 'linear'
});
anime({
targets: this.$refs.popover,
opacity: 1,
scale: [0.5, 1],
duration: 500
});
},
2018-02-07 08:16:01 +02:00
methods: {
2018-02-08 07:25:49 +02:00
react(reaction) {
2018-02-07 08:16:01 +02:00
api('posts/reactions/create', {
post_id: this.post.id,
reaction: reaction
}).then(() => {
if (this.cb) this.cb();
this.$destroy();
});
2018-02-07 08:34:08 +02:00
},
2018-02-08 07:25:49 +02:00
onMouseover(e) {
2018-02-07 08:34:08 +02:00
this.title = e.target.title;
},
2018-02-08 07:25:49 +02:00
onMouseout(e) {
2018-02-07 08:34:08 +02:00
this.title = placeholder;
2018-02-07 11:21:37 +02:00
},
2018-02-08 07:25:49 +02:00
close() {
2018-02-07 11:21:37 +02:00
this.$refs.backdrop.style.pointerEvents = 'none';
anime({
targets: this.$refs.backdrop,
opacity: 0,
duration: 200,
easing: 'linear'
});
this.$refs.popover.style.pointerEvents = 'none';
anime({
targets: this.$refs.popover,
opacity: 0,
scale: 0.5,
duration: 200,
easing: 'easeInBack',
complete: () => this.$destroy()
});
2018-02-07 08:16:01 +02:00
}
}
};
</script>
2018-02-07 11:30:17 +02:00
<style lang="stylus" scoped>
$border-color = rgba(27, 31, 35, 0.15)
:scope
display block
position initial
> .backdrop
position fixed
top 0
left 0
z-index 10000
width 100%
height 100%
background rgba(0, 0, 0, 0.1)
opacity 0
> .popover
position absolute
z-index 10001
background #fff
border 1px solid $border-color
border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
transform scale(0.5)
opacity 0
$balloon-size = 16px
&:not(.compact)
margin-top $balloon-size
transform-origin center -($balloon-size)
&:before
content ""
2018-02-07 08:16:01 +02:00
display block
2018-02-07 11:30:17 +02:00
position absolute
top -($balloon-size * 2)
left s('calc(50% - %s)', $balloon-size)
border-top solid $balloon-size transparent
border-left solid $balloon-size transparent
border-right solid $balloon-size transparent
border-bottom solid $balloon-size $border-color
&:after
content ""
display block
position absolute
top -($balloon-size * 2) + 1.5px
left s('calc(50% - %s)', $balloon-size)
border-top solid $balloon-size transparent
border-left solid $balloon-size transparent
border-right solid $balloon-size transparent
border-bottom solid $balloon-size #fff
> p
display block
margin 0
padding 8px 10px
font-size 14px
color #586069
border-bottom solid 1px #e1e4e8
> div
padding 4px
width 240px
text-align center
> button
width 40px
height 40px
font-size 24px
border-radius 2px
&:hover
background #eee
&:active
background $theme-color
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
</style>