Commit f49fa091 authored by webchick's avatar webchick

Issue #1963474 by infojunkie, widukind, Cottser, joelpittet, hussainweb, nod_:...

Issue #1963474 by infojunkie, widukind, Cottser, joelpittet, hussainweb, nod_: Ckeditor.module - Convert theme_ functions to Twig.
parent 255ea38e
......@@ -9,29 +9,36 @@
use Drupal\Core\Template\Attribute;
/**
* Preprocess variables for theme_ckeditor_settings_toolbar().
* Prepares variables for CKEditor settings toolbar templates.
*
* Default template: ckeditor-settings-toolbar.html.twig.
*
* @param array $variables
* An associative array containing:
* - editor: An editor object.
* - plugins: A list of plugins.
*/
function template_preprocess_ckeditor_settings_toolbar(&$variables) {
// Simplify the language direction information for toolbar buttons.
$language_interface = language(Language::TYPE_INTERFACE);
$variables['language_direction'] = $language_interface->direction ? 'rtl' : 'ltr';
$language_direction = $language_interface->direction ? 'rtl' : 'ltr';
// Create lists of active and disabled buttons.
$editor = $variables['editor'];
$plugins = $variables['plugins'];
$buttons = array();
$variables['multiple_buttons'] = array();
$multiple_buttons = array();
foreach ($plugins as $plugin_buttons) {
foreach ($plugin_buttons as $button_name => $button) {
$button['name'] = $button_name;
if (!empty($button['multiple'])) {
$variables['multiple_buttons'][$button_name] = $button;
$multiple_buttons[$button_name] = $button;
}
$buttons[$button_name] = $button;
}
}
$button_groups = array();
$variables['active_buttons'] = array();
$active_buttons = array();
foreach ($editor->settings['toolbar']['rows'] as $row_number => $row) {
$button_groups[$row_number] = array();
foreach ($row as $group) {
......@@ -39,7 +46,7 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) {
if (isset($buttons[$button_name])) {
// Save a reference to the button's configured toolbar group.
$buttons[$button_name]['group'] = $group['name'];
$variables['active_buttons'][$row_number][] = $buttons[$button_name];
$active_buttons[$row_number][] = $buttons[$button_name];
if (empty($buttons[$button_name]['multiple'])) {
unset($buttons[$button_name]);
}
......@@ -51,15 +58,9 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) {
}
}
}
$variables['disabled_buttons'] = array_diff_key($buttons, $variables['multiple_buttons']);
$variables['button_groups'] = $button_groups;
}
$disabled_buttons = array_diff_key($buttons, $multiple_buttons);
/**
* Displays the toolbar configuration for CKEditor.
*/
function theme_ckeditor_settings_toolbar($variables) {
$rtl = $variables['language_direction'] === 'rtl' ? '_rtl' : '';
$rtl = $language_direction === 'rtl' ? '_rtl' : '';
$build_button_item = function($button, $rtl) {
// Value of the button item.
......@@ -70,12 +71,13 @@ function theme_ckeditor_settings_toolbar($variables) {
$value = $button['image_alternative'];
}
elseif (isset($button['image'])) {
$image = array(
$value = array(
'#theme' => 'image',
'#uri' => $button['image' . $rtl],
'#title' => $button['label'],
'#prefix' => '<a href="#" role="button" title="' . $button['label'] . '" aria-label="' . $button['label'] . '"><span class="cke_button_icon">',
'#suffix' => '</span></a>',
);
$value = '<a href="#" role="button" title="' . $button['label'] . '" aria-label="' . $button['label'] . '"><span class="cke_button_icon">' . drupal_render($image) . '</span></a>';
}
else {
$value = '?';
......@@ -83,119 +85,55 @@ function theme_ckeditor_settings_toolbar($variables) {
// Set additional attribute on the button if it can occur multiple times.
if (!empty($button['multiple'])) {
$button['attributes']['class'][] = 'ckeditor-multiple-button';
$button['attributes']['class'][] = 'ckeditor-multiple-button';
}
// Build the button attributes.
$attributes = array(
'data-drupal-ckeditor-button-name' => $button['name'],
'class' => array('ckeditor-button'),
);
if (!empty($button['attributes'])) {
$attributes = array_merge($attributes, $button['attributes']);
}
// Build the button item.
$button_item = array(
'value' => $value,
'data-drupal-ckeditor-button-name' => $button['name'],
'class' => array('ckeditor-button'),
'attributes' => new Attribute($attributes),
);
// If this button has group information, add it to the attributes.
if (!empty($button['group'])) {
$button_item['group'] = $button['group'];
}
if (!empty($button['attributes'])) {
$button_item = array_merge($button_item, $button['attributes']);
}
return $button_item;
};
// Assemble items to be added to active button rows.
$active_buttons = array();
foreach ($variables['active_buttons'] as $row_number => $row_buttons) {
foreach ($row_buttons as $button) {
$active_buttons[$row_number][] = $build_button_item($button, $rtl);
}
}
// Assemble list of disabled buttons (which are always a single row).
$disabled_buttons = array();
foreach ($variables['disabled_buttons'] as $button) {
$disabled_buttons[] = $build_button_item($button, $rtl);
}
// Assemble list of multiple buttons that may be added multiple times.
$multiple_buttons = array();
foreach ($variables['multiple_buttons'] as $button) {
$multiple_buttons[] = $build_button_item($button, $rtl);
}
$print_buttons = function($buttons) {
$output = '';
foreach ($buttons as $button) {
unset($button['group']);
$value = $button['value'];
unset($button['value']);
$attributes = (string) new Attribute($button);
$output .= '<li' . $attributes . '>' . $value . '</li>';
}
return $output;
};
$print_button_group = function($buttons, $group_name, $print_buttons) {
$group = drupal_html_class($group_name);
$output = '';
$output .= "<li class=\"ckeditor-toolbar-group\" role=\"presentation\" data-drupal-ckeditor-type=\"group\" data-drupal-ckeditor-toolbar-group-name=\"{$group_name}\" tabindex=\"0\">";
$output .= "<h3 class=\"ckeditor-toolbar-group-name\" id=\"ckeditor-toolbar-group-aria-label-for-{$group}\">{$group_name}</h3>";
$output .= "<ul class=\"ckeditor-buttons ckeditor-toolbar-group-buttons\" role=\"toolbar\" data-drupal-ckeditor-button-sorting=\"target\" aria-labelledby=\"ckeditor-toolbar-group-aria-label-for-{$group}\">";
$output .= $print_buttons($buttons);
$output .= "</ul></li>";
return $output;
};
// We don't use theme_item_list() below in case there are no buttons in the
// active or disabled list, as theme_item_list() will not print an empty UL.
$output = '';
$output .= '<fieldset role="form" aria-labelledby="ckeditor-button-configuration ckeditor-button-description">';
$output .= '<legend id="ckeditor-button-configuration">' . t('Toolbar configuration') . '</legend>';
$output .= '<div class="fieldset-wrapper">';
$output .= '<div id="ckeditor-button-description" class="fieldset-description">' . t('Move a button into the <em>Active toolbar</em> to enable it, or into the list of <em>Available buttons</em> to disable it. Buttons may be moved with the mouse or keyboard arrow keys. Toolbar group names are provided to support screen reader users. Empty toolbar groups will be removed upon save.') . '</div>';
$output .= '<div class="ckeditor-toolbar-disabled clearfix">';
// Available buttons.
$output .= '<div class="ckeditor-toolbar-available">';
$output .= '<label for="ckeditor-available-buttons">' . t('Available buttons') . '</label>';
$output .= '<ul id="ckeditor-available-buttons" class="ckeditor-buttons" role="form" data-drupal-ckeditor-button-sorting="source">';
$output .= $print_buttons($disabled_buttons);
$output .= '</ul>';
$output .= '</div>';
// Dividers.
$output .= '<div class="ckeditor-toolbar-dividers">';
$output .= '<label for="ckeditor-multiple-buttons">' . t('Button divider') . '</label>';
$output .= '<ul id="ckeditor-multiple-buttons" class="ckeditor-multiple-buttons" role="form" data-drupal-ckeditor-button-sorting="dividers">';
$output .= $print_buttons($multiple_buttons);
$output .= '</ul>';
$output .= '</div>';
$output .= '</div>';
// Active toolbar.
$output .= '<div class="clearfix"><label id="ckeditor-active-toolbar">' . t('Active toolbar') . '</label></div>';
$output .= '<div data-toolbar="active" role="form" class="ckeditor-toolbar ckeditor-toolbar-active clearfix">';
$output .= '<ul class="ckeditor-active-toolbar-configuration" role="presentation" aria-label="' . t('CKEditor toolbar and button configuration.') . '">';
$variables['active_buttons'] = array();
foreach ($active_buttons as $row_number => $button_row) {
$output .= '<li class="ckeditor-row" role="group" aria-labelledby="ckeditor-active-toolbar">';
$output .= '<ul class="ckeditor-toolbar-groups clearfix">';
foreach ($variables['button_groups'][$row_number] as $group_name) {
foreach ($button_groups[$row_number] as $group_name) {
$variables['active_buttons'][$row_number][$group_name] = array(
'group_name_class' => drupal_html_class($group_name),
'buttons' => array(),
);
$buttons = array_filter($button_row, function ($button) use ($group_name) {
return $button['group'] === $group_name;
});
$output .= $print_button_group($buttons, $group_name, $print_buttons);
foreach ($buttons as $button) {
$variables['active_buttons'][$row_number][$group_name]['buttons'][] = $build_button_item($button, $rtl);
}
}
$output .= '</ul>';
$output .= '</li>';
}
if (empty($active_buttons)) {
$output .= '<ul class="ckeditor-buttons">';
$output .= '</ul>';
// Assemble list of disabled buttons (which are always a single row).
$variables['disabled_buttons'] = array();
foreach ($disabled_buttons as $button) {
$variables['disabled_buttons'][] = $build_button_item($button, $rtl);
}
// Assemble list of multiple buttons that may be added multiple times.
$variables['multiple_buttons'] = array();
foreach ($multiple_buttons as $button) {
$variables['multiple_buttons'][] = $build_button_item($button, $rtl);
}
$output .= '</div>';
$output .= '</div>';
$output .= '</fieldset>';
return $output;
}
......@@ -147,6 +147,7 @@ function ckeditor_theme() {
'ckeditor_settings_toolbar' => array(
'file' => 'ckeditor.admin.inc',
'variables' => array('editor' => NULL, 'plugins' => NULL),
'template' => 'ckeditor-settings-toolbar',
),
);
}
......
{#
/**
* @file
* Default theme implementation for the CKEditor settings toolbar.
*
* Available variables:
* - multiple_buttons: A list of buttons that may be added multiple times.
* - disabled_buttons: A list of disabled buttons.
* - active_buttons: A list of active button rows.
*
* @see template_preprocess_ckeditor_settings_toolbar()
*
* @ingroup themeable
*/
#}
{% spaceless %}
<fieldset role="form" aria-labelledby="ckeditor-button-configuration ckeditor-button-description">
<legend id="ckeditor-button-configuration">{{ 'Toolbar configuration'|t }}</legend>
<div class="fieldset-wrapper">
<div id="ckeditor-button-description" class="fieldset-description">
{%- trans -%}
Move a button into the <em>Active toolbar</em> to enable it, or into the list of <em>Available buttons</em> to disable it. Buttons may be moved with the mouse or keyboard arrow keys. Toolbar group names are provided to support screen reader users. Empty toolbar groups will be removed upon save.
{%- endtrans -%}
</div>
<div class="ckeditor-toolbar-disabled clearfix">
{# Available buttons. #}
<div class="ckeditor-toolbar-available">
<label for="ckeditor-available-buttons">{{ 'Available buttons'|t }}</label>
<ul id="ckeditor-available-buttons" class="ckeditor-buttons" role="form" data-drupal-ckeditor-button-sorting="source">
{% for disabled_button in disabled_buttons %}
<li{{ disabled_button.attributes }}>{{ disabled_button.value }}</li>
{% endfor %}
</ul>
</div>
{# Dividers. #}
<div class="ckeditor-toolbar-dividers">
<label for="ckeditor-multiple-buttons">{{ 'Button divider'|t }}</label>
<ul id="ckeditor-multiple-buttons" class="ckeditor-multiple-buttons" role="form" data-drupal-ckeditor-button-sorting="dividers">
{% for multiple_button in multiple_buttons %}
<li{{ multiple_button.attributes }}>{{ multiple_button.value }}</li>
{% endfor %}
</ul>
</div>
</div>
{# Active toolbar. #}
<div class="clearfix">
<label id="ckeditor-active-toolbar">{{ 'Active toolbar'|t }}</label>
</div>
<div data-toolbar="active" role="form" class="ckeditor-toolbar ckeditor-toolbar-active clearfix">
<ul class="ckeditor-active-toolbar-configuration" role="presentation" aria-label="{{ 'CKEditor toolbar and button configuration.'|t }}">
{% for button_row in active_buttons %}
<li class="ckeditor-row" role="group" aria-labelledby="ckeditor-active-toolbar">
<ul class="ckeditor-toolbar-groups clearfix">
{% for group_name, button_group in button_row %}
<li class="ckeditor-toolbar-group" role="presentation" data-drupal-ckeditor-type="group" data-drupal-ckeditor-toolbar-group-name="{{ group_name }}" tabindex="0">
<h3 class="ckeditor-toolbar-group-name" id="ckeditor-toolbar-group-aria-label-for-{{ button_group.group_name_class }}">{{ group_name }}</h3>
<ul class="ckeditor-buttons ckeditor-toolbar-group-buttons" role="toolbar" data-drupal-ckeditor-button-sorting="target" aria-labelledby="ckeditor-toolbar-group-aria-label-for-{{ button_group.group_name_class }}">
{% for active_button in button_group.buttons %}
<li{{ active_button.attributes }}>{{ active_button.value }}</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
<ul class="ckeditor-buttons"></ul>
</li>
{% endfor %}
</div>
</div>
</fieldset>
{% endspaceless %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment