Skip to content
Snippets Groups Projects
Commit 82f1f1d9 authored by Adam Procter's avatar Adam Procter
Browse files

adding formating to nodes and more work on Emojis

parent cbc53669
No related branches found
No related tags found
No related merge requests found
...@@ -147,7 +147,7 @@ export default { ...@@ -147,7 +147,7 @@ export default {
methods: { methods: {
setName(name) { setName(name) {
// format name so no spaces or dashes PouchDB/ CouchDB dont like them // format name so no spaces or dashes PouchDB/ CouchDB doesn't like them
var lowercasename = this.name.toLowerCase() var lowercasename = this.name.toLowerCase()
var spacesremoved = lowercasename.split(' ').join('') var spacesremoved = lowercasename.split(' ').join('')
this.nameFormatted = spacesremoved.split('-').join('') this.nameFormatted = spacesremoved.split('-').join('')
...@@ -162,7 +162,7 @@ export default { ...@@ -162,7 +162,7 @@ export default {
setMicrocosm() { setMicrocosm() {
if (this.nameSet == true) { if (this.nameSet == true) {
this.$router.push({ path: '/collect' }) this.$router.push({ path: '/collect' })
// format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them // format microcosm so no spaces or dashes PouchDB/ CouchDB doesn't like them
var lowercasemicrocosm = this.microcosm.toLowerCase() var lowercasemicrocosm = this.microcosm.toLowerCase()
var spacesremoved = lowercasemicrocosm.split(' ').join('') var spacesremoved = lowercasemicrocosm.split(' ').join('')
this.microcosmFormatted = spacesremoved.split('-').join('') this.microcosmFormatted = spacesremoved.split('-').join('')
......
...@@ -17,7 +17,17 @@ ...@@ -17,7 +17,17 @@
@mouseup="getSelected($event)" @mouseup="getSelected($event)"
></textarea> ></textarea>
<p class="info">*markdown supported &amp; autosaves</p> <p class="info">*markdown supported &amp; 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 <VSwatches
v-model="nodes.node_color" v-model="nodes.node_color"
:swatches="swatches" :swatches="swatches"
...@@ -82,6 +92,10 @@ export default { ...@@ -82,6 +92,10 @@ export default {
data() { data() {
return { return {
nodeid: String,
start: String,
end: String,
selection: String,
myArray: [], myArray: [],
shapes: 'circles', shapes: 'circles',
// swatches: [{ color: '#F493A7', showBorder: true }], // swatches: [{ color: '#F493A7', showBorder: true }],
...@@ -121,17 +135,89 @@ export default { ...@@ -121,17 +135,89 @@ export default {
methods: { methods: {
marked, marked,
// TODO: take this information and wrap with a ** and replace in place
getSelected(e) { getSelected(e) {
var selection = e.target.value.substring( this.selection = e.target.value.substring(
e.target.selectionStart, e.target.selectionStart,
e.target.selectionEnd e.target.selectionEnd
) )
// the word this.start = e.target.selectionStart
console.log(selection) this.end = e.target.selectionEnd
// the positions this.nodeid = e.target.id
console.log(e.target.selectionStart) },
console.log(e.target.selectionEnd)
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() { loadData() {
...@@ -142,6 +228,10 @@ export default { ...@@ -142,6 +228,10 @@ export default {
this.myArray = nodesFiltered.reverse() this.myArray = nodesFiltered.reverse()
}, },
editNodeStyle(nodeid, nodetext) {
this.$store.dispatch('editNode', { nodeid, nodetext })
},
editNode(e) { editNode(e) {
var nodeid = e.target.id var nodeid = e.target.id
var nodetext = e.target.value var nodetext = e.target.value
......
...@@ -12,15 +12,24 @@ ...@@ -12,15 +12,24 @@
:id="nodes.node_id" :id="nodes.node_id"
v-html="marked(nodes.node_text)" v-html="marked(nodes.node_text)"
></p> ></p>
<button @click="openEmoji" class="emojiopen">☺️</button> <button @click="openEmoji">
<svg
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"
/>
</svg>
</button>
<VuemojiPicker <VuemojiPicker
v-show="showEmoji" v-show="showEmoji"
class="emojipicker" class="emojipicker"
@emojiClick="handleEmojiClick" @emojiClick="($event) => handleEmojiClick($event, nodes.node_id)"
:pickerStyle="{ :pickerStyle="{}"
borderSize: '0',
background: nodes.node_color,
}"
/> />
</div> </div>
</template> </template>
...@@ -54,6 +63,7 @@ export default { ...@@ -54,6 +63,7 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
otherNodes: (state) => state.otherNodes, otherNodes: (state) => state.otherNodes,
configEmoji: (state) => state.configEmoji,
}), }),
}, },
...@@ -64,8 +74,12 @@ export default { ...@@ -64,8 +74,12 @@ export default {
}, },
methods: { methods: {
handleEmojiClick(detail) { getNodeid(nodeid) {
this.nodeid = nodeid
},
handleEmojiClick(detail, nodeid) {
console.log(detail) console.log(detail)
console.log(nodeid)
}, },
openEmoji() { openEmoji() {
...@@ -85,7 +99,8 @@ export default { ...@@ -85,7 +99,8 @@ export default {
border: 2px solid black; border: 2px solid black;
} }
.emojiopen { button {
font-size: 1.5em; background: none;
border: none;
} }
</style> </style>
export const state = {}
export const mutations = {}
export const actions = {}
export const getters = {}
...@@ -3,6 +3,7 @@ import { createStore } from 'vuex' ...@@ -3,6 +3,7 @@ import { createStore } from 'vuex'
import * as setup from '@/store/modules/setup.js' import * as setup from '@/store/modules/setup.js'
import * as myNodes from '@/store/modules/myNodes.js' import * as myNodes from '@/store/modules/myNodes.js'
import * as otherNodes from '@/store/modules/otherNodes.js' import * as otherNodes from '@/store/modules/otherNodes.js'
import * as allEmoji from '@/store/modules/allEmoji.js'
export const store = createStore({ export const store = createStore({
// //
...@@ -10,6 +11,7 @@ export const store = createStore({ ...@@ -10,6 +11,7 @@ export const store = createStore({
setup, setup,
myNodes, myNodes,
otherNodes, otherNodes,
allEmoji,
}, },
actions: {}, actions: {},
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment