function theme_ckeditor5_settings_toolbar

Displays the toolbar configuration for CKEditor.

File

core/modules/ckeditor5/ckeditor5.theme.inc, line 125

Theme functions for CKEditor module.

Code

function theme_ckeditor5_settings_toolbar($variables) {
  // Controls for adding or removing a row.
  $row_controls = '<span class="ckeditor5-row-controls">';
  $row_controls .= '<a href="#" class="ckeditor5-row-remove" title="' . t('Remove row') . '">-</a>';
  $row_controls .= '<a href="#" class="ckeditor5-row-add" title="' . t('Add row') . '">+</a>';
  $row_controls .= '</span>';

  // theme_item_list() is avoided here because it cannot output an empty <ul>
  // tag, and the wrapping <div class="item-list"> can cause styling issues.
  $button_row = array();
  $button_rows = array();

  // Add a line break at the end of the list.
  $variables['active_buttons'][] = array(
    'attributes' => array('data-button-name' => '-'),
  );
  foreach ($variables['active_buttons'] as $button) {
    // CKEditor 5 uses a dash to indicate a line break in the toolbar.
    if ($button['attributes']['data-button-name'] === '-') {
      $rendered_row = '<ul class="ckeditor5-buttons">';
      $rendered_row .= implode('', $button_row);
      $rendered_row .= '</ul>';
      $rendered_row .= $row_controls;

      // Start a new row and go to the next item.
      $button_rows[] = $rendered_row;
      $button_row = array();
    }
    else {
      $button_row[] = '<li' . backdrop_attributes($button['attributes']) . '>' . $button['contents'] . '</li>';
    }
  }

  $output = '';

  // Active toolbar buttons.
  $output .= '<label id="ckeditor5-toolbar-active-label">' . t('Active toolbar') . '</label>';
  $output .= '<div class="ckeditor5-toolbar-active clearfix" aria-labelledby="ckeditor5-toolbar-active-label">';
  $output .= '<ul class="ckeditor5-active-toolbar-configuration">';
  foreach ($button_rows as $button_row) {
    $output .= '<li class="ckeditor5-row">' . $button_row . '</li>';
  }
  $output .= '</ul>';
  $output .= '</div>';

  // Disabled/available buttons.
  $output .= '<label id="ckeditor5-toolbar-disabled-label">' . t('Available buttons') . '</label>';
  $output .= '<div class="ckeditor5-toolbar-disabled clearfix" aria-labelledby="ckeditor5-toolbar-disabled-label">';
  $output .= '<ul class="ckeditor5-buttons">';
  foreach ($variables['disabled_buttons'] as $button) {
    $output .= '<li' . backdrop_attributes($button['attributes']) . '>' . $button['contents'] . '</li>';
  }
  $output .= '</ul>';

  // Buttons that may be placed multiple times.
  $output .= '<ul class="ckeditor5-multiple-buttons">';
  foreach ($variables['multiple_buttons'] as $button) {
    $output .= '<li' . backdrop_attributes($button['attributes']) . '>' . $button['contents'] . '</li>';
  }
  $output .= '</ul>';
  $output .= '</div>';

  // Wrap the whole thing in a fieldset.
  $fieldset = array(
    '#type' => 'fieldset',
    '#children' => $output,
    '#title' => t('CKEditor Toolbar'),
  );

  return backdrop_render($fieldset);
}