diff --git a/css/layout-paragraphs-widget.css b/css/layout-paragraphs-widget.css index a2941fe8b2c8ecb1310e50e14917ee38f2d175b9..388da072a6779ef75b7c39a0210027b3f7b6cb5f 100644 --- a/css/layout-paragraphs-widget.css +++ b/css/layout-paragraphs-widget.css @@ -39,15 +39,13 @@ fieldset.layout-paragraphs-field > legend { justify-content: flex-start; } .layout-paragraphs-field .layout-select--list-item { - padding: 10px; + padding: 10px 10px 10px 5px; background: none; cursor: pointer; margin: 10px 10px 10px 0; text-align: left; width: 150px; -} -.layout-paragraphs-field .layout-select--list-item input[type=radio] { - display: none; + outline: 1px solid #d0d0d0; } .layout-paragraphs-field .layout-select--list-item .form-item { margin-top: 0; @@ -55,13 +53,18 @@ fieldset.layout-paragraphs-field > legend { .layout-paragraphs-field .layout-select--list-item label { font-size: small; } +.layout-paragraphs-field .layout-select--list-item input { + float: left; + margin-right: 5px; + margin-top: 23px; +} .layout-paragraphs-field .layout-select--list-item .layout-icon-wrapper { float: left; margin-right: 10px; } .layout-paragraphs-field .layout-select--list-item.active { background: #fff; - outline: 2px dotted blue; + outline: 1px solid blue; } .layout-paragraphs-field .layout-select--list-item .layout-icon { float: left; diff --git a/js/layout-paragraphs-widget.js b/js/layout-paragraphs-widget.js index 488ff0ba4e5b5be86c44dbfb8952ba02ceda3b8f..fcfa2d79732fc3e1ff3dd74f0c5e38cc47d57779 100644 --- a/js/layout-paragraphs-widget.js +++ b/js/layout-paragraphs-widget.js @@ -405,6 +405,11 @@ ) ); } + if ($container.data("focusedElement")) { + $(`#${$container.data("focusedElement")}`) + .find("button:first") + .focus(); + } } /** * Runs all necessary updates to widget. @@ -421,6 +426,7 @@ const $widget = $layoutItem.closest(".layout-paragraphs-field"); const widgetSettings = $widget.data("widgetSettings"); const maxDepth = widgetSettings.maxDepth; + // Todo: respect max depth nesting settings for keyboard interactions. let dir; switch (e.keyCode) { @@ -523,7 +529,7 @@ default: break; } - $widget.find(".layout-paragraphs-moving-message").remove(); + $widget.find(".layout-paragraphs-moving-message").remove(); return false; } function startMove(e) { @@ -750,11 +756,13 @@ */ Drupal.AjaxCommands.prototype.layoutParagraphsInsert = (ajax, response) => { const { settings, content } = response; + const $content = $(".layout-paragraphs-item", `<div>${content}</div>`); if ($(`#${settings.element_id}`).length) { - $(`#${settings.element_id}`).replaceWith(content); + $(`#${settings.element_id}`).replaceWith($content); } else if (settings.target_id && settings.insert_method) { - $(`#${settings.target_id}`)[settings.insert_method](content); + $(`#${settings.target_id}`)[settings.insert_method]($content); } + $content.closest(".layout-paragraphs-field").data("focusedElement", $content.attr("id")); }; /** * The main layout-paragraphs Widget behavior. diff --git a/src/Plugin/Field/FieldWidget/LayoutParagraphsWidget.php b/src/Plugin/Field/FieldWidget/LayoutParagraphsWidget.php index 6345b71decdfcb4590fe9f16ee743750a91e0101..9a6112e6e42549af07d5fbfcddb7dc9e31deb4ed 100644 --- a/src/Plugin/Field/FieldWidget/LayoutParagraphsWidget.php +++ b/src/Plugin/Field/FieldWidget/LayoutParagraphsWidget.php @@ -35,6 +35,7 @@ use Drupal\Core\Ajax\AppendCommand; use Drupal\Core\Ajax\RemoveCommand; use Drupal\Core\Ajax\CloseDialogCommand; use Drupal\Core\Ajax\ReplaceCommand; +use Drupal\Core\Ajax\InvokeCommand; use Drupal\Core\Ajax\SettingsCommand; use Drupal\paragraphs\ParagraphInterface; use Drupal\paragraphs\ParagraphsTypeInterface; @@ -1334,21 +1335,12 @@ class LayoutParagraphsWidget extends WidgetBase implements ContainerFactoryPlugi $definition = $this->layoutPluginManager->getDefinition($layout_name); $icon = $definition->getIcon(40, 60, 1, 0); $rendered_icon = $this->renderer->render($icon); - $radio_element = $element[$key]; - $radio_with_icon_element = [ + $element[$key]['#wrapper_attributes']['class'][] = 'layout-select--list-item'; + $element[$key]['#children']['icon'] = [ '#type' => 'container', - '#attributes' => [ - 'class' => ['layout-select--list-item'], - 'tabindex' => 0, - ], - 'icon' => [ - '#type' => 'inline_template', - '#template' => '<div class="layout-icon-wrapper">{{ img }}</div>', - '#context' => ['img' => $rendered_icon], - ], - 'radio' => $radio_element, + '#attributes' => ['class' => ['layout-icon-wrapper']], + 'icon' => ['#markup' => $rendered_icon], ]; - $element[$key] = $radio_with_icon_element; } $element['#wrapper_attributes'] = ['class' => ['layout-select--list']]; return $element;