Merge pull request #92 from findify/FI-7918/perfomance-updates

Perfomance and ADA updates
findify · Aug 6, 2024 · 567c23c · 567c23c
2 parents b2f6660 + d27a5dc
commit 567c23c
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 109 deletions.
diff --git 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
@@ -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);
+};
diff --git 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
@@ -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 %}
diff --git 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
@@ -9,40 +9,12 @@
     placeholder="{{ 'findify.filters.search_placeholder' | t }}"
     type="text"
     ref="{{ name }}" />
-  <svg
-    width="14"
-    height="15"
-    class="findify-filters--checkbox-search-icon"
-    viewBox="0 0 14 15">
-    <path
-      d="M4.896 9.262c.612 0 1.176-.153 1.692-.459A3.396 3.396 0 0 0 7.812 7.57c.3-.516.45-1.08.45-1.692 0-.612-.15-1.176-.45-1.692a3.327 3.327 0 0 0-1.224-1.224c-.516-.3-1.08-.45-1.692-.45-.612 0-1.176.15-1.692.45-.516.3-.927.708-1.233 1.224a3.257 3.257 0 0 0-.459 1.692c0 .612.153 1.176.459 1.692.306.516.717.927 1.233 1.233.516.306 1.08.459 1.692.459zm4.5 0l3.726 3.726-1.134 1.134-3.726-3.744v-.594l-.216-.198c-.42.372-.903.657-1.449.855a4.951 4.951 0 0 1-1.701.297 4.837 4.837 0 0 1-2.457-.648A4.806 4.806 0 0 1 .666 8.344 4.784 4.784 0 0 1 0 5.878c0-.888.219-1.707.657-2.457a4.812 4.812 0 0 1 1.782-1.773A4.837 4.837 0 0 1 4.896 1c.888 0 1.71.222 2.466.666A4.757 4.757 0 0 1 9.099 3.43a4.84 4.84 0 0 1 .639 2.448c0 .6-.099 1.173-.297 1.719a4.451 4.451 0 0 1-.855 1.449l.198.216h.612z"
-      fill="currentColor"
-      fill-rule="evenodd"></path>
+  <svg class="findify-filters--checkbox-search-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
+    <circle cx="5" cy="5" r="4.25" stroke="black" stroke-width="1.5"/>
+    <line x1="8.53033" y1="8.46967" x2="12.5303" y2="12.4697" stroke="black" stroke-width="1.5"/>
   </svg>
 </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>
diff --git 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"