Reaction particle

This commit is contained in:
syuilo 2020-02-22 01:20:58 +09:00
parent ccc27bcc14
commit d4324dc0cb
4 changed files with 79 additions and 1 deletions

File diff suppressed because one or more lines are too long

View File

@ -2,7 +2,7 @@
<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap"> <x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
<div class="rdfaahpb"> <div class="rdfaahpb">
<div class="buttons" ref="buttons" :class="{ showFocus }"> <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> </div>
<input class="text" v-model="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }"> <input class="text" v-model="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
</div> </div>

View File

@ -3,8 +3,10 @@ import Vue from 'vue';
import userPreview from './user-preview'; import userPreview from './user-preview';
import autocomplete from './autocomplete'; import autocomplete from './autocomplete';
import size from './size'; import size from './size';
import particle from './particle';
Vue.directive('autocomplete', autocomplete); Vue.directive('autocomplete', autocomplete);
Vue.directive('userPreview', userPreview); Vue.directive('userPreview', userPreview);
Vue.directive('user-preview', userPreview); Vue.directive('user-preview', userPreview);
Vue.directive('size', size); Vue.directive('size', size);
Vue.directive('particle', particle);

View 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);
});
}
};