MyNodes.vue 8.9 KB
Newer Older
1
<template>
Adam Procter's avatar
Adam Procter committed
2
  <div v-for="(nodes, index) in myArray" :key="index">
Adam Procter's avatar
Adam Procter committed
3
4
5
6
7
8
    <form
      class="nodes"
      :style="{
        backgroundColor: nodes.node_color,
      }"
    >
9
      <template v-if="nodes.node_readmode == false">
10
11
12
        <textarea
          v-model="nodes.node_text"
          @input="editNode"
13
          :id="nodes.node_id"
14
15
16
          ref="textentry"
          placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
          rows="5"
Adam Procter's avatar
Adam Procter committed
17
          @mouseup="getSelected($event)"
18
19
        ></textarea>
        <p class="info">*markdown supported &amp; autosaves</p>
20
21
22
23
24
25
26
27
28
29
30
        <div>
          <button @click.prevent="makeH1">Header 1</button>
          <button @click.prevent="makeH2">Header 2</button>
          <button @click.prevent="makeH3">Header 3</button>
        </div>
        <div>
          <button @click.prevent="makeBold">Bold</button>
          <button @click.prevent="makeItalic">Italic</button>
          <button @click.prevent="makeLink">Link</button>
          <button @click.prevent="makeImage">Image</button>
        </div>
Adam Procter's avatar
Adam Procter committed
31
32
33
34
        <VSwatches
          v-model="nodes.node_color"
          :swatches="swatches"
          :shapes="shapes"
Adam Procter's avatar
Adam Procter committed
35
          @update:modelValue="chooseColor(nodes.node_id, nodes.node_color)"
Adam Procter's avatar
Adam Procter committed
36
37
38
39
40
41
42
43
          show-border
          show-fallback
          fallback-input-type="color"
        >
          <template v-slot:trigger>
            <button @click.prevent>{{ nodes.node_color }}</button>
          </template>
        </VSwatches>
44
45
46
47
48
49
50
51
        <select
          v-model="nodes.node_shape"
          @input="setShape"
          :id="nodes.node_id"
        >
          <option value="square">Square</option>
          <option value="circle">Circle</option>
          <option value="triangle">Triangle</option>
Adam Procter's avatar
Adam Procter committed
52
          <option value="hexagon">Hexagon</option>
Adam Procter's avatar
Adam Procter committed
53
54
        </select>

55
56
57
58
        <button @click.prevent="toggleMode(nodes.node_id)">Read</button>
        <button @click.prevent="discardNode(nodes.node_id)">Discard</button>
      </template>
      <template v-else>
Adam Procter's avatar
Adam Procter committed
59
60
61
62
63
        <p
          class="readmode"
          :id="nodes.node_id"
          v-html="marked(nodes.node_text)"
        ></p>
64
        <button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
Adam Procter's avatar
Adam Procter committed
65
66
67
68
69
70
71
72
73
74
75
        <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>
76
      </template>
77
78
79
80
81
82
83
    </form>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
Adam Procter's avatar
Adam Procter committed
84
import VSwatches from 'vue3-swatches'
Adam Procter's avatar
Adam Procter committed
85
import marked from 'marked'
86
87

