Description

The clone pattern lets the website user clone elements in the page.

Documentation

The clone pattern is typically used in case you want to create a form on which it is unknown how many instances the user will need of a certain field or group of fields. For instance if you want to ask the user to fill out the name and birthdate of each family member.

Usage

This pattern is enabled by adding the pat-clone class on a container element which contains the original element and any clones of it that may have beeen added. The first element inside the .pat-clone container is by default assumed to be the original element may be cloned by the user.

Consider the following markup:

List of family members

Each time the user clicks on the button saying 'Add an extra family member', the pattern will make a copy of the first element inside the .pat-clone element, unless the template property is used to configure a different clone template. The template property takes a CSS selector as value.

Typically when using a template element, such an element would be hidden from view.

The new clone is always appended at the end, inside the .pat-clone element.

When creating a .pat-clone element containing existing clones, it's important that each existing clone either gets the clone CSS class or that you pass in a unique CSS selector for each clone via the clone-element property. This allows the pattern to properly determine how many existing clones there are to start with.

Incrementation of values in clones

The pat-clone pattern will automatically add up any number in the values of name and value attributes. For instance, if you have name="item-1" in your markup, then the first clone will be name="item-2" and the one after that name="item-3" etc.. If you want to print a number — for instance in a header of each clone — then you can use the syntax: #{1}. This string will be replaced by an number that's also increased by 1 for each clone.

Example with a hidden template

The markup below would have exactly the same effect as the first example, but using a hidden template. This might come in handy when the first instance shown should either contain different information, or if it will have pre-filled values by the server.

List of family members

Example with a hidden template which includes a pattern

Patterns in templates are initialized after cloning. However, the patterns in the template itself are not initialized if the template has the attribute hidden or the class cant-touch-this. This is to prevent double-initialization within the template and after being cloned.