forked from SolidOS/solid-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
289 lines (261 loc) · 12.9 KB
/
Copy pathindex.html
File metadata and controls
289 lines (261 loc) · 12.9 KB
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset='UTF-8'>
<title>solid-ui UI.pad examples page</title>
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
<script>
function showData(functionName) {
const viewDataElement = document.querySelector(`#viewData-${functionName}`)
if (!viewDataElement) return
viewDataElement.innerHTML = document.querySelector(`#data-${functionName}`).innerText
.replace(/ /g, '')
.replace(/</g, '<')
.replace(/>/g, '>')
}
function showSource(functionName) {
document.querySelector(`#viewSource-${functionName}`).innerHTML = document.querySelector(`#script-${functionName}`).innerText
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
}
function loadData(dataTag) {
UI.rdf.parse(dataTag.innerText, UI.store, location.origin, 'text/turtle', error => {
if (error) console.error(error)
})
}
Array.from(document.querySelectorAll('script[type="text/turtle"]')).forEach(dataTag => loadData(dataTag))
window.addEventListener('DOMContentLoaded', () => {
Array.from(document.querySelectorAll('article')).forEach(title => {
const section = title.id
showData(section)
showSource(section)
})
})
</script>
</head>
<body>
<h1>The Pad module</h1>
<p>
On this page you'll find some examples from the Pad module. See <a
href="https://solid.github.io/solid-ui/Documentation/api/modules/_pad_.html#pad">API
documentation</a> for more info about how to use the pad module.
</p>
<article id="notepad">
<h2>
<a href='#notepad'>
<code>notepad</code>: Working with the Notepad
</a>
</h2>
<p>
The Notepad provides functionality to both create a new Notepad or view/edit an existing one.
The code below shows an example of how to view an existing notepad.
<ul>
<li>Use the store and fetcher to fetch the notepad document.</li>
<li>Provide the full path of the pad document you are fetching.</li>
<li>Provide the URI of the author/editor of the document.</li>
<li>Provide the full path of the subject for this pad. As you can see in the example below it is the same
as the pad, except you also need to include '#this'.
</li>
<li>Optional: Provide a StatusArea property (HTMLDIVElement) to display error messages</li>
</ul>
</p>
<script id='script-notepad'>
window.addEventListener('DOMContentLoaded', async (event) => {
const kb = UI.store
const fetcher = UI.rdf.fetcher(kb)
const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1585026584938/index.ttl')
const me = new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me')
const subject = UI.store.sym('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1585026584938/index.ttl#this')
const options = { exists: true }
await fetcher.load(pad.doc()) // if you don't have this you will get an inconsistency error
const result = UI.pad.notepad(document, pad.doc(), subject, me, options)
document.querySelector('#div-notepad').appendChild(result)
})
</script>
<pre id='viewSource-notepad'></pre>
<div id='div-notepad'></div>
In order to create a new notepad you need to change three things:
<ul>
<li>Provide user authentication. You can do this by by including solid-auth-client as explained in
https://solidproject.org/for-developers/apps/first-app/1-authentication </li>
<li>Change the exists flag on the options object to <code>false</code>.</li>
<li>Use the updater to create the document in the store, instead of using the <code>fetcher.load()</code> function
above. The code below is a simple example (without error handling) to give you an idea of how this works.
<code> kb.updater.put(pad, [], 'text/turtle', function (pad, subject, me, options) {
const result = UI.pad.notepad(document, pad, subject, me, options)
document.querySelector('#div-notepad').appendChild(result)
}</code></li>
</ul>
</article>
<article id="notepadToHTML">
<h2>
<a href="#notepadToHTML">
<code>notepadToHTML</code>: Converts a Turtle file to an HTML
</a>
</h2>
<p>
This method converts a pad document to HTML so that it can be exported.
</p>
<script id="script-notepadToHTML">
window.addEventListener('DOMContentLoaded', async (event) => {
const kb = UI.store
const fetcher = UI.rdf.fetcher(kb)
const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this')
await fetcher.load(pad.doc())
const htmlStr = UI.pad.notepadToHTML(pad, kb)
const doc = document.querySelector('#iframe-notepadToHTML').contentWindow.document
doc.open()
doc.write(htmlStr)
doc.close()
})
</script>
<pre id="viewSource-notepadToHTML"></pre>
<iframe id="iframe-notepadToHTML" src="about:blank"></iframe>
<div id="div-notepadToHTML"></div>
</article>
<article id="lightColorHash">
<h2>
<a href="#lightColorHash">
<code>lightColorHash</code> : Returns a color in hex format calculated by hashing a WebID
</a>
</h2>
<p>This method returns a hex value for setting a unique color on the input box of the notepad for a given
editor/user.
It does this by hashing the WebID passed in as an argument. Ideally this would be the WebID of the person
logged in. However, this function could be used in any situation where you need to have a unique color to style
a component based on WebIDs.
</p>
<p>The example below shows how you can use the lightColorHash function.</p>
<script id="script-lightColorHash">
window.addEventListener('DOMContentLoaded', (event) => {
const colorStr = UI.pad.lightColorHash(new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me'))
const inputBox = document.createElement('INPUT')
inputBox.setAttribute("type", "text")
inputBox.style.backgroundColor = colorStr
document.querySelector('#div-lightColorHash').appendChild(inputBox)
})
</script>
<pre id="viewSource-lightColorHash"></pre>
<div id="div-lightColorHash"></div>
</article>
<article id='manageParticipation'>
<h2>
<a href='#manageParticipation'>
<code>manageParticipation</code>: Creates the table to display the participants
</a>
</h2>
<p>ManageParticpation manages the pad document editors. </p>
<p>The example below shows how to use this function. </p>
<ul>
<li>Provide the HTMLTableElement or HTMLDivElement on which to render the participants.</li>
<li>Provide the full path to the pad document.</li>
<li>Provide the full path to the subject, which is the pad document + '#this'.</li>
<li>Optional: There are three properties that can be set on the options object.</li>
<ul>
<li>statusArea - a place to show error messages from pad.</li>
<li>draggable - set this to true in order to make the participant draggable.</li>
<li>deleteFunction - provide a delete function to enable the delete functionality.</li>
<li>link - this should create a link to the WebID.</li>
</ul>
</ul>
<script id='script-manageParticipation'>
window.addEventListener('DOMContentLoaded', (event) => {
const me = new UI.rdf.NamedNode('https://example-user.inrupt.net/profile/card#me')
const structure = document.createElement('div')
const padMessages = document.createElement('div')
const subject = UI.store.sym('https://example-user.inrupt.net/public/example-notepad/index.ttl#this')
const pad = UI.rdf.namedNode('https://example-user.inrupt.net/public/example-notepad/index.ttl')
options = { statusArea: padMessages }
// const result = UI.pad.manageParticipation(document, structure, pad.doc(), subject, me, options)
// document.querySelector('#div-manageParticipation').appendChild(result)
})
</script>
<pre id='viewSource-manageParticipation'></pre>
<div id='div-manageParticipation'></div>
</article>
<article id="renderPartipants">
<h2>
<a href="#renderPartipants">
<code>renderPartipants</code>: Creates a table of participants on a given notepad document
</a>
</h2>
<p>Creates the table with the list of participants that have contributed to
the given pad. This is used by manageParticipation, but can be used on it's own as well. </p>
<p>The example below shows how to use this function, however the function call
is commented out because it will add a triple each time this page is rendered just as the renderParticpants
function below. </p>
<ul>
<li>Use the fetcher to load the pad document.</li>
<li>Provide the HTMLTableElement on which to render the participants.</li>
<li>Provide the full path to the pad document.</li>
<li>Provide the full path to the subject, which is the pad document + '#this'.</li>
<li>Optional: There are three properties that can be set on the options object.</li>
<ul>
<li>draggable - set this to true in order to make the participant draggable.</li>
<li>deleteFunction - provide a delete function to enable the delete functionality.</li>
<li>link - this should create a link to the WebID.</li>
</ul>
</ul>
<script id="script-renderPartipants">
window.addEventListener('DOMContentLoaded', async (event) => {
const kb = UI.store
const fetcher = UI.rdf.fetcher(kb)
const table = document.createElement('table');
const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1585026584938/index.ttl')
const subject = kb.sym('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1585026584938/index.ttl#this')
const options = { draggable: true, link: true, deleteFunction: () => alert("deleted") }
await fetcher.load(pad.doc())
const tableOfParticipants = UI.pad.renderPartipants(document, table, pad, subject, new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me'), options)
document.querySelector('#div-renderPartipants').appendChild(tableOfParticipants)
})
</script>
<pre id='viewSource-renderPartipants'></pre>
<div id='div-renderPartipants'></div>
</article>
<article id="participationObject">
<h2> <a href="#participationObject">
<code>participationObject</code>: Contains the subject, pad and WebID for the participants
</a>
</h2>
<p></p>
<script id='script-participationObject'>
window.addEventListener('DOMContentLoaded', async (event) => {
const kb = UI.store
const subject = kb.sym('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this');
const fetcher = UI.rdf.fetcher(kb)
const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl')
await fetcher.load(pad.doc())
const me = new UI.rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me')
const htmlStr = await UI.pad.participationObject(subject, pad, me);
document.querySelector('#div-participationObject').appendChild(document.createTextNode(htmlStr))
})
</script>
<pre id="viewSource-participationObject"></pre>
<div id="div-participationObject"></div>
</article>
<article id="recordParticipation">
<h2> <a href="#recordParticipation">
<code>recordParticipation</code>: Adds the WebID of the user to the participant store
</a></h2>
<p>Records the participants in the store for the given document and returns the participation object.
This is also used in manageParticipation, but could also be used on it's own to create a particpation triple. </p>
<p>The code below provides an example of the code you need to write to use this function, however the function call
is commented out because it will add a triple each time this page is rendered. </p>
<script id="script-recordParticipation">
window.addEventListener('DOMContentLoaded', async (event) => {
const kb = UI.store
const subject = kb.sym('https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1585026584938/index.ttl#this');
const fetcher = UI.rdf.fetcher(kb)
const pad = UI.rdf.namedNode('https://sharonstrats.inrupt.net/public/example-notepad/index.ttl#this')
await fetcher.load(pad.doc())
// const htmlStr = UI.pad.recordParticipation(subject, pad, false);
})
</script>
<pre id="viewSource-recordParticipation"></pre>
<div id="div-recordParticipation"></div>
</article>
</body>
</html>