Administrator approval is now required for registering new accounts. If you are registering a new account, and are external to the University, please ask the repository owner to contact ServiceLine to request your account be approved. Repository owners must include the newly registered email address, and specific repository in the request for approval.

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

adding formating to nodes and more work on Emojis

parent cbc53669
......@@ -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('')
......
......@@ -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
......
......@@ -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>
export const state = {}
export const mutations = {}
export const actions = {}
export const getters = {}
......@@ -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: {},
......
Markdown is supported
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