diff --git a/src/client/components/particle.vue b/src/client/components/particle.vue new file mode 100644 index 0000000000..4ea0239b4a --- /dev/null +++ b/src/client/components/particle.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/src/client/components/reaction-picker.vue b/src/client/components/reaction-picker.vue index 3a17a522ca..99b27ad9c9 100644 --- a/src/client/components/reaction-picker.vue +++ b/src/client/components/reaction-picker.vue @@ -2,7 +2,7 @@
- +
diff --git a/src/client/directives/index.ts b/src/client/directives/index.ts index 2e05b52023..64d33c0ff3 100644 --- a/src/client/directives/index.ts +++ b/src/client/directives/index.ts @@ -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); diff --git a/src/client/directives/particle.ts b/src/client/directives/particle.ts new file mode 100644 index 0000000000..41509b4ed1 --- /dev/null +++ b/src/client/directives/particle.ts @@ -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); + }); + } +};