Skip to content

Commit de59e09

Browse files
Armaan GuptaArmaan Gupta
Armaan Gupta
authored and
Armaan Gupta
committed
added clientlibs for newer version of radiobutton
1 parent 1cee379 commit de59e09

File tree

4 files changed

+233
-0
lines changed

4 files changed

+233
-0
lines changed

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v2/radiobutton/clientlibs/.content.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
3+
jcr:primaryType="sling:Folder" />

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v2/radiobutton/clientlibs/site/.content.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
3+
jcr:primaryType="cq:ClientLibraryFolder"
4+
allowProxy="{Boolean}true"
5+
categories="[core.forms.components.radiobutton.v2.runtime]"
6+
dependencies="[core.forms.components.runtime.base]" />

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v2/radiobutton/clientlibs/site/js.txt‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
###############################################################################
2+
# Copyright 2022 Adobe
3+
#
4+
# Licensed under the Apache License, Version 2.0 (the "License");
5+
# you may not use this file except in compliance with the License.
6+
# You may obtain a copy of the License at
7+
#
8+
# http://www.apache.org/licenses/LICENSE-2.0
9+
#
10+
# Unless required by applicable law or agreed to in writing, software
11+
# distributed under the License is distributed on an "AS IS" BASIS,
12+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
# See the License for the specific language governing permissions and
14+
# limitations under the License.
15+
###############################################################################
16+
17+
#base=js
18+
radiobuttonview.js

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v2/radiobutton/clientlibs/site/js/radiobuttonview.js‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
/*******************************************************************************
2+
* Copyright 2022 Adobe
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
******************************************************************************/
16+
(function() {
17+
18+
"use strict";
19+
class RadioButton extends FormView.FormOptionFieldBase {
20+
21+
static NS = FormView.Constants.NS;
22+
/**
23+
* Each FormField has a data attribute class that is prefixed along with the global namespace to
24+
* distinguish between them. If a component wants to put a data-attribute X, the attribute in HTML would be
25+
* data-{NS}-{IS}-x=""
26+
* @type {string}
27+
*/
28+
static IS = "adaptiveFormRadioButton";
29+
static bemBlock = 'cmp-adaptiveform-radiobutton';
30+
static selectors = {
31+
self: "[data-" + this.NS + '-is="' + this.IS + '"]',
32+
widgets: `.${RadioButton.bemBlock}__widget`,
33+
widget: `.${RadioButton.bemBlock}__option__widget`,
34+
label: `.${RadioButton.bemBlock}__label`,
35+
description: `.${RadioButton.bemBlock}__longdescription`,
36+
qm: `.${RadioButton.bemBlock}__questionmark`,
37+
errorDiv: `.${RadioButton.bemBlock}__errormessage`,
38+
tooltipDiv: `.${RadioButton.bemBlock}__shortdescription`,
39+
option: `.${RadioButton.bemBlock}__option`,
40+
optionLabel: `.${RadioButton.bemBlock}__option-label`
41+
};
42+
43+
constructor(params) {
44+
super(params);
45+
this.qm = this.element.querySelector(RadioButton.selectors.qm);
46+
}
47+
48+
getWidgets() {
49+
return this.element.querySelector(RadioButton.selectors.widgets);
50+
}
51+
52+
getWidget() {
53+
return this.element.querySelectorAll(RadioButton.selectors.widget);
54+
}
55+
56+
getDescription() {
57+
return this.element.querySelector(RadioButton.selectors.description);
58+
}
59+
60+
getLabel() {
61+
return this.element.querySelector(RadioButton.selectors.label);
62+
}
63+
64+
getQuestionMarkDiv() {
65+
return this.element.querySelector(RadioButton.selectors.qm);
66+
}
67+
68+
getTooltipDiv() {
69+
return this.element.querySelector(RadioButton.selectors.tooltipDiv);
70+
}
71+
72+
getErrorDiv() {
73+
return this.element.querySelector(RadioButton.selectors.errorDiv);
74+
}
75+
76+
getOptions() {
77+
return this.element.querySelectorAll(RadioButton.selectors.option);
78+
}
79+
80+
#addWidgetListeners(optionWidget) {
81+
optionWidget.addEventListener('change', (e) => {
82+
this.setModelValue(e.target.value);
83+
});
84+
optionWidget.addEventListener('focus', (e) => {
85+
this.setActive();
86+
});
87+
optionWidget.addEventListener('blur', (e) => {
88+
this.setInactive();
89+
});
90+
}
91+
92+
setModel(model) {
93+
super.setModel(model);
94+
this.widget.forEach(optionWidget => {
95+
this.#addWidgetListeners(optionWidget);
96+
});
97+
}
98+
99+
updateEnabled(enabled, state) {
100+
this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_ENABLED, enabled);
101+
let widgets = this.widget;
102+
widgets.forEach(widget => {
103+
if (enabled === false) {
104+
if(state.readOnly === false){
105+
widget.setAttribute(FormView.Constants.HTML_ATTRS.DISABLED, "disabled");
106+
}
107+
} else if (state.readOnly === false) {
108+
widget.removeAttribute(FormView.Constants.HTML_ATTRS.DISABLED);
109+
}
110+
});
111+
}
112+
113+
updateReadOnly(readonly) {
114+
let widgets = this.widget;
115+
this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_READONLY, readonly);
116+
widgets.forEach(widget => {
117+
if (readonly === true) {
118+
widget.setAttribute(FormView.Constants.HTML_ATTRS.DISABLED, "disabled");
119+
} else {
120+
widget.removeAttribute(FormView.Constants.HTML_ATTRS.DISABLED);
121+
}
122+
});
123+
}
124+
125+
updateValidity(validity) {
126+
if(validity.valid === undefined) {
127+
this.element.removeAttribute(FormView.Constants.DATA_ATTRIBUTE_VALID);
128+
this.widget.forEach(widget => widget.removeAttribute(FormView.Constants.ARIA_INVALID));
129+
} else {
130+
this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_VALID, validity.valid);
131+
this.widget.forEach(widget => widget.setAttribute(FormView.Constants.ARIA_INVALID, !validity.valid));
132+
}
133+
}
134+
135+
updateValue(modelValue) {
136+
this.widget.forEach(widget => {
137+
if (modelValue != null && widget.value != null && (modelValue.toString() == widget.value.toString())) {
138+
widget.checked = true;
139+
widget.setAttribute(FormView.Constants.HTML_ATTRS.CHECKED, FormView.Constants.HTML_ATTRS.CHECKED);
140+
} else {
141+
widget.checked = false;
142+
widget.removeAttribute(FormView.Constants.HTML_ATTRS.CHECKED);
143+
}
144+
}, this)
145+
super.updateEmptyStatus();
146+
}
147+
148+
#createRadioOption(value, itemLabel) {
149+
const optionTemplate = `
150+
<div class="${RadioButton.selectors.option.slice(1)}">
151+
<label class="${RadioButton.selectors.optionLabel.slice(1)}">
152+
<input type="radio" name="${this._model.name}" class="${RadioButton.selectors.widget.slice(1)}" value="${value}" tabindex="0">
153+
<span>${itemLabel}</span>
154+
</label>
155+
</div>`;
156+
157+
const container = document.createElement('div'); // Create a container element to hold the template
158+
container.innerHTML = optionTemplate;
159+
let addedOptionWidget = container.querySelector(RadioButton.selectors.widget);
160+
if(this._model.readOnly === true || this._model.enabled === false) {
161+
addedOptionWidget.setAttribute("disabled", true);
162+
if(this._model.readOnly === true) {
163+
addedOptionWidget.setAttribute("aria-readonly", true);
164+
}
165+
}
166+
this.#addWidgetListeners(addedOptionWidget);
167+
return container.firstElementChild; // Return the first child, which is the created option
168+
}
169+
170+
updateEnum(newEnums) {
171+
super.updateEnumForRadioButtonAndCheckbox(newEnums, this.#createRadioOption);
172+
// refresh the widget references, to dynamically added options
173+
this.widget = this.getWidget();
174+
}
175+
176+
updateEnumNames(newEnumNames) {
177+
super.updateEnumNamesForRadioButtonAndCheckbox(newEnumNames, this.#createRadioOption);
178+
// refresh the widget references, to dynamically added options
179+
this.widget = this.getWidget();
180+
}
181+
182+
updateRequired(required, state) {
183+
if (this.widget) {
184+
this.element.toggleAttribute("required", required);
185+
this.element.setAttribute("data-cmp-required", required);
186+
}
187+
}
188+
189+
syncMarkupWithModel() {
190+
super.syncMarkupWithModel();
191+
this.#syncWidgetName();
192+
}
193+
194+
#syncWidgetName() {
195+
const name = this.getModel()?.name;
196+
this.widget.forEach(widget => {
197+
widget.setAttribute("name", `${this.id}_${name}`);
198+
});
199+
}
200+
}
201+
202+
FormView.Utils.setupField(({element, formContainer}) => {
203+
return new RadioButton({element, formContainer});
204+
}, RadioButton.selectors.self);
205+
206+
})();

0 commit comments

Comments
 (0)