Skip to content
Snippets Groups Projects
Commit f49fa091 authored by Angie Byron's avatar Angie Byron
Browse files

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
No related branches found
No related tags found
2 merge requests!7452Issue #1797438. HTML5 validation is preventing form submit and not fully...,!789Issue #3210310: Adjust Database API to remove deprecated Drupal 9 code in Drupal 10
Show whitespace changes
Inline Side-by-side
core/modules/ckeditor/ckeditor.admin.inc
+ 47
− 109
View file @ f49fa091
...@@ -9,29 +9,36 @@ ...@@ -9,29 +9,36 @@
use Drupal\Core\Template\Attribute; 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) { function template_preprocess_ckeditor_settings_toolbar(&$variables) {
// Simplify the language direction information for toolbar buttons. // Simplify the language direction information for toolbar buttons.
$language_interface = language(Language::TYPE_INTERFACE); $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. // Create lists of active and disabled buttons.
$editor = $variables['editor']; $editor = $variables['editor'];
$plugins = $variables['plugins']; $plugins = $variables['plugins'];
$buttons = array(); $buttons = array();
$variables['multiple_buttons'] = array(); $multiple_buttons = array();
foreach ($plugins as $plugin_buttons) { foreach ($plugins as $plugin_buttons) {
foreach ($plugin_buttons as $button_name => $button) { foreach ($plugin_buttons as $button_name => $button) {
$button['name'] = $button_name; $button['name'] = $button_name;
if (!empty($button['multiple'])) { if (!empty($button['multiple'])) {
$variables['multiple_buttons'][$button_name] = $button; $multiple_buttons[$button_name] = $button;
} }
$buttons[$button_name] = $button; $buttons[$button_name] = $button;
} }
} }
$button_groups = array(); $button_groups = array();
$variables['active_buttons'] = array(); $active_buttons = array();
foreach ($editor->settings['toolbar']['rows'] as $row_number => $row) { foreach ($editor->settings['toolbar']['rows'] as $row_number => $row) {
$button_groups[$row_number] = array(); $button_groups[$row_number] = array();
foreach ($row as $group) { foreach ($row as $group) {
...@@ -39,7 +46,7 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) { ...@@ -39,7 +46,7 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) {
if (isset($buttons[$button_name])) { if (isset($buttons[$button_name])) {
// Save a reference to the button's configured toolbar group. // Save a reference to the button's configured toolbar group.
$buttons[$button_name]['group'] = $group['name']; $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'])) { if (empty($buttons[$button_name]['multiple'])) {
unset($buttons[$button_name]); unset($buttons[$button_name]);
} }
...@@ -51,15 +58,9 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) { ...@@ -51,15 +58,9 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) {
} }
} }
} }
$variables['disabled_buttons'] = array_diff_key($buttons, $variables['multiple_buttons']); $disabled_buttons = array_diff_key($buttons, $multiple_buttons);
$variables['button_groups'] = $button_groups;
}
/** $rtl = $language_direction === 'rtl' ? '_rtl' : '';
* Displays the toolbar configuration for CKEditor.
*/
function theme_ckeditor_settings_toolbar($variables) {
$rtl = $variables['language_direction'] === 'rtl' ? '_rtl' : '';
$build_button_item = function($button, $rtl) { $build_button_item = function($button, $rtl) {
// Value of the button item. // Value of the button item.
...@@ -70,12 +71,13 @@ function theme_ckeditor_settings_toolbar($variables) { ...@@ -70,12 +71,13 @@ function theme_ckeditor_settings_toolbar($variables) {
$value = $button['image_alternative']; $value = $button['image_alternative'];
} }
elseif (isset($button['image'])) { elseif (isset($button['image'])) {
$image = array( $value = array(
'#theme' => 'image', '#theme' => 'image',
'#uri' => $button['image' . $rtl], '#uri' => $button['image' . $rtl],
'#title' => $button['label'], '#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 { else {
$value = '?'; $value = '?';
...@@ -86,116 +88,52 @@ function theme_ckeditor_settings_toolbar($variables) { ...@@ -86,116 +88,52 @@ function theme_ckeditor_settings_toolbar($variables) {
$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. // Build the button item.
$button_item = array( $button_item = array(
'value' => $value, 'value' => $value,
'data-drupal-ckeditor-button-name' => $button['name'], 'attributes' => new Attribute($attributes),
'class' => array('ckeditor-button'),
); );
// If this button has group information, add it to the attributes. // If this button has group information, add it to the attributes.
if (!empty($button['group'])) { if (!empty($button['group'])) {
$button_item['group'] = $button['group']; $button_item['group'] = $button['group'];
} }
if (!empty($button['attributes'])) {
$button_item = array_merge($button_item, $button['attributes']);
}
return $button_item; 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). // Assemble list of disabled buttons (which are always a single row).
$disabled_buttons = array(); $variables['active_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.') . '">';
foreach ($active_buttons as $row_number => $button_row) { foreach ($active_buttons as $row_number => $button_row) {
$output .= '<li class="ckeditor-row" role="group" aria-labelledby="ckeditor-active-toolbar">'; foreach ($button_groups[$row_number] as $group_name) {
$output .= '<ul class="ckeditor-toolbar-groups clearfix">'; $variables['active_buttons'][$row_number][$group_name] = array(
foreach ($variables['button_groups'][$row_number] as $group_name) { 'group_name_class' => drupal_html_class($group_name),
'buttons' => array(),
);
$buttons = array_filter($button_row, function ($button) use ($group_name) { $buttons = array_filter($button_row, function ($button) use ($group_name) {
return $button['group'] === $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).
$output .= '</div>'; $variables['disabled_buttons'] = array();
foreach ($disabled_buttons as $button) {
$output .= '</div>'; $variables['disabled_buttons'][] = $build_button_item($button, $rtl);
$output .= '</fieldset>'; }
// Assemble list of multiple buttons that may be added multiple times.
return $output; $variables['multiple_buttons'] = array();
foreach ($multiple_buttons as $button) {
$variables['multiple_buttons'][] = $build_button_item($button, $rtl);
}
} }
core/modules/ckeditor/ckeditor.module
+ 1
− 0
View file @ f49fa091
...@@ -147,6 +147,7 @@ function ckeditor_theme() { ...@@ -147,6 +147,7 @@ function ckeditor_theme() {
'ckeditor_settings_toolbar' => array( 'ckeditor_settings_toolbar' => array(
'file' => 'ckeditor.admin.inc', 'file' => 'ckeditor.admin.inc',
'variables' => array('editor' => NULL, 'plugins' => NULL), 'variables' => array('editor' => NULL, 'plugins' => NULL),
'template' => 'ckeditor-settings-toolbar',
), ),
); );
} }
......
core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig 0 → 100644
+ 74
− 0
View file @ f49fa091
{#
/**
* @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 %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment