MyNodes.vue 8.63 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
239
      var nodesFiltered = this.myNodes.myNodes.filter(
        (nodes) => nodes.node_deleted == false
      )
      this.$store.dispatch('getMynodes')
Adam Procter's avatar
Adam Procter committed
240
241
      this.$store.dispatch('getEmoji')

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

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

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

    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
268
269

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

Adam Procter's avatar
Adam Procter committed
285
286
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
<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;
}

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

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

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

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