blob: e5483c6bb20cbe3239e8dcffab0aed30cf9c023b (
plain)
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
|
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.waitTilOpen().then(()=> {
app.config.globalProperties.$graffitiID.value = graffiti.myID
})
// Add logging in and out
app.config.globalProperties.$graffitiToggleLogIn =
graffiti.toggleLogIn.bind(graffiti)
// A composable 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>'
})
}
}
|
