diff --git a/css/tinymce-builder.css b/css/tinymce-builder.css index aac6be9..c8899ee 100644 --- a/css/tinymce-builder.css +++ b/css/tinymce-builder.css @@ -31,12 +31,19 @@ vertical-align: bottom; } .tinybutton.separator { - width: 8px; + padding: 5px .8em; + height: 1em; + width: auto !important; border: 1px dashed; } .tinybutton:not(:has(svg)) { padding: 5px 8px; } +.tinybutton span { + font-size: smaller; + vertical-align: text-top; + opacity: 0.8; +} #edit-tb .ui-sortable-helper { outline: 3px solid #0074bd; } diff --git a/js/tinymce-dragdrop.js b/js/tinymce-dragdrop.js index ca195c5..a7eedd2 100644 --- a/js/tinymce-dragdrop.js +++ b/js/tinymce-dragdrop.js @@ -1,5 +1,36 @@ +/** + * @file + * Backdrop behaviors for the builder tool. + */ (function ($, Backdrop) { "use strict"; + + Backdrop.behaviors.tinymceAdminToggleButtonText = { + attach: function () { + const buttonLabels = { + visible: Backdrop.t('Hide button text'), + invisible: Backdrop.t('Show button text') + }; + const textToggle = ''; + $('#edit-tb .fieldset-description').after(textToggle); + $('.tinymce-toggle-text').on('click', function (event) { + event.preventDefault(); + let $toggle = $(event.target); + + if (!$toggle.hasClass('text-visible')) { + $toggle.addClass('text-visible'); + $toggle.text(buttonLabels.visible); + $('#edit-tb .wrapper li span').removeClass('element-invisible'); + } + else { + $toggle.removeClass('text-visible'); + $toggle.text(buttonLabels.invisible); + $('#edit-tb .wrapper li span').addClass('element-invisible'); + } + }); + } + }; + Backdrop.behaviors.tinymceAdminDragdrop = { attach: function (context, settings) { diff --git a/tinymce.builder.inc b/tinymce.builder.inc index a147372..e01477e 100644 --- a/tinymce.builder.inc +++ b/tinymce.builder.inc @@ -161,9 +161,8 @@ function tinymce_builder_form(array $form, array &$form_state, $profile = NULL) 'class' => 'tinybutton separator', 'tabindex' => '0', 'title' => t('Separator'), - 'aria-label' => t('Separator'), ); - $separator_item = ' '; + $separator_item = '' . t('Separator') . ''; foreach ($toolbar_default_buttons as $name) { if ($name == '|') { $default_button_list .= $separator_item; @@ -188,7 +187,7 @@ function tinymce_builder_form(array $form, array &$form_state, $profile = NULL) 'role' => 'application', 'aria-describedby' => 'builder-keyboard-help', ), - '#description' => t('Drag desired buttons to the "Active" list, drag unwanted ones to the "Available" list below.'), + '#description' => t('Drag desired buttons to the "Active" list, drag unwanted ones to the "Available" list below. To easier identify the buttons, toggle their text display (takes more space, has no influence on the resulting editor toolbar).'), ); $form['tb']['toolbar'] = array( '#type' => 'textarea', @@ -274,11 +273,14 @@ function tinymce_builder_form(array $form, array &$form_state, $profile = NULL) */ function _tinymce_build_buttonlist_item(array $data, array $icons, $button_name) { $label = $button_name; - $tooltip = ''; + $text = isset($data['tooltip']) ? $data['tooltip'] : $button_name; if (isset($data['icon'])) { $icon_name = $data['icon']; if (isset($icons[$icon_name])) { $label = $icons[$icon_name]; + if (function_exists('image_add_svg_attributes')) { + $label = image_add_svg_attributes($label, array('aria-hidden' => 'true')); + } } } elseif (isset($data['text'])) { @@ -288,11 +290,10 @@ function _tinymce_build_buttonlist_item(array $data, array $icons, $button_name) 'draggable' => 'true', 'class' => 'tinybutton', 'id' => $button_name, - 'title' => isset($data['tooltip']) ? $data['tooltip'] : '', + 'title' => $text, 'tabindex' => '0', - 'aria-label' => isset($data['tooltip']) ? $data['tooltip'] : $button_name, ); - return '' . $label . ''; + return '' . $label . ' ' . $text . ''; } /**