Skip to content

GitLab

Commit 82f1f1d9 authored by Adam Procter's avatar Adam Procter
Browse files

adding formating to nodes and more work on Emojis

parent cbc53669
Hide whitespace changes
Inline Side-by-side
src/components/JoinMicrocosm.vue
View file @ 82f1f1d9
......@@ -147,7 +147,7 @@ export default {
methods: {
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 spacesremoved = lowercasename.split(' ').join('')
this.nameFormatted = spacesremoved.split('-').join('')
......@@ -162,7 +162,7 @@ export default {
setMicrocosm() {
if (this.nameSet == true) {
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 spacesremoved = lowercasemicrocosm.split(' ').join('')
this.microcosmFormatted = spacesremoved.split('-').join('')
......
src/components/MyNodes.vue
View file @ 82f1f1d9
......@@ -17,7 +17,17 @@
@mouseup="getSelected($event)"
></textarea>
<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
v-model="nodes.node_color"
:swatches="swatches"
......@@ -82,6 +92,10 @@ export default {
data() {
return {
nodeid: String,
start: String,
end: String,
selection: String,
myArray: [],
shapes: 'circles',
// swatches: [{ color: '#F493A7', showBorder: true }],
......@@ -121,17 +135,89 @@ export default {
methods: {
marked,
// TODO: take this information and wrap with a ** and replace in place
getSelected(e) {
var selection = e.target.value.substring(
this.selection = e.target.value.substring(
e.target.selectionStart,
e.target.selectionEnd
)
// the word
console.log(selection)
// the positions
console.log(e.target.selectionStart)
console.log(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() {
......@@ -142,6 +228,10 @@ export default {
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
......
src/components/OtherNodes.vue
View file @ 82f1f1d9
......@@ -12,15 +12,24 @@
:id="nodes.node_id"
v-html="marked(nodes.node_text)"
></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
v-show="showEmoji"
class="emojipicker"
@emojiClick="handleEmojiClick"
:pickerStyle="{
borderSize: '0',
background: nodes.node_color,
}"
@emojiClick="($event) => handleEmojiClick($event, nodes.node_id)"
:pickerStyle="{}"
/>
</div>
</template>
......@@ -54,6 +63,7 @@ export default {
computed: {
...mapState({
otherNodes: (state) => state.otherNodes,
configEmoji: (state) => state.configEmoji,
}),
},
......@@ -64,8 +74,12 @@ export default {
},
methods: {
handleEmojiClick(detail) {
getNodeid(nodeid) {
this.nodeid = nodeid
},
handleEmojiClick(detail, nodeid) {
console.log(detail)
console.log(nodeid)
},
openEmoji() {
......@@ -85,7 +99,8 @@ export default {
border: 2px solid black;
}
.emojiopen {
font-size: 1.5em;
button {
background: none;
border: none;
}
</style>
src/store/modules/allEmoji.js 0 → 100644
View file @ 82f1f1d9
export const state = {}
export const mutations = {}
export const actions = {}
export const getters = {}
src/store/store.js
View file @ 82f1f1d9
......@@ -3,6 +3,7 @@ import { createStore } from 'vuex'
import * as setup from '@/store/modules/setup.js'
import * as myNodes from '@/store/modules/myNodes.js'
import * as otherNodes from '@/store/modules/otherNodes.js'
import * as allEmoji from '@/store/modules/allEmoji.js'
export const store = createStore({
//
......@@ -10,6 +11,7 @@ export const store = createStore({
setup,
myNodes,
otherNodes,
allEmoji,
},
actions: {},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment