From 4f83e47dde1265102fcbddceeaee5c028b68db6b Mon Sep 17 00:00:00 2001
From: Yaroslav <rakshayaroslav37@gmail.com>
Date: Tue, 23 Jul 2024 14:34:55 +0300
Subject: [PATCH] Perfomance and ADA updates

---
 assets/findify-filter.css                   | 16 +++--
 assets/findify-filter.js                    | 32 ++++++++++
 assets/findify-sorting.css                  |  5 +-
 sections/findify-filter-group.liquid        | 65 +--------------------
 snippets/findify-filter-price-range.liquid  | 17 +++---
 snippets/findify-filter-search-input.liquid | 24 +-------
 snippets/findify-head-injector.liquid       |  1 +
 7 files changed, 60 insertions(+), 100 deletions(-)
 create mode 100644 assets/findify-filter.js

diff --git a/assets/findify-filter.css b/assets/findify-filter.css
index 38085a5..d6fcff3 100644
--- a/assets/findify-filter.css
+++ b/assets/findify-filter.css
@@ -128,8 +128,8 @@ button {
   cursor: pointer;
 }
 
-#findify-filters *[aria-hidden="true"] {
-  display: none !important;
+#findify-filters *[data-opened="true"] {
+  display: block;
 }
 
 /* SECTION - HEADER & BODY EXPAND */
@@ -139,11 +139,12 @@ button {
   background: #fff;
   width: 100%;
 }
