add snackbar onClick callback - use notification instead of modal for…

… joined-challenge
HabitRPG · Jul 15, 2018 · 487911f · 487911f
1 parent 2a90d5e
commit 487911f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/website/client/components/notifications.vue b/website/client/components/notifications.vue
@@ -485,7 +485,9 @@ export default {
             break;
           case 'CHALLENGE_JOINED_ACHIEVEMENT':
             this.playSound('Achievement_Unlocked');
-            this.$root.$emit('bv::show::modal', 'joined-challenge');
+            this.text(`${this.$t('achievement')}: ${this.$t('joinedChallenge')}`, () => {
+              this.$root.$emit('bv::show::modal', 'joined-challenge');
+            }, false);
             break;
           case 'INVITED_FRIEND_ACHIEVEMENT':
             this.playSound('Achievement_Unlocked');

diff --git a/website/client/components/snackbars/notification.vue b/website/client/components/snackbars/notification.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 transition(name="fade")
-  .notification.callout.animated(:class="classes", v-if='show', @click='show = false')
+  .notification.callout.animated(:class="classes", v-if='show', @click='handleOnClick()')
     .row(v-if='notification.type === "error"')
       .text.col-12
         div(v-html='notification.text')
@@ -142,6 +142,15 @@ export default {
   beforeDestroy () {
     clearTimeout(this.timer);
   },
+  methods: {
+    handleOnClick () {
+      if (typeof this.notification.onClick === 'function') {
+        this.notification.onClick();
+      }
+
+      this.show = false;
+    },
+  },
   watch: {
     show () {
       this.$store.dispatch('snackbars:remove', this.notification);

diff --git a/website/client/mixins/notifications.js b/website/client/mixins/notifications.js
@@ -56,24 +56,29 @@ export default {
     streak (val) {
       this.notify(`${val}`, 'streak');
     },
-    text (val, onClick) {
+    text (val, onClick, timeout) {
       if (!val) return;
-      this.notify(val, 'info', null, null, onClick);
+      this.notify(val, 'info', null, null, onClick, timeout);
     },
     sign (number) {
       return getSign(number);
     },
     round (number, nDigits) {
       return round(number, nDigits);
     },
-    notify (html, type, icon, sign) {
+    notify (html, type, icon, sign, onClick, timeout) {
+      if (typeof timeout === 'undefined') {
+        timeout = true;
+      }
+
       this.$store.dispatch('snackbars:add', {
         title: '',
         text: html,
         type,
         icon,
         sign,
-        timeout: true,
+        onClick,
+        timeout,
       });
     },
   },

diff --git a/website/common/locales/en/achievements.json b/website/common/locales/en/achievements.json
@@ -1,4 +1,5 @@
 {
+  "achievement": "Achievement",
   "share": "Share",
   "onwards": "Onwards!",
   "levelup": "By accomplishing your real life goals, you leveled up and are now fully healed!",