Issue #114: Add button text toggler to builder tool (#115)

backdrop-contrib · Jun 20, 2024 · 1e99cf4 · 1e99cf4
1 parent b36833f
commit 1e99cf4
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 8 deletions.
diff --git 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
@@ -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 = '<a href="" class="tinymce-toggle-text" aria-hidden="true">' + buttonLabels.invisible + '<a>';
+      $('#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
@@ -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 = '<li' . backdrop_attributes($attributes) . '>&nbsp;</li>';
+  $separator_item = '<li' . backdrop_attributes($attributes) . '><span class="element-invisible">' . t('Separator') . '</span></li>';
   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 '<li' . backdrop_attributes($attributes) . '>' . $label . '</li>';
+  return '<li' . backdrop_attributes($attributes) . '>' . $label . '<span class="element-invisible"> ' . $text . '</span></li>';
 }
 
 /**