Commit ee51e416 authored by Adam Procter's avatar Adam Procter
Browse files

various attempts at keyboard and focus

Plan is to undo all this now and start a global event and add in focus trap
parent a85f60b6
......@@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.10.0",
"freeze-dry": "^0.2.4",
"marked": "^2.0.1",
"pouchdb": "^7.2.2",
"vue": "^3.0.9",
......
<template>
<form>
<span class="arrow">⬇⬇</span>
<h1>What shall we call you ? 👩‍🚀</h1>
<p>
First we need to connect this device to your ideas. This name is what
......@@ -14,6 +15,7 @@
v-model.trim="name"
type="text"
id="name"
ref="name"
placeholder="type name here!"
autocorrect="off"
autocapitalize="none"
......@@ -29,6 +31,7 @@
</p>
<div class="breaker-two">
<label for="microcosm">Microcosm:</label>
<input
v-model.trim="microcosm"
ref="microcosm"
......@@ -37,11 +40,13 @@
placeholder="type microcosm name here!"
autocorrect="off"
autocapitalize="none"
@keyup.enter="setName(), setMicrocosm()"
/>
<button type="button" @click="setName(), setMicrocosm()">
Start or Join
</button>
<router-link to="/collect">
<button type="button" @click="setName(), setMicrocosm()">
Start or Join
</button>
</router-link>
<button class="configButton" type="button" @click="settings = !settings">
Change CouchDB Configuration
</button>
......@@ -112,10 +117,22 @@
export default {
name: 'JoinMicrocosm',
created() {
window.addEventListener('keypress', this.keyCommand)
},
unmounted() {
window.removeEventListener('keypress', this.keyCommand)
},
props: {
isStart: Boolean,
},
data: function () {
return {
// what you are calling yourself / device
name: '',
nameSet: false,
nameFormatted: '',
// Next dataset related to microcosm
......@@ -130,7 +147,33 @@ export default {
}
},
watch: {
// this doesnt run as isStart is in v-if component
isStart: {
deep: true,
handler: function (newVal, oldVal) {
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
this.$refs.name.focus()
},
},
},
methods: {
microcosmField() {
this.$refs.microcosm.focus()
},
keyCommand(e) {
if (
(e.keyCode == 13 && this.nameSet == false) ||
(e.keyCode == 9 && this.nameSet == false)
) {
console.log('tabb')
this.setName()
} else if (e.keyCode == 13) {
this.setMicrocosm()
}
},
setName() {
// format name so no spaces or dashes PouchDB/ CouchDB dont like them
var lowercasename = this.name.toLowerCase()
......@@ -138,13 +181,10 @@ export default {
this.nameFormatted = spacesremoved.split('-').join('')
this.nameSet = true
localStorage.setItem('nogg_name', this.nameFormatted)
// focus on next input field for speed
this.focusInput()
// now we sent this same data set to the store
// this.$store.dispatch('setName', this.nameFormatted)
},
setMicrocosm() {
this.$router.push({ path: '/collect' })
// format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
var lowercasemicrocosm = this.microcosm.toLowerCase()
var spacesremoved = lowercasemicrocosm.split(' ').join('')
......@@ -166,10 +206,6 @@ export default {
url,
})
},
focusInput() {
this.$refs.microcosm.focus()
},
},
}
</script>
......
<template
><div>
<template>
<div>
<h1>Messy mapping tool for multiplayer thinking</h1>
<p class="info">⚠️This is a non functional beta build of nodenogg.in⚠️</p>
<p>
......@@ -36,7 +36,7 @@
<script>
export default {
name: 'TellmeMore'
name: 'TellmeMore',
}
</script>
......
<template>
<div>
<button @click="addNode()">Add Node</button>
<button>Select Node</button>
<button>Make Connections</button>
<UploadMedia />
</div>
</template>
<script>
// @ is an alias to /src
import UploadMedia from '@/components/UploadMedia.vue'
export default {
name: 'ToolBar',
components: {
UploadMedia,
},
data() {
return {}
},
methods: {
addNode() {
this.$store.dispatch('addNode')
this.$emit('added-node')
},
},
}
</script>
<style scoped></style>
<template>
<div></div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'UploadMedia',
components: {},
data() {
return {}
},
}
</script>
<style scoped></style>
<template>
<div v-for="(nodes, index) in myArray" v-bind:key="index">
<form class="nodes">
<p>{{ nodes.node_id }}</p>
<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)"
></textarea>
<p class="info">*markdown supported &amp; autosaves</p>
</template>
<template v-else>
<p
class="readmode"
:id="nodes.node_id"
:inner-html.prop="nodes.node_text"
></p>
</template>
</form>
</div>
</template>
<script>
// @ is an alias to /src
import { mapState } from 'vuex'
export default {
name: 'YourNodes',
props: {
added: Boolean,
},
data() {
return {
myArray: [],
}
},
computed: {
...mapState({
myNodes: (state) => state.mynodes,
}),
nodesFiltered: function () {
return this.myNodes.myNodes.filter((nodes) => {
return nodes.node_deleted == false
})
},
},
mounted() {
setTimeout(this.loadData, 500)
},
watch: {
added: {
deep: true,
handler() {
setTimeout(this.loadData, 200)
},
},
},
methods: {
loadData() {
this.myArray = this.nodesFiltered
this.$forceUpdate()
},
editNode(e) {
var nodeid = e.target.id
var nodetext = e.target.value
this.$store.dispatch('editNode', { nodeid, nodetext })
},
},
}
</script>
<style scoped>
.nodes {
width: 95%;
border: 2px dashed black;
background-color: rgb(155, 194, 216);
margin-top: 1em;
margin-left: 0.5em;
}
</style>
......@@ -16,6 +16,15 @@ const routes = [
component: () =>
import(/* webpackChunkName: "credits" */ '../views/Credits.vue'),
},
{
path: '/collect',
name: 'Collect',
// route level code-splitting
// this generates a separate chunk (credits.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "credits" */ '../views/Collect.vue'),
},
]
const router = createRouter({
......
var pouchdb
var deviceName
export const state = {
myNodes: [],
activeNode: {},
}
export const mutations = {
ADD_NODE() {
return pouchdb
.get(deviceName)
.then(function () {
var uniqueid =
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
pouchdb.get(deviceName).then(function (doc) {
doc.nodes.push({
node_id: uniqueid,
node_text: '',
node_owner: deviceName,
node_type: 'sheet',
node_shape: 'square',
node_deleted: false,
node_readmode: false,
node_color: '#9bc2d8',
})
return pouchdb
.put({
_id: deviceName,
_rev: doc._rev,
nodes: doc.nodes,
})
.then(function () {
return pouchdb.get(deviceName).then(function (doc) {
state.myNodes = doc.nodes
var end = Object.keys(state.myNodes).length - 1
const newNode = {
nodeid: state.myNodes[end].node_id,
nodetext: state.myNodes[end].node_text,
}
// this was to set quick focus on new nodes
// i think... need to check old code
state.activeNode = newNode
})
})
.catch(function (err) {
console.log(err.status)
})
})
})
.catch(function (err) {
console.log(err)
if (err.status == 404) {
var uniqueid =
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
pouchdb.put({
_id: deviceName,
nodes: [
{
node_id: uniqueid,
node_text: '',
node_owner: deviceName,
node_type: 'sheet',
node_shape: 'square',
node_deleted: false,
node_readmode: false,
node_color: '#9bc2d8',
},
],
})
}
})
},
GET_NODES() {
pouchdb
.get(deviceName)
.then(function (doc) {
var i
for (i = 0; i < Object.keys(doc.nodes).length; i++) {
state.myNodes = doc.nodes
}
console.log(state.myNodes)
})
.catch(function () {
// console.log(err)
})
},
EDIT_NODE(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
if (e.nodeid == state.myNodes[i].node_id) {
state.myNodes[i].node_text = e.nodetext
}
}
pouchdb
.get(deviceName)
.then(function (doc) {
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: deviceName,
_rev: doc._rev,
_attachments: doc._attachments,
nodes: state.myNodes,
},
])
})
.then(function () {
return pouchdb.get(deviceName).then(function (doc) {
state.myNodes = doc.nodes
})
})
.catch(function (err) {
if (err.status == 404) {
// pouchdb.put({ })
}
})
},
}
export const actions = {
addNode: ({ commit }, e) => {
commit('ADD_NODE', e)
},
getNodes: ({ commit }, e) => {
commit('GET_NODES', e)
},
editNode: ({ commit }, { nodeid, nodetext }) => {
commit('EDIT_NODE', { nodeid, nodetext })
},
getMicrocosm(vuexContext) {
pouchdb = vuexContext.rootState.setup.pouchdb
deviceName = vuexContext.rootState.setup.deviceName
},
}
import { createStore } from 'vuex'
export const nodesstore = createStore({
state() {
return {
version: process.env.VUE_APP_VERSION,
myNodes: [],
allNodes: [],
}
},
mutations: {},
actions: {
})
export default nodesstore
// ADD_NODE(state) {
// var uniqueid =
// Math.random().toString(36).substring(2, 15) +
// Math.random().toString(36).substring(2, 15)
// if (state.microcosm == 'first_visit') {
// console.log('not allowed on this microcosm')
// } else {
// pouchdb.get(state.deviceName).then(function (doc) {
// doc.nodes.push({
// node_id: uniqueid,
// node_text: '',
// node_owner: state.deviceName,
// node_type: 'sheet',
// node_shape: 'square',
// node_deleted: false,
// node_readmode: false,
// node_color: '#9bc2d8',
// })
// return pouchdb
// .put({
// _id: state.name,
// _rev: doc._rev,
// _attachments: doc._attachments,
// nodes: doc.nodes,
// })
// .then(function () {
// return pouchdb.get(state.name).then(function (doc) {
// state.myNodes = doc.nodes
// var end = Object.keys(state.myNodes).length - 1
// const newNode = {
// nodeid: state.myNodes[end].id,
// nodetext: state.myNodes[end].text,
// }
// console.log(newNode)
// })
// })
// .catch(function (err) {
// if (err.status == 404) {
// // pouchdb.put({ })
// }
// })
// })
// }
// },
// GET_ALL_NODES(state) {
// pouchdb
// .allDocs({
// include_docs: true,
// })
// .then(function (doc) {
// state.allNodes = doc.rows
// })
// .catch(function () {
// //console.log(err)
// })
// },
// GET_MY_NODES(state) {
// pouchdb
// .get(state.deviceName)
// .then(function (doc) {
// var i
// for (i = 0; i < Object.keys(doc.nodes).length; i++) {
// state.myNodes = doc.nodes
// }
// })
// .catch(function () {
// // console.log(err)
// })
// },
......@@ -7,6 +7,7 @@ export const state = {
deviceName: '',
remoteAddress: '',
configRemote: [],
pouchdb: {},
}
export const mutations = {
......@@ -15,6 +16,7 @@ export const mutations = {
state.microcosmName = e.microcosm
pouchdb = new PouchDB(state.microcosmName)
state.pouchdb = pouchdb
if (state.configRemote && state.configRemote.length > 0) {
remote =
......@@ -62,7 +64,30 @@ export const actions = {
commit('SET_REMOTE', e)
},
startDB: () => {
pouchdb.replicate.from(remote).on('complete', function () {})
startDB: (vuexContext) => {
pouchdb.replicate.from(remote).on('complete', function () {
// GET_MYNODES from mynodes.js ACTION
//console.log('start')
vuexContext.dispatch('getNodes', null, { root: true })
//dispatch('getNodes')
pouchdb
.sync(remote, {
live: true,
since: 'now',
retry: true,
})
.on('change', function () {
// GET_MYNODES
console.log('change')
vuexContext.dispatch('getNodes', null, { root: true })
})
.on('paused', function () {})
.on('active', function () {})
.on('denied', function () {})
.on('complete', function () {})
.on('error', function (err) {
console.log(err)
})
})
},
}
import { createStore } from 'vuex'
import * as setup from '@/store/modules/setup.js'
//import * as nodes from '@/store/modules/nodes.js'
import * as mynodes from '@/store/modules/mynodes.js'
export const store = createStore({
//
modules: {
setup,
// nodes,
mynodes,
},
actions: {},
})
export default store
<template>
<ToolBar @added-node="addedNode" />
<YourNodes :added="added" />
</template>
<script>
// @ is an alias to /src
import ToolBar from '@/components/ToolBar.vue'