Skip to content

Commit 62a722f

Browse files
michielbdejongmichielbdejong
committed
basicField examples
1 parent 891c0fb commit 62a722f

2 files changed

Lines changed: 49 additions & 38 deletions

File tree

‎examples/forms/index.html‎

Lines changed: 49 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -33,41 +33,6 @@ <h1>See also:</h1>
3333
<pre id="viewSource-templateTitle"></pre><script>showSource('templateTitle')</script>
3434
<div id="div-templateTitle"></div> -->
3535

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-
7136
<h2 id="appendFormTrivial"><a href="#appendFormTrivial">appendForm, trivial / Comment Field</a></h2>
7237
<p>This example shows a trivial use of the `appendForm` function, in conjunction with a Comment field.</p>
7338
<script id="script-appendFormTrivial">
@@ -110,6 +75,55 @@ <h2 id="appendFormLive"><a href="#appendFormLive">appendForm, live</a></h2>
11075
<pre id="viewSource-appendFormLive"></pre><script>showSource('appendFormLive')</script>
11176
<div id="div-appendFormLive"></div>
11277

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+
113127
<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>
114128
<script id="script-formField">
115129
window.addEventListener('DOMContentLoaded', (event) => {

‎test/unit/widgets/forms/basic.test.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,6 @@ describe('fieldLabel', () => {
5757
const expectedText = '@@Internal error: undefined property'
5858
expect((textNode as Text).wholeText).toEqual(expectedText)
5959
})
60-
it.skip(' ...', () => {
61-
// expect(fieldLabel('document', undefined, 'form').toBe())
62-
})
6360
})
6461

6562
describe('fieldStore', () => {

0 commit comments

Comments
 (0)