FFWEB-2196 collapse current asn group if user clicks outside it or on another group

Author: a.laurowski

CHANGELOG.md

@@ -1,5 +1,5 @@
 # Changelog
-## UNRELEASED
+## [Unreleased]
 ### Add 
  - Export
   - Added new field provider `Omikron\FactFinder\Shopware6\Export\Field\Layout` applicable to CMS Export
@@ -9,6 +9,10 @@
   - hide `<ff-asn-group>` responsible for rendering category filters as this breaks the Web Components navigation mode.
    User should navigate between categories using shop main navigation
 
+### Fix
+ - Category, SearchResult
+  - fix `ff-asn-group` does not collapse if user clicks outside it or on another `ff-asn-group`
+    
 ## [v3.0.1] - 2022.03.10
 ### Fix
  - `Omikron\FactFinder\Shopware6\Subscriber\CategoryView`

src/Resources/app/storefront/dist/storefront/js/omikron-fact-finder.js

@@ -1,4 +1,6 @@
 import TrackingPlugin from './plugin/tracking.plugin';
+import AsnPlugin from './plugin/asn-plugin';
 
 const PluginManager = window.PluginManager;
-PluginManager.register('TrackingPlugin', TrackingPlugin)
+PluginManager.register('TrackingPlugin', TrackingPlugin);
+PluginManager.register('AsnPlugin', AsnPlugin);

src/Resources/app/storefront/src/main.js

@@ -0,0 +1,37 @@
+import Plugin from 'src/plugin-system/plugin.class';
+
+export default class AsnPlugin extends Plugin
+{
+    init() {
+        this.registerEvents();
+    }
+
+    registerEvents() {
+        document.addEventListener('click', this._handleToggleFilter.bind(this));
+    }
+
+    _handleToggleFilter(event) {
+        const getAllGroupsExceptClicked = e => {
+            const clickedGroup = e.target.closest('ff-asn-group');
+
+            return [...document.querySelectorAll('ff-asn-group')].filter(g => g !== clickedGroup)
+        }
+
+        const isAsnGroup = e => {
+             return e.path.find(p => p.tagName === 'ff-asn-group'.toUpperCase());
+        }
+
+        if (!isAsnGroup(event)) {
+            document.querySelectorAll('ff-asn-group').forEach(g => {
+                if (g.opened) g.toggle(true);
+            })
+        }
+
+        if (isAsnGroup(event)) {
+            getAllGroupsExceptClicked(event).forEach(g => {
+                if (g.opened) g.toggle(true);
+            })
+        }
+    }
+}
+