diff --git a/css/paragraphs.modal.css b/css/paragraphs.modal.css index 5cc9f03..01aa393 100644 --- a/css/paragraphs.modal.css +++ b/css/paragraphs.modal.css @@ -7,6 +7,6 @@ ul.paragraphs-add-dialog-list { padding: 5px; } -.paragraphs-add-dialog-row input { - width: 250px; +.paragraphs-add-dialog-row button { + width: 200px; } diff --git a/css/paragraphs.modal.scss b/css/paragraphs.modal.scss index be59609..e9ca8c8 100644 --- a/css/paragraphs.modal.scss +++ b/css/paragraphs.modal.scss @@ -6,7 +6,7 @@ ul.paragraphs-add-dialog-list { .paragraphs-add-dialog-row { padding: 5px; - input { + button { width: 250px; } } diff --git a/css/paragraphs.widget.css b/css/paragraphs.widget.css index 4670cfa..cd93399 100644 --- a/css/paragraphs.widget.css +++ b/css/paragraphs.widget.css @@ -18,10 +18,6 @@ margin-bottom: 10px; } -.js .field--widget-paragraphs td { - padding: 10px 0; -} - .js .field--widget-paragraphs .field-multiple-drag { vertical-align: top; } @@ -93,12 +89,11 @@ } @media screen and (min-width: 600px) { .js .paragraph-type-add-modal { - width: 100%; padding: 10px 0; height: 30px; - margin-top: -1.8em; - margin-bottom: -0.2em; - display: inline; + text-align: center; + position: relative; + top: -30px; } } @@ -108,7 +103,6 @@ } .js .paragraph-type-add-modal-button:hover { - color: #ffffff; background: #057ec7 none; } @@ -147,3 +141,15 @@ float: right; margin-right: -10px; } + +#first_button_wrapper { + text-align: left; + margin-left: 0px; + top: 0px; +} + +[dir="rtl"] #first_button_wrapper { + text-align: right; + margin-right: 0px; + top: 0px; +} diff --git a/css/paragraphs.widget.scss b/css/paragraphs.widget.scss index 2db7d2a..de8feaa 100644 --- a/css/paragraphs.widget.scss +++ b/css/paragraphs.widget.scss @@ -32,10 +32,6 @@ margin-bottom: 10px; } - td { // stylelint-disable-line selector-no-type - padding: 10px 0; - } - .field-multiple-drag { vertical-align: top; } @@ -105,12 +101,11 @@ @media screen and (min-width: 600px) { .paragraph-type-add-modal { - width: 100%; padding: 10px 0; height: 30px; - margin-top: -1.8em; - margin-bottom: -0.2em; - display: inline; + text-align: center; + position: relative; + top: -30px; } } @@ -120,7 +115,6 @@ } .paragraph-type-add-modal-button:hover { - color: #ffffff; background: #057ec7 none; } } @@ -160,3 +154,14 @@ float: right; margin-right: -10px; } + +#first_button_wrapper { + text-align: left; + margin-left: 0px; + top: 0px; +} +[dir="rtl"] #first_button_wrapper { + text-align: right; + margin-right: 0px; + top: 0px; +} diff --git a/js/paragraphs.modal.js b/js/paragraphs.modal.js index afd0c62..27d05d9 100644 --- a/js/paragraphs.modal.js +++ b/js/paragraphs.modal.js @@ -6,9 +6,101 @@ (function ($, Drupal, drupalSettings) { 'use strict'; + /** + * Handling of hover state for add buttons. + * + * @type {Object} + */ + Drupal.behaviors.modalHover = { + attach: function (context) { + $("input[name*='first_button_add_modal']").val("Add paragraph"); + $("input[name*='first_button_add_modal']").parent().attr("id", "first_button_wrapper"); + $('.paragraph-type-add-modal-button').hover( + function() { + if ($(this).attr('name') != 'first_button_add_modal') + $(this).val("Add paragraph"); + }, + function() { + if ($(this).attr('name') != 'first_button_add_modal') + $(this).val("+"); + } + ); + } + } + + /** + * Method to apply data on template element. + * + * For more information about template please take a look at documentation + * provided in: templates/paragraphs-add-dialog.html.twig + * + * @param {Object} $templateElement + * jQuery element for template element. + * @param {Object} data + * Data object used to apply on template. + * + * @private + */ + var _templateApplyData = function ($templateElement, data) { + $.each(data, function (name, value) { + var selector = '[data-' + name + ']'; + + $templateElement.find(selector) + .addBack(selector) + .each(function (index, childElement) { + var $child = $(childElement); + var attrName = $child.attr('data-' + name); + $child.removeAttr('data-' + name); + + if (attrName === 'content') { + $child.text(value); + } + else { + $child.attr(attrName, value); + } + }); + }); + }; /** - * Click handler for click "Add" button between paragraphs. + * Method to clone template and apply data on it. + * + * @param {Object} $template + * jQuery element for template element used for cloning. + * @param {Object} data + * Data object used to apply on template. + * + * @return {Object} + * Returns cloned template with applied data on it. + * + * @private + */ + var _templateClone = function ($template, data) { + var $templateClone = $template + .clone() + .appendTo($template.parent()); + + // Adjust all CSS classes with suffix "-template". + var classEnding = '-template'; + $.each( + $templateClone.attr('class').toString().split(' '), + function (index, className) { + if (className.substr(-classEnding.length) === classEnding) { + var newClassName = className.substr(0, className.length - classEnding.length); + $templateClone + .removeClass(className) + .toggleClass(newClassName); + } + } + ); + + _templateApplyData($templateClone, data); + + return $templateClone; + }; + + /** + * Click handler for click "+ Add" button between paragraphs. * * @type {Object} */ @@ -18,12 +110,43 @@ .once('add-click-handler') .on('click', function (event) { var $button = $(this); - var $add_more_wrapper = $button.parent().siblings('.paragraphs-add-dialog'); - Drupal.paragraphsAddModal.openDialog($add_more_wrapper); // Stop default execution of click event. event.preventDefault(); event.stopPropagation(); + + // Global data for dialog template. + // delta: '' -> means that paragraph will be added to end of list. + var config = {delta: ''}; + + // Get wrapper of elements used for submitting of add paragraph + // functionality. It's also used as context for opening of dialog. + var $addMoreWrapper; + if ($button.attr('name') === 'first_button_add_modal') { + // Case for last button in list (of for empty list). + $addMoreWrapper = $button + .parent() + .siblings('.js-hide') + .parent(); + } + else { + // For button between paragraphs. + $addMoreWrapper = $button + .closest('table') + .parent() + .find('.paragraphs-add-dialog-template') + .parent(); + + // Set delta to correct position in list of paragraphs. + config.delta = $button.closest('tr').index(); + } + + // Get types from ComboBox. + var paragraphTypes = Drupal.paragraphsAddModal.getParagraphTypes($addMoreWrapper.find('[name$="[add_more_select]"]')); + + // Open dialog in context of "add_more" element, with provided + // configuration and list of paragraph types. + Drupal.paragraphsAddModal.openDialog($addMoreWrapper, config, paragraphTypes); }); } }; @@ -36,37 +159,120 @@ Drupal.paragraphsAddModal = {}; /** + * Fetch list of paragraph types from options provided in combobox. + * + * @param {Object} $typeComboBox + * jQuery element of combobox with list of available paragraph types. + * + * @return {Array} + * List of paragraph type objects with type and it's name. + */ + Drupal.paragraphsAddModal.getParagraphTypes = function ($typeComboBox) { + var paragraphTypes = []; + + $typeComboBox.find('option').each(function (index, optionElement) { + var $option = $(optionElement); + + paragraphTypes.push( + { + 'type': $option.attr('value'), + 'type-name': $option.text() + } + ); + }); + + return paragraphTypes; + }; + + /** * Open modal dialog for adding new paragraph in list. * * @param {Object} $context * jQuery element of form wrapper used to submit request for adding new * paragraph to list. Wrapper also contains dialog template. + * @param {Object} config + * Global configuration for dialog template. It will be applied on dialog + * template to generated customized dialog. + * @param {Array} paragraphTypes + * List of objects with information for paragraph type. Every object + * contains type and name for it and list is used to generate correct action + * elements in customized dialog. */ - Drupal.paragraphsAddModal.openDialog = function ($context) { + Drupal.paragraphsAddModal.openDialog = function ($context, config, paragraphTypes) { + + // Get dialog template and apply data on it. + var $dialogTemplate = $('.paragraphs-add-dialog-template', $context); + var $dialog = _templateClone($dialogTemplate, config); + + // Get row template and duplicate it for every paragraph type. + var $rowTemplate = $dialog.find('.paragraphs-add-dialog-row-template'); + for (var i = 0; i < paragraphTypes.length; i++) { + _templateClone($rowTemplate, paragraphTypes[i]); + } + $rowTemplate.remove(); - $context.dialog({ + // Open dialog after data is applied on template. + $dialog.dialog({ modal: true, resizable: false, - title: drupalSettings.paragraphs.title, - width: 360, close: function () { var $dialog = $(this); // Destroy dialog object. $dialog.dialog('destroy'); + + // Remove created html element for dialog. + $dialog.remove(); } }); - // Close the dialog after a button was clicked. - $('.field-add-more-submit', $context) - .each(function () { - // Use mousedown event, because we are using ajax in the modal add mode - // which explicitly suppresses the click event. - $(this).on('mousedown', function () { + // Attach behaviours to dialog action triggering elements. + $('.paragraphs-add-type-trigger-element', $dialog) + .once('add-click-handler') + .on('mousedown', function (event) { var $this = $(this); + + // Stop default execution of click event. + event.preventDefault(); + event.stopPropagation(); + + Drupal.paragraphsAddModal.setValues( + $context, + { + add_more_select: $this.attr('data-type'), + add_more_delta: $this.attr('data-delta') + } + ); + + // Close dialog afterwards. $this.closest('div.ui-dialog-content').dialog('close'); }); + }; + + /** + * Method to set hidden fields and trigger adding of paragraph. + * + * @param {Object} $context + * Jquery object containing element where form for submitting exists. + * @param {Object} options + * Object with key value pair, where key is name of field that should be set + * and value is value for that field. + */ + Drupal.paragraphsAddModal.setValues = function ($context, options) { + var $submitButton = $('.js-hide input[name$="_add_more"]', $context); + var $wrapper = $submitButton.parent(); + + // Set all field values defined in options. + $.each(options, function (fieldName, fieldValue) { + var $field = $wrapper.find('[name$="[' + fieldName + ']"]'); + + if ($field) { + $field.val(fieldValue); + } }); + + // Trigger ajax call on add button. + $submitButton.trigger('mousedown'); }; }(jQuery, Drupal, drupalSettings)); diff --git a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php index 831988d..c5a3708 100644 --- a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php @@ -259,17 +259,6 @@ class ParagraphsWidget extends WidgetBase { } } } - elseif (isset($widget_state['selected_bundle'])) { - - $entity_type = $entity_manager->getDefinition($target_type); - $bundle_key = $entity_type->getKey('bundle'); - - $paragraphs_entity = $entity_manager->getStorage($target_type)->create(array( - $bundle_key => $widget_state['selected_bundle'], - )); - - $item_mode = 'edit'; - } if ($item_mode == 'closed') { // Validate closed paragraphs and expand if needed. @@ -672,6 +661,10 @@ class ParagraphsWidget extends WidgetBase { $widget_state['paragraphs'][$delta]['display'] = $display; $widget_state['paragraphs'][$delta]['mode'] = $item_mode; + //Display the in between add button + if ($this->getSetting('add_mode') == 'modal') { + $this->buildInBetweenAddButton($element, $id_prefix); + } static::setWidgetState($parents, $field_name, $form_state, $widget_state); } else { @@ -722,6 +715,47 @@ class ParagraphsWidget extends WidgetBase { } /** + * Builds an add paragraph button between paragraphs for opening of modal. + * + * @param array $element + * Render element. + * @param string $id_prefix + * Prefix. + */ + protected function buildInBetweenAddButton(array &$element, $id_prefix) { + if (empty($this->uuid)) { + $this->uuid = \Drupal::service('uuid')->generate(); + } + + $element[$id_prefix . '_area'] = [ + '#type' => 'container', + '#attributes' => [ + 'class' => [ + 'paragraph-type-add-modal', + 'first-button', + ], + ], + '#access' => !$this->isTranslating, + '#weight' => -2000, + ]; + + $element[$id_prefix . '_area']['add_more'] = [ + '#type' => 'submit', + '#value' => $this->t('+'), + '#name' => strtr($id_prefix, '-', '_') . '_add_modal', + '#attributes' => [ + 'class' => [ + 'paragraph-type-add-modal-button', + 'button', + 'js-show', + ], + ], + ]; + + $element['#attached']['library'][] = 'paragraphs/drupal.paragraphs.modal'; + } + + /** * Returns the sorted allowed types for a entity reference field. * * @return array @@ -892,12 +926,6 @@ class ParagraphsWidget extends WidgetBase { '#title' => $field_title, '#description' => $description, ); - - $header_actions = $this->buildHeaderActions($field_state); - if ($header_actions) { - $elements['header_actions'] = $header_actions; - } - } else { $classes = $this->fieldDefinition->isRequired() ? ['form-required'] : []; @@ -976,7 +1004,7 @@ class ParagraphsWidget extends WidgetBase { return $add_more_elements; } - if (in_array($this->getSetting('add_mode'), ['button', 'dropdown', 'modal'])) { + if (in_array($this->getSetting('add_mode'), ['button', 'dropdown'])) { return $this->buildButtonsAddMode(); } @@ -1154,7 +1182,23 @@ class ParagraphsWidget extends WidgetBase { $field_name = $this->fieldDefinition->getName(); $field_title = $this->fieldDefinition->getLabel(); $setting_title = $this->getSetting('title'); - $add_more_elements['add_more_select'] = [ + + $add_more_elements = []; + + // Append template for modal add paragraph dialog. + $add_more_elements['paragraphs_add_dialog_template'] = $this->getModalAddDialogTemplate(); + // Add button at end of list, when modal dialog is used to add paragraphs. + if ($this->getSetting('add_mode') == 'modal') { + $this->buildInBetweenAddButton($add_more_elements, 'first-button'); + + // Selection form elements. + $selection_form_elements['add_more_delta'] = [ + '#type' => 'hidden', + '#title' => 'Delta', + ]; + } + + $selection_form_elements['add_more_select'] = [ '#type' => 'select', '#options' => $this->getAccessibleOptions(), '#title' => $this->t('@title type', ['@title' => $setting_title]), @@ -1167,7 +1211,7 @@ class ParagraphsWidget extends WidgetBase { $text = $this->t('Add another @title', ['@title' => $setting_title]); } - $add_more_elements['add_more_button'] = [ + $selection_form_elements['add_more_button'] = [ '#type' => 'submit', '#name' => strtr($this->fieldIdPrefix, '-', '_') . '_add_more', '#value' => $text, @@ -1181,7 +1225,18 @@ class ParagraphsWidget extends WidgetBase { ], ]; - $add_more_elements['add_more_button']['#suffix'] = $this->t(' to %type', ['%type' => $field_title]); + $selection_form_elements['add_more_button']['#suffix'] = $this->t(' to %type', ['%type' => $title]); + + // If we have a modal, the selection form should be hidden. + if ($this->getSetting('add_mode') == 'modal') { + $add_more_elements['selection_form'] = $selection_form_elements; + $add_more_elements['selection_form']['#type'] = 'container'; + $add_more_elements['selection_form']['#attributes']['class'][] = 'js-hide'; + } + else { + $add_more_elements = $selection_form_elements; + } + return $add_more_elements; } @@ -1193,6 +1248,10 @@ class ParagraphsWidget extends WidgetBase { // Go one level up in the form, to the widgets container. $element = NestedArray::getValue($form, array_slice($button['#array_parents'], 0, -2)); + if (!isset($element['#field_name'])) { + $element = NestedArray::getValue($form, array_slice($button['#array_parents'], 0, -3)); + } + // Add a DIV around the delta receiving the Ajax effect. $delta = $element['#max_delta']; $element[$delta]['#prefix'] = '
' . (isset($element[$delta]['#prefix']) ? $element[$delta]['#prefix'] : ''); @@ -1209,6 +1268,12 @@ class ParagraphsWidget extends WidgetBase { // Go one level up in the form, to the widgets container. $element = NestedArray::getValue($form, array_slice($button['#array_parents'], 0, -2)); + + // The structure of modal is different. + if (!isset($element['#field_name'])) { + $element = NestedArray::getValue($form, array_slice($button['#array_parents'], 0, -3)); + } + $field_name = $element['#field_name']; $parents = $element['#field_parents']; @@ -1217,21 +1282,104 @@ class ParagraphsWidget extends WidgetBase { if ($widget_state['real_item_count'] < $element['#cardinality'] || $element['#cardinality'] == FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED) { $widget_state['items_count']++; + $widget_state['real_item_count']++; } + $position = $widget_state['real_item_count'] - 1; if (isset($button['#bundle_machine_name'])) { $widget_state['selected_bundle'] = $button['#bundle_machine_name']; } + elseif ($widget_state['add_mode'] == 'modal') { + $widget_state['selected_bundle'] = $element['add_more']['selection_form']['add_more_select']['#value']; + if ($element['add_more']['selection_form']['add_more_delta']['#value'] !== "") { + $position = $element['add_more']['selection_form']['add_more_delta']['#value']; + } + } else { $widget_state['selected_bundle'] = $element['add_more']['add_more_select']['#value']; } + //Create new paragraph entity. + $entity_type = \Drupal::entityTypeManager()->getDefinition('paragraph'); + $bundle_key = $entity_type->getKey('bundle'); + + $paragraphs_entity = \Drupal::entityTypeManager()->getStorage('paragraph')->create(array( + $bundle_key => $widget_state['selected_bundle'], + )); + + $paragraph = [ + 'entity' => $paragraphs_entity, + 'mode' => 'edit', + ]; + + if (isset($widget_state['paragraphs'][$position])) { + $paragraph['display'] = $widget_state['paragraphs'][$position]['display']; + } + + // Add paragraph to the widget state. + // This also creates it, when it doesn't exist. + $widget_state['paragraphs'][] = $paragraph; + + // If we use a modal, we have to place the new paragraph + // in the correct position. + if ($widget_state['add_mode'] == 'modal') { + // Clean form_state. + $user_input = $user_input_save = $form_state->getUserInput(); + + // Temporarily remove 'add_more' from array. + unset($user_input[$field_name]['add_more']); + + self::normalizeWeights($user_input[$field_name], $position); + + // It is important, that the key maps with the one from $widget_state + // The weight handles the position. + $key = count($widget_state['paragraphs']) - 1; + $item[$key] = [ + 'subform' => [], + '_weight' => $position, + ]; + + $user_input[$field_name] += $item; + + // Add back 'add_more'. + $user_input[$field_name]['add_more'] = $user_input_save[$field_name]; + + $form_state->setUserInput($user_input); + } static::setWidgetState($parents, $field_name, $form_state, $widget_state); $form_state->setRebuild(); } /** + * This resets the weights, ascending, starting from 0. + * + * It keeps the indices. + * + * E.g. [-6, -5, -4] will become [0, 1, 2] + * + * Starting at position, the elements will get weight+1, to make space + * for a new element. + * + * E.g. [-6, -5, -4], position = 1, will become [ 0, 2, 3] + * + * @param array $array + * The array, which weights should be normalised. + * @param int $position + * The position from which on the weights will be increased by 1. + */ + private static function normalizeWeights(array &$array, $position) { + $weigth = 0; + foreach ($array as &$value) { + if ($weigth == $position) { + $weigth++; + } + $value['_weight'] = $weigth; + $weigth++; + } + } + + /** * Creates a duplicate of the paragraph entity. */ public static function duplicateSubmit(array $form, FormStateInterface $form_state) { @@ -1373,7 +1521,7 @@ class ParagraphsWidget extends WidgetBase { static::setWidgetState($element['#field_parents'], $field_name, $form_state, $widget_state); } - /** + /** * Special handling to validate form elements with multiple values. * * @param array $elements @@ -1622,6 +1770,21 @@ class ParagraphsWidget extends WidgetBase { } /** + * Returns render array for template of add paragraph modal dialog. + * + * @return array + * Render array. + */ + protected function getModalAddDialogTemplate() { + return [ + '#theme' => 'paragraphs_add_dialog', + '#attached' => [ + 'library' => ['paragraphs/drupal.paragraphs.modal'], + ], + ]; + } + + /** * {@inheritdoc} */ public static function isApplicable(FieldDefinitionInterface $field_definition) { diff --git a/templates/paragraphs-add-dialog.html.twig b/templates/paragraphs-add-dialog.html.twig index 9706712..0c7b5e8 100644 --- a/templates/paragraphs-add-dialog.html.twig +++ b/templates/paragraphs-add-dialog.html.twig @@ -3,21 +3,26 @@ * @file * Default theme implementation of modal add paragraph dialog template. * + * This template for dialog will be handled in javascript, where data-[key]="[attribute]" + * attributes will be replaced with data provided for that key. New attribute will be + * created like follows: [attribute]="[value-for-key]". + * * Following classes have custom use: - * - paragraphs-add-dialog - is used to wrap the dialog. - * - paragraphs-add-dialog-row - is used to wrap the paragraph type rows. + * - paragraphs-add-dialog-template - is used to clone dialog. + * - paragraphs-add-dialog-row-template - is used to clone paragraph type rows. * + * All listed classes will be renamed in final created dialog with "-template" sufix and + * they can be used with that name for theming. * * @ingroup themeable */ #} -{{ add }} -
+ +