export default {
88
  name: 'MyNodes',
89

Adam Procter's avatar
Adam Procter committed
90
91
  components: { VSwatches },

Adam Procter's avatar
Adam Procter committed
92
93
94
95
96
97
98
99
  // directives: {
  //   focus: {
  //     mounted(el) {
  //       el.focus()
  //     },
  //   },
  // },

100
101
102
103
104
105
  props: {
    added: Boolean,
  },

  data() {
    return {
106
107
108
109
      nodeid: String,
      start: String,
      end: String,
      selection: String,
110
      myArray: [],
Adam Procter's avatar
Adam Procter committed
111
112
113
114
115
116
117
118
      shapes: 'circles',
      // swatches: [{ color: '#F493A7', showBorder: true }],
      swatches: [
        ['#EB5757', '#F2994A', '#F2C94C'],
        ['#219653', '#27AE60', '#6FCF97'],
        ['#2F80ED', '#2D9CDB', '#56CCF2'],
        ['#9B51E0', '#BB6BD9', '#E9B7FC'],
      ],
119
120
121
122
123
    }
  },

  computed: {
    ...mapState({
124
      myNodes: (state) => state.myNodes,
Adam Procter's avatar
Adam Procter committed
125
      allEmoji: (state) => state.allEmoji,
126
127
128
    }),
  },

Adam Procter's avatar
Adam Procter committed
129
130
  watch: {
    added: function () {
131
      setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
132
133
134
    },
  },

135
  mounted() {
136
137
    // this.$store.dispatch('getEmoji')
    // this.$store.dispatch('getPositions')
138
    setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
139
140
141
142
    if (localStorage.nogg_name && localStorage.nogg_microcosm) {
      var devicename = localStorage.nogg_name
      var microcosm = localStorage.nogg_microcosm
      this.$store.dispatch('setMicrocosm', { devicename, microcosm })
143
144
      // this.$store.dispatch('getEmoji')
      // this.$store.dispatch('getPositions')
Adam Procter's avatar
Adam Procter committed
145
146
147
148
    } else {
      console.log('no')
      // go home
    }
149
150
151
  },

  methods: {
Adam Procter's avatar
Adam Procter committed
152
    marked,
Adam Procter's avatar
Adam Procter committed
153
154

    getSelected(e) {
155
      this.selection = e.target.value.substring(
Adam Procter's avatar
Adam Procter committed
156
157
158
        e.target.selectionStart,
        e.target.selectionEnd
      )
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
      this.start = e.target.selectionStart
      this.end = e.target.selectionEnd
      this.nodeid = e.target.id
    },

    makeH1() {
      const symbol = '# '
      var text = `${symbol}${this.selection}`
      var textarea = document.getElementById(this.nodeid)
      textarea.setRangeText(text, this.start, this.end, 'select')
      this.editNodeStyle(this.nodeid, textarea.value)
    },

    makeH2() {
      const symbol = '## '
      var text = `${symbol}${this.selection}`
      var textarea = document.getElementById(this.nodeid)
      textarea.setRangeText(text, this.start, this.end, 'select')
      this.editNodeStyle(this.nodeid, textarea.value)
    },

    makeH3() {
      const symbol = '### '
      var text = `${symbol}${this.selection}`
      var textarea = document.getElementById(this.nodeid)
      textarea.setRangeText(text, this.start, this.end, 'select')
      this.editNodeStyle(this.nodeid, textarea.value)
    },

    makeBold() {
      const symbol = '**'
      var text = `${symbol}${this.selection}${symbol}`
      var textarea = document.getElementById(this.nodeid)
      textarea.setRangeText(text, this.start, this.end, 'select')
      this.editNodeStyle(this.nodeid, textarea.value)
    },

    makeItalic() {
      const symbol = '*'
      var text = `${symbol}${this.selection}${symbol}`
      var textarea = document.getElementById(this.nodeid)
      textarea.setRangeText(text, this.start, this.end, 'select')
      this.editNodeStyle(this.nodeid, textarea.value)
    },

    makeLink() {
      const one = '['
      const two = ']'
      const three = '('
      const four = ')'

      var text = `${one}${
        this.selection
      }${two}${three}${'https://urlhere'}${four}`
      var textarea = document.getElementById(this.nodeid)
      textarea.setRangeText(text, this.start, this.end, 'select')
      this.editNodeStyle(this.nodeid, textarea.value)
      var cursorplace = this.end + 3
      console.log(cursorplace)
      textarea.focus()
      textarea.setSelectionRange(cursorplace, cursorplace + 15)
    },

    makeImage() {
      const one = '!['
      const two = ']'
      const three = '('
      const four = ')'
      var text = `${one}${
        this.selection
      }${two}${three}${'imagelinkhere'}${four}`
      var textarea = document.getElementById(this.nodeid)
      textarea.setRangeText(text, this.start, this.end, 'select')
      this.editNodeStyle(this.nodeid, textarea.value)
      var cursorplace = this.end + 4
      console.log(cursorplace)
      textarea.focus()
      textarea.setSelectionRange(cursorplace, cursorplace + 13)
Adam Procter's avatar
Adam Procter committed
237
238
    },

239
    loadData() {
Adam Procter's avatar
Adam Procter committed
240
241
242
      var nodesFiltered = this.myNodes.myNodes.filter(
        (nodes) => nodes.node_deleted == false
      )
243
      // this should probably be on the tool bar NOT HERE really
Adam Procter's avatar
Adam Procter committed
244
      this.$store.dispatch('getMynodes')
Adam Procter's avatar
Adam Procter committed
245
      this.$store.dispatch('getEmoji')
246
      this.$store.dispatch('getPositions')
Adam Procter's avatar
Adam Procter committed
247

Adam Procter's avatar
Adam Procter committed
248
      this.myArray = nodesFiltered.reverse()
249
250
    },

251
252
253
254
    editNodeStyle(nodeid, nodetext) {
      this.$store.dispatch('editNode', { nodeid, nodetext })
    },

255
256
257
258
259
    editNode(e) {
      var nodeid = e.target.id
      var nodetext = e.target.value
      this.$store.dispatch('editNode', { nodeid, nodetext })
    },
260
261
262
263
264
265
266
267
268
269
270
271
272
273

    discardNode(e) {
      if (confirm('Confirm discard?')) {
        this.$store.dispatch('discardNode', { e })
        setTimeout(this.loadData, 500)
      } else {
        // nothing happens
      }
    },

    toggleMode(e) {
      this.$store.dispatch('toggleMode', { e })
      setTimeout(this.loadData, 500)
    },
Adam Procter's avatar
Adam Procter committed
274
275

    chooseColor(nodeid, color) {
276
277
278
279
280
281
282
283
284
285
      this.$store.dispatch('colorNode', { nodeid, color })
      setTimeout(this.loadData, 500)
    },

    setShape(e) {
      var nodeid = e.target.id
      var shape = e.target.value

      this.$store.dispatch('setShape', { nodeid, shape })
      setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
286
    },
287
288
289
290
  },
}
</script>

Adam Procter's avatar
Adam Procter committed
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<style>
h1 {
  margin: 0em;
  padding: 0em;
  font-size: 4.2em;
  font-family: houschka-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: black;
}

h2 {
  margin: 0em;
  padding: 0em;
  font-size: 3.2em;
  font-family: houschka-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: black;
}

h3 {
  margin: 0em;
  padding: 0em;
  font-size: 2.2em;
  font-family: houschka-rounded, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: black;
}

322
323
324
325
326
327
328
.nodes {
  width: 95%;
  border: 2px dashed black;
  background-color: rgb(155, 194, 216);
  margin-top: 1em;
  margin-left: 0.5em;
}
ap2x07's avatar
ap2x07 committed
329
330

textarea {
Adam Procter's avatar
Adam Procter committed
331
332
333
334
335
336
  font-size: 1em;
  resize: none;
  border: none;
  background-color: rgb(187, 225, 247);
  width: 100%;
  box-sizing: border-box;
ap2x07's avatar
ap2x07 committed
337
}
Adam Procter's avatar
Adam Procter committed
338
339
340
341

img {
  width: 45%;
}
Adam Procter's avatar
Adam Procter committed
342
343
344
345
346
347
348

.allemoji {
  font-size: 1.5em;
  padding: 0em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, auto));
}
349
</style>