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

Same name and namespace in other branches

1.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 293

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' => 'bs_ui',
    ],
  ];
  $tabs = [
    [
      'machine_name' => 'layout',
      'icon' => 'layout.svg',
      'title' => $this
        ->t('Layout'),
      'active' => TRUE,
    ],
    [
      'machine_name' => 'appearance',
      'icon' => 'appearance.svg',
      'title' => $this
        ->t('Style'),
    ],
    [
      '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' => 'bs_nav-tabs',
      'id' => 'bs_nav-tabs',
      'role' => 'tablist',
    ],
  ];
  if ($this
    ->responsiveIsEnabled()) {

    // Add the responsive previewer.
    $this
      ->buildResponsivePreviewer($form['ui']);
  }
  $form['ui']['tab_content'] = [
    '#type' => 'container',
    '#attributes' => [
      'class' => 'bs_tab-content',
      'id' => 'bs_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}}"><span role="img">{% include icon %}</span><div class="bs_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' => drupal_get_path('module', 'bootstrap_styles') . '/images/ui/' . ($tab['icon'] ? $tab['icon'] : 'default.svg'),
      ],
    ];
    $form['ui']['tab_content'][$tab['machine_name']] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => [
          'bs_tab-pane',
          'bs_tab-pane--' . $tab['machine_name'],
          isset($tab['active']) && $tab['active'] == TRUE ? 'active' : '',
        ],
      ],
    ];
  }
  $container_types = [
    'container' => $this
      ->t('Boxed'),
    'container-fluid' => $this
      ->t('Full'),
    'w-100' => $this
      ->t('Edge to Edge'),
  ];
  $form['ui']['tab_content']['layout']['container_type'] = [
    '#type' => 'radios',
    '#title' => $this
      ->t('Container type'),
    '#options' => $container_types,
    '#default_value' => !empty($this->configuration['container']) ? $this->configuration['container'] : 'container',
    '#attributes' => [
      'class' => [
        'blb_container_type',
      ],
    ],
  ];

  // Add icons to the container types.
  foreach ($form['ui']['tab_content']['layout']['container_type']['#options'] as $key => $value) {
    $form['ui']['tab_content']['layout']['container_type']['#options'][$key] = '<span class="input-icon ' . $key . '"></span>' . $value;
  }
  $gutter_types = [
    0 => $this
      ->t('With Gutters'),
    1 => $this
      ->t('No Gutters'),
  ];
  $form['ui']['tab_content']['layout']['remove_gutters'] = [
    '#type' => 'radios',
    '#title' => $this
      ->t('Gutters'),
    '#options' => $gutter_types,
    '#default_value' => (int) (!empty($this->configuration['remove_gutters'])) ? 1 : 0,
    '#attributes' => [
      'class' => [
        'blb_gutter_type',
      ],
    ],
  ];

  // Add icons to the gutter types.
  foreach ($form['ui']['tab_content']['layout']['remove_gutters']['#options'] as $key => $value) {
    $form['ui']['tab_content']['layout']['remove_gutters']['#options'][$key] = '<span class="input-icon gutter-icon-' . $key . '"></span>' . $value;
  }
  $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);
    if ($layout_options) {
      $options = $this->entityTypeManager
        ->getStorage('blb_layout_option')
        ->loadByProperties([
        'layout_id' => $layout_id,
      ]);
      $default_value = NULL;
      if ($this->configuration['breakpoints'] && isset($this->configuration['breakpoints'][$breakpoint_id])) {
        $default_value = $this->configuration['breakpoints'][$breakpoint_id];
      }
      else {
        $options = $this->entityTypeManager
          ->getStorage('blb_layout_option')
          ->loadByProperties([
          'layout_id' => $layout_id,
        ]);
        foreach ($options as $layoutOption) {
          if (array_search($breakpoint
            ->id(), $layoutOption
            ->getDefaultBreakpointsIds()) !== FALSE) {
            $default_value = $layoutOption
              ->getStructureId();
          }
        }
      }
      $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',
          ],
        ],
      ];

      // Check if the live preview enabled.
      if ($this
        ->livePreviewIsEnabled()) {
        $form['ui']['tab_content']['layout']['breakpoints'][$breakpoint_id]['#ajax']['callback'] = [
          __CLASS__,
          'livePreviewCallback',
        ];
        $form['ui']['tab_content']['layout']['breakpoints'][$breakpoint_id]['#ajax']['event'] = 'click';
        $form['ui']['tab_content']['layout']['breakpoints'][$breakpoint_id]['#ajax']['progress'] = [
          'type' => 'none',
        ];
      }
    }
  }

  // Container wrapper styling.
  $form['ui']['tab_content']['appearance'] = $this->stylesGroupManager
    ->buildStylesFormElements($form['ui']['tab_content']['appearance'], $form_state, $this->configuration['container_wrapper']['bootstrap_styles'], 'bootstrap_layout_builder.styles');

  // 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'],
    ];
    $container_attributes = $this->configuration['container_wrapper_attributes'];
    $form['ui']['tab_content']['settings']['container']['container_wrapper_attributes'] = [
      '#type' => 'textarea',
      '#title' => $this
        ->t('Container wrapper attributes (YAML)'),
      '#default_value' => empty($container_attributes) ? '' : Yaml::encode($container_attributes),
      '#attributes' => [
        'class' => [
          'blb-auto-size',
        ],
      ],
      '#rows' => 1,
      '#element_validate' => [
        [
          $this,
          'validateYaml',
        ],
      ],
    ];
    $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'],
    ];
    $row_attributes = $this->configuration['section_attributes'];
    $form['ui']['tab_content']['settings']['row']['section_attributes'] = [
      '#type' => 'textarea',
      '#title' => $this
        ->t('Row attributes (YAML)'),
      '#default_value' => empty($row_attributes) ? '' : Yaml::encode($row_attributes),
      '#attributes' => [
        'class' => [
          'auto-size',
        ],
      ],
      '#rows' => 1,
      '#element_validate' => [
        [
          $this,
          'validateYaml',
        ],
      ],
    ];
    $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],
      ];
      $region_attributes = $this->configuration['regions_attributes'][$region_name];
      $form['ui']['tab_content']['settings']['regions'][$region_name . '_attributes'] = [
        '#type' => 'textarea',
        '#title' => $this
          ->getPluginDefinition()
          ->getRegionLabels()[$region_name] . ' ' . $this
          ->t('attributes (YAML)'),
        '#default_value' => empty($region_attributes) ? '' : Yaml::encode($region_attributes),
        '#attributes' => [
          'class' => [
            'auto-size',
          ],
        ],
        '#rows' => 1,
        '#element_validate' => [
          [
            $this,
            'validateYaml',
          ],
        ],
      ];
    }
  }

  // Check if the live preview enabled.
  if ($this
    ->livePreviewIsEnabled()) {

    // Add the ajax live preview to form elements.
    $this
      ->addAjaxLivePreviewToElements($form['ui']['tab_content']);
  }

  // Check if the responsive enabled.
  if ($this
    ->responsiveIsEnabled()) {

    // Attach responsive preview.
    $form['#attached']['library'][] = 'bootstrap_styles/bs_responsive_preview';
  }

  // Attach Bootstrap Styles base library.
  $form['#attached']['library'][] = 'bootstrap_styles/layout_builder_form_style';

  // Attach the Bootstrap Layout Builder base library.
  $form['#attached']['library'][] = 'bootstrap_layout_builder/layout_builder_form_style';
  return $form;
}

You are here