function UIkitViewsPluginStyleGrid::options_form in UIkit Components 7.2

Same name and namespace in other branches

1. 7.3 uikit_views/plugins/UIkitViewsPluginStyleGrid.inc \UIkitViewsPluginStyleGrid::options_form()

Render the given style.

Overrides views_plugin_style::options_form

File

uikit_views/plugins/UIkitViewsPluginStyleGrid.inc, line 35

Contains the UIkit Views grid style plugin.

Class

UIkitViewsPluginStyleGrid

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

Code

function options_form(&$form, &$form_state) {
  parent::options_form($form, $form_state);
  $args = array(
    '@href' => 'https://getuikit.com/v2/docs/grid.html#even-grid-columns',
    '@title' => 'Grid component - UIkit documentation',
  );
  $breakpoints = array(
    'small' => t('Affects device widths of 480px and higher.'),
    'medium' => t('Affects device widths of 768px and higher.'),
    'large' => t('Affects device widths of 960px and higher.'),
    'xlarge' => t('Affects device widths of 1220px and higher.'),
  );
  $form['column_widths'] = array(
    '#type' => 'item',
    '#title' => t('Grid columns'),
    '#description' => 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),
  );
  foreach ([
    'small',
    'medium',
    'large',
    'xlarge',
  ] as $size) {
    $form["width_{$size}"] = array(
      '#type' => 'select',
      '#title' => t("uk-grid-width-{$size}-*"),
      '#required' => TRUE,
      '#default_value' => $this->options["width_{$size}"],
      '#options' => array(
        "uk-grid-width-{$size}-1-1" => 1,
        "uk-grid-width-{$size}-1-2" => 2,
        "uk-grid-width-{$size}-1-3" => 3,
        "uk-grid-width-{$size}-1-4" => 4,
        "uk-grid-width-{$size}-1-5" => 5,
        "uk-grid-width-{$size}-1-6" => 6,
        "uk-grid-width-{$size}-1-10" => 10,
      ),
      '#description' => $breakpoints[$size],
    );
  }
  $form['grid_divider'] = array(
    '#type' => 'checkbox',
    '#title' => t('Grid divider'),
    '#default_value' => $this->options['grid_divider'],
    '#description' => t('Apply a horizontal border to each row in the grid, except the first row.'),
  );
  $form['grid_gutter'] = array(
    '#type' => 'select',
    '#title' => t('Grid gutter'),
    '#required' => TRUE,
    '#default_value' => $this->options['grid_gutter'],
    '#options' => array(
      'default' => t('Default gutter'),
      'uk-grid-small' => t('Small gutter'),
      'uk-grid-medium' => t('Medium gutter'),
      'uk-grid-large' => t('Large gutter'),
      'uk-grid-collapse' => t('Collapse gutter'),
    ),
    '#description' => 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.'),
  );
}