From 3c3da0633b9dc420aa402e425ccc12ddaa3349c7 Mon Sep 17 00:00:00 2001
From: Justin Toupin <justin@atendesigngroup.com>
Date: Sun, 4 Oct 2020 10:10:57 -0600
Subject: [PATCH] entire layout option is now clickable

---
 css/layout-paragraphs-widget.css              | 39 +++++++++----------
 js/layout-paragraphs-widget.js                | 36 -----------------
 .../FieldWidget/LayoutParagraphsWidget.php    |  6 +--
 3 files changed, 22 insertions(+), 59 deletions(-)

diff --git a/css/layout-paragraphs-widget.css b/css/layout-paragraphs-widget.css
index 09d88868..6861c684 100644
--- a/css/layout-paragraphs-widget.css
+++ b/css/layout-paragraphs-widget.css
@@ -33,42 +33,41 @@ fieldset.layout-paragraphs-field > legend {
 .layout-paragraphs-field .layout-paragraphs-disabled-wrapper {
   background: #fff;
 }
-.layout-paragraphs-field .layout-select--list {
+.layout-paragraphs-field .layout-select {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
 }
-.layout-paragraphs-field .layout-select--list-item {
+.layout-paragraphs-field .layout-select__item label {
+  display: flex;
+  align-items: center;
+  font-size: small;
   padding: 10px;
   background: none;
   cursor: pointer;
-  margin: 10px 10px 0 0;
+  margin: 0 10px 10px 0;
   text-align: left;
   width: 150px;
-  outline: 1px solid #d0d0d0;
+  border: 1px solid #d0d0d0;
 }
-.layout-paragraphs-field .layout-select--list-item input.layout-paragraphs-layout-select {
-  position: fixed;
+.layout-paragraphs-field .layout-select__item input.layout-paragraphs-layout-select {
+  position: absolute;
   opacity: 0;
-  pointer-events: none;
 }
-.layout-paragraphs-field .layout-select--list-item .form-item {
-  margin-top: 0;
+.layout-paragraphs-field input:checked + label {
+  border: 1px solid blue;
 }
-.layout-paragraphs-field .layout-select--list-item label {
-  font-size: small;
+.layout-paragraphs-field input:focus + label {
+  outline: auto 5px Highlight;
+  outline: auto 5px -webkit-focus-ring-color;
 }
-.layout-paragraphs-field .layout-select--list-item .layout-icon-wrapper {
-  float: left;
+.layout-paragraphs-field .layout-select__item-icon {
   margin-right: 10px;
+  padding: 0;
+  display: block;
 }
-.layout-paragraphs-field .layout-select--list-item.active {
-  background: #fff;
-  outline: 1px solid blue;
-}
-.layout-paragraphs-field .layout-select--list-item .layout-icon {
-  float: left;
-  margin: 0;
+.layout-paragraphs-field .layout-select__item-icon svg {
+  display: block;
 }
 .layout-paragraphs-field .layout-paragraphs-add-item {
   text-align: center;
diff --git a/js/layout-paragraphs-widget.js b/js/layout-paragraphs-widget.js
index f6c5c334..b2ac3c50 100644
--- a/js/layout-paragraphs-widget.js
+++ b/js/layout-paragraphs-widget.js
@@ -740,34 +740,6 @@
       $widget.data("drake", drake);
     }
   }
-  /**
-   * Enhances the radio button select for choosing a layout.
-   * @param {Object} layoutList The list of layout items.
-   */
-  function enhanceRadioSelect(layoutList) {
-    const $layoutRadioItem = $(
-      "input.layout-paragraphs-layout-select",
-      layoutList
-    );
-    $layoutRadioItem.on("change", e => {
-      const $radioItem = $(e.currentTarget);
-      const $wrapper = $radioItem.closest(".layout-select--list-item");
-      const $layoutParagraphsField = $radioItem.closest(
-        ".layout-paragraphs-field"
-      );
-      if (isLoading($layoutParagraphsField)) {
-        return false;
-      }
-      setLoading($radioItem.closest(".ui-dialog"));
-      $wrapper.siblings().removeClass("active");
-      $wrapper.addClass("active");
-    });
-    $layoutRadioItem.filter(":checked").each((radioIndex, radioItem) => {
-      $(radioItem)
-        .closest(".layout-select--list-item")
-        .addClass("active");
-    });
-  }
   /**
    * Ajax Command to set state to loaded.
    * @param {object} ajax The ajax object.
@@ -939,14 +911,6 @@
           )
           .prependTo($(layoutParagraphsItem));
       });
-    /**
-     * Enhance radio buttons.
-     */
-    $(".layout-select--list", $widget)
-      .once("layout-select-enhance-radios")
-      .each((index, layoutList) => {
-        enhanceRadioSelect(layoutList);
-      });
     /**
      * Only show disabled items if there are items in the field.
      * Runs every time DOM is updated.
diff --git a/src/Plugin/Field/FieldWidget/LayoutParagraphsWidget.php b/src/Plugin/Field/FieldWidget/LayoutParagraphsWidget.php
index ff63c30e..bdb717c7 100644
--- a/src/Plugin/Field/FieldWidget/LayoutParagraphsWidget.php
+++ b/src/Plugin/Field/FieldWidget/LayoutParagraphsWidget.php
@@ -1336,14 +1336,14 @@ 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);
-      $title = new FormattableMarkup('<span>@title</span><span class="layout-icon-wrapper">@icon</span>', [
+      $title = new FormattableMarkup('<span class="layout-select__item-icon">@icon</span><span class="layout-select__item-title">@title</span>', [
         '@title' => $element[$key]['#title'],
         '@icon' => $rendered_icon,
       ]);
       $element[$key]['#title'] = $title;
-      $element[$key]['#wrapper_attributes']['class'][] = 'layout-select--list-item';
+      $element[$key]['#wrapper_attributes']['class'][] = 'layout-select__item';
     }
-    $element['#wrapper_attributes'] = ['class' => ['layout-select--list']];
+    $element['#wrapper_attributes'] = ['class' => ['layout-select']];
     return $element;
   }
 
-- 
GitLab