Commit 5e5a82ad authored by Adam Procter's avatar Adam Procter
Browse files

Merge branch 'emoji' into main

parents 283abead 448a5d03
# 0.2.5
_10th Septemeber 2021_
## Added
- various formatting buttons to format your node text with markdown
- emojis "voting" is now working on other nodes
# 0.2.4 # 0.2.4
_6th Septemeber 2021_ _6th Septemeber 2021_
......
{ {
"name": "nodenogg.in", "name": "nodenogg.in",
"version": "0.2.4", "version": "0.2.5",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"vue": "^3.2.8", "vue": "^3.2.8",
"vue-router": "^4.0.0", "vue-router": "^4.0.0",
"vue3-swatches": "^1.0.3", "vue3-swatches": "^1.0.3",
"vuemoji-picker": "^0.0.7",
"vuex": "^4.0.0" "vuex": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
......
...@@ -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('')
......
...@@ -14,9 +14,20 @@ ...@@ -14,9 +14,20 @@
ref="textentry" ref="textentry"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)" placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
rows="5" rows="5"
@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"
...@@ -81,6 +92,10 @@ export default { ...@@ -81,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 }],
...@@ -119,6 +134,92 @@ export default { ...@@ -119,6 +134,92 @@ export default {
methods: { methods: {
marked, 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() { loadData() {
var nodesFiltered = this.myNodes.myNodes.filter( var nodesFiltered = this.myNodes.myNodes.filter(
(nodes) => nodes.node_deleted == false (nodes) => nodes.node_deleted == false
...@@ -127,6 +228,10 @@ export default { ...@@ -127,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,6 +12,36 @@ ...@@ -12,6 +12,36 @@
:id="nodes.node_id" :id="nodes.node_id"
v-html="marked(nodes.node_text)" v-html="marked(nodes.node_text)"
></p> ></p>
<div class="allemoji">
<div
class="eachemoji"
v-for="(emojis, index) in allEmoji.allEmoji"
:key="index"
>
<p v-if="nodes.node_id == emojis.node_id">
{{ emojis.emoji_unicode }}
</p>
</div>
</div>
<button @click="openEmoji(nodes.node_id)">
<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-if="showEmoji === nodes.node_id"
class="emojipicker"
@emojiClick="($event) => handleEmojiClick(nodes.node_id, $event)"
:pickerStyle="{}"
/>
</div> </div>
</template> </template>
...@@ -19,25 +49,76 @@ ...@@ -19,25 +49,76 @@
// @ is an alias to /src // @ is an alias to /src
import { mapState } from 'vuex' import { mapState } from 'vuex'
import marked from 'marked' import marked from 'marked'
import { VuemojiPicker } from 'vuemoji-picker'
export default { export default {
name: 'OtherNodes', name: 'OtherNodes',
props: {
// these are for the emoji styling
// https://github.com/wobsoriano/vuemoji-picker
// isDark: Boolean,
pickerStyle: Object,
},
data: function () {
return {
showEmoji: String,
}
},
components: {
VuemojiPicker,
},
computed: { computed: {
...mapState({ ...mapState({
otherNodes: (state) => state.otherNodes, otherNodes: (state) => state.otherNodes,
allEmoji: (state) => state.allEmoji,
}), }),
}, },
mounted() { mounted() {
this.$store.dispatch('getOthernodes') this.$store.dispatch('getOthernodes')
setTimeout(this.loadData, 500) setTimeout(this.loadData, 500)
// this is to get the last letter typed if no space
// this also loads in new Emoji
// May need to EDIT
setInterval(this.loadData, 5000) setInterval(this.loadData, 5000)
}, },
methods: { methods: {
getNodeid(nodeid) {
this.nodeid = nodeid
},
handleEmojiClick(nodeid, detail) {
console.log(nodeid)
var unicode = detail.emoji.unicode
var annotation = detail.emoji.annotation
var skinTone = detail.skinTone
var emoticon = detail.emoji.emoticon
this.$store.dispatch('addEmoji', {
nodeid,
unicode,
annotation,
skinTone,
emoticon,
})
},
openEmoji(nodeid) {
if (this.showEmoji == nodeid) {
this.showEmoji = null
} else {
this.showEmoji = nodeid
}
},
loadData() { loadData() {
this.$store.dispatch('setOthernodes') this.$store.dispatch('setOthernodes')
this.$store.dispatch('getEmoji')
}, },
marked, marked,
}, },
...@@ -48,4 +129,16 @@ export default { ...@@ -48,4 +129,16 @@ export default {
.nodes { .nodes {
border: 2px solid black; border: 2px solid black;
} }
button {
background: none;
border: none;
}
.allemoji {
font-size: 1.5em;
padding: 0em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, auto));
}
</style> </style>
var pouchdb
export const state = {
docName: 'emojis',
allEmoji: [],
}
export const mutations = {
GET_EMOJI(state) {
pouchdb
.get(state.docName)
.then(function (doc) {
state.allEmoji = doc.emojis
})
.catch(function (err) {
if (err.status == 404) {
return pouchdb.put({
_id: state.docName,
emojis: [],
})
}
})
},
ADD_EMOJI(state, e) {
var uniqueid =
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
pouchdb.get(state.docName).then(function (doc) {
doc.emojis.push({
emoji_id: uniqueid,
node_id: e.nodeid,
emoji_unicode: e.unicode,
emoji_annotation: e.annotation,
emoji_skintone: e.skinTone,
emoji_emoticon: e.emoticon,
})
return pouchdb
.put({
_id: state.docName,
_rev: doc._rev,
emojis: doc.emojis,
})
.catch(function () {})
})
},
}
export const actions = {
getEmoji: ({ commit }) => {
commit('GET_EMOJI')
},
addEmoji: (
{ commit },
{ nodeid, unicode, annotation, skinTone, emoticon }
) => {
commit('ADD_EMOJI', {
nodeid,
unicode,
annotation,
skinTone,
emoticon,
})
},
getMicrocosm(vuexContext) {
pouchdb = vuexContext.rootState.setup.pouchdb
},
}
export const getters = {}
var pouchdb var pouchdb
var deviceName var deviceName
var docName
export const state = { export const state = {
allNodes: [], allNodes: [],
...@@ -27,7 +28,10 @@ export const mutations = { ...@@ -27,7 +28,10 @@ export const mutations = {
var j var j
for (i = 0; i < Object.keys(state.allNodes).length; i++) { for (i = 0; i < Object.keys(state.allNodes).length; i++) {
if (state.allNodes[i].id != deviceName) { if (
state.allNodes[i].id != deviceName &&
state.allNodes[i].id != docName
) {
for (j = 0; j < Object.keys(state.allNodes[i].doc.nodes).length; j++) { for (j = 0; j < Object.keys(state.allNodes[i].doc.nodes).length; j++) {
const newNode = { const newNode = {
node_id: state.allNodes[i].doc.nodes[j].node_id, node_id: state.allNodes[i].doc.nodes[j].node_id,
...@@ -55,6 +59,7 @@ export const actions = { ...@@ -55,6 +59,7 @@ export const actions = {
getMicrocosm(vuexContext) { getMicrocosm(vuexContext) {
deviceName = vuexContext.rootState.setup.deviceName deviceName = vuexContext.rootState.setup.deviceName
pouchdb = vuexContext.rootState.setup.pouchdb pouchdb = vuexContext.rootState.setup.pouchdb
docName = vuexContext.rootState.allEmoji.docName
}, },
} }
......
...@@ -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: {},
......
...@@ -3099,6 +3099,11 @@ elliptic@^6.5.3: ...@@ -3099,6 +3099,11 @@ elliptic@^6.5.3:
minimalistic-assert "^1.0.1" minimalistic-assert "^1.0.1"
minimalistic-crypto-utils "^1.0.1" minimalistic-crypto-utils "^1.0.1"
emoji-picker-element@^1.6.5:
version "1.8.1"
resolved "https://registry.yarnpkg.com/emoji-picker-element/-/emoji-picker-element-1.8.1.tgz#3b832b6b60b4f5543c7b7021fd9b669d2478ea44"
integrity sha512-ibliBMR74JuoPOJXGDX/RtyW1BULENfDoAY9V2mpbfcnEiqElZ9EdUrtQbwyjjHZzYS+W5nngwcI8UNNCDh6cw==
emoji-regex@^7.0.1: emoji-regex@^7.0.1:
version "7.0.3" version "7.0.3"
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
...@@ -7632,6 +7637,11 @@ vm-browserify@^1.0.1: ...@@ -7632,6 +7637,11 @@ vm-browserify@^1.0.1:
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
vue-demi@^0.11.2:
version "0.11.4"
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.4.tgz#6101992fe4724cf5634018a16e953f3052e94e2a"
integrity sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==
vue-eslint-parser@^7.10.0: vue-eslint-parser@^7.10.0:
version "7.10.0" version "7.10.0"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz#ea4e4b10fd10aa35c8a79ac783488d8abcd29be8" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz#ea4e4b10fd10aa35c8a79ac783488d8abcd29be8"
...@@ -7697,6 +7707,14 @@ vue@^3.2.8: ...@@ -7697,6 +7707,14 @@ vue@^3.2.8:
"@vue/runtime-dom" "3.2.8" "@vue/runtime-dom" "3.2.8"
"@vue/shared" "3.2.8" "@vue/shared" "3.2.8"
vuemoji-picker@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/vuemoji-picker/-/vuemoji-picker-0.0.7.tgz#382d365e75644683dba0530945ed4495eaeb1708"
integrity sha512-Q0RM6qo67Px3evoY9EbEg7HzBuk+u3D+c9r4wMyU71GQQnDFKEo4ZmI7OVjonwkCyk/6C6RDpQAtGOwfahXkoA==
dependencies:
emoji-picker-element "^1.6.5"
vue-demi "^0.11.2"
vuex@^4.0.0: vuex@^4.0.0:
version "4.0.2" version "4.0.2"
resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9" resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
......
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