-.findify-filters-body[aria-expanded="false"] {
+
+.findify-filters-body[data-opened="false"] {
   display: none;
 }
 
-.findify-filter-group:has(.findify-filters-body[aria-expanded="false"])
+.findify-filter-group:has(.findify-filters-body[aria-expanded="true"])
   .findify-filters-header
   svg {
   transform: rotate(180deg);
@@ -469,13 +470,16 @@ button {
 }
 
 .findify-price-range-input-container {
-  display: flex;
-  align-items: center;
   padding: 0 8px;
   border: 1px solid #000;
   background: #fff;
 }
 
+.findify-price-range-input-container label {
+  display: flex;
+  align-items: center;
+}
+
 .price-range-input {
   box-shadow: none;
   max-width: 50px;
diff --git a/assets/findify-filter.js b/assets/findify-filter.js
new file mode 100644
index 0000000..dfc79f9
--- /dev/null
+++ b/assets/findify-filter.js
@@ -0,0 +1,32 @@
+const filterSearch = (filter_group_id, input_id) => {
+    const filterSelector = '.findify-filters-checkbox-item';
+    const filterTextSelector = 'label';
+
+    const filterGroupElement = document.getElementById(filter_group_id);
+    const filters = filterGroupElement.querySelectorAll(filterSelector);
+    const input = document.getElementById(input_id);
+
+    const inputHandler = (e) => {
+        const value = e.target.value.trim().toLowerCase();
+        filters.forEach(item => {
+            const text = item.querySelector(filterTextSelector).innerText.trim().toLowerCase();
+            const shouldHide = value && !text.includes(value);
+            item.setAttribute("aria-hidden", shouldHide.toString());
+        });
+    };
+
+    input.addEventListener("input", inputHandler);
+};
+
+const collapseFilter = (element_id) => {
+    const filterGroupElement = document.getElementById(element_id);
+    const [header, body] = filterGroupElement.querySelectorAll('div');
+
+    const headerClickHandler = (e) => {
+        e.preventDefault();
+        const isOpen = body.getAttribute("data-opened") === "true";
+        body.setAttribute("data-opened", (!isOpen).toString());
+    };
+
+    header.addEventListener("click", headerClickHandler);
+};
\ No newline at end of file
diff --git a/assets/findify-sorting.css b/assets/findify-sorting.css
index 9405eb6..7aa8a3b 100644
--- a/assets/findify-sorting.css
+++ b/assets/findify-sorting.css
@@ -101,8 +101,11 @@
 
   .findify-sorting-mobile-list li {
     list-style: none;
-    justify-content: left;
+  }
+
+  .findify-sorting-mobile-list li label {
     display: flex;
+    justify-content: start;
   }
 
   .findify-sorting-mobile-list li input {
diff --git a/sections/findify-filter-group.liquid b/sections/findify-filter-group.liquid
index 6352bed..af5b35b 100644
--- a/sections/findify-filter-group.liquid
+++ b/sections/findify-filter-group.liquid
@@ -51,7 +51,7 @@
       </label>
       {% render 'findify-icon-arrow' %}
     </div>
-    <div class="findify-filters-body" aria-expanded="true">
+    <div class="findify-filters-body" data-opened="true">
       {% case component %}
         {% when 'text' %}
           {% render 'findify-filter-text'
@@ -82,67 +82,6 @@
   </div>
 
   <script>
-      const collapseFilter = () => {
-        const element_id = "{{ element_id }}";
-        const filterGroupElement = document.getElementById(element_id);
-        const [header, body] = filterGroupElement.querySelectorAll('div');
-        const isOneFilterOpen = document.querySelector('.findify-one-filter-open');
-    
-        const headerClickHandler = (e) => {
-          e.preventDefault();
-
-          if(isOneFilterOpen){
-            const isExpanded = e.target
-              .parentNode
-              .parentNode
-              .querySelector('.findify-filters-body')?.getAttribute('aria-expanded');
-            if(isExpanded == 'false')
-              document.querySelector('#findify-filters [aria-expanded="true"]')?.setAttribute('aria-expanded', 'false'); 
-          }
-
-          const isOpen = body.getAttribute("aria-expanded") === "true";
-          body.setAttribute("aria-expanded", (!isOpen).toString());
-        };
-    
-        header.addEventListener("click", headerClickHandler);
-      };
-      
-      const filtersPosition = document.querySelector('#findify-filters').getBoundingClientRect().top;
-      const filterClass = document.querySelector('#findify-filters').className;
-      const searchWrapperTop = document.querySelector('.findify-search-container').getBoundingClientRect().x;
-      const isHorizontal = document.querySelector('.findify-search-section.filters-horizontal');
-
-      const fixedFilters = () => {
-        const scrollPosition = window.scrollY;
-        const classNames = document.querySelector('#findify-filters').className;
-        const searchWrapperHeight = document.querySelector('.findify-search-main').offsetHeight;
-        const filtersWrapperHeight = document.querySelector('#findify-filters').offsetHeight;
-        
-        if(scrollPosition >= filtersPosition && !classNames.includes('fixed')){
-          document.querySelector('#findify-filters').className = classNames?.replace('absolute', '');
-          document.querySelector('#findify-filters').style.top = `0px`;
-          document.querySelector('#findify-filters').className += ' fixed';
-        }
-
-        if(scrollPosition > (searchWrapperHeight - 50) && !isHorizontal){
-
-          document.querySelector('#findify-filters').className = filterClass;
-          document.querySelector('#findify-filters').className += ' absolute';
-          document.querySelector('#findify-filters').style.top = `${searchWrapperHeight - filtersWrapperHeight}px`;
-        }
-
-        if( (scrollPosition - 80) < searchWrapperTop) 
-          document.querySelector('#findify-filters').className = classNames.replace('fixed', '');
-      }
-    
-      const isSticky = document.querySelector('.findify-filters-sticky');
-      if(isSticky) {
-        window.addEventListener('scroll', fixedFilters);
-        document.querySelectorAll('#shopify-section-findify-filter-group').forEach( item => {
-          item.addEventListener('click', fixedFilters);
-        })
-      }
-
-      collapseFilter();
+      collapseFilter("{{ element_id }}");
   </script>
 {% endif %}
\ No newline at end of file
diff --git a/snippets/findify-filter-price-range.liquid b/snippets/findify-filter-price-range.liquid
index 50de00c..08fcc71 100644
--- a/snippets/findify-filter-price-range.liquid
+++ b/snippets/findify-filter-price-range.liquid
@@ -19,13 +19,16 @@
     </div>
     <span>-</span>
     <div class="findify-price-range-input-container">
-      <input
-        min="{{ min_value }}"
-        max="{{ max_value }}"
-        type="number"
-        class="price-range-input"
-        id="{{ input_to_selector_id }}">
-      <span>{{ currency }}</span>
+      <label>
+        <input
+          min="{{ min_value }}"
+          max="{{ max_value }}"
+          type="number"
+          class="price-range-input"
+          id="{{ input_from_selector_id }}"
+        >
+        {{ currency }}
+      </label>
     </div>
   </div>
   <button id='{{ submit_btn_selector_id }}'>{{ 'findify.filters.go' | t }}</button>
diff --git a/snippets/findify-filter-search-input.liquid b/snippets/findify-filter-search-input.liquid
index caf86a8..f051644 100644
--- a/snippets/findify-filter-search-input.liquid
+++ b/snippets/findify-filter-search-input.liquid
@@ -22,27 +22,5 @@
 </div>
 
 <script>
-  const filterSearch = () => {
-    const filter_group_id = "{{ filter_group_element_id }}";
-    const input_id = "{{ input_id }}";
-    const filterSelector = '.findify-filters-checkbox-item';
-    const filterTextSelector = 'label';
-
-    const filterGroupElement = document.getElementById(filter_group_id);
-    const filters = filterGroupElement.querySelectorAll(filterSelector);
-    const input = document.getElementById(input_id);
-
-    const inputHandler = (e) => {
-        const value = e.target.value.trim().toLowerCase();
-        filters.forEach(item => {
-            const text = item.querySelector(filterTextSelector).innerText.trim().toLowerCase();
-            const shouldHide = value && !text.includes(value);
-            item.setAttribute("aria-hidden", shouldHide.toString());
-        });
-    };
-
-    input.addEventListener("input", inputHandler);
-  };
-
-  filterSearch();
+  filterSearch("{{ filter_group_element_id }}", "{{ input_id }}");
 </script>
\ No newline at end of file
diff --git a/snippets/findify-head-injector.liquid b/snippets/findify-head-injector.liquid
index e242ba2..2954b43 100644
--- a/snippets/findify-head-injector.liquid
+++ b/snippets/findify-head-injector.liquid
@@ -38,6 +38,7 @@
 </script>
 
 <script src="{{ 'findify-analytics.js' | asset_url }}" defer></script>
+<script src="{{ 'findify-filter.js' | asset_url }}" defer></script>
 
 <link
   rel="stylesheet"