public function UIkitViewSlider::buildOptionsForm in UIkit Components 8.3

Provide a form to edit options for this plugin.

Overrides StylePluginBase::buildOptionsForm

File

uikit_views/src/Plugin/views/style/UIkitViewSlider.php, line 82

Class

UIkitViewSlider

Style plugin to render each item in a UIkit Slider component.

Namespace

Drupal\uikit_views\Plugin\views\style

Code

public function buildOptionsForm(&$form, FormStateInterface $form_state) {
  parent::buildOptionsForm($form, $form_state);
  $form['field_mapping'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Field mapping for images'),
    '#open' => TRUE,
  ];
  $form['field_mapping_legend'] = [
    '#type' => 'item',
    '#title' => $this
      ->t('Field mapping'),
    '#description' => $this
      ->t('You only have to worry about the "field mapping" section, if you are using fields and want to display images in the slider. If the image_field is empty, the slider will display the rendered entity or all the fields you have configured.'),
    '#fieldset' => 'field_mapping',
  ];
  $form['image_field'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Image field'),
    '#empty_option' => '- None -',
    '#options' => $this->displayHandler
      ->getFieldLabels(),
    '#default_value' => $this->options['image_field'],
    '#description' => $this
      ->t('Select the field to use as the slide image.'),
    '#fieldset' => 'field_mapping',
  ];
  $form['title_field'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Caption Title'),
    '#empty_option' => '- None -',
    '#options' => $this->displayHandler
      ->getFieldLabels(),
    '#default_value' => $this->options['title_field'],
    '#description' => $this
      ->t('Select the field to use as the slide title.'),
    '#fieldset' => 'field_mapping',
  ];
  $form['caption_field'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Caption text'),
    '#empty_option' => '- None -',
    '#options' => $this->displayHandler
      ->getFieldLabels(),
    '#default_value' => $this->options['caption_field'],
    '#description' => $this
      ->t('Select the field to use as the slide caption'),
    '#fieldset' => 'field_mapping',
  ];
  $form['thumbnav_field'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Thumbnav field'),
    '#empty_option' => '- None -',
    '#options' => $this->displayHandler
      ->getFieldLabels(),
    '#default_value' => $this->options['thumbnav_field'],
    '#description' => $this
      ->t('Select the image field to use as thumbnav navigation in slider'),
    '#fieldset' => 'field_mapping',
  ];
  $form['slider_options'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Slider options'),
    '#open' => TRUE,
  ];

  // Grid options
  $args = [
    '@href' => 'https://getuikit.com/docs/grid',
    '@title' => 'Grid component - UIkit documentation',
  ];
  $breakpoints = [
    '' => $this
      ->t('Affects all device widths'),
    '@s' => $this
      ->t('Affects device widths of 640px and higher.'),
    '@m' => $this
      ->t('Affects device widths of 960px and higher.'),
    '@l' => $this
      ->t('Affects device widths of 1200px and higher.'),
    '@xl' => $this
      ->t('Affects device widths of 1600px and higher.'),
  ];
  $form['grid_columns'] = [
    '#type' => 'item',
    '#title' => $this
      ->t('Grid columns'),
    '#description' => $this
      ->t("To create a grid whose child elements' widths are evenly split, we apply one class to the grid for each breakpoint. Each item in the grid is then automatically applied a width based on the number of columns selected for each breakpoint. See <a href='@href' target='_blank' title='@title'>Grid component</a> for more details.", $args),
    '#fieldset' => 'slider_options',
  ];
  foreach ([
    '',
    '@s',
    '@m',
    '@l',
    '@xl',
  ] as $size) {
    $form["width_{$size}"] = [
      '#type' => 'select',
      '#title' => $this
        ->t("uk-child-width-*{$size}"),
      '#required' => TRUE,
      '#default_value' => $this->options["width_{$size}"],
      '#options' => [
        "uk-child-width-1-1{$size}" => 1,
        "uk-child-width-1-2{$size}" => 2,
        "uk-child-width-1-3{$size}" => 3,
        "uk-child-width-1-4{$size}" => 4,
        "uk-child-width-1-5{$size}" => 5,
        "uk-child-width-1-6{$size}" => 6,
      ],
      '#description' => $breakpoints[$size],
      '#fieldset' => 'slider_options',
    ];
  }
  $form['grid_gutter'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Grid gutter'),
    '#default_value' => $this->options['grid_gutter'],
    '#empty_option' => $this
      ->t('Default gutter'),
    '#options' => [
      'uk-grid-small' => $this
        ->t('Small gutter'),
      'uk-grid-medium' => $this
        ->t('Medium gutter'),
      'uk-grid-large' => $this
        ->t('Large gutter'),
      'uk-grid-collapse' => $this
        ->t('Collapse gutter'),
    ],
    '#description' => $this
      ->t('Grids automatically create a horizontal gutter between columns and a vertical one between two succeeding grids. By default, the grid gutter is wider on large screens.<br /><strong>Note</strong>: <em class="placeholder">Grid collapse</em> removes the grid gutter.'),
    '#fieldset' => 'slider_options',
  ];
  $form['caption_background'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Overlay background for legend'),
    '#empty_option' => $this
      ->t('-None-'),
    '#options' => [
      'uk-overlay-default' => $this
        ->t('default'),
      'uk-overlay-primary' => $this
        ->t('Primary'),
      'uk-overlay-secondary' => $this
        ->t('Secondary'),
    ],
    '#default_value' => $this->options['caption_background'],
    '#fieldset' => 'slider_options',
  ];
  $form['caption_transition'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Caption transition'),
    '#empty_option' => $this
      ->t('-None-'),
    '#default_value' => $this->options['caption_transition'],
    '#options' => [
      'uk-transition-fade' => $this
        ->t('fade'),
      'uk-transition-slide-top' => $this
        ->t('slide from the top'),
      'uk-transition-slide-bottom' => $this
        ->t('slide from the bottom'),
      'uk-transition-slide-left' => $this
        ->t('slide from the left'),
      'uk-transition-slide-right' => $this
        ->t('slide from the right '),
      'uk-transition-slide-top-small' => $this
        ->t('slide from the top with a smaller distance'),
      'uk-transition-slide-bottom-small' => $this
        ->t('slide from the bottom with a smaller distance'),
      'uk-transition-slide-left-small' => $this
        ->t('slide from the left with a smaller distance'),
      'uk-transition-slide-right-small' => $this
        ->t('slide from the right with a smaller distance'),
      'uk-transition-slide-top-medium' => $this
        ->t('slide from the top  with a medium distance'),
      'uk-transition-slide-bottom-medium' => $this
        ->t('slide from the bottom  with a medium distance'),
      'uk-transition-slide-left-medium' => $this
        ->t('slide from the left  with a medium distance'),
      'uk-transition-slide-right-medium' => $this
        ->t('slide from the right  with a medium distance'),
    ],
    '#description' => $this
      ->t('Transition effect for the caption'),
    '#fieldset' => 'slider_options',
  ];
  $form['caption_position'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Caption position'),
    '#default_value' => $this->options['caption_position'],
    '#options' => [
      'uk-position-top' => $this
        ->t('Position element at the top'),
      'uk-position-top-left' => $this
        ->t('Position element at the top left'),
      'uk-position-top-center' => $this
        ->t('Position element at the top center'),
      'uk-position-top-right' => $this
        ->t('Position element at the top right'),
      'uk-position-center' => $this
        ->t('Position element vertically centered in the middle'),
      'uk-position-center-left' => $this
        ->t('Position element vertically centered on the left'),
      'uk-position-center-right' => $this
        ->t('Position element vertically centered on the right'),
      'uk-position-bottom' => $this
        ->t('Position element at the bottom'),
      'uk-position-bottom-left' => $this
        ->t('Position element at the bottom left'),
      'uk-position-bottom-center' => $this
        ->t('Position element at the bottom center'),
      'uk-position-bottom-right' => $this
        ->t('Position element at the bottom right'),
      'uk-position-left' => $this
        ->t('Position element at the left'),
      'uk-position-right' => $this
        ->t('Position element at the right'),
      'uk-position-cover' => $this
        ->t('Position element to cover its container'),
    ],
    '#description' => $this
      ->t('Position for the caption'),
    '#fieldset' => 'slider_options',
  ];
  $form['caption_modifier'] = [
    '#type' => 'select',
    '#title' => $this
      ->t("Caption margin (modifier)"),
    '#empty_option' => $this
      ->t('-None-'),
    '#default_value' => $this->options['caption_modifier'],
    '#options' => [
      'uk-position-small' => $this
        ->t('Small'),
      'uk-position-medium' => $this
        ->t('Medium'),
      'uk-position-large' => $this
        ->t('Large'),
    ],
    '#description' => $this
      ->t('Apply a margin to positioned caption'),
    '#fieldset' => 'slider_options',
  ];
  $form['caption_toggle'] = [
    '#title' => $this
      ->t('Display Legend only on hover'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['caption_toggle'],
    '#fieldset' => 'slider_options',
  ];
  $form['slidenav'] = [
    '#title' => $this
      ->t('Display slidenav buttons (next/previous)'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['slidenav'],
    '#fieldset' => 'slider_options',
  ];
  $form['slidenav_outside'] = [
    '#title' => $this
      ->t('Display slidenav buttons outside slider'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['slidenav_outside'],
    '#fieldset' => 'slider_options',
  ];
  $form['slidenav_big'] = [
    '#title' => $this
      ->t('increase the size of the slidenav icons'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['slidenav_big'],
    '#fieldset' => 'slider_options',
  ];
  $form['dotnav'] = [
    '#title' => $this
      ->t('Display dotnav buttons (pager)'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['dotnav'],
    '#fieldset' => 'slider_options',
  ];
  $form['thumbnav'] = [
    '#title' => $this
      ->t('Display thumbnav'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['thumbnav'],
    '#description' => $this
      ->t('Add the .uk-light class to improve the visibility of objects on dark backgrounds in a light style. '),
    '#fieldset' => 'slider_options',
  ];
  $form['light'] = [
    '#title' => $this
      ->t('Inverse component'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['light'],
    '#fieldset' => 'slider_options',
  ];
  $form['autoplay'] = [
    '#title' => $this
      ->t('Slider autoplays'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['autoplay'],
    '#fieldset' => 'slider_options',
  ];
  $form['autoplay_interval'] = [
    '#title' => $this
      ->t('The delay between switching slides in autoplay mode'),
    '#type' => 'number',
    '#default_value' => $this->options['autoplay_interval'],
    '#min' => 3000,
    '#step' => 1000,
    '#fieldset' => 'slider_options',
  ];
  $form['center'] = [
    '#title' => $this
      ->t('Center the active slide'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['center'],
    '#fieldset' => 'slider_options',
  ];
  $form['finite'] = [
    '#title' => $this
      ->t('Disable infinite sliding'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['finite'],
    '#fieldset' => 'slider_options',
  ];
  $form['index'] = [
    '#title' => $this
      ->t('Slider item to show. 0 based index'),
    '#type' => 'number',
    '#default_value' => $this->options['index'],
    '#fieldset' => 'slider_options',
  ];
  $form['pause_on_hover'] = [
    '#title' => $this
      ->t('Pause autoplay mode on hover'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['pause_on_hover'],
    '#fieldset' => 'slider_options',
  ];
  $form['sets'] = [
    '#title' => $this
      ->t('Slide in sets'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['sets'],
    '#fieldset' => 'slider_options',
  ];
  $form['velocity'] = [
    '#title' => $this
      ->t('The animation velocity (pixel/ms)'),
    '#type' => 'number',
    '#default_value' => $this->options['velocity'],
    '#fieldset' => 'slider_options',
  ];
  $form['grid_match_height'] = [
    '#title' => $this
      ->t('Grid Cell Match height'),
    '#type' => 'checkbox',
    '#default_value' => $this->options['grid_match_height'],
    '#fieldset' => 'slider_options',
  ];
  $form['grid_match_height_selector'] = [
    '#title' => $this
      ->t('The selector for match height (optional'),
    '#type' => 'textfield',
    '#default_value' => $this->options['grid_match_height_selector'],
    '#description' => $this
      ->t('With "match height" setting checked, the direct child of each cell will have the same height.<br />If you want apply match height to another selector, use this field.'),
    '#fieldset' => 'slider_options',
  ];
}