MyNodes.vue 8.73 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
136
  mounted() {
    setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
137
138
139
140
141
142
143
144
    if (localStorage.nogg_name && localStorage.nogg_microcosm) {
      var devicename = localStorage.nogg_name
      var microcosm = localStorage.nogg_microcosm
      this.$store.dispatch('setMicrocosm', { devicename, microcosm })
    } else {
      console.log('no')
      // go home
    }
145
146
147
  },

  methods: {
Adam Procter's avatar
Adam Procter committed
148
    marked,
Adam Procter's avatar
Adam Procter committed
149
150

    getSelected(e) {
151
      this.selection = e.target.value.substring(
Adam Procter's avatar
Adam Procter committed
152
153
154
        e.target.selectionStart,
        e.target.selectionEnd
      )
155
156
157
158
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
      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
233
234
    },

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

Adam Procter's avatar
Adam Procter committed
244
      this.myArray = nodesFiltered.reverse()
245
246
    },

247
248
249
250
    editNodeStyle(nodeid, nodetext) {
      this.$store.dispatch('editNode', { nodeid, nodetext })
    },

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

    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
270
271

    chooseColor(nodeid, color) {
272
273
274
275
276
277
278
279
280
281
      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
282
    },
283
284
285
286
  },
}
</script>

Adam Procter's avatar
Adam Procter committed
287
288
289
290
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
<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;
}

318
319
320
321
322
323
324
.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
325
326

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

img {
  width: 45%;
}
Adam Procter's avatar
Adam Procter committed
338
339
340
341
342
343
344

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