From 8653e09b59eb51e897e86f6590a5bf4e6bae4123 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 16 Dec 2018 10:20:46 +0900 Subject: [PATCH] [Client] Add particle effect :star: --- .../app/common/views/components/particle.vue | 53 +++++++++++++++++++ .../views/components/reaction-picker.vue | 20 +++---- .../views/components/reactions-viewer.vue | 20 +++---- .../app/common/views/directives/index.ts | 2 + .../app/common/views/directives/particle.ts | 26 +++++++++ 5 files changed, 101 insertions(+), 20 deletions(-) create mode 100644 src/client/app/common/views/components/particle.vue create mode 100644 src/client/app/common/views/directives/particle.ts diff --git a/src/client/app/common/views/components/particle.vue b/src/client/app/common/views/components/particle.vue new file mode 100644 index 000000000..33c118f00 --- /dev/null +++ b/src/client/app/common/views/components/particle.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue index 62f4930ed..15ff00291 100644 --- a/src/client/app/common/views/components/reaction-picker.vue +++ b/src/client/app/common/views/components/reaction-picker.vue @@ -4,16 +4,16 @@

{{ title }}

- - - - - - - - - - + + + + + + + + + +
diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue index 7f17d16a7..31d13cf9c 100644 --- a/src/client/app/common/views/components/reactions-viewer.vue +++ b/src/client/app/common/views/components/reactions-viewer.vue @@ -1,16 +1,16 @@ diff --git a/src/client/app/common/views/directives/index.ts b/src/client/app/common/views/directives/index.ts index 268f07a95..1bb4fd6d4 100644 --- a/src/client/app/common/views/directives/index.ts +++ b/src/client/app/common/views/directives/index.ts @@ -1,5 +1,7 @@ import Vue from 'vue'; import autocomplete from './autocomplete'; +import particle from './particle'; Vue.directive('autocomplete', autocomplete); +Vue.directive('particle', particle); diff --git a/src/client/app/common/views/directives/particle.ts b/src/client/app/common/views/directives/particle.ts new file mode 100644 index 000000000..b3688a3cf --- /dev/null +++ b/src/client/app/common/views/directives/particle.ts @@ -0,0 +1,26 @@ +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); + }); + }, + + unbind(el, binding, vn) { + + } +};