OtherNodes.vue 3.16 KB
Newer Older
Adam Procter's avatar
Adam Procter committed
1
<template>
Adam Procter's avatar
Adam Procter committed
2
3
4
5
  <div
    class="nodes"
    v-for="(nodes, index) in otherNodes.otherNodes"
    :key="index"
Adam Procter's avatar
Adam Procter committed
6
7
8
    :style="{
      backgroundColor: nodes.node_color,
    }"
Adam Procter's avatar
Adam Procter committed
9
  >
Adam Procter's avatar
Adam Procter committed
10
11
12
13
14
    <p
      class="readmode"
      :id="nodes.node_id"
      v-html="marked(nodes.node_text)"
    ></p>
Adam Procter's avatar
Adam Procter committed
15
16
17
18
19
20
21
22
23
24
25
26
    <div class="allemoji">
      <div
        class="eachemoji"
        v-for="(emojis, index) in allEmoji.allEmoji"
        :key="index"
      >
        <p v-if="nodes.node_id == emojis.node_id">
          {{ emojis.emoji_unicode }}
        </p>
      </div>
    </div>
    <button @click="openEmoji(nodes.node_id)">
27
28
29
30
31
32
33
34
35
36
37
38
      <svg
        height="24"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M0 0h24v24H0z" fill="none" />
        <path
          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"
        />
      </svg>
    </button>
Adam Procter's avatar
Adam Procter committed
39
    <VuemojiPicker
Adam Procter's avatar
Adam Procter committed
40
      v-if="showEmoji === nodes.node_id"
Adam Procter's avatar
Adam Procter committed
41
      class="emojipicker"
Adam Procter's avatar
Adam Procter committed
42
      @emojiClick="($event) => handleEmojiClick(nodes.node_id, $event)"
43
      :pickerStyle="{}"
Adam Procter's avatar
Adam Procter committed
44
    />
Adam Procter's avatar
Adam Procter committed
45
46
47
48
49
50
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
Adam Procter's avatar
Adam Procter committed
51
import marked from 'marked'
Adam Procter's avatar
Adam Procter committed
52
import { VuemojiPicker } from 'vuemoji-picker'
Adam Procter's avatar
Adam Procter committed
53
54
55
56

export default {
  name: 'OtherNodes',

Adam Procter's avatar
Adam Procter committed
57
58
59
60
61
62
63
64
65
  props: {
    // these are for the emoji styling
    // https://github.com/wobsoriano/vuemoji-picker
    // isDark: Boolean,
    pickerStyle: Object,
  },

  data: function () {
    return {
Adam Procter's avatar
Adam Procter committed
66
      showEmoji: String,
Adam Procter's avatar
Adam Procter committed
67
68
69
70
71
72
73
    }
  },

  components: {
    VuemojiPicker,
  },

Adam Procter's avatar
Adam Procter committed
74
75
76
  computed: {
    ...mapState({
      otherNodes: (state) => state.otherNodes,
Adam Procter's avatar
Adam Procter committed
77
      allEmoji: (state) => state.allEmoji,
Adam Procter's avatar
Adam Procter committed
78
79
80
81
    }),
  },

  mounted() {
82
    this.$store.dispatch('getOthernodes')
Adam Procter's avatar
Adam Procter committed
83
    setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
84
85
86
    // this is to get the last letter typed if no space
    // this also loads in new Emoji
    // May need to EDIT
Adam Procter's avatar
Adam Procter committed
87
    setInterval(this.loadData, 5000)
Adam Procter's avatar
Adam Procter committed
88
89
90
  },

  methods: {
91
92
93
    getNodeid(nodeid) {
      this.nodeid = nodeid
    },
Adam Procter's avatar
Adam Procter committed
94
95
96
97
98
99
100
101
102
103
104
105
106
    handleEmojiClick(nodeid, detail) {
      var unicode = detail.emoji.unicode
      var annotation = detail.emoji.annotation
      var skinTone = detail.skinTone
      var emoticon = detail.emoji.emoticon

      this.$store.dispatch('addEmoji', {
        nodeid,
        unicode,
        annotation,
        skinTone,
        emoticon,
      })
Adam Procter's avatar
Adam Procter committed
107
      this.$store.dispatch('getEmoji')
Adam Procter's avatar
Adam Procter committed
108
109
    },

Adam Procter's avatar
Adam Procter committed
110
111
112
113
114
115
    openEmoji(nodeid) {
      if (this.showEmoji == nodeid) {
        this.showEmoji = null
      } else {
        this.showEmoji = nodeid
      }
Adam Procter's avatar
Adam Procter committed
116
117
    },

Adam Procter's avatar
Adam Procter committed
118
    loadData() {
119
      this.$store.dispatch('setOthernodes')
Adam Procter's avatar
Adam Procter committed
120
      this.$store.dispatch('getEmoji')
Adam Procter's avatar
Adam Procter committed
121
    },
Adam Procter's avatar
Adam Procter committed
122
    marked,
Adam Procter's avatar
Adam Procter committed
123
124
125
126
  },
}
</script>

Adam Procter's avatar
Adam Procter committed
127
<style scoped>
Adam Procter's avatar
Adam Procter committed
128
.nodes {
Adam Procter's avatar
Adam Procter committed
129
  border: 2px solid black;
Adam Procter's avatar
Adam Procter committed
130
}
Adam Procter's avatar
Adam Procter committed
131

132
133
134
button {
  background: none;
  border: none;
Adam Procter's avatar
Adam Procter committed
135
}
Adam Procter's avatar
Adam Procter committed
136
137
138
139
140
141
142

.allemoji {
  font-size: 1.5em;
  padding: 0em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, auto));
}
Adam Procter's avatar
Adam Procter committed
143
</style>