Skip to content

Commit abcf803

Browse files
author
rob
committed
feat: HtmlFormControlsCollection and related elements
1 parent 44fe0b9 commit abcf803

19 files changed

+1059
-13
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
* `DataTransfer` bindings (#51)
2626
* `WorkerGlobalScope`, `WindowOrWorkerGlobalScope`, `WorkerNavigator`, and `WorkerLocation` bindings (#57)
2727
* `Response` constructors to `Fetch` bindings (#64)
28+
* `HTMLFormControlsCollection`, `HTMLOptionsCollection`, `HTMLFieldSetElement`, `Document.forms`, `HTMLFormElement.elements`, `HTMLObjectElement`, `HTMLOptGroupElement`, `HTMLOptionElement`, `HTMLOutputElement`, `HTMLSelectElement`, `HTMLTextAreaElement`, and `RadioNodeList` bindings (#73)
2829

2930
### Miscellaneous
3031
* Converted project to rescript syntax (#18)

‎lib/js/tests/Webapi/Dom/Webapi__Dom__HtmlFormElement__test.js

Lines changed: 292 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,300 @@
11
'use strict';
22

3+
var Js_exn = require("rescript/lib/js/js_exn.js");
4+
var Belt_Option = require("rescript/lib/js/belt_Option.js");
5+
var Caml_option = require("rescript/lib/js/caml_option.js");
6+
var TestHelpers = require("../../testHelpers.js");
7+
var Webapi__Dom__Document = require("../../../src/Webapi/Dom/Webapi__Dom__Document.js");
8+
var Webapi__Dom__HtmlElement = require("../../../src/Webapi/Dom/Webapi__Dom__HtmlElement.js");
9+
var Webapi__Dom__HtmlFormElement = require("../../../src/Webapi/Dom/Webapi__Dom__HtmlFormElement.js");
10+
var Webapi__Dom__HtmlOptionElement = require("../../../src/Webapi/Dom/Webapi__Dom__HtmlOptionElement.js");
11+
var Webapi__Dom__HtmlSelectElement = require("../../../src/Webapi/Dom/Webapi__Dom__HtmlSelectElement.js");
12+
var Webapi__Dom__HtmlFormControlsCollection = require("../../../src/Webapi/Dom/Webapi__Dom__HtmlFormControlsCollection.js");
13+
14+
var partial_arg = document;
15+
16+
function createElement(param) {
17+
return partial_arg.createElement(param);
18+
}
19+
20+
var partial_arg$1 = document;
21+
22+
function createTextNode(param) {
23+
return partial_arg$1.createTextNode(param);
24+
}
25+
26+
function createInput(param) {
27+
return createElement("input");
28+
}
29+
30+
function createLabelWithText(text) {
31+
var el = createElement("label");
32+
var textNode = createTextNode(text);
33+
el.appendChild(textNode);
34+
return el;
35+
}
36+
37+
var form = TestHelpers.unsafelyUnwrapOption(Webapi__Dom__HtmlFormElement.ofElement(createElement("form")));
38+
39+
var usernameInput = createElement("input");
40+
41+
usernameInput.setAttribute("type", "text");
42+
43+
usernameInput.setAttribute("name", "username");
44+
45+
var usernameLabel = createLabelWithText("Username:");
46+
47+
usernameLabel.appendChild(usernameInput);
48+
49+
var passwordInput = createElement("input");
50+
51+
passwordInput.setAttribute("type", "password");
52+
53+
passwordInput.setAttribute("name", "password");
54+
55+
var passwordLabel = createLabelWithText("Password:");
56+
57+
passwordLabel.appendChild(passwordInput);
58+
59+
var radioInput1 = createElement("input");
60+
61+
radioInput1.setAttribute("type", "radio");
62+
63+
radioInput1.setAttribute("name", "radiogroup");
64+
65+
radioInput1.setAttribute("value", "one");
66+
67+
radioInput1.setAttribute("checked", "true");
68+
69+
var radioLabel1 = createLabelWithText("Choice 1:");
70+
71+
radioLabel1.appendChild(radioInput1);
72+
73+
var radioInput2 = createElement("input");
74+
75+
radioInput2.setAttribute("type", "radio");
76+
77+
radioInput2.setAttribute("name", "radiogroup");
78+
79+
radioInput2.setAttribute("value", "two");
80+
81+
var radioLabel2 = createLabelWithText("Choice 2:");
82+
83+
radioLabel2.appendChild(radioInput2);
84+
85+
var select = createElement("select");
86+
87+
select.setAttribute("name", "select");
88+
89+
var selectLabel = createLabelWithText("Select:");
90+
91+
selectLabel.appendChild(select);
92+
93+
var usernameContainer = createElement("div");
94+
95+
var passwordContainer = createElement("div");
96+
97+
var radioContainer = createElement("div");
98+
99+
var selectContainer = createElement("div");
100+
101+
usernameContainer.appendChild(usernameLabel);
102+
103+
passwordContainer.appendChild(passwordLabel);
104+
105+
radioContainer.appendChild(radioLabel1);
106+
107+
radioContainer.appendChild(radioLabel2);
108+
109+
selectContainer.appendChild(selectLabel);
110+
111+
form.appendChild(usernameContainer);
112+
113+
form.appendChild(passwordContainer);
114+
115+
form.appendChild(radioContainer);
116+
117+
form.appendChild(selectContainer);
118+
119+
var body = TestHelpers.unsafelyUnwrapOption(Belt_Option.flatMap(Webapi__Dom__Document.asHtmlDocument(document), (function (prim) {
120+
return Caml_option.nullable_to_opt(prim.body);
121+
})));
122+
123+
body.appendChild(form);
124+
125+
var collection = form.elements;
126+
127+
console.log("HtmlFormElement.elements:", collection);
128+
129+
var len = collection.length;
130+
131+
console.log("HtmlFormControlsCollection.length:", len);
132+
133+
var el0 = collection.item(0);
134+
135+
console.log("HtmlFormControlsCollection.item:", (el0 == null) ? undefined : Caml_option.some(el0));
136+
137+
var el0$1 = Webapi__Dom__HtmlFormControlsCollection.namedItem(collection, "username");
138+
139+
console.log("HtmlFormControlsCollection.namedItem:", el0$1);
140+
141+
var el1 = collection.item(1);
142+
143+
console.log("HtmlFormControlsCollection.length:", (el1 == null) ? undefined : Caml_option.some(el1));
144+
145+
var el1$1 = Webapi__Dom__HtmlFormControlsCollection.namedItem(collection, "password");
146+
147+
console.log("HtmlFormControlsCollection.namedItem:", el1$1);
148+
149+
var radioNodeList = collection.item(2);
150+
151+
console.log("HtmlFormControlsCollection.namedItem:", (radioNodeList == null) ? undefined : Caml_option.some(radioNodeList));
152+
153+
var radioNodeList$1 = Webapi__Dom__HtmlFormControlsCollection.namedItem(collection, "radiogroup");
154+
155+
console.log("HtmlFormControlsCollection.namedItem:", radioNodeList$1);
156+
157+
var radioNodeList$2 = TestHelpers.unsafelyUnwrapOption(radioNodeList$1);
158+
159+
if (radioNodeList$2.TAG === /* RadioNodeList */0) {
160+
console.log("RadioNodeList.value", radioNodeList$2._0.value);
161+
} else {
162+
Js_exn.raiseError("incorrect namedItem return value");
163+
}
164+
165+
var select$1 = TestHelpers.unsafelyUnwrapOption(Webapi__Dom__HtmlSelectElement.ofElement(select));
166+
167+
var opts = select$1.options;
168+
169+
console.log("HtmlSelectElement.options:", opts);
170+
171+
opts.length = 3;
172+
173+
console.log("collection length:", opts.length);
174+
175+
opts[0] = null;
176+
177+
console.log("collection length:", opts.length);
178+
179+
opts[2] = Webapi__Dom__HtmlOptionElement.ofElement(createElement("option"));
180+
181+
console.log("collection length:", opts.length);
182+
183+
opts.length = 0;
184+
185+
var opt1 = createElement("option");
186+
187+
opt1.setAttribute("value", "1");
188+
189+
opt1.appendChild(createTextNode("opt1"));
190+
191+
({
192+
NAME: "Option",
193+
VAL: Webapi__Dom__HtmlOptionElement.ofElement(opt1)
194+
});
195+
196+
opts.selectedIndex = 0;
197+
198+
console.log("collection length:", opts.length);
199+
200+
console.log("HtmlOptionsCollection.setSelectedIndex", undefined);
201+
202+
var opt2 = createElement("option");
203+
204+
opt2.setAttribute("value", "2");
205+
206+
opt2.appendChild(createTextNode("opt2"));
207+
208+
var item = opts.item(0);
209+
210+
console.log("HtmlOptionsCollection.item:", (item == null) ? undefined : Caml_option.some(item));
211+
212+
console.log("collection length:", opts.length);
213+
214+
opts.add(({
215+
NAME: "Option",
216+
VAL: Webapi__Dom__HtmlOptionElement.ofElement(opt2)
217+
}).VAL, 0);
218+
219+
var item$1 = opts.item(0);
220+
221+
console.log("HtmlOptionsCollection.add:", (item$1 == null) ? undefined : Caml_option.some(item$1));
222+
223+
console.log("collection length:", opts.length);
224+
225+
console.log("selected index", opts.selectedIndex);
226+
227+
var opt3 = createElement("option");
228+
229+
opt3.setAttribute("value", "3");
230+
231+
opt3.appendChild(createTextNode("opt3"));
232+
233+
opts.add(({
234+
NAME: "Option",
235+
VAL: Webapi__Dom__HtmlOptionElement.ofElement(opt3)
236+
}).VAL, ({
237+
NAME: "Element",
238+
VAL: Webapi__Dom__HtmlElement.ofElement(opt2)
239+
}).VAL);
240+
241+
var item$2 = opts.item(0);
242+
243+
console.log("HtmlOptionsCollection.addBeforeElement:", (item$2 == null) ? undefined : Caml_option.some(item$2));
244+
245+
console.log("collection length:", opts.length);
246+
247+
var item$3 = opts.selectedIndex;
248+
249+
console.log("HtmlOptionsCollection.selectedIndex:", item$3);
250+
251+
var item$4 = opts.selectedIndex;
252+
253+
console.log("HtmlOptionsCollection.selectedIndex:", item$4);
254+
255+
opts.remove(0);
256+
257+
console.log("collection length:", opts.length);
3258

4259
function test_data(formElement) {
5260
return new FormData(formElement).get("foo");
6261
}
7262

263+
var formEl = form;
264+
265+
var selectedIndex;
266+
267+
exports.createElement = createElement;
268+
exports.createTextNode = createTextNode;
269+
exports.createInput = createInput;
270+
exports.createLabelWithText = createLabelWithText;
271+
exports.form = form;
272+
exports.usernameInput = usernameInput;
273+
exports.usernameLabel = usernameLabel;
274+
exports.passwordInput = passwordInput;
275+
exports.passwordLabel = passwordLabel;
276+
exports.radioInput1 = radioInput1;
277+
exports.radioLabel1 = radioLabel1;
278+
exports.radioInput2 = radioInput2;
279+
exports.radioLabel2 = radioLabel2;
280+
exports.selectLabel = selectLabel;
281+
exports.usernameContainer = usernameContainer;
282+
exports.passwordContainer = passwordContainer;
283+
exports.radioContainer = radioContainer;
284+
exports.selectContainer = selectContainer;
285+
exports.formEl = formEl;
286+
exports.body = body;
287+
exports.collection = collection;
288+
exports.len = len;
289+
exports.el0 = el0$1;
290+
exports.el1 = el1$1;
291+
exports.radioNodeList = radioNodeList$1;
292+
exports.select = select$1;
293+
exports.opts = opts;
294+
exports.opt1 = opt1;
295+
exports.selectedIndex = selectedIndex;
296+
exports.opt2 = opt2;
297+
exports.opt3 = opt3;
298+
exports.item = item$4;
8299
exports.test_data = test_data;
9-
/* No side effect */
300+
/* partial_arg Not a pure module */

‎src/Webapi/Dom/Webapi__Dom__Document.res

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ module Impl = (
3333
@get external doctype: T.t => Dom.documentType = "doctype"
3434
@get external documentElement: T.t => Dom.element = "documentElement"
3535
@get external documentURI: T.t => string = "documentURI"
36+
@get external forms: T.t => Dom.htmlCollection = "forms"
3637
@get external hidden: T.t => bool = "hidden"
3738
@get external implementation: T.t => Dom.domImplementation = "implementation"
3839
@get external lastStyleSheetSet: T.t => string = "lastStyleSheetSet"

‎src/Webapi/Dom/Webapi__Dom__HtmlButtonElement.res

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* Spec: https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
3+
*/
4+
5+
type t = Dom.htmlButtonElement
6+
7+
include Webapi__Dom__EventTarget.Impl({
8+
type t = t
9+
})
10+
include Webapi__Dom__Node.Impl({
11+
type t = t
12+
})
13+
include Webapi__Dom__Element.Impl({
14+
type t = t
15+
})
16+
include Webapi__Dom__HtmlElement.Impl({
17+
type t = t
18+
})
19+
20+
// common form element attributes
21+
@return(nullable) @get
22+
external form: t => option<Dom.htmlFormElement> = "form"
23+
@get external labels: t => Dom.nodeList = "labels"
24+
25+
@get external name: t => string = "name"
26+
@set external setName: (t, string) => unit = "name"
27+
28+
@get external disabled: t => bool = "disabled"
29+
@set external setDisabled: (t, bool) => unit = "disabled"
30+
31+
@get external value: t => string = "value"
32+
@set external setValue: (t, string) => unit = "value"
33+
34+
/* Validation */
35+
@get external willValidate: t => bool = "willValidate"
36+
@get external validity: t => Webapi__Dom__ValidityState.t = "validity"
37+
@get external validationMessage: t => string = "validationMessage"
38+
@send external setCustomValidity: (t, string) => unit = "setCustomValidity"
39+
@send external checkValidity: t => bool = "checkValidity"
40+
@send external reportValidity: t => bool = "reportValidity"
41+
42+
@get external formAction: t => string = "formAction"
43+
@set external setFormAction: (t, string) => unit = "formAction"
44+
45+
@get external formEnctype: t => string = "formEnctype"
46+
@set external setFormEnctype: (t, string) => unit = "formEnctype"
47+
48+
@get external formMethod: t => string = "formMethod"
49+
@set external setFormMethod: (t, string) => unit = "formMethod"
50+
51+
@get external formNoValidate: t => bool = "formNoValidate"
52+
@set external setFormNoValidate: (t, bool) => unit = "formNoValidate"
53+
54+
@get external formTarget: t => string = "formTarget"
55+
@set external setFormTarget: (t, string) => unit = "formTarget"

‎src/Webapi/Dom/Webapi__Dom__HtmlCollection.res

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
/**
2+
* Spec: https://dom.spec.whatwg.org/#interface-htmlcollection
3+
*/
14
type t = Dom.htmlCollection
25

36
@val @scope(("Array", "prototype", "slice"))

0 commit comments

Comments
 (0)