Few tweaks for item-appender.

swissup · Jan 12, 2021 · edb2bba · edb2bba
1 parent f3b5166
commit edb2bba
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/view/adminhtml/web/css/system-config/item-appender.less b/view/adminhtml/web/css/system-config/item-appender.less
@@ -9,8 +9,7 @@
     .items {
         padding: 0;
         transition: transform ease-in-out .2s;
-        border: 1px solid;
-        border-color: #e3e3e3;
+        border: 1px solid #e3e3e3;
         border-width: 1px 1px 1px 0;
         display: block !important;
         height: auto !important;
@@ -28,11 +27,15 @@
             border: none;
             margin: 0;
             padding-left: 30px;
-            background-color: #fff !important;
+            background-color: #f1f1f1 !important;
 
             &:hover {
                 background-color: #e4e4e4 !important;
             }
+
+            ._active > & {
+                background-color: #fff !important;
+            }
         }
     }
 

diff --git a/view/adminhtml/web/js/system-config/item-appender.js b/view/adminhtml/web/js/system-config/item-appender.js
@@ -4,7 +4,7 @@ define([
     'use strict';
 
     return function (options, element) {
-        var $destination;
+        var $toggler;
 
         options = $.extend({
             content: '',
@@ -13,27 +13,25 @@ define([
             togglerClass: 'appended-items-toggler'
         }, options);
 
-        /**
-         * Toggler click handler
-         *
-         * @param  {jQuery.event} event
-         */
-        function togglerClick(event) {
-            event.stopPropagation();
-            $(event.target)
-                .siblings('.' + options.appendedClass)
-                .toggleClass(options.hiddenClass);
-        }
-
-        $destination = $(element);
         $('<div></div>')
-            .appendTo($destination)
+            .appendTo(element)
             .addClass(options.appendedClass)
             .addClass(options.hiddenClass)
             .append($(options.content).clone());
-        $('<div></div>')
+        $toggler = $('<div></div>')
             .addClass(options.togglerClass)
-            .appendTo($destination)
-            .click(togglerClick);
+            .appendTo(element);
+
+        $(document).click(function (event) {
+            var $appendedContent = $toggler.siblings('.' + options.appendedClass);
+
+            if ($toggler.get(0) === event.target) {
+                // clicked on toggler
+                $appendedContent.toggleClass(options.hiddenClass);
+            } else {
+                // clicked somewhere else
+                $appendedContent.addClass(options.hiddenClass);
+            }
+        });
     };
 });