Cloner Controller is a Stimulus controller for copying HTML elements (and their children).
Indicated by data-cloner-target attribute.
| Target | Element(s) | Description |
|---|---|---|
| button |
input[type="button"] button |
This is the element that will initiate the cloning. |
| source | (any) | This is the element that will be cloned. |
These are standard HTML attributes (with no prefix) used by the controller.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| aria-busy |
* |
false |
true false |
Controller will set this to true any time it is cloning an element. You can use the value in your CSS to indicate that work is in progress. |
All of these attributes are prefixed with "data-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| controller | * | cloner | This attribute provides the cloner functionality. | |
| action |
* |
cloner#clone | Controller will automatically set this on elements with data-cloner-target="button". |
All of these attributes are prefixed with "data-cloner-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| target |
* |
This will indicate if this is the element that issues the cloning or the element being cloned. | ||
| source | This is the element that will be cloned. | |||
| button | This is the element that will initiate the cloning. | |||
| action (rename) |
(root) |
beforebegin |
This indicates where the cloned element will be inserted in the DOM. |
|
| beforebegin | Inserts the cloned element before the source element. | |||
| afterend | Inserts the cloned element after the source element. | |||
| clear |
(any) |
If present, indicates what value should be cleared from the cloned element. |
||
| hide |
Hides the element that is being cloned. This is useful if you want to hide the element after it has been cloned. |
|||
| html |
Clears the inner HTML of the element that is being cloned. |
|||
| remove |
Removes the element that is being cloned. |
|||
| text |
Clears the inner text of the element that is being cloned. |
|||
| value |
Clears the value of the element that is being cloned. |
|||
| pattern |
(root) |
(regex) |
The pattern to use to find a numeric that should be replaced by the number of like elements that are on the page. Use a regex to find the number. This will allow you to have multiple form fields that will each have a different name. For example, if you have a field named "AliasName_1" and another named "AliasName_2", you can use the pattern "([a-zA-Z\d]+_)\d+" to find the number. Then, when the controller clones the element, it will replace the number with the next number in the sequence. For example, if you have 3 elements on the page, the controller will replace the number with 4. |
|
| reset |
(root) |
true | (boolean) |
Indicates if the form fields in the inserted element should be reset to their default values. When set to true, the controller will reset the form fields to their default values. When set to false, the controller will not reset the form fields. This is useful if you want to keep the values that are already in the form fields. |
| singlify |
(root) |
(Selector) |
A selector to indicate all of the elements that should exist no more than one in the cloned instance. Use a comma-delimited to list to limit more than one selector. |
These are custom events that the controller will fire when it takes certain actions.
All of these events are prefixed by "cloner:".
| Event | Parameters | Description |
|---|---|---|
| initialized | Called any time that the controller is initialized. | |
| connected | Called any time that the controller is connected. | |
| disconnected | Called any time that the controller is disconnected. | |
| cloned |
Called after the controller has cloned the element. |
While it is recommended to use the controller via the attributes listed above, the following methods can be called directly if needed.
| Method | Returns | Arguments | Event(s) | Description |
|---|---|---|---|---|
| clone |
Clones the source target |