Issue #3269941 by IT-Cru: Add paragraphs behaviors action button

config/schema/paragraphs_features.schema.yml

@@ -25,6 +25,9 @@ paragraphs_features_third_party:
     show_drag_and_drop:
       type: boolean
       label: 'Flag for showing drag & drop button'
+    behaviors_action_button:
+      type: boolean
+      label: 'Flag for switching to behaviors action button'
 
 field.widget.third_party.paragraphs_features:
   type: paragraphs_features_third_party

css/paragraphs-features.behaviors-action-button.css

@@ -0,0 +1,3 @@
+.paragraphs-actions ul li {
+  margin: 0 5px;
+}

js/paragraphs-features.behaviors-action-button.js

@@ -0,0 +1,62 @@
+(function ($, Drupal, drupalSettings) {
+
+  'use strict';
+
+  /**
+   * Click handler for paragraphs behavior action buttons.
+   *
+   * @type {Object}
+   */
+  Drupal.behaviors.paragraphBehaviorsToggle = {
+    attach: function (context) {
+      $(context)
+        .find('.js-paragraphs-button-behaviors')
+        .once('add-click-handler')
+        .each((index, element) => {
+          const $button = $(element);
+          const $parWidget = $button.closest('.paragraph-top').parent();
+
+          $button.addClass('content-active');
+          $parWidget.addClass('content-active');
+
+          $button.on('click', event => {
+            const $trigger = $(event.target);
+
+            const $currentParWidget = $trigger
+              .closest('.paragraph-top')
+              .parent();
+
+            if ($currentParWidget.hasClass('content-active')) {
+              $trigger
+                .removeClass('content-active')
+                .addClass('behavior-active');
+              event.target.value = 'Content';
+
+              $currentParWidget.find('.paragraphs-behavior').show();
+              $currentParWidget.find('.paragraphs-subform').hide();
+              $currentParWidget
+                .removeClass('content-active')
+                .addClass('behavior-active');
+            }
+            else {
+              $trigger
+                .removeClass('behavior-active')
+                .addClass('content-active');
+              event.target.value = 'Settings';
+
+              $currentParWidget.find('.paragraphs-behavior').hide();
+              $currentParWidget.find('.paragraphs-subform').show();
+              $currentParWidget
+                .removeClass('behavior-active')
+                .addClass('content-active');
+            }
+
+            event.preventDefault();
+
+            return false;
+          });
+        });
+    }
+  };
+
+})(jQuery, Drupal, drupalSettings);

paragraphs_features.libraries.yml

@@ -1,4 +1,3 @@
-
 drupal.paragraphs_features.add_in_between:
   js:
     js/paragraphs-features.add-in-between.js: {}
@@ -11,6 +10,18 @@ drupal.paragraphs_features.add_in_between:
     - core/once
     - paragraphs/drupal.paragraphs.modal
 
+drupal.paragraphs_features.behaviors_action_button:
+  css:
+    theme:
+      css/paragraphs-features.behaviors-action-button.css: {}
+  js:
+    js/paragraphs-features.behaviors-action-button.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
+    - core/jquery
+    - core/jquery.once
+
 drupal.paragraphs_features.delete_confirmation:
   js:
     js/paragraphs-features.delete-confirmation.js: {}

paragraphs_features.module

@@ -48,7 +48,6 @@ function paragraphs_features_field_widget_third_party_settings_form(WidgetInterf
 function paragraphs_features_paragraphs_widget_actions_alter(array &$widget_actions, array &$context) {
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraphs_entity */
   $paragraphs_entity = $context['paragraphs_entity'];
-
   foreach ($widget_actions as $grouping => $buttons) {
     foreach ($buttons as $button_id => $button_element) {
       if ($button_id === 'remove_button') {

src/ParagraphsFeatures.php

@@ -23,6 +23,7 @@ class ParagraphsFeatures {
    */
   public static $availableFeatures = [
     'add_in_between',
+    'behaviors_action_button',
     'delete_confirmation',
     'split_text',
   ];
@@ -64,6 +65,31 @@ public static function registerFormWidgetFeatures(array &$elements, ParagraphsWi
         $elements['add_more']['#attached']['drupalSettings']['paragraphs_features'][$feature][$fieldWrapperId]['linkCount'] =
           $widget->getThirdPartySetting('paragraphs_features', 'add_in_between_link_count');
       }
+      if ($feature === 'behaviors_action_button') {
+        // Remove paragraphs tabs.
+        // @see ParagraphsWidget->formMultipleElements().
+        $elements['#prefix'] = '<div class="is-horizontal paragraphs-tabs-wrapper" id="' . $fieldWrapperId . '">';
+        // Add a button for each subform.
+        foreach (Element::children($elements) as $key) {
+          if (isset($elements[$key]['behavior_plugins']) && Element::children($elements[$key]['behavior_plugins'])) {
+            $elements[$key]['top']['actions']['actions']['behaviors_button'] = [
+              '#type' => 'button',
+              '#value' => t('Settings'),
+              '#weight' => -100,
+              '#limit_validation_errors' => [],
+              '#delta' => $elements[$key]['#delta'],
+              '#access' => \Drupal::currentUser()->hasPermission('edit behavior plugin settings'),
+              '#attributes' => [
+                'class' => [
+                  'js-paragraphs-button-behaviors',
+                ],
+                'title' => t('Settings'),
+              ],
+            ];
+          }
+        }
+      }
+
       // Set module path for split_text feature.
       $elements['add_more']['#attached']['drupalSettings']['paragraphs_features']['_path'] = drupal_get_path('module', 'paragraphs_features');
     }
@@ -180,6 +206,13 @@ public static function getThirdPartyForm(WidgetInterface $plugin, $field_name) {
       '#access' => !empty($library),
     ];
 
+    $elements['behaviors_action_button'] = [
+      '#type' => 'checkbox',
+      '#title' => t('Switch paragraphs content/behavior tabs to a behaviors action button'),
+      '#default_value' => $plugin->getThirdPartySetting('paragraphs_features', 'behaviors_action_button', FALSE),
+      '#access' => !empty($library),
+    ];
+
     return $elements;
   }