-
Notifications
You must be signed in to change notification settings - Fork 348
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
UI/Input/Container: add JS to retrieve values clientside
Showing
36 changed files
with
1,365 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
components/ILIAS/UI/resources/js/Input/Container/dist/container.min.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
41 changes: 36 additions & 5 deletions
41
components/ILIAS/UI/resources/js/Input/Container/rollup.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,38 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
import terser from '@rollup/plugin-terser'; | ||
import copyright from '../../../../../../../scripts/Copyright-Checker/copyright'; | ||
import preserveCopyright from '../../../../../../../scripts/Copyright-Checker/preserveCopyright'; | ||
|
||
export default { | ||
input: './src/filter.js', | ||
input: './src/container.js', | ||
output: { | ||
file: './dist/filter.js', | ||
format: 'es' | ||
} | ||
}; | ||
file: './dist/container.min.js', | ||
format: 'iife', | ||
banner: copyright, | ||
plugins: [ | ||
terser({ | ||
format: { | ||
comments: preserveCopyright, | ||
}, | ||
}), | ||
], | ||
globals: { | ||
jquery: '$', | ||
}, | ||
}, | ||
external: ['jquery'], | ||
}; |
221 changes: 221 additions & 0 deletions
221
components/ILIAS/UI/resources/js/Input/Container/src/container.class.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,221 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
import FormNode from './formnode.class.js'; | ||
|
||
/** | ||
* The attribute marks a DOM node as UIForm node and gives the type of the | ||
* Component yielding this node. | ||
* @type {string} | ||
*/ | ||
const FIELD_ATTRIBUTE_TYPE = 'data-il-ui-component'; | ||
|
||
/** | ||
* The attribute marks a DOM node as UIForm node and gives the name of the | ||
* Node as provided by the Namesource | ||
* @type {string} | ||
*/ | ||
const FIELD_ATTRIBUTE_NAME = 'data-il-ui-input-name'; | ||
|
||
/** | ||
* @type {string} | ||
*/ | ||
const SEARCH_FIELD = `fieldset[${FIELD_ATTRIBUTE_TYPE}][ ${FIELD_ATTRIBUTE_NAME}]`; | ||
|
||
/** | ||
* @type {string} | ||
*/ | ||
const FIELD_INPUT_AREA = '.c-input__field'; | ||
|
||
/** | ||
* @type {string} | ||
*/ | ||
const SEARCH_INPUT = '[name]'; | ||
|
||
export default class Container { | ||
/** | ||
* A collection of final processing functions | ||
* to present values for specific Input types. | ||
* Functions are called with FormNode as single parameter. | ||
* @name valueRepresentation | ||
* @function | ||
* @param {FormNode} node | ||
* @return {Array<string>} | ||
* | ||
* | ||
* @type {Object<string,class>} | ||
*/ | ||
#transforms; | ||
|
||
/** | ||
* @type {HTMLElement} | ||
*/ | ||
#container; | ||
|
||
/** | ||
* @type {FormNode} | ||
*/ | ||
#nodes; | ||
|
||
/** | ||
* @param {Object<string,Class>} transforms | ||
* @param {HTMLElement} container | ||
* @return {void} | ||
*/ | ||
constructor(transforms, container) { | ||
this.#transforms = transforms; | ||
this.#container = container; | ||
this.#nodes = new FormNode('form', 'FormContainerInput', container.getAttribute('id')); | ||
|
||
Array.from(container.querySelectorAll(SEARCH_FIELD)) | ||
.filter((domFieldNode) => domFieldNode.parentNode === domFieldNode.closest('form')) | ||
.forEach((domFieldNode) => this.#register(this.#nodes, domFieldNode)); | ||
} | ||
|
||
/** | ||
* @param {FormNode} pointer | ||
* @param {HTMLElement} domFieldNode | ||
* @return {void} | ||
*/ | ||
#register(current, domFieldNode) { | ||
const node = this.#buildNode(domFieldNode); | ||
current.addChildNode(node); | ||
|
||
const furtherChildren = Array.from(domFieldNode.querySelectorAll(`${FIELD_INPUT_AREA} ${SEARCH_FIELD}`)) | ||
.filter( | ||
(cn) => cn.closest(FIELD_INPUT_AREA) === domFieldNode.querySelector(FIELD_INPUT_AREA), | ||
); | ||
if (furtherChildren.length > 0) { | ||
furtherChildren.forEach((domChildFieldNode) => this.#register(node, domChildFieldNode)); | ||
} | ||
} | ||
|
||
#buildNode(domFieldNode) { | ||
const type = domFieldNode.getAttribute(FIELD_ATTRIBUTE_TYPE); | ||
const name = domFieldNode.getAttribute(FIELD_ATTRIBUTE_NAME); | ||
const label = domFieldNode.querySelector('label').textContent.trim(); | ||
|
||
const node = new FormNode(type, name, label); | ||
node.setTransforms(this.#getTransformsFor(type)); | ||
|
||
Array.from(domFieldNode.querySelectorAll(SEARCH_INPUT)) | ||
.filter( | ||
(input) => input.closest(SEARCH_FIELD) === domFieldNode, | ||
) | ||
.forEach((input) => node.addHtmlField(input)); | ||
|
||
return node; | ||
} | ||
|
||
/** | ||
* @param {string} type | ||
* @return {valueRepresentation} | ||
*/ | ||
#getTransformsFor(type) { | ||
if (this.#transforms[type]) { | ||
return this.#transforms[type]; | ||
} | ||
return null; | ||
} | ||
|
||
/** | ||
* @return {FormNode} | ||
*/ | ||
getNodes() { | ||
return this.#nodes; | ||
} | ||
|
||
/** | ||
* @param {string} name | ||
* @param {?FormNode} initEntry | ||
* @return {FormNode} | ||
*/ | ||
getNodeByName(name, initEntry) { | ||
let entry = initEntry; | ||
if (!entry) { | ||
entry = this.#nodes; | ||
} | ||
|
||
const parts = name.split('/').slice(1); | ||
parts.forEach( | ||
(part) => { | ||
entry = entry.getChildByName(part); | ||
if (!entry) { | ||
return null; | ||
} | ||
return entry; | ||
}, | ||
); | ||
return entry; | ||
} | ||
|
||
/** | ||
* @param {?FormNode} initNode | ||
* @param {?number} initIndent | ||
* @param {?Array} initOut | ||
* @return {Array} | ||
*/ | ||
getValuesRepresentation(initNode, initIndent, initOut) { | ||
let node = initNode; | ||
if (!node) { | ||
node = this.getNodes(); | ||
} | ||
|
||
let indent = initIndent; | ||
if (!indent) { | ||
indent = 0; | ||
} | ||
let out = initOut; | ||
if (!out) { | ||
out = []; | ||
} | ||
|
||
const entry = { | ||
label: node.getLabel(), | ||
value: node.getValuesRepresentation(), | ||
indent, | ||
type: node.getType(), | ||
}; | ||
out.push(entry); | ||
|
||
node.getChildren().forEach( | ||
(child) => this.getValuesRepresentation(child, indent + 1, out), | ||
); | ||
return out; | ||
} | ||
|
||
/** | ||
* @param {?FormNode} initNode | ||
* @param {?FormNode[]} initOut | ||
* @return {FormNode[]} | ||
*/ | ||
getNodesFlat(initNode, initOut) { | ||
let out = initOut; | ||
let node = initNode; | ||
if (!out) { | ||
out = []; | ||
node = this.#nodes; | ||
} | ||
|
||
out.push(node); | ||
const children = node.getChildren(); | ||
if (children.length > 0) { | ||
children.forEach( | ||
(child) => this.getNodesFlat(child, out), | ||
); | ||
} | ||
return out; | ||
} | ||
} |
64 changes: 64 additions & 0 deletions
64
components/ILIAS/UI/resources/js/Input/Container/src/container.factory.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
import Container from './container.class.js'; | ||
|
||
export default class ContainerFactory { | ||
/** | ||
* @type {Array<string, Container>} | ||
*/ | ||
#instances = []; | ||
|
||
/** | ||
* @type {Object<string, class>} | ||
*/ | ||
#transforms; | ||
|
||
/** | ||
* @param {Object<string,Class>} transforms | ||
*/ | ||
constructor(transforms) { | ||
this.#transforms = transforms; | ||
} | ||
|
||
/** | ||
* @param {string} componentId | ||
* @return {void} | ||
*/ | ||
init(componentId) { | ||
const search = `#${componentId}`; | ||
const component = document.querySelector(search); | ||
if (this.#instances[componentId] !== undefined) { | ||
throw new Error(`Container with id '${componentId}' has already been registered.`); | ||
} | ||
this.#instances[componentId] = new Container(this.#transforms, component); | ||
} | ||
|
||
/** | ||
* @param {string} componentId | ||
* @return {Container} | ||
*/ | ||
get(componentId) { | ||
return this.#instances[componentId]; | ||
} | ||
|
||
getAll() { | ||
return this.#instances; | ||
} | ||
|
||
first() { | ||
return this.#instances[Object.keys(this.#instances).shift()]; | ||
} | ||
} |
45 changes: 45 additions & 0 deletions
45
components/ILIAS/UI/resources/js/Input/Container/src/container.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
import $ from 'jquery'; | ||
|
||
import SwitchableGroupTransforms from './transforms/switchablegroup.transform'; | ||
import OptionalGroupTransforms from './transforms/optionalgroup.transform'; | ||
import RadioTransforms from './transforms/radio.transform'; | ||
import PasswordTransforms from './transforms/password.transform'; | ||
import DurationTransforms from './transforms/duration.transform'; | ||
import LinkTransforms from './transforms/link.transform'; | ||
import SelectTransforms from './transforms/select.transform'; | ||
import MultiSelectTransforms from './transforms/multiselect.transform'; | ||
|
||
import filter from './filter.main'; | ||
import ContainerFactory from './container.factory'; | ||
|
||
const transforms = { | ||
'switchable-group-field-input': new SwitchableGroupTransforms(), | ||
'optional-roup-field-input': new OptionalGroupTransforms(), | ||
'radio-field-input': new RadioTransforms(), | ||
'multiSelect-field-input': new MultiSelectTransforms(), | ||
'password-field-input': new PasswordTransforms(), | ||
'duration-field-input': new DurationTransforms(), | ||
'link-field-input': new LinkTransforms(), | ||
'select-field-input': new SelectTransforms(), | ||
}; | ||
|
||
il = il || {}; | ||
il.UI = il.UI || {}; | ||
il.UI.filter = filter($); | ||
il.UI.Input = il.UI.Input || {}; | ||
il.UI.Input.Container = new ContainerFactory(transforms); |
178 changes: 178 additions & 0 deletions
178
components/ILIAS/UI/resources/js/Input/Container/src/formnode.class.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,178 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
export default class FormNode { | ||
/** | ||
* @type {string} | ||
*/ | ||
#type; | ||
|
||
/** | ||
* @type {string} | ||
*/ | ||
#name; | ||
|
||
/** | ||
* @type {string} | ||
*/ | ||
#label; | ||
|
||
/** | ||
* @type {FormNode[]} | ||
*/ | ||
#children; | ||
|
||
/** | ||
* @type {HTMLElement[]} | ||
*/ | ||
#htmlFields; | ||
|
||
#transforms; | ||
|
||
/** | ||
* @param {string} type | ||
* @param {string} name | ||
* @param {string} label | ||
* @return {void} | ||
*/ | ||
constructor(type, name, label) { | ||
this.#type = type; | ||
this.#name = name; | ||
this.#label = label; | ||
|
||
this.#children = []; | ||
this.#htmlFields = []; | ||
} | ||
|
||
/** | ||
* @return {string} | ||
*/ | ||
getName() { | ||
return this.#name.split('/').pop(); | ||
} | ||
|
||
/** | ||
* @return {string} | ||
*/ | ||
getFullName() { | ||
return this.#name; | ||
} | ||
|
||
/** | ||
* @return {string} | ||
*/ | ||
getLabel() { | ||
return this.#label; | ||
} | ||
|
||
/** | ||
* @return {string} | ||
*/ | ||
getType() { | ||
return this.#type; | ||
} | ||
|
||
/** | ||
* @param {FormNode} node | ||
* @return {void} | ||
*/ | ||
addChildNode(node) { | ||
this.#children.push(node); | ||
} | ||
|
||
/** | ||
* @return {FormNode[]} | ||
*/ | ||
getAllChildren() { | ||
return this.#children; | ||
} | ||
|
||
/** | ||
* @param {string} name | ||
* @return {FormNode|null} | ||
*/ | ||
getChildByName(name) { | ||
const filtered = Array.from(this.#children) | ||
.filter( | ||
(child) => child.getName() === name, | ||
); | ||
if (filtered.length === 0) { | ||
return null; | ||
} | ||
return filtered.shift(); | ||
} | ||
|
||
/** | ||
* @param {HTMLElement} htmlField | ||
* @return {void} | ||
*/ | ||
addHtmlField(htmlField) { | ||
this.#htmlFields.push(htmlField); | ||
} | ||
|
||
/** | ||
* @return {HTMLElement[]} | ||
*/ | ||
getHtmlFields() { | ||
return this.#htmlFields; | ||
} | ||
|
||
/** | ||
* @return {Array} | ||
*/ | ||
getValues() { | ||
const values = []; | ||
|
||
this.#htmlFields.forEach( | ||
(htmlField) => { | ||
if (htmlField.type === 'checkbox' || htmlField.type === 'radio') { | ||
if (htmlField.checked) { | ||
values.push(htmlField.value); | ||
} | ||
} else { | ||
values.push(htmlField.value); | ||
} | ||
}, | ||
); | ||
return values; | ||
} | ||
|
||
/** | ||
* @param {Class} transforms | ||
*/ | ||
setTransforms(transforms) { | ||
this.#transforms = transforms; | ||
} | ||
|
||
/** | ||
* @return {FormNode[]} | ||
*/ | ||
getChildren() { | ||
if (this.#transforms && this.#transforms.childrenTransform) { | ||
return this.#transforms.childrenTransform(this); | ||
} | ||
return this.getAllChildren(); | ||
} | ||
|
||
/** | ||
* @return {Array} | ||
*/ | ||
getValuesRepresentation() { | ||
if (this.#transforms && this.#transforms.valueTransform) { | ||
return this.#transforms.valueTransform(this); | ||
} | ||
return this.getValues(); | ||
} | ||
} |
36 changes: 36 additions & 0 deletions
36
components/ILIAS/UI/resources/js/Input/Container/src/transforms/duration.transform.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
export default class DurationTransforms { | ||
/** | ||
* @param {FormNode} node | ||
* @return {Array} | ||
*/ | ||
valueTransform(node) { | ||
const [start, end] = node.getAllChildren().map((child) => child.getValues()[0]); | ||
if (start && end) { | ||
return [`${start} - ${end}`]; | ||
} | ||
return ['-']; | ||
} | ||
|
||
/** | ||
* @param {FormNode} node | ||
* @return {Array} | ||
*/ | ||
childrenTransform(node) { | ||
return []; | ||
} | ||
} |
25 changes: 25 additions & 0 deletions
25
components/ILIAS/UI/resources/js/Input/Container/src/transforms/link.transform.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
export default class LinkTransforms { | ||
/** | ||
* @param {FormNode} node | ||
* @return {Array} | ||
*/ | ||
valueTransform(node) { | ||
const [label, url] = node.getAllChildren().map((child) => child.getValues()[0]); | ||
return [`${label} [${url}]`]; | ||
} | ||
} |
32 changes: 32 additions & 0 deletions
32
components/ILIAS/UI/resources/js/Input/Container/src/transforms/multiselect.transform.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
export default class MultiSelectTransforms { | ||
/** | ||
* @param {FormNode} node | ||
* @return {Array} | ||
*/ | ||
valueTransform(node) { | ||
const checked = node.getHtmlFields().filter((element) => element.checked); | ||
if (checked.length === 0) { | ||
return []; | ||
} | ||
const representation = []; | ||
checked.forEach( | ||
(field) => representation.push(field.parentNode.textContent), | ||
); | ||
return representation; | ||
} | ||
} |
28 changes: 28 additions & 0 deletions
28
components/ILIAS/UI/resources/js/Input/Container/src/transforms/optionalgroup.transform.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
export default class OptionalGroupTransforms { | ||
/** | ||
* @param {FormNode} node | ||
* @return {Array} | ||
*/ | ||
childrenTransform(node) { | ||
if (!node.getHtmlFields()[0].checked | ||
) { | ||
return []; | ||
} | ||
return node.getAllChildren(); | ||
} | ||
} |
24 changes: 24 additions & 0 deletions
24
components/ILIAS/UI/resources/js/Input/Container/src/transforms/password.transform.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
export default class SwitchableGroupTransforms { | ||
/** | ||
* @param {FormNode} node | ||
* @return {null} | ||
*/ | ||
valueTransform(node) { | ||
return null; | ||
} | ||
} |
32 changes: 32 additions & 0 deletions
32
components/ILIAS/UI/resources/js/Input/Container/src/transforms/radio.transform.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
export default class RadioTransforms { | ||
/** | ||
* @param {FormNode} node | ||
* @return {Array} | ||
*/ | ||
valueTransform(node) { | ||
const checked = node.getHtmlFields().filter((element) => element.checked); | ||
if (checked.length === 0) { | ||
return []; | ||
} | ||
const representation = []; | ||
checked.forEach( | ||
(field) => representation.push(field.nextElementSibling.textContent), | ||
); | ||
return representation; | ||
} | ||
} |
25 changes: 25 additions & 0 deletions
25
components/ILIAS/UI/resources/js/Input/Container/src/transforms/select.transform.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
export default class SelectTransforms { | ||
/** | ||
* @param {FormNode} node | ||
* @return {Array} | ||
*/ | ||
valueTransform(node) { | ||
const field = node.getHtmlFields()[0]; | ||
return [field.options[field.options.selectedIndex].text]; | ||
} | ||
} |
40 changes: 40 additions & 0 deletions
40
components/ILIAS/UI/resources/js/Input/Container/src/transforms/switchablegroup.transform.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
export default class SwitchableGroupTransforms { | ||
/** | ||
* @param {FormNode} node | ||
* @return {Array} | ||
*/ | ||
valueTransform(node) { | ||
const children = node.getChildren(); | ||
if (children.length === 0) { | ||
return []; | ||
} | ||
const representation = []; | ||
children.forEach((child) => representation.push(child.getLabel())); | ||
return representation; | ||
} | ||
|
||
/** | ||
* @param {FormNode} node | ||
* @return {Array} | ||
*/ | ||
childrenTransform(node) { | ||
return node.getAllChildren().filter( | ||
(child) => child.getHtmlFields()[0].checked, | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
206 changes: 206 additions & 0 deletions
206
components/ILIAS/UI/src/examples/Input/Field/Section/foldable.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,206 @@ | ||
<?php | ||
|
||
declare(strict_types=1); | ||
|
||
namespace ILIAS\UI\examples\Input\Field\Section; | ||
|
||
/** | ||
* --- | ||
* description: > | ||
* Sections may fold | ||
* | ||
* expected output: > | ||
* ILIAS shows the rendered Component. | ||
* --- | ||
*/ | ||
function foldable() | ||
{ | ||
global $DIC; | ||
$ui = $DIC->ui()->factory(); | ||
$renderer = $DIC->ui()->renderer(); | ||
$request = $DIC->http()->request(); | ||
|
||
$number_input = $ui->input()->field()->numeric("number", "Put in a number.") | ||
->withLabel("a number"); | ||
$text_input = $ui->input()->field()->text("text", "Put in some text.") | ||
->withLabel("a text"); | ||
|
||
$file_input = $ui->input()->field()->file( | ||
new \ilUIDemoFileUploadHandlerGUI(), | ||
"Upload File", | ||
"you can drop your files here" | ||
); | ||
|
||
$link_input = $ui->input()->field()->link( | ||
"a LinkField", | ||
"enter label and url" | ||
); | ||
|
||
|
||
$section1 = $ui->input()->field()->section( | ||
[ | ||
$number_input->withValue(5), | ||
$text_input->withValue('some text'), | ||
$file_input, | ||
$link_input, | ||
], | ||
"first section", | ||
"fill in some values" | ||
); | ||
|
||
$optional_group = $ui->input()->field()->optionalGroup( | ||
[ | ||
$ui->input()->field()->duration("a dependent duration field", ""), | ||
$ui->input()->field()->text("a dependent text field", "") | ||
], | ||
'optional group', | ||
'check to edit the field of the group', | ||
); | ||
$optional_group2 = $ui->input()->field()->optionalGroup( | ||
[ | ||
$ui->input()->field()->section( | ||
[ | ||
$ui->input()->field()->tag( | ||
"Basic Tag", | ||
['Interesting', 'Boring', 'Animating', 'Repetitious'], | ||
"Just some tags" | ||
), | ||
$rating = $ui->input()->field()->rating("Rate with the Stars:", "change the rating") | ||
], | ||
'fields in opt. section' | ||
)], | ||
'optional section', | ||
'byline opt. section', | ||
); | ||
|
||
$group1 = $ui->input()->field()->group( | ||
[ | ||
"field_1_1" => $ui->input()->field()->text("Item 1.1", "Just some field"), | ||
"field_1_2" => $ui->input()->field()->text("Item 1.2", "Just some other field"), | ||
], | ||
"Switchable Group number one", | ||
"Byline for Switchable Group number one" | ||
); | ||
$options = array( | ||
"1" => "Pick 1", | ||
"2" => "Pick 2", | ||
"3" => "Pick 3", | ||
"4" => "Pick 4", | ||
); | ||
$group2 = $ui->input()->field()->group( | ||
[ | ||
$ui->input()->field()->multiselect("now, pick more", $options, "This is the byline of multi text") | ||
->withValue([2,3]), | ||
$ui->input()->field()->select("now, select one more", $options, "This is the byline of select") | ||
->withValue(2), | ||
|
||
$ui->input()->field()->radio("now, pick just one more", "byline for radio (pick one more)") | ||
->withOption('single1', 'Single 1') | ||
->withOption('single2', 'Single 2') | ||
], | ||
"Switchable Group number two", | ||
"Byline for Switchable Group number two" | ||
); | ||
$switchable_group = $ui->input()->field()->switchableGroup( | ||
[ | ||
"g1" => $group1, | ||
"g2" => $group2, | ||
], | ||
"Pick One", | ||
"Byline for the whole Switchable Group (pick one)" | ||
); | ||
|
||
$section2 = $ui->input()->field()->section( | ||
[ $number_input->withValue(7), | ||
$text_input->withValue('some other text'), | ||
$optional_group->withValue(null), | ||
$switchable_group, | ||
$text_input->withValue('final words'), | ||
], | ||
"second section", | ||
"fill in some other values" | ||
); | ||
|
||
|
||
$form = $ui->input()->container()->form()->standard('#', [$optional_group2, $section1, $section2]); | ||
|
||
$button_js = $ui->button()->standard('log struct', '')->withOnLoadCode( | ||
fn($id) => "document.querySelector('#{$id}').addEventListener( | ||
'click', | ||
(event) => console.log( | ||
il.UI.Input.Container.get(event.srcElement.parentNode.querySelector('form').id) | ||
.getNodes() | ||
) | ||
);" | ||
); | ||
$button_unfold = $ui->button()->standard('unfold', '')->withOnLoadCode( | ||
fn($id) => "document.querySelector('#{$id}').addEventListener( | ||
'click', | ||
(event) => { | ||
const form = event.srcElement.parentNode.querySelector('form'); | ||
const nodes = il.UI.Input.Container.get(form.id); | ||
const formparts = nodes.getNodes().getChildren(); | ||
formparts.forEach((part) => { | ||
const partArea = form.querySelector('[data-il-ui-input-name=\"' + part.getFullName() +'\"]'); | ||
const fieldArea = partArea.querySelector(':scope > div.c-input__field'); | ||
const valArea = partArea.querySelector(':scope > div.c-input__value_representation'); | ||
fieldArea.style.display = 'block'; | ||
valArea.innerHTML = ''; | ||
}); | ||
} | ||
);" | ||
); | ||
|
||
$button_fold = $ui->button()->standard('fold', '')->withOnLoadCode( | ||
fn($id) => "document.querySelector('#{$id}').addEventListener( | ||
'click', | ||
(event) => { | ||
const form = event.srcElement.parentNode.querySelector('form'); | ||
const nodes = il.UI.Input.Container.get(form.id); | ||
const formparts = nodes.getNodes().getChildren(); | ||
formparts.forEach((part) => { | ||
const values = nodes.getValuesRepresentation(part); | ||
let txt = ''; | ||
values.forEach((v) => { | ||
const {label, value, indent, type} = v; | ||
txt = txt | ||
+ ' '.repeat(indent + 1) | ||
+ label | ||
+ ' <small>(' + type.replace('-field-input', '') + ')</small> ' | ||
+ ': <b>' + value + '</b>' | ||
+ '<br/>'; | ||
}); | ||
const partArea = form.querySelector('[data-il-ui-input-name=\"' + part.getFullName() +'\"]'); | ||
const fieldArea = partArea.querySelector(':scope > div.c-input__field'); | ||
const valArea = partArea.querySelector(':scope > div.c-input__value_representation'); | ||
fieldArea.style.display = 'none'; | ||
valArea.style.fontSize = '80%'; | ||
valArea.innerHTML = txt; | ||
}); | ||
} | ||
);" | ||
); | ||
|
||
if ($request->getMethod() == "POST") { | ||
$form = $form->withRequest($request); | ||
$result = $form->getData()[0]; | ||
} else { | ||
$result = "No result yet."; | ||
} | ||
|
||
//Return the rendered form | ||
return | ||
"<pre>" . print_r($result, true) . "</pre><br/>" . | ||
$renderer->render([ | ||
$form, | ||
$button_js, | ||
$button_fold, | ||
$button_unfold | ||
]); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,3 +3,4 @@ | |
<!-- BEGIN byline --> | ||
<div class="c-input__help-byline">{BYLINE}</div> | ||
<!-- END byline --> | ||
|
2 changes: 1 addition & 1 deletion
2
components/ILIAS/UI/src/templates/default/Input/tpl.standard.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
190 changes: 190 additions & 0 deletions
190
components/ILIAS/UI/tests/Client/Input/Container/container.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,190 @@ | ||
/** | ||
* This file is part of ILIAS, a powerful learning management system | ||
* published by ILIAS open source e-Learning e.V. | ||
* | ||
* ILIAS is licensed with the GPL-3.0, | ||
* see https://www.gnu.org/licenses/gpl-3.0.en.html | ||
* You should have received a copy of said license along with the | ||
* source code, too. | ||
* | ||
* If this is not the case or you just want to try ILIAS, you'll find | ||
* us at: | ||
* https://www.ilias.de | ||
* https://github.com/ILIAS-eLearning | ||
*/ | ||
|
||
import { expect } from 'chai'; | ||
import { JSDOM } from 'jsdom'; | ||
|
||
import ContainerFactory from '../../../../resources/js/Input/Container/src/container.factory.js'; | ||
import Container from '../../../../resources/js/Input/Container/src/container.class.js'; | ||
import FormNode from '../../../../resources/js/Input/Container/src/formnode.class.js'; | ||
import SwitchableGroupTransforms from '../../../../resources/js/Input/Container/src/transforms/switchablegroup.transform.js'; | ||
|
||
/** | ||
* get HTML document from file | ||
* | ||
* @return JSDOM | ||
*/ | ||
function loadMockedDom(file) { | ||
const path = 'components/ILIAS/UI/tests/Client/Input/Container/'; | ||
const doc = JSDOM.fromFile(path + file, { contentType: 'text/html', resources: 'usable' }) | ||
.then((dom) => dom.window.document); | ||
return doc; | ||
} | ||
|
||
describe('Input\\Container components are there', () => { | ||
it('ContainerFactory', () => { | ||
expect(ContainerFactory).to.not.be.undefined; | ||
}); | ||
|
||
it('Container', () => { | ||
expect(Container).to.not.be.undefined; | ||
}); | ||
it('FormNode', () => { | ||
expect(FormNode).to.not.be.undefined; | ||
}); | ||
}); | ||
|
||
/* | ||
*/ | ||
describe('Input\\Container', () => { | ||
before(async () => { | ||
const transforms = {}; | ||
global.doc = await loadMockedDom('containertest_simple.html'); | ||
global.containerSimple = new Container(transforms, global.doc.querySelector('#test_container_id')); | ||
}); | ||
|
||
it('is built and provides a FormNode', () => { | ||
expect(global.containerSimple).to.be.an.instanceOf(Container); | ||
expect(global.containerSimple.getNodes()).to.be.an.instanceOf(FormNode); | ||
}); | ||
|
||
it('provides a list of FormNodes and values', () => { | ||
const expected = [ | ||
{ | ||
label: 'test_container_id', | ||
value: [], | ||
indent: 0, | ||
type: 'form', | ||
}, | ||
{ | ||
label: 'Item 1', | ||
value: ['value 0'], | ||
indent: 1, | ||
type: 'text-field-input', | ||
}, | ||
{ | ||
label: 'Item 2', | ||
value: ['value 1'], | ||
indent: 1, | ||
type: 'text-field-input', | ||
}, | ||
{ | ||
label: 'Item 3', | ||
value: [''], | ||
indent: 1, | ||
type: 'text-field-input', | ||
}, | ||
]; | ||
|
||
expect(global.containerSimple.getValuesRepresentation()).to.eql(expected); | ||
}); | ||
|
||
it('finds FormNodes by name; FormNodes have name, label and value', async () => { | ||
const doc = await loadMockedDom('containertest_switchablegroup.html'); | ||
const transforms = {}; | ||
const containerSwitchableGroup = new Container(transforms, doc.querySelector('#test_container_id')); | ||
const expected = [ | ||
['form/input_0', 'Pick One', []], | ||
['form/input_0/input_1', 'Switchable Group number one (with numeric key)', ['1']], | ||
['form/input_0/input_1/input_2', 'Item 1.1', ['']], | ||
['form/input_0/input_1/input_3', 'Item 1.2', ['val 1.2']], | ||
['form/input_0/input_1/input_4', 'Item 1.3', ['2024-09-26']], | ||
['form/input_0/input_5', 'Switchable Group number two', []], | ||
['form/input_0/input_5/input_6', 'Item 2', ['this should not appear']], | ||
]; | ||
|
||
expected.forEach( | ||
(n) => { | ||
const [name, label, values] = n; | ||
const node = containerSwitchableGroup.getNodeByName(name); | ||
expect(node.getFullName()).to.eql(name); | ||
expect(node.getLabel()).to.eql(label); | ||
expect(node.getValues()).to.eql(values); | ||
}, | ||
); | ||
}); | ||
|
||
it('filters switchable groups', async () => { | ||
const doc = await loadMockedDom('containertest_switchablegroup.html'); | ||
const transforms = {}; | ||
transforms['switchable-group-field-input'] = new SwitchableGroupTransforms(); | ||
|
||
const containerSwitchableGroup = new Container(transforms, doc.querySelector('#test_container_id')); | ||
|
||
let expected = [ | ||
{ | ||
label: 'test_container_id', value: [], indent: 0, type: 'form', | ||
}, | ||
{ | ||
label: 'Pick One', | ||
value: ['Switchable Group number one (with numeric key)'], | ||
indent: 1, | ||
type: 'switchable-group-field-input', | ||
}, | ||
{ | ||
label: 'Switchable Group number one (with numeric key)', | ||
value: ['1'], | ||
indent: 2, | ||
type: 'group-field-input', | ||
}, | ||
{ | ||
label: 'Item 1.1', | ||
value: [''], | ||
indent: 3, | ||
type: 'text-field-input', | ||
}, | ||
{ | ||
label: 'Item 1.2', | ||
value: ['val 1.2'], | ||
indent: 3, | ||
type: 'text-field-input', | ||
}, | ||
{ | ||
label: 'Item 1.3', | ||
value: ['2024-09-26'], | ||
indent: 3, | ||
type: 'date-time-field-input', | ||
}, | ||
]; | ||
expect(containerSwitchableGroup.getValuesRepresentation()).to.eql(expected); | ||
|
||
doc.getElementsByName('form/input_0')[1].checked = 'checked'; | ||
|
||
expected = [ | ||
{ | ||
label: 'test_container_id', value: [], indent: 0, type: 'form', | ||
}, | ||
{ | ||
label: 'Pick One', | ||
value: ['Switchable Group number two'], | ||
indent: 1, | ||
type: 'switchable-group-field-input', | ||
}, | ||
{ | ||
label: 'Switchable Group number two', | ||
value: ['g2'], | ||
indent: 2, | ||
type: 'group-field-input', | ||
}, | ||
{ | ||
label: 'Item 2', | ||
value: ['this should not appear'], | ||
indent: 3, | ||
type: 'text-field-input', | ||
}, | ||
]; | ||
expect(containerSwitchableGroup.getValuesRepresentation()).to.eql(expected); | ||
}); | ||
}); |
36 changes: 36 additions & 0 deletions
36
components/ILIAS/UI/tests/Client/Input/Container/containertest_simple.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<form role="form" id="test_container_id" class="c-form c-form--horizontal" enctype="multipart/form-data" action="#" method="post" novalidate="novalidate"> | ||
|
||
<div class="c-form__header"> | ||
<div class="c-form__actions"><button class="btn btn-default" data-action="">Save</button></div> | ||
</div> | ||
|
||
<fieldset class="c-input" data-il-ui-component="text-field-input" data-il-ui-input-name="form/input_0"> | ||
<label for="il_ui_fw_66d80b0abfe699_92234000">Item 1</label> | ||
<div class="c-input__field"> | ||
<input id="il_ui_fw_66d80b0abfe699_92234000" type="text" name="form/input_0" class="c-field-text" value="value 0"> | ||
</div> | ||
<div class="c-input__help-byline">Just some basic input</div> | ||
<div class="c-input__value_representation"></div> | ||
</fieldset> | ||
<fieldset class="c-input" data-il-ui-component="text-field-input" data-il-ui-input-name="form/input_1"> | ||
<label for="il_ui_fw_66d80b0abfe699_92234001">Item 2</label> | ||
<div class="c-input__field"> | ||
<input id="il_ui_fw_66d80b0abfe699_92234001" type="text" name="form/input_1" class="c-field-text" value="value 1"> | ||
</div> | ||
<div class="c-input__help-byline">Just some basic input (2)</div> | ||
<div class="c-input__value_representation"></div> | ||
</fieldset> | ||
<fieldset class="c-input" data-il-ui-component="text-field-input" data-il-ui-input-name="form/input_2"> | ||
<label for="il_ui_fw_66d80b0abfe699_92234002">Item 3</label> | ||
<div class="c-input__field"> | ||
<input id="il_ui_fw_66d80b0abfe699_92234002" type="text" name="form/input_2" class="c-field-text"> | ||
</div> | ||
<div class="c-input__help-byline">Just some basic input (3)</div> | ||
<div class="c-input__value_representation"></div> | ||
</fieldset> | ||
|
||
<div class="c-form__footer"> | ||
<div class="c-form__actions"><button class="btn btn-default" data-action="">Save</button></div> | ||
</div> | ||
|
||
</form> |
69 changes: 69 additions & 0 deletions
69
components/ILIAS/UI/tests/Client/Input/Container/containertest_switchablegroup.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
<form role="form" id="test_container_id" class="c-form c-form--horizontal" enctype="multipart/form-data" action="#" method="post" novalidate="novalidate"> | ||
<div class="c-form__header"> | ||
<div class="c-form__actions"><button class="btn btn-default" data-action="">Save</button></div> | ||
<div class="c-form__required"><span class="asterisk">*</span><span class="small"> Required</span></div> | ||
</div> | ||
|
||
<fieldset class="c-input" data-il-ui-component="switchable-group-field-input" data-il-ui-input-name="form/input_0"> | ||
<label>Pick One</label> | ||
<div class="c-input__field"> | ||
<fieldset class="c-input" data-il-ui-component="group-field-input" data-il-ui-input-name="form/input_0/input_1"> | ||
<label><input type="radio" name="form/input_0" value="1" checked="checked"><span>Switchable Group number one (with numeric key)</span></label> | ||
<div class="c-input__field"> | ||
<fieldset class="c-input" data-il-ui-component="text-field-input" data-il-ui-input-name="form/input_0/input_1/input_2"> | ||
<label for="il_ui_fw_66d840fe3cb926_32134854">Item 1.1</label> | ||
<div class="c-input__field"> | ||
<input id="il_ui_fw_66d840fe3cb926_32134854" type="text" name="form/input_0/input_1/input_2" class="c-field-text"> | ||
</div> | ||
<div class="c-input__help-byline">Just some field</div> | ||
<div class="c-input__value_representation"></div> | ||
</fieldset> | ||
<fieldset class="c-input" data-il-ui-component="text-field-input" data-il-ui-input-name="form/input_0/input_1/input_3"> | ||
<label for="il_ui_fw_66d840fe3ce7b7_56789185">Item 1.2</label> | ||
<div class="c-input__field"> | ||
<input id="il_ui_fw_66d840fe3ce7b7_56789185" type="text" name="form/input_0/input_1/input_3" class="c-field-text" value="val 1.2"> | ||
</div> | ||
<div class="c-input__help-byline">Just some other field</div> | ||
<div class="c-input__value_representation"></div> | ||
</fieldset> | ||
<fieldset class="c-input" data-il-ui-component="date-time-field-input" data-il-ui-input-name="form/input_0/input_1/input_4"> | ||
<label for="il_ui_fw_66d840fe3d2d72_79335356">Item 1.3</label> | ||
<div class="c-input__field"> | ||
<div class="c-input-group"> | ||
<input id="il_ui_fw_66d840fe3d2d72_79335356" type="date" name="form/input_0/input_1/input_4" class="c-field-datetime" value="2024-09-26"> | ||
</div> | ||
</div> | ||
<div class="c-input__help-byline">a date</div> | ||
<div class="c-input__value_representation"></div> | ||
</fieldset> | ||
</div> | ||
<div class="c-input__value_representation"></div> | ||
</fieldset> | ||
|
||
<fieldset class="c-input" data-il-ui-component="group-field-input" data-il-ui-input-name="form/input_0/input_5"> | ||
<label><input type="radio" name="form/input_0" value="g2"><span>Switchable Group number two</span></label> | ||
<div class="c-input__field"> | ||
<fieldset class="c-input" data-il-ui-component="text-field-input" data-il-ui-input-name="form/input_0/input_5/input_6"> | ||
<label for="il_ui_fw_66d840fe3d5d39_29530003">Item 2</label> | ||
<div class="c-input__field"> | ||
<input id="il_ui_fw_66d840fe3d5d39_29530003" type="text" value="this should not appear" name="form/input_0/input_5/input_6" class="c-field-text"> | ||
</div> | ||
<div class="c-input__help-byline">Just another field</div> | ||
<div class="c-input__value_representation"></div> | ||
</fieldset> | ||
</div> | ||
<div class="c-input__help-byline">with byline</div> | ||
<div class="c-input__value_representation"></div> | ||
</fieldset> | ||
|
||
</div> | ||
<div class="c-input__help-byline">...or the other</div> | ||
<div class="c-input__value_representation"></div> | ||
</fieldset> | ||
|
||
<div class="c-form__footer"> | ||
<div class="c-form__required"><span class="asterisk">*</span><span class="small"> Required</span></div> | ||
<div class="c-form__actions"><button class="btn btn-default" data-action="">Save</button></div> | ||
</div> | ||
|
||
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters