Skip to content

Commit b3f21b7

Browse files
michielbdejongmichielbdejong
authored
Merge pull request SolidOS#261 from solid/forms-examples
Add some examples for forms
2 parents d00da0f + b159319 commit b3f21b7

1 file changed

Lines changed: 288 additions & 0 deletions

File tree

‎examples/forms/index.html‎

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<head>
4+
<meta charset='UTF-8'>
5+
<title>solid-ui UI.widgets.forms examples page</title>
6+
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
7+
<script>
8+
function showSource(widgetName) {
9+
document.getElementById(`viewSource-${widgetName}`).innerHTML = document.getElementById(`script-${widgetName}`).innerText
10+
.replace(/&/g, "&amp;")
11+
.replace(/</g, "&lt;")
12+
.replace(/>/g, "&gt;")
13+
.replace(/"/g, "&quot;")
14+
.replace(/'/g, "&#039;")
15+
}
16+
</script>
17+
</head>
18+
<body>
19+
<h1>See also:</h1>
20+
<ul>
21+
<li><a href="../../Documentation/forms-intro.html">Forms intro</a></li>
22+
<li><a href="../../Documentation/form-ecosystem.html">Form ecosystem</a></li>
23+
<li><a href="https://solid.github.io/form-playground/playground.html">Form Playground</a></li>
24+
<li><a href="https://solid.github.io/form-playground/browse.html">Form Browse</a></li>
25+
<li><a href="../../Documentation/api/">API docs</a></li>
26+
</ul>
27+
<!-- <h2 id="templateTitle"><a href="#templateTitle">templateTitle</a></h2>
28+
<script id="script-templateTitle">
29+
window.addEventListener('DOMContentLoaded', (event) => {
30+
UI.widgets.templateTitle()
31+
})
32+
</script>
33+
<pre id="viewSource-templateTitle"></pre><script>showSource('templateTitle')</script>
34+
<div id="div-templateTitle"></div> -->
35+
36+
<h2 id="mostSpecificClassURI"><a href="#mostSpecificClassURI">mostSpecificClassURI</a></h2>
37+
<script id="script-mostSpecificClassURI">
38+
window.addEventListener('DOMContentLoaded', async (event) => {
39+
const fullNameField = UI.rdf.namedNode('https://timbl.com/timbl/Public/Test/Forms/individualForm.ttl#fullNameField')
40+
await UI.store.fetcher.load(fullNameField.doc())
41+
const result = UI.widgets.mostSpecificClassURI(fullNameField)
42+
document.getElementById('div-mostSpecificClassURI').appendChild(document.createTextNode(result))
43+
})
44+
</script>
45+
<pre id="viewSource-mostSpecificClassURI"></pre><script>showSource('mostSpecificClassURI')</script>
46+
<div id="div-mostSpecificClassURI"></div>
47+
48+
<h2 id="fieldFunction"><a href="#fieldFunction">fieldFunction</a></h2>
49+
<script id="script-fieldFunction">
50+
window.addEventListener('DOMContentLoaded', async (event) => {
51+
const dom = document
52+
const container = document.getElementById('div-fieldFunction')
53+
const already = {}
54+
const subject = UI.rdf.namedNode('https://michielbdejong.inrupt.net/profile/card#me')
55+
const form = UI.rdf.namedNode('https://timbl.com/timbl/Public/Test/Forms/individualForm.ttl#form1')
56+
const doc = subject.doc()
57+
const callbackFunction = () => {
58+
console.log('callback fieldFunction called!')
59+
}
60+
await UI.store.fetcher.load(subject.doc())
61+
const fullNameField = UI.rdf.namedNode('https://timbl.com/timbl/Public/Test/Forms/individualForm.ttl#fullNameField')
62+
await UI.store.fetcher.load(fullNameField.doc())
63+
const fieldFunction = UI.widgets.fieldFunction(dom, fullNameField)
64+
const result = fieldFunction(dom, container, already, subject, fullNameField, doc)
65+
document.getElementById('div-fieldFunction').appendChild(result)
66+
})
67+
</script>
68+
<pre id="viewSource-fieldFunction"></pre><script>showSource('fieldFunction')</script>
69+
<div id="div-fieldFunction"></div>
70+
71+
<h2 id="appendFormTrivial"><a href="#appendFormTrivial">appendForm, trivial</a></h2>
72+
<script id="script-appendFormTrivial">
73+
window.addEventListener('DOMContentLoaded', async (event) => {
74+
const dom = document
75+
const container = document.getElementById('div-appendFormTrivial')
76+
const already = {}
77+
const subject = UI.rdf.namedNode('http://example.com/#subject')
78+
const form = UI.rdf.namedNode('http://example.com/#form')
79+
const doc = subject.doc()
80+
const callbackFunction = () => {
81+
console.log('callback appendFormTrivial called!')
82+
}
83+
UI.store.add(UI.rdf.namedNode('http://example.com/#form'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
84+
UI.store.add(UI.rdf.namedNode('http://example.com/#form'), UI.ns.ui('contents'), '[a trivial form with just a comment]')
85+
86+
UI.widgets.appendForm(dom, container, already, subject, form, doc)
87+
})
88+
</script>
89+
<pre id="viewSource-appendFormTrivial"></pre><script>showSource('appendFormTrivial')</script>
90+
<div id="div-appendFormTrivial"></div>
91+
92+
<h2 id="appendFormLive"><a href="#appendFormLive">appendForm, live</a></h2>
93+
<script id="script-appendFormLive">
94+
window.addEventListener('DOMContentLoaded', async (event) => {
95+
const dom = document
96+
const container = document.getElementById('div-appendFormLive')
97+
const already = {}
98+
const subject = UI.rdf.namedNode('https://michielbdejong.inrupt.net/profile/card#me')
99+
const form = UI.rdf.namedNode('https://timbl.com/timbl/Public/Test/Forms/individualForm.ttl#form1')
100+
const doc = subject.doc()
101+
const callbackFunction = () => {
102+
console.log('callback appendFormLive called!')
103+
}
104+
await UI.store.fetcher.load(doc)
105+
await UI.store.fetcher.load(form.doc())
106+
UI.widgets.appendForm(dom, container, already, subject, form, doc)
107+
})
108+
</script>
109+
<pre id="viewSource-appendFormLive"></pre><script>showSource('appendFormLive')</script>
110+
<div id="div-appendFormLive"></div>
111+
112+
<h2 id="formField"><a href="#formField">UI.widgets.field[UI.ns.ui('Form').uri] / UI.widgets.field[UI.ns.ui('Group').uri], no already</a></h2>
113+
<script id="script-formField">
114+
window.addEventListener('DOMContentLoaded', (event) => {
115+
const container = document.getElementById('div-formField')
116+
const already = {}
117+
const subject = UI.rdf.namedNode('http://example.com/#this')
118+
const form = UI.rdf.namedNode('http://example.com/#form')
119+
const store = UI.rdf.namedNode('http://example.com/#store')
120+
const callbackFunction = (ok, errorMessage) => {
121+
console.log(ok, errorMessage, document.getElementById('div-formField').innerHTML);
122+
}
123+
UI.store.add(form, UI.ns.ui('parts'), new UI.rdf.Collection([
124+
UI.rdf.namedNode('http://example.com/#part1'),
125+
UI.rdf.namedNode('http://example.com/#part2')
126+
]), UI.rdf.namedNode('http://example.com/'))
127+
UI.store.add(UI.rdf.namedNode('http://example.com/#part1'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
128+
UI.store.add(UI.rdf.namedNode('http://example.com/#part1'), UI.ns.ui('contents'), '[this is part 1 of the form]')
129+
UI.store.add(UI.rdf.namedNode('http://example.com/#part2'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
130+
UI.store.add(UI.rdf.namedNode('http://example.com/#part2'), UI.ns.ui('contents'), '[this is part 2 of the form]')
131+
132+
133+
// FIXME: https://github.com/solid/solid-ui/issues/239
134+
document.outlineManager = {
135+
appendPropertyTRs: () => {}
136+
}
137+
UI.widgets.field[UI.ns.ui('Form').uri](
138+
document,
139+
container,
140+
already,
141+
subject,
142+
form,
143+
store,
144+
callbackFunction
145+
);
146+
})
147+
</script>
148+
<pre id="viewSource-formField"></pre><script>showSource('formField')</script>
149+
<div id="div-formField"></div>
150+
151+
<h2 id="groupField"><a href="#groupField">UI.widgets.field[UI.ns.ui('Form').uri] / xUI.widgets.field[UI.ns.ui('Group').uri], with already</a></h2>
152+
<script id="script-groupField">
153+
// UI.widgets.field[UI.ns.ui('Group').uri] is currently synonymous with
154+
// UI.widgets.field[UI.ns.ui('Form').uri], but this additional example
155+
// shows the use of `already`.
156+
157+
window.addEventListener('DOMContentLoaded', (event) => {
158+
const container = document.getElementById('div-groupField')
159+
const subject = UI.rdf.namedNode('http://example.com/#this')
160+
const form = UI.rdf.namedNode('http://example.com/#form')
161+
const store = UI.rdf.namedNode('http://example.com/#store')
162+
const key = subject.toNT() + '|' + form.toNT()
163+
const already = {
164+
[key]: true
165+
}
166+
const callbackFunction = (ok, errorMessage) => {
167+
console.log(ok, errorMessage, document.getElementById('div-groupField').innerHTML);
168+
}
169+
170+
// FIXME: https://github.com/solid/solid-ui/issues/239
171+
document.outlineManager = {
172+
appendPropertyTRs: () => {}
173+
}
174+
UI.widgets.field[UI.ns.ui('Group').uri](
175+
document,
176+
container,
177+
already,
178+
subject,
179+
form,
180+
store,
181+
callbackFunction
182+
)
183+
})
184+
</script>
185+
<pre id="viewSource-groupField"></pre><script>showSource('groupField')</script>
186+
<div id="div-groupField"></div>
187+
188+
<h2 id="optionsFieldType"><a href="#optionsFieldType">UI.widgets.field[UI.ns.ui('Options').uri], using RDF types</a></h2>
189+
<script id="script-optionsFieldType">
190+
window.addEventListener('DOMContentLoaded', (event) => {
191+
const container = document.getElementById('div-optionsFieldType')
192+
const already = {}
193+
const subject = UI.rdf.namedNode('http://example.com/#this')
194+
const exampleOptionsField = UI.rdf.namedNode('http://example.com/#exampleOptionsField')
195+
const store = UI.rdf.namedNode('http://example.com/#store')
196+
const callbackFunction = (ok, errorMessage) => {
197+
console.log(ok, errorMessage, document.getElementById('div-optionsFieldType').innerHTML);
198+
}
199+
200+
// UI to display in case subject is a house:
201+
UI.store.add(exampleOptionsField, UI.ns.ui('case'), UI.rdf.namedNode('http://example.com/#if-subject-is-house'), UI.rdf.namedNode('http://example.com/'))
202+
UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-house'), UI.ns.ui('for'), UI.rdf.namedNode('http://example.com/#house'), UI.rdf.namedNode('http://example.com/'))
203+
UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-house'), UI.ns.ui('use'), UI.rdf.namedNode('http://example.com/#number-of-bedrooms'), UI.rdf.namedNode('http://example.com/'))
204+
UI.store.add(UI.rdf.namedNode('http://example.com/#number-of-bedrooms'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
205+
UI.store.add(UI.rdf.namedNode('http://example.com/#number-of-bedrooms'), UI.ns.ui('contents'), '[UI for houses]')
206+
207+
// UI to display in case subject is a cow:
208+
UI.store.add(exampleOptionsField, UI.ns.ui('case'), UI.rdf.namedNode('http://example.com/#if-subject-is-cow'), UI.rdf.namedNode('http://example.com/'))
209+
UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-cow'), UI.ns.ui('for'), UI.rdf.namedNode('http://example.com/#cow'), UI.rdf.namedNode('http://example.com/'))
210+
UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-cow'), UI.ns.ui('use'), UI.rdf.namedNode('http://example.com/#number-of-legs'), UI.rdf.namedNode('http://example.com/'))
211+
UI.store.add(UI.rdf.namedNode('http://example.com/#number-of-legs'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
212+
UI.store.add(UI.rdf.namedNode('http://example.com/#number-of-legs'), UI.ns.ui('contents'), '[UI for cows]')
213+
214+
// Subject is a cow, so it should display [UI for cows]
215+
UI.store.add(subject, UI.ns.rdf('type'), UI.rdf.namedNode('http://example.com/#cow'), UI.rdf.namedNode('http://example.com/'))
216+
217+
218+
// FIXME: https://github.com/solid/solid-ui/issues/239
219+
document.outlineManager = {
220+
appendPropertyTRs: () => {}
221+
}
222+
const result = UI.widgets.field[UI.ns.ui('Options').uri](
223+
document,
224+
container,
225+
already,
226+
subject,
227+
exampleOptionsField,
228+
store,
229+
callbackFunction
230+
)
231+
})
232+
</script>
233+
<pre id="viewSource-optionsFieldType"></pre><script>showSource('optionsFieldType')</script>
234+
<div id="div-optionsFieldType"></div>
235+
236+
<h2 id="optionsFieldDependingOn"><a href="#optionsFieldDependingOn">UI.widgets.field[UI.ns.ui('Options').uri], using dependingOn</a></h2>
237+
<script id="script-optionsFieldDependingOn">
238+
window.addEventListener('DOMContentLoaded', (event) => {
239+
const container = document.getElementById('div-optionsFieldDependingOn')
240+
const already = {}
241+
const subject = UI.rdf.namedNode('http://example.com/#this')
242+
const exampleOptionsField = UI.rdf.namedNode('http://example.com/#exampleOptionsField')
243+
const store = UI.rdf.namedNode('http://example.com/#store')
244+
const callbackFunction = (ok, errorMessage) => {
245+
console.log(ok, errorMessage, document.getElementById('div-optionsFieldDependingOn').innerHTML);
246+
}
247+
248+
// This form depends on colour:
249+
UI.store.add(exampleOptionsField, UI.ns.ui('dependingOn'), UI.rdf.namedNode('http://example.com/#persona'), UI.rdf.namedNode('http://example.com/'))
250+
251+
// UI to display in case subject is blue:
252+
UI.store.add(exampleOptionsField, UI.ns.ui('case'), UI.rdf.namedNode('http://example.com/#if-subject-is-developer'), UI.rdf.namedNode('http://example.com/'))
253+
UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-developer'), UI.ns.ui('for'), UI.rdf.namedNode('http://example.com/#developer'), UI.rdf.namedNode('http://example.com/'))
254+
UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-developer'), UI.ns.ui('use'), UI.rdf.namedNode('http://example.com/#ui-for-developers'), UI.rdf.namedNode('http://example.com/'))
255+
UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-developers'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
256+
UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-developers'), UI.ns.ui('contents'), '[UI for developers]')
257+
258+
// UI to display in case subject is red:
259+
UI.store.add(exampleOptionsField, UI.ns.ui('case'), UI.rdf.namedNode('http://example.com/#if-subject-is-power-user'), UI.rdf.namedNode('http://example.com/'))
260+
UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-power-user'), UI.ns.ui('for'), UI.rdf.namedNode('http://example.com/#power-user'), UI.rdf.namedNode('http://example.com/'))
261+
UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-power-user'), UI.ns.ui('use'), UI.rdf.namedNode('http://example.com/#ui-for-power-users'), UI.rdf.namedNode('http://example.com/'))
262+
UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-power-users'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
263+
UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-power-users'), UI.ns.ui('contents'), '[UI for power users]')
264+
265+
// Subject is both a developer and a power user, so it should display both [UI for developers] and [UI for power users]
266+
UI.store.add(subject, UI.rdf.namedNode('http://example.com/#persona'), UI.rdf.namedNode('http://example.com/#developer'), UI.rdf.namedNode('http://example.com/'))
267+
UI.store.add(subject, UI.rdf.namedNode('http://example.com/#persona'), UI.rdf.namedNode('http://example.com/#power-user'), UI.rdf.namedNode('http://example.com/'))
268+
269+
// FIXME: https://github.com/solid/solid-ui/issues/239
270+
document.outlineManager = {
271+
appendPropertyTRs: () => {}
272+
}
273+
const result = UI.widgets.field[UI.ns.ui('Options').uri](
274+
document,
275+
container,
276+
already,
277+
subject,
278+
exampleOptionsField,
279+
store,
280+
callbackFunction
281+
)
282+
})
283+
</script>
284+
<pre id="viewSource-optionsFieldDependingOn"></pre><script>showSource('optionsFieldDependingOn')</script>
285+
<div id="div-optionsFieldDependingOn"></div>
286+
287+
</body>
288+
</html>

0 commit comments

Comments
 (0)