function css_editor_form_system_theme_settings_alter in CSS Editor 8

Same name and namespace in other branches

1. 7 css_editor.module \css_editor_form_system_theme_settings_alter()

Implements hook_form_FORM_ID_alter() for `system_theme_settings`.

File

./css_editor.module, line 37

Allows users to apply customized CSS to themes.

Code

function css_editor_form_system_theme_settings_alter(&$form, FormStateInterface $form_state, $form_id) {
  $theme = _css_editor_get_edited_theme($form_state);
  if ($theme) {
    $config = \Drupal::config('css_editor.theme.' . $theme);

    // Add CSS customization fieldset.
    $form['css_editor'] = array(
      '#type' => 'details',
      '#title' => t('Custom CSS'),
      '#open' => TRUE,
      '#tree' => TRUE,
    );

    // Switch to enable/disable customization.
    $form['css_editor']['css_enabled'] = array(
      '#title' => t('Enable or disable custom CSS:'),
      '#type' => 'checkbox',
      '#default_value' => $config
        ->get('enabled'),
    );

    // Editor box.
    $form['css_editor']['css'] = array(
      '#type' => 'textarea',
      '#prefix' => '<div id="css-editor-field">',
      '#description' => t('Type or paste custom CSS code for this theme.'),
      '#default_value' => $config
        ->get('css'),
      '#attributes' => array(
        'id' => 'css-editor-textarea',
      ),
      '#suffix' => '</div>',
    );

    // Switch to enable/disable the plain text editor.
    $form['css_editor']['plaintext_enabled'] = array(
      '#title' => t('Use plain text editor'),
      '#type' => 'checkbox',
      '#default_value' => $config
        ->get('plaintext_enabled'),
    );

    // Switch to enable/disable autopreview.
    $form['css_editor']['autopreview_enabled'] = array(
      '#title' => t('Enable auto preview'),
      '#type' => 'checkbox',
      '#default_value' => $config
        ->get('autopreview_enabled'),
    );

    // Preview path.
    $form['css_editor']['preview_path'] = array(
      '#title' => t('Preview path:'),
      '#type' => 'textfield',
      '#size' => 60,
    );

    // Preview box.
    $preview_url = Url::fromRoute('<front>', array(), array(
      'absolute' => TRUE,
      'query' => array(
        'theme' => $theme,
      ),
    ))
      ->toString();
    $form['css_editor']['css_preview'] = array(
      '#type' => 'inline_template',
      '#template' => '<iframe src="{{ url }}" id="css-editor-preview">' . t('Frames are not supported.') . '</iframe>',
      '#context' => array(
        'url' => $preview_url,
      ),
    );

    // Attach CSS and Javascript libraries.
    $form['#attached']['library'][] = 'css_editor/codemirror';
    $form['#attached']['library'][] = 'css_editor/css_editor';
    $form['#attached']['drupalSettings']['CSSEditor']['frontPage'] = $preview_url;
    array_unshift($form['#submit'], '_css_editor_theme_settings_form_submit');
  }
}