Skip to content

Commit a0a2d8f

Browse files
angelo-vangelo-v
committed
redirect from old examples page
1 parent 64be83f commit a0a2d8f

1 file changed

Lines changed: 8 additions & 299 deletions

File tree

‎examples/forms/index.html‎

Lines changed: 8 additions & 299 deletions
Original file line numberDiff line numberDiff line change
@@ -1,303 +1,12 @@
11
<!DOCTYPE HTML>
22
<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>
3+
<head>
4+
<meta charset='UTF-8'>
5+
<title>solid-ui UI.widgets.forms examples page</title>
6+
<meta http-equiv="refresh" content="0; url=https://solid.github.io/solid-ui/examples/storybook/?path=/docs/forms-appendform--trivial-comment-field" />
7+
</head>
188
<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="appendFormTrivial"><a href="#appendFormTrivial">appendForm, trivial / Comment Field</a></h2>
37-
<p>This example shows a trivial use of the `appendForm` function, in conjunction with a Comment field.</p>
38-
<script id="script-appendFormTrivial">
39-
window.addEventListener('DOMContentLoaded', async (event) => {
40-
const dom = document
41-
const container = document.getElementById('div-appendFormTrivial')
42-
const already = {}
43-
const subject = UI.rdf.namedNode('http://example.com/#subject')
44-
const form = UI.rdf.namedNode('http://example.com/#form')
45-
const doc = subject.doc()
46-
const callbackFunction = () => {
47-
console.log('callback appendFormTrivial called!')
48-
}
49-
UI.store.add(UI.rdf.namedNode('http://example.com/#form'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
50-
UI.store.add(UI.rdf.namedNode('http://example.com/#form'), UI.ns.ui('contents'), '[a trivial form with just a comment]')
51-
52-
UI.widgets.appendForm(dom, container, already, subject, form, doc)
53-
})
54-
</script>
55-
<pre id="viewSource-appendFormTrivial"></pre><script>showSource('appendFormTrivial')</script>
56-
<div id="div-appendFormTrivial"></div>
57-
58-
<h2 id="appendFormLive"><a href="#appendFormLive">appendForm, live</a></h2>
59-
<script id="script-appendFormLive">
60-
window.addEventListener('DOMContentLoaded', async (event) => {
61-
const dom = document
62-
const container = document.getElementById('div-appendFormLive')
63-
const already = {}
64-
const subject = UI.rdf.namedNode('https://michielbdejong.inrupt.net/profile/card#me')
65-
const form = UI.rdf.namedNode('https://timbl.com/timbl/Public/Test/Forms/individualForm.ttl#form1')
66-
const doc = subject.doc()
67-
const callbackFunction = () => {
68-
console.log('callback appendFormLive called!')
69-
}
70-
await UI.store.fetcher.load(doc)
71-
await UI.store.fetcher.load(form.doc())
72-
UI.widgets.appendForm(dom, container, already, subject, form, doc)
73-
})
74-
</script>
75-
<pre id="viewSource-appendFormLive"></pre><script>showSource('appendFormLive')</script>
76-
<div id="div-appendFormLive"></div>
77-
78-
<h2 id="basicField"><a href="#basicField">basic fields</a></h2>
79-
<script id="script-basicField">
80-
window.addEventListener('DOMContentLoaded', (event) => {
81-
const container = document.getElementById('div-basicField')
82-
const already = {}
83-
const subject = UI.rdf.namedNode('http://example.com/#this')
84-
const form = UI.rdf.namedNode('http://example.com/#form')
85-
const doc = UI.rdf.namedNode('http://example.com/')
86-
const callbackFunction = (ok, errorMessage) => {
87-
console.log(ok, errorMessage, document.getElementById('div-basicField').innerHTML);
88-
}
89-
UI.store.add(form, UI.ns.ui('property'), UI.rdf.namedNode('http://example.com/#some-property'), doc)
90-
91-
// FIXME: https://github.com/solid/solid-ui/issues/239
92-
document.outlineManager = {
93-
appendPropertyTRs: () => {}
94-
}
95-
;[
96-
'PhoneField',
97-
'EmailField',
98-
'ColorField',
99-
'DateField',
100-
'DateTimeField',
101-
'TimeField',
102-
'NumericField',
103-
'IntegerField',
104-
'DecimalField',
105-
'FloatField',
106-
'TextField',
107-
'SingleLineTextField',
108-
'NamedNodeURIField'
109-
].forEach((fieldName) => {
110-
UI.widgets.field[UI.ns.ui(fieldName).uri](
111-
document,
112-
container,
113-
already,
114-
subject,
115-
form,
116-
doc,
117-
callbackFunction
118-
);
119-
})
120-
});
121-
</script>
122-
<pre id="viewSource-basicField"></pre><script>showSource('basicField')</script>
123-
<div id="div-basicField"></div>
124-
125-
126-
127-
<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>
128-
<script id="script-formField">
129-
window.addEventListener('DOMContentLoaded', (event) => {
130-
const container = document.getElementById('div-formField')
131-
const already = {}
132-
const subject = UI.rdf.namedNode('http://example.com/#this')
133-
const form = UI.rdf.namedNode('http://example.com/#form')
134-
const store = UI.rdf.namedNode('http://example.com/#store')
135-
const callbackFunction = (ok, errorMessage) => {
136-
console.log(ok, errorMessage, document.getElementById('div-formField').innerHTML);
137-
}
138-
UI.store.add(form, UI.ns.ui('parts'), new UI.rdf.Collection([
139-
UI.rdf.namedNode('http://example.com/#part1'),
140-
UI.rdf.namedNode('http://example.com/#part2')
141-
]), UI.rdf.namedNode('http://example.com/'))
142-
UI.store.add(UI.rdf.namedNode('http://example.com/#part1'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
143-
UI.store.add(UI.rdf.namedNode('http://example.com/#part1'), UI.ns.ui('contents'), '[this is part 1 of the form]')
144-
UI.store.add(UI.rdf.namedNode('http://example.com/#part2'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
145-
UI.store.add(UI.rdf.namedNode('http://example.com/#part2'), UI.ns.ui('contents'), '[this is part 2 of the form]')
146-
147-
148-
// FIXME: https://github.com/solid/solid-ui/issues/239
149-
document.outlineManager = {
150-
appendPropertyTRs: () => {}
151-
}
152-
UI.widgets.field[UI.ns.ui('Form').uri](
153-
document,
154-
container,
155-
already,
156-
subject,
157-
form,
158-
store,
159-
callbackFunction
160-
);
161-
})
162-
</script>
163-
<pre id="viewSource-formField"></pre><script>showSource('formField')</script>
164-
<div id="div-formField"></div>
165-
166-
<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>
167-
<script id="script-groupField">
168-
// UI.widgets.field[UI.ns.ui('Group').uri] is currently synonymous with
169-
// UI.widgets.field[UI.ns.ui('Form').uri], but this additional example
170-
// shows the use of `already`.
171-
172-
window.addEventListener('DOMContentLoaded', (event) => {
173-
const container = document.getElementById('div-groupField')
174-
const subject = UI.rdf.namedNode('http://example.com/#this')
175-
const form = UI.rdf.namedNode('http://example.com/#form')
176-
const store = UI.rdf.namedNode('http://example.com/#store')
177-
const key = subject.toNT() + '|' + form.toNT()
178-
const already = {
179-
[key]: true
180-
}
181-
const callbackFunction = (ok, errorMessage) => {
182-
console.log(ok, errorMessage, document.getElementById('div-groupField').innerHTML);
183-
}
184-
185-
// FIXME: https://github.com/solid/solid-ui/issues/239
186-
document.outlineManager = {
187-
appendPropertyTRs: () => {}
188-
}
189-
UI.widgets.field[UI.ns.ui('Group').uri](
190-
document,
191-
container,
192-
already,
193-
subject,
194-
form,
195-
store,
196-
callbackFunction
197-
)
198-
})
199-
</script>
200-
<pre id="viewSource-groupField"></pre><script>showSource('groupField')</script>
201-
<div id="div-groupField"></div>
202-
203-
<h2 id="optionsFieldType"><a href="#optionsFieldType">UI.widgets.field[UI.ns.ui('Options').uri], using RDF types</a></h2>
204-
<script id="script-optionsFieldType">
205-
window.addEventListener('DOMContentLoaded', (event) => {
206-
const container = document.getElementById('div-optionsFieldType')
207-
const already = {}
208-
const subject = UI.rdf.namedNode('http://example.com/#this')
209-
const exampleOptionsField = UI.rdf.namedNode('http://example.com/#exampleOptionsField')
210-
const store = UI.rdf.namedNode('http://example.com/#store')
211-
const callbackFunction = (ok, errorMessage) => {
212-
console.log(ok, errorMessage, document.getElementById('div-optionsFieldType').innerHTML);
213-
}
214-
215-
// UI to display in case subject is a house:
216-
UI.store.add(exampleOptionsField, UI.ns.ui('case'), UI.rdf.namedNode('http://example.com/#if-subject-is-house'), UI.rdf.namedNode('http://example.com/'))
217-
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/'))
218-
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/'))
219-
UI.store.add(UI.rdf.namedNode('http://example.com/#number-of-bedrooms'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
220-
UI.store.add(UI.rdf.namedNode('http://example.com/#number-of-bedrooms'), UI.ns.ui('contents'), '[UI for houses]')
221-
222-
// UI to display in case subject is a cow:
223-
UI.store.add(exampleOptionsField, UI.ns.ui('case'), UI.rdf.namedNode('http://example.com/#if-subject-is-cow'), UI.rdf.namedNode('http://example.com/'))
224-
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/'))
225-
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/'))
226-
UI.store.add(UI.rdf.namedNode('http://example.com/#number-of-legs'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
227-
UI.store.add(UI.rdf.namedNode('http://example.com/#number-of-legs'), UI.ns.ui('contents'), '[UI for cows]')
228-
229-
// Subject is a cow, so it should display [UI for cows]
230-
UI.store.add(subject, UI.ns.rdf('type'), UI.rdf.namedNode('http://example.com/#cow'), UI.rdf.namedNode('http://example.com/'))
231-
232-
233-
// FIXME: https://github.com/solid/solid-ui/issues/239
234-
document.outlineManager = {
235-
appendPropertyTRs: () => {}
236-
}
237-
const result = UI.widgets.field[UI.ns.ui('Options').uri](
238-
document,
239-
container,
240-
already,
241-
subject,
242-
exampleOptionsField,
243-
store,
244-
callbackFunction
245-
)
246-
})
247-
</script>
248-
<pre id="viewSource-optionsFieldType"></pre><script>showSource('optionsFieldType')</script>
249-
<div id="div-optionsFieldType"></div>
250-
251-
<h2 id="optionsFieldDependingOn"><a href="#optionsFieldDependingOn">UI.widgets.field[UI.ns.ui('Options').uri], using dependingOn</a></h2>
252-
<script id="script-optionsFieldDependingOn">
253-
window.addEventListener('DOMContentLoaded', (event) => {
254-
const container = document.getElementById('div-optionsFieldDependingOn')
255-
const already = {}
256-
const subject = UI.rdf.namedNode('http://example.com/#this')
257-
const exampleOptionsField = UI.rdf.namedNode('http://example.com/#exampleOptionsField')
258-
const store = UI.rdf.namedNode('http://example.com/#store')
259-
const callbackFunction = (ok, errorMessage) => {
260-
console.log(ok, errorMessage, document.getElementById('div-optionsFieldDependingOn').innerHTML);
261-
}
262-
263-
// This form depends on colour:
264-
UI.store.add(exampleOptionsField, UI.ns.ui('dependingOn'), UI.rdf.namedNode('http://example.com/#persona'), UI.rdf.namedNode('http://example.com/'))
265-
266-
// UI to display in case subject is blue:
267-
UI.store.add(exampleOptionsField, UI.ns.ui('case'), UI.rdf.namedNode('http://example.com/#if-subject-is-developer'), UI.rdf.namedNode('http://example.com/'))
268-
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/'))
269-
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/'))
270-
UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-developers'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
271-
UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-developers'), UI.ns.ui('contents'), '[UI for developers]')
272-
273-
// UI to display in case subject is red:
274-
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/'))
275-
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/'))
276-
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/'))
277-
UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-power-users'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
278-
UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-power-users'), UI.ns.ui('contents'), '[UI for power users]')
279-
280-
// Subject is both a developer and a power user, so it should display both [UI for developers] and [UI for power users]
281-
UI.store.add(subject, UI.rdf.namedNode('http://example.com/#persona'), UI.rdf.namedNode('http://example.com/#developer'), UI.rdf.namedNode('http://example.com/'))
282-
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/'))
283-
284-
// FIXME: https://github.com/solid/solid-ui/issues/239
285-
document.outlineManager = {
286-
appendPropertyTRs: () => {}
287-
}
288-
const result = UI.widgets.field[UI.ns.ui('Options').uri](
289-
document,
290-
container,
291-
already,
292-
subject,
293-
exampleOptionsField,
294-
store,
295-
callbackFunction
296-
)
297-
})
298-
</script>
299-
<pre id="viewSource-optionsFieldDependingOn"></pre><script>showSource('optionsFieldDependingOn')</script>
300-
<div id="div-optionsFieldDependingOn"></div>
301-
9+
<h1>These examples have moved to storybook</h1>
10+
<a href="https://solid.github.io/solid-ui/examples/storybook/?path=/docs/forms-appendform--trivial-comment-field">https://solid.github.io/solid-ui/examples/storybook/?path=/docs/forms-appendform--trivial-comment-field</a>
30211
</body>
303-
</html>
12+
</html>

0 commit comments

Comments
 (0)