{% import '_includes/forms' as forms %} {% set customizableTabs = customizableTabs ?? true %} {% set customizableUi = customizableUi ?? true %} {% set pretendTabName = pretendTabName ?? 'Content'|t('app') %} {% set fieldLayout = fieldLayout ?? create('craft\\models\\FieldLayout') %} {% set groups = craft.app.fields.getAllGroups() %} {% do view.registerTranslations('app', [ 'Apply', 'Delete', 'Give your tab a name.', 'Move to the left', 'Move to the right', 'Remove', 'Rename', 'Required', '{pct} width', ]) %} {% macro tab(tabName, elements, context) %}
{{ tabName }} {% if context.customizableTabs %} {% endif %}
{% for element in elements %} {{ _self.elementSelector(element, false) }} {% endfor %}
{% endmacro %} {% macro elementSelector(element, forLibrary, attr) %} {% if element is instance of('craft\\fieldlayoutelements\\BaseField') %} {% set attr = { class: [ not forLibrary and element.required ? 'fld-required' : null, ]|filter, data: { keywords: forLibrary ? element.keywords()|join(' ')|lower : false, }, }|merge(attr ?? {}, recursive=true) %} {% endif %} {% set settingsHtml = element.settingsHtml() %} {{ element.selectorHtml()|attr({ class: [ 'fld-element', forLibrary ? 'unused' : null, ]|filter, data: { type: className(element), config: element.toArray(), 'has-custom-width': element.hasCustomWidth(), 'settings-html': (settingsHtml ? settingsHtml|namespaceAttributes("element#{random()}") : null) ?: false, }, }|merge(attr ?? {}, recursive=true)) }} {% endmacro %} {% macro fieldSelectors(groupName, groupFields, context) %} {% set showGroup = groupFields|contains(f => not context.fieldLayout.isFieldIncluded(f.attribute())) %}
{{ groupName }}
{% for field in groupFields %} {{ _self.elementSelector(field, true, { class: [ context.fieldLayout.isFieldIncluded(field.attribute()) ? 'hidden' : null, ], }) }} {% endfor %}
{% endmacro %} {% if fieldLayout.id %} {{ hiddenInput('fieldLayoutId', fieldLayout.id) }} {% endif %}
{% if customizableTabs %} {% for tab in fieldLayout.getTabs() %} {{ _self.tab(tab.name, tab.elements, _context) }} {% endfor %} {% else %} {% set elements = [] %} {% for tab in fieldLayout.getTabs() %} {% for element in tab.elements %} {% set elements = elements|push(element) %} {% endfor %} {% endfor %} {{ _self.tab(pretendTabName, elements, _context) }} {% endif %}
{% if customizableTabs %} {% endif %}
{% if customizableUi %}
{% endif %}
{{ _self.fieldSelectors('Standard Fields'|t('app'), fieldLayout.getAvailableStandardFields(), _context) }} {% for groupName, groupFields in fieldLayout.getAvailableCustomFields() %} {{ _self.fieldSelectors(groupName, groupFields, _context) }} {% endfor %}
{% if customizableUi %} {% endif %}
{% set jsSettings = { customizableTabs: customizableTabs, customizableUi: customizableUi, elementPlacementInputName: 'elementPlacements[__TAB_NAME__][]'|namespaceInputName, elementConfigInputName: 'elementConfigs[__ELEMENT_KEY__]'|namespaceInputName, } %} {% js %} var initFLD = function() { new Craft.FieldLayoutDesigner("#{{ 'fieldlayoutform'|namespaceInputId }}", {{ jsSettings|json_encode|raw }}); }; {% if tab is defined %} var $fldTab = $('#{{ "tab-#{tab}"|namespaceInputId }}'); if ($fldTab.hasClass('sel')) { initFLD(); } else { $fldTab.on('activate.fld', function() { initFLD(); $fldTab.off('activate.fld'); }); } {% else %} initFLD(); {% endif %} {% endjs %}