public function BootstrapLayout::buildConfigurationForm in Bootstrap Layout Builder 1.x

Same name and namespace in other branches

1. 2.x src/Plugin/Layout/BootstrapLayout.php \Drupal\bootstrap_layout_builder\Plugin\Layout\BootstrapLayout::buildConfigurationForm()

Form constructor.

Plugin forms are embedded in other forms. In order to know where the plugin form is located in the parent form, #parents and #array_parents must be known, but these are not available during the initial build phase. In order to have these properties available when building the plugin form's elements, let this method return a form element that has a #process callback and build the rest of the form in the callback. By the time the callback is executed, the element's #parents and #array_parents properties will have been set by the form API. For more documentation on #parents and #array_parents, see \Drupal\Core\Render\Element\FormElement.

Parameters

array $form: An associative array containing the initial structure of the plugin form.

\Drupal\Core\Form\FormStateInterface $form_state: The current state of the form. Calling code should pass on a subform state created through \Drupal\Core\Form\SubformState::createForSubform().

Return value

array The form structure.

Overrides LayoutDefault::buildConfigurationForm

File

src/Plugin/Layout/BootstrapLayout.php, line 262

Class

BootstrapLayout

A layout from our bootstrap layout builder.

Namespace

Drupal\bootstrap_layout_builder\Plugin\Layout

Code

