public function SlickForm::edit_form in Slick Carousel 7.3

Provide the actual editing form.

Overrides ctools_export_ui::edit_form

File

slick_ui/src/Form/SlickForm.php, line 26

Class

SlickForm

Extends base form for slick instance configuration form.

Namespace

Drupal\slick_ui\Form

Code

public function edit_form(&$form, &$form_state) {
  parent::edit_form($form, $form_state);
  $slick = $form_state['item'];
  $options = $slick
    ->getOptions() ?: [];
  $tooltip = [
    'class' => [
      'is-tooltip',
    ],
  ];
  $tooltip_bottom = $tooltip + [
    'data-blazy-tooltip' => 'wide',
    'data-blazy-tooltip-direction' => 'bottom',
  ];
  $admin_css = $this->manager
    ->config('admin_css', TRUE, 'blazy.settings');
  $form['#attributes']['class'][] = 'form--slick form--blazy form--optionset has-tooltip';
  $form['info']['label']['#attributes']['class'][] = 'is-tooltip';
  $form['info']['name']['#attributes']['class'][] = 'is-tooltip';
  $form['info']['label']['#prefix'] = '<div class="form__header-container clearfix"><div class="form__header form__half form__half--first has-tooltip clearfix">';
  $form['info']['name']['#suffix'] = '</div>';
  $form['skin'] = [
    '#type' => 'select',
    '#title' => t('Skin'),
    '#options' => $this->admin
      ->getSkinsByGroupOptions(),
    '#empty_option' => t('- None -'),
    '#default_value' => isset($form_state['values']['skin']) ? $form_state['values']['skin'] : $slick->skin,
    '#description' => t('Skins allow swappable layouts like next/prev links, split image and caption, etc. However a combination of skins and options may lead to unpredictable layouts, get yourself dirty. See <b>/admin/help/slick_ui</b> for details on Skins. Only useful for custom work, and ignored/overridden by slick formatters or sub-modules.'),
    '#attributes' => $tooltip_bottom,
    '#prefix' => '<div class="form__header form__half form__half--last has-tooltip clearfix">',
  ];
  $collection = isset($slick->collection) ? $slick->collection : '';
  $form['collection'] = [
    '#type' => 'select',
    '#title' => t('Collection'),
    '#options' => [
      'main' => t('Main'),
      'thumbnail' => t('Thumbnail'),
    ],
    '#empty_option' => t('- None -'),
    '#default_value' => isset($form_state['values']['collection']) ? $form_state['values']['collection'] : $collection,
    '#description' => t('Group this optionset to avoid confusion for optionset selections. Leave empty to make it available for all.'),
    '#attributes' => $tooltip_bottom,
  ];
  $form['breakpoints'] = [
    '#title' => t('Breakpoints'),
    '#type' => 'textfield',
    '#default_value' => isset($form_state['values']['breakpoints']) ? $form_state['values']['breakpoints'] : $slick->breakpoints,
    '#description' => t('The number of breakpoints added to Responsive display, max 9. This is not Breakpoint Width (480px, etc).'),
    '#ajax' => [
      'callback' => 'slick_ui_add_breakpoints',
      'wrapper' => 'edit-breakpoints-ajax-wrapper',
      'event' => 'blur',
    ],
    '#attributes' => $tooltip_bottom,
    '#maxlength' => 1,
  ];
  $optimized = isset($slick->optimized) ? $slick->optimized : '';
  $form['optimized'] = [
    '#type' => 'checkbox',
    '#title' => t('Optimized'),
    '#default_value' => isset($form_state['values']['optimized']) ? $form_state['values']['optimized'] : $optimized,
    '#description' => t('Check to optimize the stored options. Anything similar to defaults will not be stored, except those required by sub-modules and theme_slick(). Like you hand-code/ cherry-pick the needed options, and are smart enough to not repeat defaults, and free up memory. The rest are taken care of by JS. Uncheck only if theme_slick() can not satisfy the needs, and more hand-coded preprocess is needed which is less likely in most cases.'),
    '#access' => $slick->name != 'default',
    '#attributes' => $tooltip_bottom,
  ];
  if ($slick->name == 'default') {
    $form['breakpoints']['#suffix'] = '</div></div>';
  }
  else {
    $form['optimized']['#suffix'] = '</div></div>';
  }
  if ($admin_css) {
    $form['optimized']['#field_suffix'] = '&nbsp;';
    $form['optimized']['#title_display'] = 'before';
  }

  // Options.
  $form['options'] = [
    '#type' => 'vertical_tabs',
    '#tree' => TRUE,
    '#parents' => [
      'options',
    ],
  ];

  // Main JS options.
  $form['settings'] = [
    '#type' => 'fieldset',
    '#tree' => TRUE,
    '#title' => t('Settings'),
    '#attributes' => [
      'class' => [
        'fieldset--settings',
        'has-tooltip',
      ],
    ],
    '#group' => 'options',
    '#parents' => [
      'options',
      'settings',
    ],
  ];
  foreach ($this
    ->getFormElements() as $name => $element) {
    $element['default'] = isset($element['default']) ? $element['default'] : '';
    $value = isset($slick->options['settings'][$name]) ? $slick->options['settings'][$name] : $element['default'];
    $default_value = NULL !== $value ? $value : $element['default'];
    $form['settings'][$name] = [
      '#title' => isset($element['title']) ? $element['title'] : '',
      '#default_value' => $default_value,
    ];
    if (isset($element['type'])) {
      $form['settings'][$name]['#type'] = $element['type'];
      if ($element['type'] != 'hidden') {
        $form['settings'][$name]['#attributes'] = $tooltip;
      }
      else {

        // Ensures hidden element doesn't screw up the states.
        unset($element['states']);
      }
      if ($element['type'] == 'textfield') {
        $form['settings'][$name]['#size'] = 20;
        $form['settings'][$name]['#maxlength'] = 255;
      }
    }
    if (isset($element['options'])) {
      $form['settings'][$name]['#options'] = $element['options'];
    }
    if (isset($element['empty_option'])) {
      $form['settings'][$name]['#empty_option'] = $element['empty_option'];
    }
    if (isset($element['description'])) {
      $form['settings'][$name]['#description'] = $element['description'];
    }
    if (isset($element['states'])) {
      $form['settings'][$name]['#states'] = $element['states'];
    }

    // Expand textfield for easy edit.
    if (in_array($name, [
      'prevArrow',
      'nextArrow',
    ])) {
      $form['settings'][$name]['#default_value'] = trim(strip_tags($default_value));
    }
    if (isset($element['field_suffix'])) {
      $form['settings'][$name]['#field_suffix'] = $element['field_suffix'];
    }
    if (is_int($element['default'])) {
      $form['settings'][$name]['#maxlength'] = 60;
      $form['settings'][$name]['#attributes']['class'][] = 'form-text--int';
    }
    if ($admin_css && !isset($element['field_suffix']) && is_bool($element['default'])) {
      $form['settings'][$name]['#field_suffix'] = '&nbsp;';
      $form['settings'][$name]['#title_display'] = 'before';
    }
    $form['settings'][$name]['#attributes']['data-blazy-form-item'] = drupal_strtolower(str_replace('_', '-', $name));
  }

  // Responsive JS options.
  // https://github.com/kenwheeler/slick/issues/951
  $form['responsives'] = [
    '#type' => 'fieldset',
    '#title' => t('Responsive display'),
    '#collapsible' => FALSE,
    '#tree' => TRUE,
    '#group' => 'options',
    '#parents' => [
      'options',
      'responsives',
    ],
    '#description' => t('Containing breakpoints and settings objects. Settings set at a given breakpoint/screen width is self-contained and does not inherit the main settings, but defaults. Be sure to set Breakpoints option above.'),
  ];
  $form['responsives']['responsive'] = [
    '#type' => 'fieldset',
    '#title' => t('Responsive'),
    '#collapsible' => FALSE,
    '#group' => 'responsives',
    '#parents' => [
      'options',
      'responsives',
      'responsive',
    ],
    '#prefix' => '<div id="edit-breakpoints-ajax-wrapper">',
    '#suffix' => '</div>',
    '#attributes' => [
      'class' => [
        'has-tooltip',
        'fieldset--responsive--ajax',
      ],
    ],
  ];

  // Add some information to the form state for easier form altering.
  $breakpoints_count = isset($form_state['values']['breakpoints']) ? $form_state['values']['breakpoints'] : $slick->breakpoints;
  $form_state['breakpoints_count'] = $breakpoints_count;
  if ($form_state['breakpoints_count'] > 0) {
    $slick_responsive_options = $this
      ->getResponsiveFormElements($form_state['breakpoints_count']);
    foreach ($slick_responsive_options as $i => $responsives) {

      // Individual breakpoint fieldset depends on the breakpoints amount.
      $form['responsives']['responsive'][$i] = [
        '#type' => $responsives['type'],
        '#title' => $responsives['title'],
        '#collapsible' => TRUE,
        '#collapsed' => TRUE,
        '#group' => 'responsive',
        '#attributes' => [
          'class' => [
            'fieldset--responsive',
            'fieldset--breakpoint-' . $i,
            'has-tooltip',
          ],
        ],
      ];
      unset($responsives['title'], $responsives['type']);
      foreach ($responsives as $key => $responsive) {
        switch ($key) {
          case 'breakpoint':
          case 'unslick':
            $form['responsives']['responsive'][$i][$key] = [
              '#type' => $responsive['type'],
              '#title' => $responsive['title'],
              '#default_value' => isset($options['responsives']['responsive'][$i][$key]) ? $options['responsives']['responsive'][$i][$key] : $responsive['default'],
              '#description' => $responsive['description'],
              '#attributes' => $tooltip,
            ];
            if ($responsive['type'] == 'textfield') {
              $form['responsives']['responsive'][$i][$key]['#size'] = 20;
              $form['responsives']['responsive'][$i][$key]['#maxlength'] = 255;
            }
            if (is_int($responsive['default'])) {
              $form['responsives']['responsive'][$i][$key]['#maxlength'] = 60;
            }
            if (isset($responsive['field_suffix'])) {
              $form['responsives']['responsive'][$i][$key]['#field_suffix'] = $responsive['field_suffix'];
            }
            if ($admin_css && !isset($responsive['field_suffix']) && $responsive['type'] == 'checkbox') {
              $form['responsives']['responsive'][$i][$key]['#field_suffix'] = '&nbsp;';
              $form['responsives']['responsive'][$i][$key]['#title_display'] = 'before';
            }
            break;
          case 'settings':
            $form['responsives']['responsive'][$i][$key] = [
              '#type' => $responsive['type'],
              '#title' => $responsive['title'],
              '#open' => TRUE,
              '#group' => $i,
              '#states' => [
                'visible' => [
                  ':input[name*="[responsive][' . $i . '][unslick]"]' => [
                    'checked' => FALSE,
                  ],
                ],
              ],
              '#attributes' => [
                'class' => [
                  'fieldset--settings',
                  'fieldset--breakpoint-' . $i,
                  'has-tooltip',
                ],
              ],
            ];
            unset($responsive['title'], $responsive['type']);

            // @fixme, boolean default is ignored at index 0 only.
            foreach ($responsive as $k => $item) {
              $item['default'] = isset($item['default']) ? $item['default'] : '';
              $form['responsives']['responsive'][$i][$key][$k] = [
                '#title' => isset($item['title']) ? $item['title'] : '',
                '#default_value' => isset($options['responsives']['responsive'][$i][$key][$k]) ? $options['responsives']['responsive'][$i][$key][$k] : $item['default'],
                '#description' => isset($item['description']) ? $item['description'] : '',
                '#attributes' => $tooltip,
              ];
              if (isset($item['type'])) {
                $form['responsives']['responsive'][$i][$key][$k]['#type'] = $item['type'];
              }

              // Specify proper states for the breakpoint form elements.
              if (isset($item['states'])) {
                $states = '';
                switch ($k) {
                  case 'pauseOnHover':
                  case 'pauseOnDotsHover':
                  case 'autoplaySpeed':
                    $states = [
                      'visible' => [
                        ':input[name*="[' . $i . '][settings][autoplay]"]' => [
                          'checked' => TRUE,
                        ],
                      ],
                    ];
                    break;
                  case 'centerPadding':
                    $states = [
                      'visible' => [
                        ':input[name*="[' . $i . '][settings][centerMode]"]' => [
                          'checked' => TRUE,
                        ],
                      ],
                    ];
                    break;
                  case 'touchThreshold':
                    $states = [
                      'visible' => [
                        ':input[name*="[' . $i . '][settings][touchMove]"]' => [
                          'checked' => TRUE,
                        ],
                      ],
                    ];
                    break;
                  case 'swipeToSlide':
                    $states = [
                      'visible' => [
                        ':input[name*="[' . $i . '][settings][swipe]"]' => [
                          'checked' => TRUE,
                        ],
                      ],
                    ];
                    break;
                  case 'verticalSwiping':
                    $states = [
                      'visible' => [
                        ':input[name*="[' . $i . '][settings][vertical]"]' => [
                          'checked' => TRUE,
                        ],
                      ],
                    ];
                    break;
                }
                if ($states) {
                  $form['responsives']['responsive'][$i][$key][$k]['#states'] = $states;
                }
              }
              if (isset($item['options'])) {
                $form['responsives']['responsive'][$i][$key][$k]['#options'] = $item['options'];
              }
              if (isset($item['empty_option'])) {
                $form['responsives']['responsive'][$i][$key][$k]['#empty_option'] = $item['empty_option'];
              }
              if (isset($item['field_suffix'])) {
                $form['responsives']['responsive'][$i][$key][$k]['#field_suffix'] = $item['field_suffix'];
              }
              if ($admin_css && !isset($item['field_suffix']) && is_bool($item['default'])) {
                $form['responsives']['responsive'][$i][$key][$k]['#field_suffix'] = '&nbsp;';
                $form['responsives']['responsive'][$i][$key][$k]['#title_display'] = 'before';
              }
              $form['responsives']['responsive'][$i][$key][$k]['#attributes']['data-blazy-form-item'] = drupal_strtolower(str_replace('_', '-', $k));
            }
            break;
          default:
            break;
        }
      }
    }
  }

  // Attach Slick admin library.
  if ($admin_css) {
    $form['#attached']['library'][] = [
      'slick_ui',
      'ui',
    ];
  }
}