blob: bf80fd55a025c692ecb46d86f71725a2467a1241 (
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
59
60
61
62
63
64
65
66
67
68
|
# Graffiti for Vanilla Javascript
This is the base Javascript library that interfaces with the [Graffiti server](https://github.com/digital-graffiti/server).
We recommend not using this vanilla library itself but instead using framework plugins that are built on top of it like the [Graffiti plugin for Vue.JS](https://github.com/digital-graffiti/graffiti-x-vue).
Example usage:
```javascript
import Graffiti from "https://digital-graffiti.github.io/graffiti-x-js/graffiti.js"
// You can initialize a connection to the graffiti server
const graffiti = Graffiti()
await graffiti.initialize()
// You can subscribe to queries
const queryID = await graffiti.subscribe({
type: 'post',
content: { $type: 'string' }
}
// With an arbitrary update callback
(obj) => console.log(`An object has been created: {obj}`),
// and remove callback
(obj) => console.log(`An object with id {obj._id} by user {obj._by} has been removed.`)
)
// And then unsubscribe to those queries
await graffiti.unsubscribe(queryID)
// You can toggle logging in and out
graffiti.toggleLogIn()
// When you are logged in you can reference your user ID
console.log(graffiti.myID)
// And when you are logged in you can
// create objects,
const myCoolPost = {
type: 'post',
content: 'hello world'
}
// ("completing" an object annotates
// it with your user ID and a random
// object ID, required by the server)
graffiti.complete(myCoolPost)
await graffiti.update(myCoolPost, {})
// replace objects,
myCoolPost.content += '!!!'
await graffiti.update(myCoolPost, {})
// and remove objects.
await graffiti.remove(myCoolPost)
// The second argument in the update
// function is a query. If the object you
// try to add does not match the query
// it will be rejected. This prevents
// you from accidentally creating data
// that gets "lost".
const query = { type: 'post' }
const myPost = { type: 'post' }
const myNotPost = { type: 'notpost' }
graffiti.complete(myNotPost)
// This works
await graffiti.update(myPost, query)
// But this won't work!
await graffiti.update(myNotPost, query)
```
|
