1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
import { ref, reactive } from 'vue'
import Graffiti from '../../graffiti.js'
export default {
install(app, options) {
const graffitiURL = options && 'url' in options?
options.url : 'https://graffiti.garden'
// Initialize graffiti
const graffiti = new Graffiti(graffitiURL, ()=>reactive({}))
// These ID need to change after opening
app.config.globalProperties.$graffitiID = ref(null)
graffiti.opened().then(()=> {
app.config.globalProperties.$graffitiID.value = graffiti.myID
})
// Add static functions
const methodMapping = {
'ToggleLogIn': 'toggleLogIn',
'Update': 'update',
'Tags': 'myTags',
'ObjectByKey': 'objectByKey'
}
for (const key in methodMapping) {
app.config.globalProperties['$graffiti'+key] =
graffiti[methodMapping[key]].bind(graffiti)
}
// A component for subscribing and
// unsubscribing to tags that returns
// a reactive array of the results
app.component('GraffitiObjects', {
props: ['tags'],
watch: {
tags: {
async handler(newTags, oldTags=[]) {
// Subscribe to the new tags
await graffiti.subscribe(...newTags)
// Unsubscribe to the existing tags
await graffiti.unsubscribe(...oldTags)
},
immediate: true,
deep: true
}
},
// Handle unmounting too
unmount() {
graffiti.unsubscribe(this.tags)
},
computed: {
objects() {
return graffiti.objectsByTags(...this.tags)
}
},
template: '<slot :objects="objects"></slot>'
})
}
}
|
