forked from FoundKeyGang/FoundKey
Reaction particle
This commit is contained in:
parent
ccc27bcc14
commit
d4324dc0cb
4 changed files with 79 additions and 1 deletions
src/client
54
src/client/components/particle.vue
Normal file
54
src/client/components/particle.vue
Normal file
File diff suppressed because one or more lines are too long
|
@ -2,7 +2,7 @@
|
|||
<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
|
||||
<div class="rdfaahpb">
|
||||
<div class="buttons" ref="buttons" :class="{ showFocus }">
|
||||
<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction"><x-reaction-icon :reaction="reaction"/></button>
|
||||
<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction" v-particle><x-reaction-icon :reaction="reaction"/></button>
|
||||
</div>
|
||||
<input class="text" v-model="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
|
||||
</div>
|
||||
|
|
|
@ -3,8 +3,10 @@ import Vue from 'vue';
|
|||
import userPreview from './user-preview';
|
||||
import autocomplete from './autocomplete';
|
||||
import size from './size';
|
||||
import particle from './particle';
|
||||
|
||||
Vue.directive('autocomplete', autocomplete);
|
||||
Vue.directive('userPreview', userPreview);
|
||||
Vue.directive('user-preview', userPreview);
|
||||
Vue.directive('size', size);
|
||||
Vue.directive('particle', particle);
|
||||
|
|
22
src/client/directives/particle.ts
Normal file
22
src/client/directives/particle.ts
Normal file
|
@ -0,0 +1,22 @@
|
|||
import Particle from '../components/particle.vue';
|
||||
|
||||
export default {
|
||||
bind(el, binding, vn) {
|
||||
el.addEventListener('click', () => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
|
||||
const x = rect.left + (el.clientWidth / 2);
|
||||
const y = rect.top + (el.clientHeight / 2);
|
||||
|
||||
const particle = new Particle({
|
||||
parent: vn.context,
|
||||
propsData: {
|
||||
x,
|
||||
y
|
||||
}
|
||||
}).$mount();
|
||||
|
||||
document.body.appendChild(particle.$el);
|
||||
});
|
||||
}
|
||||
};
|
Loading…
Reference in a new issue