diff --git a/css/paragraphs.widget.css b/css/paragraphs.widget.css index ec92527..41c97de 100644 --- a/css/paragraphs.widget.css +++ b/css/paragraphs.widget.css @@ -108,6 +108,23 @@ box-shadow: none; } +.js .ui-tabs-nav.ui-widget-header { + padding: .2em .2em 0; +} +.js .ui-tabs-nav li { + float: right; +} +.js .ui-tabs-nav .ui-state-default { + background-color: #edede8; + border-color: #bfbfbf; +} +.js .ui-tabs-nav .ui-state-active { + background-color: #fff; +} +.js .ui-tabs-panel { + padding: initial; + display: table; +} /* Override 600px breakpoint core submit button tweaks. */ @media screen and (max-width: 600px) { diff --git a/js/paragraphs.js b/js/paragraphs.js new file mode 100644 index 0000000..a59e4cf --- /dev/null +++ b/js/paragraphs.js @@ -0,0 +1,32 @@ +(function ($, Drupal, drupalSettings) { + /** + * For body tag, adds tabs for selecting how the content will be displayed. + * + * @type {Drupal~behavior} + */ + Drupal.behaviors.bodyTabs = { + attach: function (context, settings) { + $('ul.paragraphs-tabs', context).each(function () { + var $this = $(this); + $this.parent().tabs({ + activate: function( event, ui ) { + if (ui.newTab.attr('id') == 'content') { + $('.paragraphs-content').show(); + $('.paragraphs-behavior').hide(); + } + else { + $('.paragraphs-content').hide(); + $('.paragraphs-nested.paragraphs-subform > .paragraphs-content').show(); + $('.paragraphs-behavior').show(); + } + }, + create: function( event, ui ) { + $('.paragraphs-content').show(); + $('.paragraphs-behavior').hide(); + } + }); + }); + } + }; + +})(jQuery, Drupal, drupalSettings); diff --git a/paragraphs.libraries.yml b/paragraphs.libraries.yml index bb2015d..77c8f51 100644 --- a/paragraphs.libraries.yml +++ b/paragraphs.libraries.yml @@ -1,5 +1,4 @@ drupal.paragraphs.admin: - version: VERSION dependencies: - core/jquery - core/drupal @@ -13,6 +12,17 @@ drupal.paragraphs.admin: css/paragraphs.admin.css: {} drupal.paragraphs.widget: + dependencies: + - core/jquery + - core/drupal + - core/drupalSettings + - core/jquery.once + - core/jquery.form + - core/drupal.ajax + - core/drupal.dropbutton + - core/jquery.ui.tabs css: theme: css/paragraphs.widget.css: {} + js: + js/paragraphs.js: {} diff --git a/src/ParagraphInterface.php b/src/ParagraphInterface.php index 5d60881..7fd9ec3 100644 --- a/src/ParagraphInterface.php +++ b/src/ParagraphInterface.php @@ -9,8 +9,7 @@ use Drupal\Core\Entity\ContentEntityInterface; * Provides an interface defining a paragraphs entity. * @ingroup paragraphs */ -interface ParagraphInterface extends ContentEntityInterface, EntityOwnerInterface -{ +interface ParagraphInterface extends ContentEntityInterface, EntityOwnerInterface { /** * Gets the parent entity of the paragraph. @@ -21,4 +20,9 @@ interface ParagraphInterface extends ContentEntityInterface, EntityOwnerInterfac * The parent entity. */ public function getParentEntity(); + + /** + * @return \Drupal\paragraphs\ParagraphsTypeInterface + */ + public function getParagraphType(); } diff --git a/src/ParagraphsTypeInterface.php b/src/ParagraphsTypeInterface.php index 169c202..435a337 100644 --- a/src/ParagraphsTypeInterface.php +++ b/src/ParagraphsTypeInterface.php @@ -31,7 +31,7 @@ interface ParagraphsTypeInterface extends ConfigEntityInterface { /** * Retrieves all the enabled plugins. * - * @return array + * @return \Drupal\paragraphs\ParagraphsBehaviorInterface[] * Array of the enabled plugins as instances. */ public function getEnabledBehaviorPlugins(); diff --git a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php index 2a4dd84..d14a12b 100644 --- a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php @@ -220,6 +220,7 @@ class ParagraphsWidget extends WidgetBase { $parents = $element['#field_parents']; $info = []; + /** @var \Drupal\paragraphs\Entity\Paragraph $paragraphs_entity */ $paragraphs_entity = NULL; $host = $items->getEntity(); $widget_state = static::getWidgetState($parents, $field_name, $form_state); @@ -599,9 +600,18 @@ class ParagraphsWidget extends WidgetBase { } if ($item_mode == 'edit') { + $element['subform']['paragraph_content'] = [ + '#type' => 'container', + '#attributes' => ['class' => ['paragraphs-content']] + ]; + $element['subform']['paragraph_behavior'] = [ + '#type' => 'container', + '#attributes' => ['class' => ['paragraphs-behavior']] + ]; $display->buildForm($paragraphs_entity, $element['subform'], $form_state); foreach (Element::children($element['subform']) as $field) { if ($paragraphs_entity->hasField($field)) { + $element['subform'][$field]['#group'] = implode('][', array_merge($element_parents, ['paragraph_content'])); $translatable = $paragraphs_entity->{$field}->getFieldDefinition()->isTranslatable(); if ($translatable) { $element['subform'][$field]['widget']['#after_build'][] = [ @@ -616,8 +626,11 @@ class ParagraphsWidget extends WidgetBase { $paragraphs_type = $paragraphs_entity->getParagraphType(); if ($paragraphs_type) { foreach ($paragraphs_type->getEnabledBehaviorPlugins() as $plugin_id => $plugin) { - $element['behavior_plugins'][$plugin_id] = []; - $element['behavior_plugins'][$plugin_id] = $plugin->buildBehaviorForm($paragraphs_entity); + $element['subform'][$plugin_id] = [ + '#type' => 'container', + '#group' => implode('][', array_merge($element_parents, ['paragraph_behavior'])), + ]; + $element['subform'][$plugin_id] += (array) $plugin->buildBehaviorForm($paragraphs_entity); } } } @@ -760,9 +773,20 @@ class ParagraphsWidget extends WidgetBase { $description = FieldFilteredMarkup::create(\Drupal::token()->replace($this->fieldDefinition->getDescription())); $elements = array(); + $tabs = ''; $this->fieldIdPrefix = implode('-', array_merge($this->fieldParents, array($field_name))); $this->fieldWrapperId = Html::getUniqueId($this->fieldIdPrefix . '-add-more-wrapper'); - $elements['#prefix'] = '
'; + + // If the parent entity is paragraph add the nested class if not then add + // the perspective tabs. + $field_prefix = strtr($this->fieldIdPrefix, '_', '-'); + if ($max > 0 && $items->getEntity()->getEntityTypeId() != 'paragraph') { + $tabs = ''; + } + else { + $form['#attributes']['class'][] = 'paragraphs-nested'; + } + $elements['#prefix'] = '
' . $tabs; $elements['#suffix'] = '
'; $field_state['ajax_wrapper_id'] = $this->fieldWrapperId; @@ -1165,7 +1189,7 @@ class ParagraphsWidget extends WidgetBase { // Validate all enabled behavior plugins. $paragraphs_type = $entity->getParagraphType(); foreach ($paragraphs_type->getEnabledBehaviorPlugins() as $plugin_id => $plugin_values) { - $plugin_values->validateBehaviorForm($element['behavior_plugins'][$plugin_id], $form_state); + $plugin_values->validateBehaviorForm($element['subform'][$plugin_id], $form_state); } } } @@ -1221,14 +1245,14 @@ class ParagraphsWidget extends WidgetBase { $paragraphs_entity->set($langcode_key, $form_state->get('langcode')); } } - if (isset($item['behavior_plugins'])) { + if (isset($item['subform'])) { // Submit all enabled behavior plugins. $paragraphs_type = $paragraphs_entity->getParagraphType(); foreach ($paragraphs_type->getEnabledBehaviorPlugins() as $plugin_id => $plugin_values) { - if (!isset($item['behavior_plugins'][$plugin_id])) { - $item['behavior_plugins'][$plugin_id] = []; + if (!isset($item['subform'][$plugin_id])) { + $item['subform'][$plugin_id] = []; } - $plugin_values->submitBehaviorForm($paragraphs_entity, $item['behavior_plugins'][$plugin_id]); + $plugin_values->submitBehaviorForm($paragraphs_entity, $item['subform'][$plugin_id]); } } diff --git a/src/Tests/Experimental/ParagraphsExperimentalBehaviorsTest.php b/src/Tests/Experimental/ParagraphsExperimentalBehaviorsTest.php index d6c46d3..0ad1035 100644 --- a/src/Tests/Experimental/ParagraphsExperimentalBehaviorsTest.php +++ b/src/Tests/Experimental/ParagraphsExperimentalBehaviorsTest.php @@ -68,13 +68,13 @@ class ParagraphsExperimentalBehaviorsTest extends ParagraphsExperimentalTestBase // Create a node with a Paragraph. $this->drupalGet('node/add/paragraphed_test'); - $this->assertFieldByName('field_paragraphs[0][behavior_plugins][test_text_color][text_color]', 'green'); + $this->assertFieldByName('field_paragraphs[0][subform][test_text_color][text_color]', 'green'); // Setting a not allowed value in the text color plugin text field. $plugin_text = 'green'; $edit = [ 'title[0][value]' => 'paragraphs_plugins_test', 'field_paragraphs[0][subform][field_text][0][value]' => 'amazing_plugin_test', - 'field_paragraphs[0][behavior_plugins][test_text_color][text_color]' => $plugin_text, + 'field_paragraphs[0][subform][test_text_color][text_color]' => $plugin_text, ]; $this->drupalPostForm(NULL, $edit, t('Save and publish')); // Asserting that the error message is shown. @@ -82,7 +82,7 @@ class ParagraphsExperimentalBehaviorsTest extends ParagraphsExperimentalTestBase // Updating the text color to an allowed value. $plugin_text = 'red'; $edit = [ - 'field_paragraphs[0][behavior_plugins][test_text_color][text_color]' => $plugin_text, + 'field_paragraphs[0][subform][test_text_color][text_color]' => $plugin_text, ]; $this->drupalPostForm(NULL, $edit, t('Save and publish')); // Assert that the class has been added to the element. @@ -90,21 +90,21 @@ class ParagraphsExperimentalBehaviorsTest extends ParagraphsExperimentalTestBase $this->clickLink('Edit'); // Assert the plugin fields populate the stored values. - $this->assertFieldByName('field_paragraphs[0][behavior_plugins][test_text_color][text_color]', $plugin_text); + $this->assertFieldByName('field_paragraphs[0][subform][test_text_color][text_color]', $plugin_text); // Update the value of both plugins. $updated_text = 'blue'; $edit = [ - 'field_paragraphs[0][behavior_plugins][test_text_color][text_color]' => $updated_text, - 'field_paragraphs[0][behavior_plugins][test_bold_text][bold_text]' => TRUE, + 'field_paragraphs[0][subform][test_text_color][text_color]' => $updated_text, + 'field_paragraphs[0][subform][test_bold_text][bold_text]' => TRUE, ]; $this->drupalPostForm(NULL, $edit, t('Save and keep published')); $this->assertNoRaw('class="red_plugin_text'); $this->assertRaw('class="blue_plugin_text bold_plugin_text'); $this->clickLink('Edit'); // Assert the plugin fields populate the stored values. - $this->assertFieldByName('field_paragraphs[0][behavior_plugins][test_text_color][text_color]', $updated_text); - $this->assertFieldByName('field_paragraphs[0][behavior_plugins][test_bold_text][bold_text]', TRUE); + $this->assertFieldByName('field_paragraphs[0][subform][test_text_color][text_color]', $updated_text); + $this->assertFieldByName('field_paragraphs[0][subform][test_bold_text][bold_text]', TRUE); // Test plugin applicability. Add a paragraph type. $paragraph_type = 'text_paragraph_test';