public function EditorIconDialog::buildForm in Font Awesome Icons 8

Same name and namespace in other branches

1. 8.2 src/Form/EditorIconDialog.php \Drupal\fontawesome\Form\EditorIconDialog::buildForm()

Parameters

\Drupal\editor\Entity\Editor $editor: The text editor to which this dialog corresponds.

Overrides FormInterface::buildForm

File

src/Form/EditorIconDialog.php, line 32

Class

EditorIconDialog

Provides a Font Awesome icon dialog for text editors.

Namespace

Drupal\fontawesome\Form

Code

public function buildForm(array $form, FormStateInterface $form_state, Editor $editor = NULL) {
  $form['#tree'] = TRUE;
  $form['#attached']['library'][] = 'editor/drupal.editor.dialog';
  $form['#prefix'] = '<div id="fontawesome-icon-dialog-form">';
  $form['#suffix'] = '</div>';
  $form['information'] = [
    '#type' => 'container',
    '#attributes' => [],
    '#children' => $this
      ->t('For more information on icon selection, see <a href=":iconurl" target="_blank">:iconurl</a>', [
      ':iconurl' => 'http://fontawesome.io/icons/',
    ]),
  ];
  $form['preview'] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'h3',
      '#value' => $this
        ->t('Preview'),
    ],
    [
      '#type' => 'container',
      '#attributes' => [
        'id' => 'fontawesome-icon-preview',
      ],
      '#children' => $this
        ->t('<i class=":iconclass"></i> :iconclass', [
        ':iconclass' => $this
          ->buildClassString([
          'flag',
        ]),
      ]),
    ],
  ];

  // Build additional settings.
  $form['settings'] = [
    '#type' => 'details',
    '#open' => FALSE,
    '#title' => $this
      ->t('Additional Settings'),
  ];

  // Allow user to determine size.
  $form['settings']['size'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Size'),
    '#description' => $this
      ->t('This increases icon sizes relative to their container'),
    '#options' => [
      '' => $this
        ->t('Default'),
      'lg' => $this
        ->t('Large'),
      '2x' => $this
        ->t('2x'),
      '3x' => $this
        ->t('3x'),
      '4x' => $this
        ->t('4x'),
      '5x' => $this
        ->t('5x'),
    ],
    '#default_value' => '',
    '#ajax' => [
      'callback' => [
        $this,
        'previewIcon',
      ],
      'wrapper' => 'fontawesome-icon-preview',
      'method' => 'html',
    ],
  ];

  // Set icon to fixed width.
  $form['settings']['fixed-width'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Fixed Width?'),
    '#description' => $this
      ->t('Use to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.'),
    '#default_value' => FALSE,
    '#return_value' => 'fw',
    '#ajax' => [
      'callback' => [
        $this,
        'previewIcon',
      ],
      'wrapper' => 'fontawesome-icon-preview',
      'method' => 'html',
    ],
  ];

  // Add border.
  $form['settings']['border'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Border?'),
    '#description' => $this
      ->t('Adds a border to the icon.'),
    '#default_value' => FALSE,
    '#return_value' => 'border',
    '#ajax' => [
      'callback' => [
        $this,
        'previewIcon',
      ],
      'wrapper' => 'fontawesome-icon-preview',
      'method' => 'html',
    ],
  ];

  // Invert color.
  $form['settings']['border'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Invert color?'),
    '#description' => $this
      ->t('Inverts the color of the icon (black becomes white, etc.)'),
    '#default_value' => FALSE,
    '#return_value' => 'inverse',
    '#ajax' => [
      'callback' => [
        $this,
        'previewIcon',
      ],
      'wrapper' => 'fontawesome-icon-preview',
      'method' => 'html',
    ],
  ];

  // Rotate/flip the icon..
  $form['settings']['rotate'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Rotate'),
    '#options' => [
      '' => $this
        ->t('None'),
      'rotate-90' => $this
        ->t('90°'),
      'rotate-180' => $this
        ->t('180°'),
      'rotate-270' => $this
        ->t('270°'),
    ],
    '#default_value' => '',
    '#ajax' => [
      'callback' => [
        $this,
        'previewIcon',
      ],
      'wrapper' => 'fontawesome-icon-preview',
      'method' => 'html',
    ],
  ];
  $form['settings']['flip'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Flip'),
    '#options' => [
      '' => $this
        ->t('None'),
      'flip-horizontal' => $this
        ->t('Horizontal'),
      'flip-vertical' => $this
        ->t('Vertical'),
    ],
    '#default_value' => '',
    '#ajax' => [
      'callback' => [
        $this,
        'previewIcon',
      ],
      'wrapper' => 'fontawesome-icon-preview',
      'method' => 'html',
    ],
  ];

  // Animated the icon.
  $form['settings']['animation'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Animation'),
    '#options' => [
      '' => $this
        ->t('None'),
      'spin' => $this
        ->t('Spin'),
      'pulse' => $this
        ->t('Pulse'),
    ],
    '#default_value' => '',
    '#ajax' => [
      'callback' => [
        $this,
        'previewIcon',
      ],
      'wrapper' => 'fontawesome-icon-preview',
      'method' => 'html',
    ],
  ];

  // Pull the icons.
  $form['settings']['animation'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Pull'),
    '#description' => $this
      ->t('This setting will pull the icon (float) to one side or the other in relation to its nearby content'),
    '#options' => [
      '' => $this
        ->t('None'),
      'pull-left' => $this
        ->t('Left'),
      'pull-right' => $this
        ->t('Right'),
    ],
    '#default_value' => '',
    '#ajax' => [
      'callback' => [
        $this,
        'previewIcon',
      ],
      'wrapper' => 'fontawesome-icon-preview',
      'method' => 'html',
    ],
  ];

  // Select an icon.
  $form['icon'] = [
    '#type' => 'radios',
    '#title' => $this
      ->t('Icon'),
    '#description' => $this
      ->t('For information on how to stack icons or use them in ordered lists, see <a href=":iconlink" target="_blank">:iconlink</a>', [
      ':iconlink' => 'http://fontawesome.io/examples/',
    ]),
    '#options' => [],
    '#default_value' => 'flag',
    '#ajax' => [
      'callback' => [
        $this,
        'previewIcon',
      ],
      'wrapper' => 'fontawesome-icon-preview',
      'method' => 'html',
    ],
  ];

  // Add all icon options to the list.
  foreach (fontawesome_extract_icons() as $iconName) {
    $form['icon']['#options'][$iconName] = $this
      ->t('<i class=":iconclass" title=":iconname"></i> :iconname', [
      ':iconclass' => $this
        ->buildClassString([
        $iconName,
        'lg',
        'fw',
      ]),
      ':iconname' => $iconName,
    ]);
  }
  if (count($form['icon']['#options']) == 0) {
    $form['icon'] = [
      '#type' => 'container',
      '#attributes' => '',
      '#children' => $this
        ->t('Error: invalid CSS found for Font Awesome. Please check the <a href=":status_report">Status Report</a> to verify that Font Awesome is properly installed.', [
        ':status_report' => Url::fromRoute('system.status')
          ->toString(),
      ]),
    ];
  }
  $form['actions'] = [
    '#type' => 'actions',
  ];
  $form['actions']['save_modal'] = [
    '#type' => 'submit',
    '#value' => $this
      ->t('Insert Icon'),
    // No regular submit-handler. This form only works via JavaScript.
    '#submit' => [],
    '#ajax' => [
      'callback' => '::submitForm',
      'event' => 'click',
    ],
  ];
  return $form;
}