-
Adam Procter authoredAdam Procter authored
MyNodes.vue 8.11 KiB
<template>
<div v-for="(nodes, index) in myArray" :key="index">
<form
class="nodes"
:style="{
backgroundColor: nodes.node_color,
}"
>
<template v-if="nodes.node_readmode == false">
<textarea
v-model="nodes.node_text"
@input="editNode"
:id="nodes.node_id"
ref="textentry"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
rows="5"
@mouseup="getSelected($event)"
></textarea>
<p class="info">*markdown supported & autosaves</p>
<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>
<VSwatches
v-model="nodes.node_color"
:swatches="swatches"
:shapes="shapes"
@update:modelValue="chooseColor(nodes.node_id, nodes.node_color)"
show-border
show-fallback
fallback-input-type="color"
>
<template v-slot:trigger>
<button @click.prevent>{{ nodes.node_color }}</button>
</template>
</VSwatches>
<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>
<option value="hexagon">Hexagon</option>
</select>
<button @click.prevent="toggleMode(nodes.node_id)">Read</button>
<button @click.prevent="discardNode(nodes.node_id)">Discard</button>
</template>
<template v-else>
<p
class="readmode"
:id="nodes.node_id"
v-html="marked(nodes.node_text)"
></p>
<button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
</template>
</form>
</div>
</template>
<script>
// @ is an alias to /src
import { mapState } from 'vuex'
import VSwatches from 'vue3-swatches'
import marked from 'marked'
export default {
name: 'MyNodes',
components: { VSwatches },
// directives: {
// focus: {
// mounted(el) {
// el.focus()
// },
// },
// },
props: {
added: Boolean,
},
data() {
return {
nodeid: String,
start: String,
end: String,
selection: String,
myArray: [],
shapes: 'circles',
// swatches: [{ color: '#F493A7', showBorder: true }],
swatches: [
['#EB5757', '#F2994A', '#F2C94C'],
['#219653', '#27AE60', '#6FCF97'],
['#2F80ED', '#2D9CDB', '#56CCF2'],
['#9B51E0', '#BB6BD9', '#E9B7FC'],
],
}
},
computed: {
...mapState({
myNodes: (state) => state.myNodes,
}),
},
watch: {
added: function () {
setTimeout(this.loadData, 500)
},
},
mounted() {
setTimeout(this.loadData, 500)
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
}
},
methods: {
marked,
getSelected(e) {
this.selection = e.target.value.substring(
e.target.selectionStart,
e.target.selectionEnd
)
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)
},
loadData() {
var nodesFiltered = this.myNodes.myNodes.filter(
(nodes) => nodes.node_deleted == false
)
this.$store.dispatch('getMynodes')
this.myArray = nodesFiltered.reverse()
},
editNodeStyle(nodeid, nodetext) {
this.$store.dispatch('editNode', { nodeid, nodetext })
},
editNode(e) {
var nodeid = e.target.id
var nodetext = e.target.value
this.$store.dispatch('editNode', { nodeid, nodetext })
},
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)
},
chooseColor(nodeid, color) {
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)
},
},
}
</script>
<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;
}
.nodes {
width: 95%;
border: 2px dashed black;
background-color: rgb(155, 194, 216);
margin-top: 1em;
margin-left: 0.5em;
}
textarea {
font-size: 1em;
resize: none;
border: none;
background-color: rgb(187, 225, 247);
width: 100%;
box-sizing: border-box;
}
img {
width: 45%;
}
</style>