protected function GridStackForm::previewForm in GridStack 8.2

Sets up the preview form.

1 call to GridStackForm::previewForm()

GridStackForm::form in modules/gridstack_ui/src/Form/GridStackForm.php

Gets the actual form array to be built.

File

modules/gridstack_ui/src/Form/GridStackForm.php, line 194

Class

GridStackForm

Extends base form for gridstack instance configuration form.

Namespace

Drupal\gridstack_ui\Form

Code

protected function previewForm(array &$form, FormStateInterface $form_state) {
  $nodes = [
    'autoPosition' => TRUE,
    'maxHeight' => 60,
    'minHeight' => 1,
    'defaultMinWidth' => 2,
    'defaultMinHeight' => 2,
    'rootMinWidth' => 1,
    'nestedMinWidth' => 2,
  ];
  $gridstack = $this
    ->gridStack();
  foreach ($this
    ->breakpointElements() as $column => $elements) {
    $storage = 'edit-options-breakpoints-' . $column . '-grids';
    $nested_storage = 'edit-options-breakpoints-' . $column . '-nested';
    $columns = isset($this->options['breakpoints'], $this->options['breakpoints'][$column]) ? $this->options['breakpoints'][$column] : [];

    // Fallbacks to source for variants.
    if ($this->isVariant && empty($columns) && $gridstack) {
      $breakpoints = $gridstack
        ->getOptions('breakpoints');
      if (isset($breakpoints[$column])) {
        $columns = $breakpoints[$column];
      }
    }
    $active_column = isset($columns['column']) ? $columns['column'] : 12;
    $active_width = isset($columns['width']) ? $columns['width'] : '';

    // $active_column === -1 ? 'auto' : $active_column;
    if ($this->useNested) {
      $active_column = 12;
    }

    // Details.
    $form[$column]['#type'] = $this->isDefault ? 'container' : 'details';
    $form[$column]['#tree'] = TRUE;
    $form[$column]['#open'] = TRUE;
    $form[$column]['#group'] = 'breakpoints';
    $form[$column]['#parents'] = [
      'options',
      'breakpoints',
      $column,
    ];
    $form[$column]['#title'] = $column;

    // Prevents AJAX from adding unique ID, since we have limited known ones.
    $form[$column]['#attributes']['id'] = 'edit-options-breakpoints-' . $column;

    // Settings.
    $this->jsSettings['breakpoint'] = $column;
    $this->jsSettings['display'] = 'responsive';
    $this->jsSettings['storage'] = $storage;
    $this->jsSettings['nested_storage'] = $nested_storage;
    $this->jsSettings['icon_breakpoint'] = $this->iconBreakpoint;
    $this->jsSettings['breakpoint_width'] = $active_width;

    // Fallback for totally empty before any string inserted.
    $json_column_grids = empty($columns['grids']) ? Json::encode($this->grids) : $columns['grids'];
    $column_grids = is_string($json_column_grids) ? Json::decode($json_column_grids) : $json_column_grids;
    $nested_check = array_filter($this->nestedGrids);
    $nested_grids_end = empty($nested_check) ? '' : Json::encode($this->nestedGrids);
    $json_nested_grids = empty($columns['nested']) ? $nested_grids_end : $columns['nested'];

    // Fallback for not so empty when json grids deleted leaving to string.
    if (empty($column_grids)) {
      $json_column_grids = Json::encode($this->grids);
      $column_grids = $this->grids;
    }

    // Preview.
    $preview = $common = [];
    $disabled = FALSE;
    $preview_description = '';
    $config_js = $this
      ->gridStack()
      ->getOptions('settings') ?: $this->default
      ->getOptions('settings');
    $config_css = $this
      ->getNestedSettings();

    // Auto is not bad at preview, provide the exact cellHeight instead.
    if (isset($config_js['cellHeight']) && $config_js['cellHeight'] == -1) {
      $config_js['cellHeight'] = 60;
    }

    // Beware to keep defaults, the library appears to hard-code it regardless
    // the options at some places like nested. Meaning customs are ignored.
    $common['breakpoint'] = $column;
    $common['itemClass'] = 'box';
    $common['handle'] = '.box__content';
    $common['column'] = $active_column;
    if ($column == $this->iconBreakpoint) {
      $preview_description = $this
        ->getDescription('lg');
    }
    if ($column == 'xs' && !$this->useNested) {
      $disabled = TRUE;
      $preview_description = $this
        ->getDescription('sm');
    }
    if ($preview_description && !$this->isVariant) {
      $preview['#prefix'] = '<h3 class="form__title form__title--preview">' . $preview_description . '</h3>';
    }
    if ($disabled || $column == $this->smallestBreakpoint) {
      $config_js['resizable'] = $config_css['resizable'] = (object) [
        'handles' => 's',
      ];
      if ($this->useNested) {
        $config_css['resizable'] = (object) [
          'handles' => 'e, se, s, sw, w',
        ];
      }
      else {
        $config_js['column'] = 1;
      }
    }
    else {
      $config_js['resizable'] = $config_css['resizable'] = (object) [
        'handles' => 'e, se, s, sw, w',
      ];
    }
    $preview['#theme'] = 'gridstack_ui_admin';
    $preview['#items'] = [];
    $preview['#settings'] = $this->jsSettings;
    $preview['#weight'] = -10;
    $preview['#content_attributes'] = [
      'class' => [
        'gridstack--root',
        'gridstack--' . $column,
        'is-gs-enabled',
        $column == $this->iconBreakpoint ? 'gridstack--main' : 'gridstack--sub',
      ],
      'data-breakpoint' => $column,
      'data-config' => Json::encode(array_merge($common, $config_js)),
      'data-config-nested' => Json::encode(array_merge($common, $config_css)),
      'data-is-nested' => $this->useNested ? 1 : 0,
      'data-preview-grids' => $this
        ->getNodes($json_column_grids),
      'data-nested-grids' => $this
        ->getNodesNested($json_column_grids, $json_nested_grids),
      'data-storage' => $storage,
      'data-nested-storage' => $nested_storage,
      'data-gs-column' => $disabled ? 1 : $active_column,
      'data-gs-node-config' => Json::encode($nodes),
      'data-responsive-width' => $active_width,
    ];
    if ($column == $this->smallestBreakpoint) {
      $preview['#content_attributes']['class'][] = 'gridstack--smallest';
    }
    if ($this->isVariant) {
      $preview['#content_attributes']['class'][] = 'gridstack--variant';
    }

    // Build preview.
    $form[$column]['preview'] = $preview;

    // Breakpoint elements.
    foreach ($elements as $key => $element) {
      if ($key == 'breakpoint') {
        continue;
      }

      // Elements.
      $form[$column][$key] = $element;
      $form[$column][$key]['#title_display'] = 'before';
      $form[$column][$key]['#wrapper_attributes']['class'][] = 'form-item--' . str_replace('_', '-', $key);
      $form[$column]['breakpoint']['#wrapper_attributes']['class'][] = 'visually-hidden';

      // Overrides base.
      $form[$column]['width']['#weight'] = 10;
      $form[$column]['width']['#title'] = $this
        ->t('@breakpoint width', [
        '@breakpoint' => $column,
      ]);
      $form[$column]['width']['#field_suffix'] = 'px';
      $form[$column]['width']['#attributes']['data-target'] = '#gridstack-' . $column;
      $form[$column]['width']['#description'] = $this
        ->getDescription('width');
      $form[$column][$key]['#default_value'] = isset($columns[$key]) ? $columns[$key] : '';
      $form[$column]['column'] = [
        '#type' => 'select',
        '#title' => $this
          ->t('Column'),
        '#options' => $this
          ->getColumnOptions(),
        '#empty_option' => $this
          ->t('- None -'),
        '#default_value' => $active_column,
        '#weight' => 11,
        '#attributes' => [
          'class' => [
            'form-select--column',
          ],
          'data-target' => '#gridstack-' . $column,
        ],
        '#description' => $this
          ->getDescription('column'),
        '#wrapper_attributes' => [
          'class' => [
            'form-item--column',
          ],
        ],
        '#access' => !$this->useNested,
        '#disabled' => $this->isVariant,
      ];
      if ($column == 'xs' && !$this->useNested) {
        $form[$column]['column']['#type'] = 'hidden';
        $form[$column]['column']['#default_value'] = 1;
      }
      if ($column == $this->iconBreakpoint) {
        $form[$column]['column']['#description'] .= ' ' . $this
          ->getDescription('column_icon');
      }

      // The actual grid elements which store the settings.
      $form[$column]['grids'] = [
        '#type' => 'hidden',
        '#default_value' => $this
          ->getNodes($json_column_grids),
        '#weight' => 20,
        '#wrapper_attributes' => [
          'class' => [
            'visually-hidden',
          ],
        ],
      ];
      $form[$column]['nested'] = [
        '#type' => 'hidden',
        '#default_value' => empty($columns['nested']) ? '' : $this
          ->getNodesNested($json_column_grids, $columns['nested']),
        '#weight' => 20,
        '#wrapper_attributes' => [
          'class' => [
            'visually-hidden',
          ],
        ],
      ];

      // Hard-code the default to avoid changes.
      if ($this->isDefault) {
        $form[$column][$key]['#wrapper_attributes'] = [
          'class' => [
            'visually-hidden',
          ],
        ];
        $form[$column][$key]['#description'] = '';
        $form[$column]['column']['#type'] = 'hidden';
        $form[$column]['column']['#default_value'] = 12;
        $form[$column]['width']['#default_value'] = 1200;
      }
      if ($this->isVariant) {
        $form[$column]['column']['#wrapper_attributes'] = [
          'class' => [
            'visually-hidden',
          ],
        ];
        $form[$column]['width']['#wrapper_attributes'] = [
          'class' => [
            'visually-hidden',
          ],
        ];
      }
    }
  }
}