Skip to content

Commit fe757c3

Browse files
sean-perkinssean-perkins
authored
test(item): form data for items with controls (#25624)
1 parent 64ae3d2 commit fe757c3

File tree

98 files changed

+182
-249
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+182
-249
lines changed

‎core/src/components/item/test/inputs/index.html

Lines changed: 72 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -19,56 +19,77 @@
1919
<ion-header>
2020
<ion-toolbar>
2121
<ion-title>Item inputs</ion-title>
22+
<ion-buttons slot="end">
23+
<ion-button id="popover-trigger">Options</ion-button>
24+
</ion-buttons>
25+
<ion-popover id="optionsPopover" trigger="popover-trigger">
26+
<ion-list lines="none">
27+
<ion-item id="btnDisabled" button="true" onclick="toggleDisabled()">
28+
<ion-label>Toggle Disabled State</ion-label>
29+
</ion-item>
30+
<ion-item id="btnSomeValue" button="true" onclick="setSomeValue()">
31+
<ion-label>Set initial values</ion-label>
32+
</ion-item>
33+
<ion-item id="btnEmptyValue" button="true" onclick="setEmptyValue()">
34+
<ion-label>Set empty values</ion-label>
35+
</ion-item>
36+
<ion-item id="btnNullValue" button="true" onclick="setNullValue()">
37+
<ion-label>Set "null" values</ion-label>
38+
</ion-item>
39+
<ion-item id="btnUndefinedValue" button="true" onclick="setUndefinedValue()">
40+
<ion-label>Set "undefined" values</ion-label>
41+
</ion-item>
42+
<ion-item id="btnLabelsDefault" button="true" onclick="setLabelDefault()">
43+
<ion-label>Labels: Default</ion-label>
44+
</ion-item>
45+
<ion-item id="btnLabelsFloating" button="true" onclick="setLabelFloating()">
46+
<ion-label>Labels: Floating</ion-label>
47+
</ion-item>
48+
<ion-item id="btnLabelsStacked" button="true" onclick="setLabelStacked()">
49+
<ion-label>Labels: Stacked</ion-label>
50+
</ion-item>
51+
<ion-item id="btnLabelsFixed" button="true" onclick="setLabelFixed()">
52+
<ion-label>Labels: Fixed</ion-label>
53+
</ion-item>
54+
</ion-list>
55+
</ion-popover>
2256
</ion-toolbar>
2357
</ion-header>
2458

2559
<ion-content class="ion-padding-vertical">
2660
<form onsubmit="return onSubmit(event)">
27-
<ion-list class="basic">
61+
<ion-list>
2862
<ion-item>
29-
<ion-label>Simple item</ion-label>
30-
</ion-item>
31-
32-
<ion-item id="item" button onclick="testClick(event)">
33-
<ion-label>Item Button</ion-label>
63+
<ion-label>Input</ion-label>
64+
<ion-input name="input" id="input" placeholder="Input"></ion-input>
3465
</ion-item>
3566

3667
<ion-item>
37-
<ion-label>DateTime</ion-label>
38-
<ion-datetime name="date" id="datetime" value="2022-04-01T10:00"></ion-datetime>
39-
</ion-item>
40-
41-
<ion-item>
42-
<ion-label>Select</ion-label>
43-
<ion-select name="select" id="select" value="n64">
44-
<ion-select-option value="">No Game Console</ion-select-option>
45-
<ion-select-option value="nes">NES</ion-select-option>
46-
<ion-select-option value="n64">Nintendo64</ion-select-option>
47-
<ion-select-option value="ps">PlayStation</ion-select-option>
48-
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
49-
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
50-
<ion-select-option value="snes">SNES</ion-select-option>
51-
</ion-select>
68+
<ion-label>Textarea</ion-label>
69+
<ion-textarea name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
5270
</ion-item>
5371

5472
<ion-item>
5573
<ion-label>Toggle</ion-label>
56-
<ion-toggle name="toggle" id="toggle" name="Actually" slot="end"></ion-toggle>
74+
<ion-toggle name="toggle" id="toggle" slot="end"></ion-toggle>
5775
</ion-item>
5876

5977
<ion-item>
60-
<ion-label>Input (text)</ion-label>
61-
<ion-input name="input" id="text"></ion-input>
78+
<ion-label>Checkbox</ion-label>
79+
<ion-checkbox name="checkbox" id="checkbox" slot="end"></ion-checkbox>
6280
</ion-item>
6381

6482
<ion-item>
65-
<ion-label>Input (placeholder)</ion-label>
66-
<ion-input name="input2" id="placeholder" placeholder="Placeholder"></ion-input>
83+
<ion-label>Select</ion-label>
84+
<ion-select name="select" id="select" placeholder="Select">
85+
<ion-select-option value="1">1</ion-select-option>
86+
<ion-select-option value="2">2</ion-select-option>
87+
<ion-select-option value="3">3</ion-select-option>
88+
</ion-select>
6789
</ion-item>
6890

6991
<ion-item>
70-
<ion-label>Checkbox</ion-label>
71-
<ion-checkbox name="checkbox" id="checkbox" slot="start"></ion-checkbox>
92+
<ion-datetime name="datetime" id="datetime" value="2022-04-01T10:00"></ion-datetime>
7293
</ion-item>
7394

7495
<ion-item>
@@ -77,154 +98,52 @@
7798
</ion-item>
7899
</ion-list>
79100

80-
<ion-button id="submit" type="submit">Submit</ion-button>
81-
<p id="form-result">Form not submitted</p>
101+
<ion-button class="ion-padding-horizontal ion-margin-top" id="submit" type="submit" expand="block"
102+
>Submit
103+
</ion-button>
104+
<p id="form-result"></p>
82105
</form>
83-
84-
<ion-list>
85-
<ion-list-header>
86-
<ion-label> Controls </ion-label>
87-
</ion-list-header>
88-
<ion-item-divider>Value Controls</ion-item-divider>
89-
90-
<ion-item button onClick="toggleDisabled()" id="btnDisabled"> Toggle Disable </ion-item>
91-
<ion-item button onClick="setSomeValue()" id="btnSomeValue"> Set some value </ion-item>
92-
<ion-item button onClick="setEmptyValue()" id="btnEmptyValue"> Set empty value </ion-item>
93-
<ion-item button onClick="setNullValue()" id="btnNullValue"> Set "null" value </ion-item>
94-
<ion-item button onClick="setUndefinedValue()" id="btnUndefinedValue"> Set "undefined" value </ion-item>
95-
<ion-item-divider>Label Controls</ion-item-divider>
96-
<ion-item button onClick="setLabelDefault()" id="btnLabelDefault"> Default </ion-item>
97-
<ion-item button onClick="setLabelFloating()" id="btnLabelFloating"> Floating </ion-item>
98-
<ion-item button onClick="setLabelStacked()" id="btnLabelStacked"> Stacked </ion-item>
99-
<ion-item button onClick="setLabelFixed()" id="btnLabelFixed"> Fixed </ion-item>
100-
</ion-list>
101-
102-
<ion-list-header>
103-
<ion-label> Multiple inputs/clickables </ion-label>
104-
</ion-list-header>
105-
<ion-list class="multiple">
106-
<ion-item>
107-
<ion-label>Multiple inputs</ion-label>
108-
<ion-input placeholder="Input 1"></ion-input>
109-
<ion-input placeholder="Input 2"></ion-input>
110-
<ion-input placeholder="Input 3"></ion-input>
111-
</ion-item>
112-
113-
<ion-item>
114-
<ion-label>Multiple textareas</ion-label>
115-
<ion-textarea placeholder="Textarea 1"></ion-textarea>
116-
<ion-textarea placeholder="Textarea 2"></ion-textarea>
117-
<ion-textarea placeholder="Textarea 3"></ion-textarea>
118-
</ion-item>
119-
120-
<ion-item>
121-
<ion-label>Multiple input/textareas</ion-label>
122-
<ion-textarea placeholder="Textarea 1"></ion-textarea>
123-
<ion-input placeholder="Input 2"></ion-input>
124-
<ion-textarea placeholder="Textarea 3"></ion-textarea>
125-
</ion-item>
126-
127-
<ion-item>
128-
<ion-checkbox slot="start" id="checkbox-start"></ion-checkbox>
129-
<ion-label>Multiple inputs w/ cover</ion-label>
130-
<ion-datetime placeholder="startTime" id="datetime-end" value="2022-04-01T10:00"> </ion-datetime>
131-
<ion-checkbox slot="end" id="checkbox-end"></ion-checkbox>
132-
</ion-item>
133-
134-
<ion-item>
135-
<ion-select slot="start" placeholder="month" id="select-start">
136-
<ion-select-option value="1">January</ion-select-option>
137-
<ion-select-option value="2">February</ion-select-option>
138-
<ion-select-option value="3">March</ion-select-option>
139-
</ion-select>
140-
<ion-label>Input w/ clickable</ion-label>
141-
<ion-button slot="end" id="button-end" onclick="setButtonColorRed()">Button</ion-button>
142-
</ion-item>
143-
144-
<ion-item>
145-
<ion-radio slot="start" id="radio-start"></ion-radio>
146-
<ion-label>Input w/ cover + input</ion-label>
147-
<ion-range value="45" id="range-end"></ion-range>
148-
</ion-item>
149-
150-
<ion-item>
151-
<ion-range value="60" id="range-start"></ion-range>
152-
<ion-label>Multiple inputs w/o cover</ion-label>
153-
<ion-toggle id="toggle-1-end"></ion-toggle>
154-
<ion-toggle id="toggle-2-end"></ion-toggle>
155-
</ion-item>
156-
157-
<ion-item button id="clickableItem">
158-
<ion-label>Clickable item</ion-label>
159-
<ion-checkbox slot="end"></ion-checkbox>
160-
</ion-item>
161-
162-
<ion-item>
163-
<ion-checkbox slot="start"></ion-checkbox>
164-
<ion-label>Checkbox w/ disabled button</ion-label>
165-
<ion-button slot="end" onclick="setButtonColorRed()" disabled>Button</ion-button>
166-
</ion-item>
167-
</ion-list>
168106
</ion-content>
169107
</ion-app>
170108

171109
<script>
172-
var ids = ['item', 'datetime', 'select', 'toggle', 'text', 'placeholder', 'checkbox', 'toggle', 'range'];
173-
var isDisabled = false;
174-
175-
const clickableItem = document.querySelector('#clickableItem');
176-
177-
clickableItem.addEventListener('click', function () {
178-
console.log('Clicked item', clickableItem);
179-
const color = clickableItem.color;
180-
clickableItem.color = color === undefined ? 'primary' : undefined;
181-
});
110+
const formControlIds = ['input', 'textarea', 'checkbox', 'toggle', 'select', 'datetime', 'range'];
111+
let isDisabled = false;
182112

183113
const inputs = document.querySelectorAll('ion-input, ion-textarea');
184114

185-
for (var i = 0; i < inputs.length; i++) {
186-
const input = inputs[i];
187-
188-
input.addEventListener('ionBlur', function () {
189-
console.log('Listen ionBlur: fired');
190-
});
191-
192-
input.addEventListener('ionFocus', function () {
193-
console.log('Listen ionFocus: fired');
194-
});
195-
}
196-
197115
function toggleDisabled() {
198116
isDisabled = !isDisabled;
199-
Object.values(getInputs()).forEach((el) => (el.disabled = isDisabled));
117+
Object.values(getFormControls()).forEach((el) => (el.disabled = isDisabled));
200118
}
201119

202120
function setSomeValue() {
203-
const { datetime, select, toggle, text, placeholder, checkbox, range } = getInputs();
204-
text.value = placeholder.value = 'Some text';
121+
const { datetime, select, toggle, input, textarea, checkbox, range } = getFormControls();
122+
input.value = textarea.value = 'Some value';
205123
toggle.checked = checkbox.checked = true;
206124
datetime.value = '2022-04-01T10:00';
207125
range.value = 20;
208-
select.value = 'nes';
126+
select.value = '2';
209127
}
210128

211129
function setEmptyValue() {
212-
const { datetime, select, text, placeholder, range } = getInputs();
213-
text.value = placeholder.value = '';
130+
const { datetime, select, toggle, input, textarea, checkbox, range } = getFormControls();
131+
input.value = textarea.value = '';
132+
toggle.checked = checkbox.checked = false;
214133
datetime.value = '';
215134
range.value = 0;
216135
select.value = '';
217136
}
218137

219138
function setNullValue() {
220-
Object.values(getInputs()).forEach((el) => (el.value = null));
221-
const { toggle, checkbox } = getInputs();
139+
Object.values(getFormControls()).forEach((el) => (el.value = null));
140+
const { toggle, checkbox } = getFormControls();
222141
toggle.checked = checkbox.checked = false;
223142
}
224143

225144
function setUndefinedValue() {
226-
Object.values(getInputs()).forEach((el) => (el.value = undefined));
227-
const { toggle, checkbox } = getInputs();
145+
Object.values(getFormControls()).forEach((el) => (el.value = undefined));
146+
const { toggle, checkbox } = getFormControls();
228147
toggle.checked = checkbox.checked = false;
229148
}
230149

@@ -245,21 +164,16 @@
245164
}
246165

247166
function setLabelPosition(position) {
248-
Array.from(document.querySelectorAll('ion-list.basic ion-label')).forEach(
167+
Array.from(document.querySelectorAll('form ion-list ion-label')).forEach(
249168
(label) => (label.position = position)
250169
);
251170
}
252171

253-
function getInputs() {
254-
const elements = {};
255-
for (var i = 0; i < ids.length; i++) {
256-
elements[ids[i]] = document.getElementById(ids[i]);
257-
}
258-
return elements;
259-
}
260-
261-
function testClick(ev) {
262-
console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
172+
function getFormControls() {
173+
return formControlIds.reduce((acc, id) => {
174+
acc[id] = document.querySelector(`#${id}`);
175+
return acc;
176+
}, {});
263177
}
264178

265179
function onSubmit(ev) {
@@ -271,11 +185,6 @@
271185
document.getElementById('form-result').textContent = JSON.stringify(json);
272186
return false;
273187
}
274-
275-
function setButtonColorRed() {
276-
const button = document.getElementById('button-end');
277-
button.style.setProperty('--background', '#ff0000');
278-
}
279188
</script>
280189
</body>
281190
</html>

0 commit comments

Comments
 (0)