Expanded cards description
First, to get an overview of principles of creating and working with cards, its recommended to view the manifest.
Some expanded cards features are as follows:
- Contain different set of contacts (e-mail and phone, phone only, phone and social network account data).
- The same set of fields, but different graphical representation (social network buttons).
- And etcetera.
All cards are minimized into compact panels, with quick access to the main features: Sort, Edit, Delete. When clicking on the panel or a "Edit" button - the panel is expanded into the card edit form.
Both an empty card, and the card from a preset can be added.
Composite and dynamic card titles are supported. Card name is generated from the data that was specified by the user. Title can be composed from text, images, icons and links. Titles will be dynamically updated when the card values are edited.
Expanded card manifest
'cards' => [
'.landing-block-card' => [
'name' => Loc::getMessage('LANDING_BLOCK_4_FEATURES_3_COLS_...'),
'label' => [
'.landing-block-node-element-icon',
'.landing-block-node-element-title'
],
'presets' => [
'telegram' => [...],
'facebook' => [...],
'instagram' => [...],
'reddit' => [...],
'whatsapp' => [...],
'skype' => [...]
]
]
]
Name key
Defines the title of cards group. By default, it is used to generate "Card 1", "Card 2" types of titles
Label key
Defines rules for generating a card's title. Either node's selector can be passed as the value or an array of nodes' selectors, which the values must be taken to generate a title.
Presets key
Defines the set of presets for the cards of the current set. If the property value is not empty, then a new card can be added only from the preset. Array of presets is received as the value; preset identifiers must be specified as the array keys.
Preset
'telegram' => [
'name' => ' Telegram',
'html' => '<html-preset-code>',
'values' => [
'.landing-block-node-element-title' => 'Telegram',
'.landing-block-node-element-text' => 'Any text ...',
'.landing-block-node-element-icon' => [
'type' => 'icon',
'classList' => ['landing-block-node-element-icon', 'fa', 'fa-telegram']
]
],
'disallow' => [
'.landing-block-node-element-icon'
]
]
Name key
Defines the title of preset. Supports html. Displayed in the expanded list of presets.
html key
Cards layout. Can differ from the layout of the rest of cards. When adding a layout to a preset, it must be considered, that only those nodes will be edited, which are defined in 'nodes' and not re-defined to the 'disallow'.
Values key
Defines values of nodes and card fields with which they will be initialized. Key - selector of the node from the 'nodes', value - value of the node according to the node type with which they will be initialized. Key - selector from the 'nodes', value - value of the node according to the node type.
Disallow key
Defines which nodes a user cannot edit. This value receives an array of selectors.
Preset layout
Layout of single preset is the repeated block of code.
Example:
<li class="landing-block-node-list-item col g-min-width-65 list-inline-item g-mr-0"
data-card-preset="facebook">
<a class="landing-block-node-list-item-link d-block g-py-15 g-px-30 g-bg-facebook--hover g-bg-facebook g-color-white text-center" href="#">
<i class="landing-block-node-list-item-icon fa fa-facebook"></i>
</a>
In principle, such repeated content can change in contrast to the standard card. For example, one <li> example above may not contain links, or contain an image altogether.
Please note that contents of cards can vary, but its preferable to keep the external block the same.
Also, please remember that data-card-preset="