forked from goodow/realtime-web-playground
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
234 lines (212 loc) · 11.3 KB
/
index.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description"
content="The Goodow Realtime Store API Playground allows you to experiment with the Goodow Realtime Store API." />
<meta name="keywords"
content="Goodow, realtime, store, Javascript, operational, transforms" />
<title>Goodow Realtime Store API Playground</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" charset="utf-8">
<!--<script type="text/javascript" src="bower_components/realtime-store/store.nocache.js"></script>-->
<script type="text/javascript" src="bower_components/realtime-store/realtime.store.js"></script>
<script type="text/javascript" src="bower_components/realtime-store/realtime.store.databinding.js"></script>
<script type="text/javascript" src="bower_components/bower-sockjs-client/sockjs.js"></script>
<script type="text/javascript" src="bower_components/google-diff-match-patch-js/diff_match_patch.js"></script>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/rtpg.js"></script>
<script type="text/javascript" src="js/rtpg.log.js"></script>
<script type="text/javascript" src="js/rtpg.string.js"></script>
<script type="text/javascript" src="js/rtpg.list.js"></script>
<script type="text/javascript" src="js/rtpg.map.js"></script>
<!-- <script type="text/javascript" src="js/rtpg.custom.js"></script> -->
<script type="text/javascript" src="js/rtpg.collaborators.js"></script>
<script type="text/javascript" src="js/rtpg.ui.js"></script>
</head>
<body>
<div id="message"></div>
<div class="rp-appbar">
<h2 class="rp-appname">Goodow Realtime Store API Playground</h2>
</div>
<div id="leftContainer">
<section id="collabSections" class="disabled">
<div class="notesBox rp-greyRuledTop rp-greyRuledBottom">
<h3>
<span style="color: #777; margin-left: 10px;">Collaborative Types</span>
</h3>
</div>
<section id="collabIntro" class="rp-greyRuledBottom" style="padding-bottom: 10px">
<div class="rp-section-content">
<p class="demoDescription">
Goodow Realtime Store collaborative documents are made of 4 types of collaborative elements: String, Lists,
Maps and Custom objects. A Goodow Realtime Store collaborative document can have as many of these collaborative
elements as they need. As a demonstration, You will find below UI widgets representing collaborative
elements of each type.
</p>
<div id="realtimeInitialized" style="display:none;margin-bottom:10px;">
<span style="font-size: 20px; color: green;">✓</span>
Your Realtime session has been initialized. You can now use the widgets below.
</div>
</div>
</section>
<section id="collabStringDemo" class="rp-greyRuledBottom" style="padding-bottom: 20px">
<div class="rp-section-content">
<h2>Collaborative strings</h2>
<p class="demoDescription">Collaborative strings are just like normal strings, except that all browser
sessions will be notified and updated when the string changes. Events are fired when strings are
inserted to the collaborative string or when part of the string is deleted.</p>
<h4>Edit the demo Collaborative String</h4>
<textarea id="demoStringInput" style="margin-top: 10px"></textarea>
<a target="_blank" class="demoReferenceLink" href="https://developers.google.com/drive/realtime/reference/gapi.drive.realtime.CollaborativeString">Reference docs</a>
- <a target="_blank" href="https://github.com/goodow/realtime-web-playground/blob/master/app/js/rtpg.string.js">Source code</a>
</div>
</section>
<section id="collabListDemo" class="rp-greyRuledBottom" style="padding-bottom: 20px">
<div class="rp-section-content">
<h2>Collaborative lists</h2>
<p class="demoDescription">A collaborative list state is shared across
sessions. Events are fired when items are added or removed to the list
or when an existing item's value is set.</p>
<h4>Add, remove or set items on the demo Collaborative List</h4>
<table style="margin: 10px 0;">
<tr>
<td style="text-align: center; color: grey; font-style: italic;">
List items <br />
<ul id="demoListInput">
</ul>
</td>
<td style="padding-left: 20px;">
<button id="demoListRemove" class="rp-button">Remove selected item</button>
<button id="demoListAdd" class="rp-button">Add an item</button>
<input id="demoListAddContent" type="text"><br />
<button id="demoListClear" class="rp-button">Clear the list</button>
<button id="demoListSet" class="rp-button">Set selected item's value</button>
<input id="demoListSetContent" type="text"><br />
<button id="demoListMove" class="rp-button" style="display:none;">Move selected item to index</button>
<input id="demoListMoveItem" type="text" style="display:none;">
</td>
</tr>
</table>
<a target="_blank" class="demoReferenceLink" href="https://developers.google.com/drive/realtime/reference/gapi.drive.realtime.CollaborativeList">Link to reference doc</a>
- <a target="_blank" href="https://github.com/goodow/realtime-web-playground/blob/master/app/js/rtpg.list.js">Source code</a>
</div>
</section>
<section id="collabMapDemo" class="rp-greyRuledBottom" style="padding-bottom: 20px">
<div class="rp-section-content">
<h2>Collaborative maps</h2>
<p class="demoDescription">Collaborative maps share key/value state
across sessions. They support standard map operations. Events are
fired when key-value pairs are changed.</p>
<h4>Add, change or remove key-value pairs on the demo Collaborative Map</h4>
<table style="margin: 10px 0;">
<tr>
<td style="vertical-align: top; padding-right: 10px;">
<table>
<tr>
<td style="text-align: center; color: grey; font-style: italic;">
Keys
</td><td style="text-align: center; color: grey; font-style: italic;">
Values
</td>
</tr>
<tr>
<td>
<select size="9" id="demoMapKeys"></select>
</td><td>
<select size="9" id="demoMapValues"></select>
</td>
</tr>
</table>
</td>
<td style="padding-left: 10px;">
<button id="demoMapRemove" class="rp-button" style="margin-bottom: 10px;">Remove selected item</button><br />
<button id="demoMapClear" class="rp-button" style="margin-bottom: 10px;">Clear the map</button><br />
<table>
<tr>
<td style="vertical-align: top; padding-right: 10px;">
<button id="demoMapPut" class="rp-button">Put key-value pair</button>
</td><td style="line-height: 28px;">
Key: <input id="demoMapKey" type="text" style="margin-left: 12px;">
</td>
<tr>
<td>
</td><td style="padding-top: 10px; line-height: 28px;">
Value: <input id="demoMapValue" type="text">
</td>
</tr>
</table>
</td>
</tr>
</table>
<a target="_blank" class="demoReferenceLink" href="https://developers.google.com/drive/realtime/reference/gapi.drive.realtime.CollaborativeMap">Link to reference doc</a>
- <a target="_blank" href="https://github.com/goodow/realtime-web-playground/blob/master/app/js/rtpg.map.js">Source code</a>
</div>
</section>
<section id="collabCustomDemo" style="display:none;">
<div class="rp-section-content">
<h2>Collaborative custom objects</h2>
<p class="demoDescription">Collaborative custom object have properties
who's state is shared across sessions. Events are fired when property
values are changed.</p>
<h4>Modify properties of the demo Collaborative Custom Object</h4>
<table id="demoCustomContainer">
<tr>
<td style="text-align: center; color: grey; font-style: italic;">Properties</td>
<td style="text-align: center; color: grey; font-style: italic;">Values</td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" id="demoCustomName" /></td>
</tr>
<tr>
<td>Director</td>
<td><input type="text" id="demoCustomDirector" /></td>
</tr>
<tr>
<td>Notes</td>
<td><textarea id="demoCustomNotes"></textarea></td>
</tr>
<tr>
<td>Rating</td>
<td><input type="text" id="demoCustomRating" /></td>
</tr>
</table>
<a target="_blank" class="demoReferenceLink" href="https://developers.google.com/drive/realtime/reference/gapi.drive.realtime.CollaborativeObject">Link to reference doc</a>
- <a target="_blank" href="https://github.com/goodow/realtime-web-playground/blob/master/app/js/rtpg.custom.js">Source code</a>
</div>
</section>
</section>
</div>
<div id="rightContainer">
<div id="fakeappbar">
<button id="undoButton" disabled="true" class="rp-button">Undo</button>
<button id="redoButton" disabled="true" class="rp-button">Redo</button>
<div id="collaborators">
</div>
</div>
<span id="logTitle" class="componentName" style="padding-top:1px;margin: 10px 0 5px 15px;">Event Logs
<span id="filterLocalContainer"><input id="filterLocal" type="checkbox">Hide local events</span></span>
<div class="scrollBarBox">
<div id="logContainer" class="scrollBarInner">
<div class="kd-list">
<table id="demoLog" class="gmail knurling"></table>
</div>
<div class="shadow" style="opacity: 0;"></div>
</div>
</div>
</div>
<a href="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/goodow/realtime-web-playground"><img style="position: fixed; bottom: 0; right: 0; border: 0; z-index:1000;" src="images/github.png" alt="Fork me on GitHub"></a>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-52163425-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http:https://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>