MyNodes.vue 8.11 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
65
        <button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
      </template>
66
67
68
69
70
71
72
    </form>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
Adam Procter's avatar
Adam Procter committed
73
import VSwatches from 'vue3-swatches'
Adam Procter's avatar
Adam Procter committed
74
import marked from 'marked'
75
76

export default {
77
  name: 'MyNodes',
78

Adam Procter's avatar
Adam Procter committed
79
80
  components: { VSwatches },

Adam Procter's avatar
Adam Procter committed
81
82
83
84
85
86
87
88
  // directives: {
  //   focus: {
  //     mounted(el) {
  //       el.focus()
  //     },
  //   },
  // },

89
90
91
92
93
94
  props: {
    added: Boolean,
  },

  data() {
    return {
95
96
97
98
      nodeid: String,
      start: String,
      end: String,
      selection: String,
99
      myArray: [],
Adam Procter's avatar
Adam Procter committed
100
101
102
103
104
105
106
107
      shapes: 'circles',
      // swatches: [{ color: '#F493A7', showBorder: true }],
      swatches: [
        ['#EB5757', '#F2994A', '#F2C94C'],
        ['#219653', '#27AE60', '#6FCF97'],
        ['#2F80ED', '#2D9CDB', '#56CCF2'],
        ['#9B51E0', '#BB6BD9', '#E9B7FC'],
      ],
108
109
110
111
112
    }
  },

  computed: {
    ...mapState({
113
      myNodes: (state) => state.myNodes,
114
115
116
    }),
  },

Adam Procter's avatar
Adam Procter committed
117
118
  watch: {
    added: function () {
119
      setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
120
121
122
    },
  },

123
124
  mounted() {
    setTimeout(this.loadData, 500)
Adam Procter's avatar
Adam Procter committed
125
126
127
128
129
130
131
132
    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
    }
133
134
135
  },

  methods: {
Adam Procter's avatar
Adam Procter committed
136
    marked,
Adam Procter's avatar
Adam Procter committed
137
138

    getSelected(e) {
139
      this.selection = e.target.value.substring(
Adam Procter's avatar
Adam Procter committed
140
141
142
        e.target.selectionStart,
        e.target.selectionEnd
      )
143
144
145
146
147
148
149
150
151
152
153
154
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
      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
221
222
    },

223
    loadData() {
Adam Procter's avatar
Adam Procter committed
224
225
226
227
228
      var nodesFiltered = this.myNodes.myNodes.filter(
        (nodes) => nodes.node_deleted == false
      )
      this.$store.dispatch('getMynodes')
      this.myArray = nodesFiltered.reverse()
229
230
    },

231
232
233
234
    editNodeStyle(nodeid, nodetext) {
      this.$store.dispatch('editNode', { nodeid, nodetext })
    },

235
236
237
238
239
    editNode(e) {
      var nodeid = e.target.id
      var nodetext = e.target.value
      this.$store.dispatch('editNode', { nodeid, nodetext })
    },
240
241
242
243
244
245
246
247
248
249
250
251
252
253

    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
254
255

    chooseColor(nodeid, color) {
256
257
258
259
260
261
262
263
264
265
      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
266
    },
267
268
269
270
  },
}
</script>

Adam Procter's avatar
Adam Procter committed
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<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;
}

302
303
304
305
306
307
308
.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
309
310

textarea {
Adam Procter's avatar
Adam Procter committed
311
312
313
314
315
316
  font-size: 1em;
  resize: none;
  border: none;
  background-color: rgb(187, 225, 247);
  width: 100%;
  box-sizing: border-box;
ap2x07's avatar
ap2x07 committed
317
}
Adam Procter's avatar
Adam Procter committed
318
319
320
321

img {
  width: 45%;
}
322
</style>