mirror of
https://iceshrimp.dev/iceshrimp/iceshrimp
synced 2024-12-12 21:58:11 +09:00
Reaction particle
This commit is contained in:
parent
1eb837e9a1
commit
8a03fb71b7
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">
|
<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>
|
||||||
|
@ -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);
|
||||||
|
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 New Issue
Block a user