-
Notifications
You must be signed in to change notification settings - Fork 0
/
1-rs.html
101 lines (83 loc) · 3.4 KB
/
1-rs.html
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="assets/demo.css">
<script src="https://cdn.jsdelivr.net/npm/remotestoragejs@latest/release/remotestorage.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remotestorage-widget@latest/build/widget.js"></script>
</head>
<body class="w3-content">
<!--- RS widget anchor div -->
<div id="remotestorage-widget-anchor"></div>
<div class="w3-container w3-padding-32"><div class="w3-card w3-sand w3-margin note">
<img class="w3-left info" src="assets/info.png">
<p>Click the cake buttons to set your current favourite.</p>
</div></div>
<!--- the cake choice display hooked to app state changes -->
<div class="w3-row w3-padding-32 centered">
<div id="choice" class="w3-col s4 w3-center">
</div>
</div>
<!--- the three app state changing buttons -->
<div class="w3-row w3-padding-32 ">
<div class="w3-col s4 w3-center">
<button class="w3-button w3-black" onClick="setState({...appstate, cake_choice: 'Black Forest'})">Set "Black Forest"</button>
</div>
<div class="w3-col s4 w3-center">
<button class="w3-button w3-red" onClick="setState({...appstate, cake_choice: 'Carrot'})">Set "Carrot"</button>
</div>
<div class="w3-col s4 w3-center">
<button class="w3-button w3-khaki" onClick="setState({...appstate, cake_choice: 'Tiramisu'})">Set "Tiramisu"</button>
</div>
</div>
</body>
<script>
// Application state JSON schema
//
// Documentation: https://remotestoragejs.readthedocs.io/en/latest/js-api/base-client.html#declareType
const AppState = {
type: 'object',
properties: {
cakce_choice: {
type: 'string'
}
},
required: ['cake_choice']
};
// Our appstate object
var appstate = {
cake_choice: null
}
// Construct and dependency inject
const remoteStorage = new RemoteStorage({changeEvents: { local: true, window: true, remote: true, conflicts: true }});
remoteStorage.access.claim('remotestorage-tutorial', 'rw');
const client = remoteStorage.scope('/remotestorage-tutorial/');
// Initialize
document.addEventListener('DOMContentLoaded', function() {
var widget = new Widget(remoteStorage, { leaveOpen:true });
widget.attach('remotestorage-widget-anchor');
client.cache('');
// Register our application state JSON schema
//
// Documentation: https://remotestoragejs.readthedocs.io/en/latest/js-api/base-client.html#declareType
client.declareType('AppState', AppState);
// React to application state changes from RS
//
// Documentation: https://remotestoragejs.readthedocs.io/en/latest/js-api/base-client.html#change-events
client.on('change', (event) => {
if (event.relativePath === 'appstate') {
appstate = event.newValue;
document.getElementById('choice').innerHTML = appstate.cake_choice;
}
});
});
// Change the application state within RS
//
// Documentation: https://remotestoragejs.readthedocs.io/en/latest/js-api/base-client.html#storeObject
function setState(newState) {
client.storeObject('AppState', 'appstate', newState);
}
</script>
</html>