From d18c44b36d72681fb6bfc7b3d15ce5b653888f98 Mon Sep 17 00:00:00 2001 From: Steffen Schlaer Date: Wed, 16 Mar 2022 18:30:02 +0100 Subject: [PATCH 1/3] Issue #3269941 by IT-Cru: Add paragraphs behaviors action button (work inprogress) --- ...s-features.add-behaviors-action-button.css | 6 ++ ...hs-features.add-behaviors-action-button.js | 58 +++++++++++++++++++ paragraphs_features.libraries.yml | 10 ++++ paragraphs_features.module | 25 ++++++++ 4 files changed, 99 insertions(+) create mode 100644 css/paragraphs-features.add-behaviors-action-button.css create mode 100644 js/paragraphs-features.add-behaviors-action-button.js diff --git a/css/paragraphs-features.add-behaviors-action-button.css b/css/paragraphs-features.add-behaviors-action-button.css new file mode 100644 index 0000000..6f89a1a --- /dev/null +++ b/css/paragraphs-features.add-behaviors-action-button.css @@ -0,0 +1,6 @@ +.paragraphs-tabs { + display: none !important; +} +.paragraphs-actions ul li { + margin: 0 5px; +} diff --git a/js/paragraphs-features.add-behaviors-action-button.js b/js/paragraphs-features.add-behaviors-action-button.js new file mode 100644 index 0000000..567c0c8 --- /dev/null +++ b/js/paragraphs-features.add-behaviors-action-button.js @@ -0,0 +1,58 @@ +(function($, Drupal, drupalSettings) { + + /** + * Click handler for paragraphs behavior action buttons. + * + * @type {Object} + */ + Drupal.behaviors.paragraphBehaviorsToggle = { + attach(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); diff --git a/paragraphs_features.libraries.yml b/paragraphs_features.libraries.yml index 85c5989..919e588 100644 --- a/paragraphs_features.libraries.yml +++ b/paragraphs_features.libraries.yml @@ -1,3 +1,13 @@ +add_behaviors_action_button: + css: + theme: + css/paragraphs-features.add-behaviors-action-button.css: {} + js: + js/paragraphs-features.add-behaviors-action-button.js: {} + dependencies: + - core/drupal + - core/jquery + - core/jquery.once drupal.paragraphs_features.add_in_between: js: diff --git a/paragraphs_features.module b/paragraphs_features.module index 1844f27..c304eeb 100644 --- a/paragraphs_features.module +++ b/paragraphs_features.module @@ -49,6 +49,31 @@ function paragraphs_features_paragraphs_widget_actions_alter(array &$widget_acti /** @var \Drupal\paragraphs\Entity\Paragraph $paragraphs_entity */ $paragraphs_entity = $context['paragraphs_entity']; + // Switch paragraphs content/behavior tabs to a behaviors action button. + // @todo Remove dependency of $widget_actions['actions']['collapse_button']. + if (isset($widget_actions['actions']['collapse_button'])) { + $widget_actions['actions']['behaviors_button'] = [ + '#type' => 'button', + '#value' => t('Settings'), + '#name' => str_replace('_collapse', '_behaviors', $widget_actions['actions']['collapse_button']['#name']), + '#weight' => -100, + '#limit_validation_errors' => [], + '#delta' => $context['delta'], + '#access' => \Drupal::currentUser()->hasPermission('edit behavior plugin settings'), + '#attributes' => [ + 'class' => [ + 'js-paragraphs-button-behaviors' + ], + 'title' => t('Settings'), + ], + '#attached' => [ + 'library' => [ + 'paragraphs_features/add_behaviors_action_button', + ], + ], + ]; + } + foreach ($widget_actions as $grouping => $buttons) { foreach ($buttons as $button_id => $button_element) { if ($button_id === 'remove_button') { From a922bdb3c94877c2b8ad838b52de2e8035f6ad2a Mon Sep 17 00:00:00 2001 From: Volker Killesreiter Date: Tue, 22 Mar 2022 15:40:19 +0100 Subject: [PATCH 2/3] make optional --- config/schema/paragraphs_features.schema.yml | 3 ++ ...s-features.add-behaviors-action-button.css | 6 ---- ...raphs-features.behaviors-action-button.css | 3 ++ ...raphs-features.behaviors-action-button.js} | 1 + paragraphs_features.libraries.yml | 23 ++++++------- paragraphs_features.module | 26 --------------- src/ParagraphsFeatures.php | 32 +++++++++++++++++++ 7 files changed, 51 insertions(+), 43 deletions(-) delete mode 100644 css/paragraphs-features.add-behaviors-action-button.css create mode 100644 css/paragraphs-features.behaviors-action-button.css rename js/{paragraphs-features.add-behaviors-action-button.js => paragraphs-features.behaviors-action-button.js} (99%) diff --git a/config/schema/paragraphs_features.schema.yml b/config/schema/paragraphs_features.schema.yml index b14120a..6a8750a 100644 --- a/config/schema/paragraphs_features.schema.yml +++ b/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 diff --git a/css/paragraphs-features.add-behaviors-action-button.css b/css/paragraphs-features.add-behaviors-action-button.css deleted file mode 100644 index 6f89a1a..0000000 --- a/css/paragraphs-features.add-behaviors-action-button.css +++ /dev/null @@ -1,6 +0,0 @@ -.paragraphs-tabs { - display: none !important; -} -.paragraphs-actions ul li { - margin: 0 5px; -} diff --git a/css/paragraphs-features.behaviors-action-button.css b/css/paragraphs-features.behaviors-action-button.css new file mode 100644 index 0000000..fad05e2 --- /dev/null +++ b/css/paragraphs-features.behaviors-action-button.css @@ -0,0 +1,3 @@ +.paragraphs-actions ul li { + margin: 0 5px; +} diff --git a/js/paragraphs-features.add-behaviors-action-button.js b/js/paragraphs-features.behaviors-action-button.js similarity index 99% rename from js/paragraphs-features.add-behaviors-action-button.js rename to js/paragraphs-features.behaviors-action-button.js index 567c0c8..2331b01 100644 --- a/js/paragraphs-features.add-behaviors-action-button.js +++ b/js/paragraphs-features.behaviors-action-button.js @@ -55,4 +55,5 @@ }); } }; + })(jQuery, Drupal, drupalSettings); diff --git a/paragraphs_features.libraries.yml b/paragraphs_features.libraries.yml index 919e588..d0b5108 100644 --- a/paragraphs_features.libraries.yml +++ b/paragraphs_features.libraries.yml @@ -1,14 +1,3 @@ -add_behaviors_action_button: - css: - theme: - css/paragraphs-features.add-behaviors-action-button.css: {} - js: - js/paragraphs-features.add-behaviors-action-button.js: {} - dependencies: - - core/drupal - - core/jquery - - core/jquery.once - drupal.paragraphs_features.add_in_between: js: js/paragraphs-features.add-in-between.js: {} @@ -21,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: {} diff --git a/paragraphs_features.module b/paragraphs_features.module index c304eeb..19e58c7 100644 --- a/paragraphs_features.module +++ b/paragraphs_features.module @@ -48,32 +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']; - - // Switch paragraphs content/behavior tabs to a behaviors action button. - // @todo Remove dependency of $widget_actions['actions']['collapse_button']. - if (isset($widget_actions['actions']['collapse_button'])) { - $widget_actions['actions']['behaviors_button'] = [ - '#type' => 'button', - '#value' => t('Settings'), - '#name' => str_replace('_collapse', '_behaviors', $widget_actions['actions']['collapse_button']['#name']), - '#weight' => -100, - '#limit_validation_errors' => [], - '#delta' => $context['delta'], - '#access' => \Drupal::currentUser()->hasPermission('edit behavior plugin settings'), - '#attributes' => [ - 'class' => [ - 'js-paragraphs-button-behaviors' - ], - 'title' => t('Settings'), - ], - '#attached' => [ - 'library' => [ - 'paragraphs_features/add_behaviors_action_button', - ], - ], - ]; - } - foreach ($widget_actions as $grouping => $buttons) { foreach ($buttons as $button_id => $button_element) { if ($button_id === 'remove_button') { diff --git a/src/ParagraphsFeatures.php b/src/ParagraphsFeatures.php index 37fceb1..b38e9e6 100644 --- a/src/ParagraphsFeatures.php +++ b/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,30 @@ 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'] = '
'; + // 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 +205,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; } From cfbb5af71c01bc0eb4315f23c9a9824cdb1bc8f7 Mon Sep 17 00:00:00 2001 From: Volker Killesreiter Date: Tue, 22 Mar 2022 16:12:38 +0100 Subject: [PATCH 3/3] fix cs --- ...graphs-features.behaviors-action-button.js | 53 ++++++++++--------- src/ParagraphsFeatures.php | 3 +- 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/js/paragraphs-features.behaviors-action-button.js b/js/paragraphs-features.behaviors-action-button.js index 2331b01..3ae2de0 100644 --- a/js/paragraphs-features.behaviors-action-button.js +++ b/js/paragraphs-features.behaviors-action-button.js @@ -1,4 +1,6 @@ -(function($, Drupal, drupalSettings) { +(function ($, Drupal, drupalSettings) { + + 'use strict'; /** * Click handler for paragraphs behavior action buttons. @@ -6,46 +8,47 @@ * @type {Object} */ Drupal.behaviors.paragraphBehaviorsToggle = { - attach(context) { + attach: function (context) { $(context) - .find(".js-paragraphs-button-behaviors") - .once("add-click-handler") + .find('.js-paragraphs-button-behaviors') + .once('add-click-handler') .each((index, element) => { const $button = $(element); - const $parWidget = $button.closest(".paragraph-top").parent(); + const $parWidget = $button.closest('.paragraph-top').parent(); - $button.addClass("content-active"); - $parWidget.addClass("content-active"); + $button.addClass('content-active'); + $parWidget.addClass('content-active'); - $button.on("click", event => { + $button.on('click', event => { const $trigger = $(event.target); const $currentParWidget = $trigger - .closest(".paragraph-top") + .closest('.paragraph-top') .parent(); - if ($currentParWidget.hasClass("content-active")) { + if ($currentParWidget.hasClass('content-active')) { $trigger - .removeClass("content-active") - .addClass("behavior-active"); - event.target.value = "Content"; + .removeClass('content-active') + .addClass('behavior-active'); + event.target.value = 'Content'; - $currentParWidget.find(".paragraphs-behavior").show(); - $currentParWidget.find(".paragraphs-subform").hide(); + $currentParWidget.find('.paragraphs-behavior').show(); + $currentParWidget.find('.paragraphs-subform').hide(); $currentParWidget - .removeClass("content-active") - .addClass("behavior-active"); - } else { + .removeClass('content-active') + .addClass('behavior-active'); + } + else { $trigger - .removeClass("behavior-active") - .addClass("content-active"); - event.target.value = "Settings"; + .removeClass('behavior-active') + .addClass('content-active'); + event.target.value = 'Settings'; - $currentParWidget.find(".paragraphs-behavior").hide(); - $currentParWidget.find(".paragraphs-subform").show(); + $currentParWidget.find('.paragraphs-behavior').hide(); + $currentParWidget.find('.paragraphs-subform').show(); $currentParWidget - .removeClass("behavior-active") - .addClass("content-active"); + .removeClass('behavior-active') + .addClass('content-active'); } event.preventDefault(); diff --git a/src/ParagraphsFeatures.php b/src/ParagraphsFeatures.php index b38e9e6..b2e9ef1 100644 --- a/src/ParagraphsFeatures.php +++ b/src/ParagraphsFeatures.php @@ -66,7 +66,8 @@ public static function registerFormWidgetFeatures(array &$elements, ParagraphsWi $widget->getThirdPartySetting('paragraphs_features', 'add_in_between_link_count'); } if ($feature === 'behaviors_action_button') { - // Remove paragraphs tabs, @see ParagraphsWidget->formMultipleElements(). + // Remove paragraphs tabs. + // @see ParagraphsWidget->formMultipleElements(). $elements['#prefix'] = '
'; // Add a button for each subform. foreach (Element::children($elements) as $key) {