Skip to content
Snippets Groups Projects
Select Git revision
  • cbfd273d12cd09b52c1802003bee26bed816e6ca
  • main default
  • vue-update
  • fixnogg
  • futurenogg
  • positions
  • emoji
  • minorUI
  • markdown
  • stayConnected
  • gm-test
  • shortcut
  • connectPouchDB
  • master protected
14 results

OtherNodes.vue

Blame
  • user avatar
    Adam Procter authored
    23eccb12
    History
    OtherNodes.vue 3.20 KiB
    <template>
      <div
        class="nodes"
        v-for="(nodes, index) in otherNodes.otherNodes"
        :key="index"
        :style="{
          backgroundColor: nodes.node_color,
        }"
      >
        <p
          class="readmode"
          :id="nodes.node_id"
          v-html="marked(nodes.node_text)"
        ></p>
        <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)">
          <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>
        <VuemojiPicker
          v-if="showEmoji === nodes.node_id"
          class="emojipicker"
          @emojiClick="($event) => handleEmojiClick(nodes.node_id, $event)"
          :pickerStyle="{}"
        />
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import { mapState } from 'vuex'
    import marked from 'marked'
    import { VuemojiPicker } from 'vuemoji-picker'
    
    export default {
      name: 'OtherNodes',
    
      props: {
        // these are for the emoji styling
        // https://github.com/wobsoriano/vuemoji-picker
        // isDark: Boolean,
        pickerStyle: Object,
      },
    
      data: function () {
        return {
          showEmoji: String,
        }
      },
    
      components: {
        VuemojiPicker,
      },
    
      computed: {
        ...mapState({
          otherNodes: (state) => state.otherNodes,
          allEmoji: (state) => state.allEmoji,
        }),
      },
    
      mounted() {
        this.$store.dispatch('getOthernodes')
        this.$store.dispatch('getEmoji')
        setTimeout(this.loadData, 500)
        // this is to get the last letter typed if no space
        // this also loads in new Emoji
        // May need to EDIT
        setInterval(this.loadData, 5000)
      },
    
      methods: {
        getNodeid(nodeid) {
          this.nodeid = nodeid
        },
        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,
          })
          this.$store.dispatch('getEmoji')
        },
    
        openEmoji(nodeid) {
          if (this.showEmoji == nodeid) {
            this.showEmoji = null
          } else {
            this.showEmoji = nodeid
          }
        },
    
        loadData() {
          this.$store.dispatch('setOthernodes')
          this.$store.dispatch('getEmoji')
        },
        marked,
      },
    }
    </script>
    
    <style scoped>
    .nodes {
      border: 2px solid black;
    }
    
    button {
      background: none;
      border: none;
    }
    
    .allemoji {
      font-size: 1.5em;
      padding: 0em;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(0, auto));
    }
    </style>