public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
  $form = parent::buildConfigurationForm($form, $form_state);

  // Our main set of tabs.
  $form['ui'] = [
    '#type' => 'container',
    '#weight' => -100,
    '#attributes' => [
      'id' => 'blb_ui',
    ],
  ];
  $tabs = [
    [
      'machine_name' => 'layout',
      'icon' => 'layout.svg',
      'title' => $this
        ->t('Layout'),
      'active' => TRUE,
    ],
    [
      'machine_name' => 'appearance',
      'icon' => 'appearance.svg',
      'title' => $this
        ->t('Style'),
    ],
    // @TODO enable effects.
    // [
    //   'machine_name' => 'effects',
    //   'icon' => 'effects.svg',
    //   'title' => $this->t('Effects'),
    // ],
    [
      'machine_name' => 'settings',
      'icon' => 'settings.svg',
      'title' => $this
        ->t('Settings'),
    ],
  ];

  // Create our tabs from above.
  $form['ui']['nav_tabs'] = [
    '#type' => 'html_tag',
    '#tag' => 'ul',
    '#attributes' => [
      'class' => 'blb_nav-tabs',
      'id' => 'blb_nav-tabs',
      'role' => 'tablist',
    ],
  ];
  $form['ui']['tab_content'] = [
    '#type' => 'container',
    '#attributes' => [
      'class' => 'blb_tab-content',
      'id' => 'blb_tabContent',
    ],
  ];

  // Create our tab & tab panes.
  foreach ($tabs as $tab) {
    $form['ui']['nav_tabs'][$tab['machine_name']] = [
      '#type' => 'inline_template',
      '#template' => '<li><a data-target="{{ target|clean_class }}" class="{{active}}">{{ icon }}<div class="blb_tooltip" data-placement="bottom" role="tooltip">{{ title }}</div></a></li>',
      '#context' => [
        'title' => $tab['title'],
        'target' => $tab['machine_name'],
        'active' => isset($tab['active']) && $tab['active'] == TRUE ? 'active' : '',
        'icon' => t('<img class="blb_icon" src="/' . drupal_get_path('module', 'bootstrap_layout_builder') . '/images/ui/' . ($tab['icon'] ? $tab['icon'] : 'default.svg') . '" />'),
      ],
    ];
    $form['ui']['tab_content'][$tab['machine_name']] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => [
          'blb_tab-pane',
          'blb_tab-pane--' . $tab['machine_name'],
          isset($tab['active']) && $tab['active'] == TRUE ? 'active' : '',
        ],
      ],
    ];
  }

  // Check if section settings visible.
  $form['ui']['tab_content']['layout']['has_container'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Add Container'),
    '#default_value' => (int) (!empty($this->configuration['container'])) ? TRUE : FALSE,
  ];
  $container_types = [
    'container' => $this
      ->t('Boxed'),
    'container-fluid' => $this
      ->t('Full'),
    'w-100' => $this
      ->t('Flush'),
  ];
  $form['ui']['tab_content']['layout']['container_type'] = [
    '#type' => 'radios',
    '#title' => $this
      ->t('Container type'),
    '#title_display' => 'invisible',
    '#options' => $container_types,
    '#default_value' => !empty($this->configuration['container']) ? $this->configuration['container'] : 'container',
    '#attributes' => [
      'class' => [
        'blb_container_type',
      ],
    ],
    '#states' => [
      'visible' => [
        ':input[name="layout_settings[ui][tab_content][layout][has_container]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['ui']['tab_content']['layout']['remove_gutters'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('No Gutters'),
    '#default_value' => (int) (!empty($this->configuration['remove_gutters'])) ? TRUE : FALSE,
  ];
  $layout_id = $this
    ->getPluginDefinition()
    ->id();
  $breakpoints = $this->entityTypeManager
    ->getStorage('blb_breakpoint')
    ->getQuery()
    ->sort('weight', 'ASC')
    ->execute();
  foreach ($breakpoints as $breakpoint_id) {
    $breakpoint = $this->entityTypeManager
      ->getStorage('blb_breakpoint')
      ->load($breakpoint_id);
    $layout_options = $breakpoint
      ->getLayoutOptions($layout_id);
    $default_value = '';
    if ($this->configuration['breakpoints'] && isset($this->configuration['breakpoints'][$breakpoint_id])) {
      $default_value = $this->configuration['breakpoints'][$breakpoint_id];
    }
    $form['ui']['tab_content']['layout']['breakpoints'][$breakpoint_id] = [
      '#type' => 'radios',
      '#title' => $breakpoint
        ->label(),
      '#options' => $layout_options,
      '#default_value' => $default_value,
      '#validated' => TRUE,
      '#attributes' => [
        'class' => [
          'blb_breakpoint_cols',
        ],
      ],
    ];
  }

  // Background Colors.
  $form['ui']['tab_content']['appearance']['container_wrapper_bg_color_class'] = [
    '#type' => 'radios',
    '#options' => $this
      ->getStyleOptions('background_colors'),
    '#title' => $this
      ->t('Background color'),
    '#default_value' => $this->configuration['container_wrapper_bg_color_class'],
    '#validated' => TRUE,
    '#attributes' => [
      'class' => [
        'bootstrap_layout_builder_bg_color',
      ],
    ],
    '#states' => [
      'visible' => [
        ':input[name="layout_settings[ui][tab_content][layout][has_container]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];

  // Background media.
  $allowed_bundles = [];
  $config = $this->configFactory
    ->get('bootstrap_layout_builder.settings');

  // Check if the bundle exist.
  if ($config
    ->get('background_image.bundle') && $this->entityTypeManager
    ->getStorage('media_type')
    ->load($config
    ->get('background_image.bundle'))) {
    $allowed_bundles[] = $config
      ->get('background_image.bundle');
  }

  // Check if the bundle exist.
  if ($config
    ->get('background_local_video.bundle') && $this->entityTypeManager
    ->getStorage('media_type')
    ->load($config
    ->get('background_local_video.bundle'))) {
    $allowed_bundles[] = $config
      ->get('background_local_video.bundle');
  }
  if ($allowed_bundles) {
    $form['ui']['tab_content']['appearance']['container_wrapper_bg_media'] = [
      '#type' => 'media_library',
      '#title' => $this
        ->t('Background media'),
      '#description' => $this
        ->t('Background media'),
      '#allowed_bundles' => $allowed_bundles,
      '#default_value' => $this->configuration['container_wrapper_bg_media'],
      '#prefix' => '<hr />',
      '#states' => [
        'visible' => [
          ':input[name="layout_settings[ui][tab_content][layout][has_container]"]' => [
            'checked' => TRUE,
          ],
        ],
      ],
    ];
  }

  // Move default admin label input to setting tab.
  $form['ui']['tab_content']['settings']['label'] = $form['label'];
  unset($form['label']);

  // Advanced Settings.
  if (!$this
    ->sectionSettingsIsHidden()) {
    $form['ui']['tab_content']['settings']['container'] = [
      '#type' => 'details',
      '#title' => $this
        ->t('Container Settings'),
      '#open' => FALSE,
    ];
    $form['ui']['tab_content']['settings']['container']['container_wrapper_classes'] = [
      '#type' => 'textfield',
      '#title' => $this
        ->t('Container wrapper classes'),
      '#description' => $this
        ->t('Add classes separated by space. Ex: bg-warning py-5.'),
      '#default_value' => $this->configuration['container_wrapper_classes'],
    ];
    $form['ui']['tab_content']['settings']['row'] = [
      '#type' => 'details',
      '#title' => $this
        ->t('Row Settings'),
      '#description' => $this
        ->t('Add classes separated by space. Ex: col mb-5 py-3.'),
      '#open' => FALSE,
    ];
    $form['ui']['tab_content']['settings']['row']['section_classes'] = [
      '#type' => 'textfield',
      '#title' => $this
        ->t('Row classes'),
      '#description' => $this
        ->t('Row has "row" class, you can add more classes separated by space. Ex: no-gutters py-3.'),
      '#default_value' => $this->configuration['section_classes'],
    ];
    $form['ui']['tab_content']['settings']['regions'] = [
      '#type' => 'details',
      '#title' => $this
        ->t('Columns Settings'),
      '#description' => $this
        ->t('Add classes separated by space. Ex: col mb-5 py-3.'),
      '#open' => FALSE,
    ];
    foreach ($this
      ->getPluginDefinition()
      ->getRegionNames() as $region_name) {
      $form['ui']['tab_content']['settings']['regions'][$region_name . '_classes'] = [
        '#type' => 'textfield',
        '#title' => $this
          ->getPluginDefinition()
          ->getRegionLabels()[$region_name] . ' ' . $this
          ->t('classes'),
        '#default_value' => $this->configuration['regions_classes'][$region_name],
      ];
    }
  }

  // @TODO Effects.
  // $form['ui']['tab_content']['effects']['message'] = [
  //   '#type' => 'inline_template',
  //   '#template' => '<small>Transition Effects Coming Soon...</small>',
  // ];
  // Attach the Bootstrap Layout Builder base library.
  $form['#attached']['library'][] = 'bootstrap_layout_builder/base';
  return $form;
}