Vertical filter (Shopify#1443)

Gravytrain-UK · Mar 30, 2022 · 6b52e94 · 6b52e94
1 parent 3876343
commit 6b52e94
Show file tree

Hide file tree

Showing 60 changed files with 1,345 additions and 363 deletions.
diff --git a/assets/component-facets.css b/assets/component-facets.css
@@ -199,16 +199,23 @@
 .facets__summary {
   color: rgba(var(--color-foreground), 0.75);
   font-size: 1.4rem;
-  margin-bottom: 1.5rem;
   padding: 0 1.75rem 0 0;
+  margin-bottom: 1.5rem;
+}
+
+.facets__disclosure fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
 .facets__disclosure[open] .facets__summary,
 .facets__summary:hover {
   color: rgb(var(--color-foreground));
 }
 
-.facets__disclosure[open] .facets__display {
+.facets__disclosure[open] .facets__display,
+.facets__disclosure-vertical[open] .facets__display-vertical  {
   animation: animateMenuOpen var(--duration-default) ease;
 }
 
@@ -295,6 +302,10 @@
   -webkit-appearance: none;
 }
 
+.no-js .facet-checkbox input[type='checkbox'] {
+  z-index: 0;
+}
+
 .facet-checkbox > svg {
   background-color: rgb(var(--color-background));
   margin-right: 1.2rem;
@@ -415,7 +426,7 @@ span.active-facets__button-inner:after {
 
   .active-facets__button-wrapper *,
   span.active-facets__button-inner {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
   }
 }
 
@@ -437,6 +448,7 @@ span.active-facets__button-inner:after {
 
   .active-facets__button-wrapper {
     padding-top: 0;
+    margin-left: 1.2rem;
   }
 }
 
@@ -499,6 +511,26 @@ a.active-facets__button.focused .active-facets__button-inner,
   display: none;
 }
 
+.facets-vertical .active-facets .active-facets-vertical-filter:only-child > facet-remove {
+  display: none;
+}
+
+.facets-vertical .active-facets-vertical-filter {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.facets-vertical .active-facets-vertical-filter .active-facets__button-wrapper {
+  padding-top: 0;
+  display: flex;
+  align-items: flex-start;
+}
+
+.facets-vertical .active-facets__button {
+  margin-top: 0;
+}
+
 .active-facets__button.disabled,
 .mobile-facets__clear.disabled {
   pointer-events: none;
@@ -832,6 +864,8 @@ input.mobile-facets__checkbox {
   display: flex;
   z-index: 2;
   margin-top: auto;
+  background-color:rgb(var(--color-background));
+  background: var(--gradient-background);
 }
 
 .mobile-facets__footer > * + * {
@@ -895,7 +929,8 @@ input.mobile-facets__checkbox {
   visibility: hidden;
 }
 
-.product-count .loading-overlay__spinner {
+.product-count .loading-overlay__spinner,
+.product-count-vertical .loading-overlay__spinner  {
   display: none;
   position: absolute;
   right: 0;
@@ -907,3 +942,168 @@ input.mobile-facets__checkbox {
 .product-count__text.loading + .loading-overlay__spinner {
   display: block;
 }
+
+@media screen and (min-width: 750px) {
+  .facets-vertical {
+    display: flex;
+  }
+
+  .facets-wrap-vertical {
+    border: none;
+    padding-left: 0;
+  }
+
+  .facets__form-vertical {
+    display: flex;
+    flex-direction: column;
+    width: 26rem;
+  }
+
+  .facets__disclosure-vertical {
+    border-top: solid rgba(var(--color-foreground), 0.1);
+    margin-right: 0;
+  }
+
+  .facets-vertical .facets__summary {
+    padding-top: 1.5rem;
+    margin-bottom: 0;
+    padding-bottom: 1.5rem;
+  }
+
+  .facets__heading--vertical {
+    margin: 0 0 1.5rem 0;
+    font-size: 1.5rem;
+  }
+
+  .facets__header-vertical {
+    padding: 1.5rem 2rem 1.5rem 0;
+    font-size: 1.4rem;
+  }
+
+  .facets__display-vertical {
+    padding-bottom: 1.5rem;
+  }
+
+  .facets-vertical .facets-wrapper {
+    padding-right: 3rem;
+  }
+
+  .facets-vertical .product-grid-container {
+    width: 100%;
+  }
+
+  .facets-vertical-form {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .product-count-vertical {
+    margin-left: 3.5rem;
+  }
+
+  .facets-vertical .active-facets__button-wrapper {
+    margin-bottom: 2rem;
+  }
+
+  .facets-vertical .no-js .facets__button-no-js {
+    transform: none;
+  }
+
+  .facets-vertical .no-js .facet-filters__field {
+    justify-content: flex-start;
+    padding-bottom: 1rem;
+    padding-top: 2rem;
+  }
+
+  .facets-vertical .facets__price {
+    padding: 0.5rem 0.5rem 0.5rem 0;
+  }
+
+  .facets-vertical .facets__price .field:last-of-type {
+    margin-left: 1rem;
+  }
+
+  .facets-vertical .active-facets__button {
+    margin-bottom: 1.5rem;
+  }
+
+  .facets-vertical .facet-filters.sorting.no-js {
+    padding-left: 0;
+  }
+
+  .facets-vertical .facet-checkbox input[type='checkbox'] {
+    z-index: 0;
+  }
+
+  .no-js .facets-vertical .facets-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .facets-vertical .active-facets facet-remove:last-of-type {
+    margin-bottom: 1rem;
+  }
+
+  .facets-vertical .active-facets {
+    margin: 0;
+    align-items: flex-start;
+  }
+
+  .facets__disclosure-vertical[open] .facets__summary .icon-caret {
+    transform: rotate(180deg);
+  }
+
+  .facets-container-drawer {
+    display: flex;;
+    flex-flow: row wrap;
+    column-gap: 0;
+  }
+
+  .facets-container-drawer .mobile-facets__wrapper  {
+    margin-right: 2rem;
+  }
+
+  .facets-container-drawer .product-count {
+    align-self: flex-start;
+  }
+
+  .facets-container-drawer .mobile-facets__wrapper {
+    width: calc(40% - 2rem);
+  }
+
+  .facets-container-drawer .facets {
+    width: 40%;
+  }
+
+  .facets-container-drawer .product-count {
+    width: 20%;
+  }
+
+  .facets-container-drawer .facets__form {
+    display: block;
+  }
+
+  .no-js .facets-container-drawer .mobile-facets__wrapper  {
+    width: calc(20% - 2rem);
+  }
+
+  .no-js  .facets-container-drawer .facets {
+    width: 60%;
+  }
+
+  .no-js .facets-container-drawer .product-count {
+    width: 20%;
+  }
+}
+
+@media screen and (min-width: 750px) and (max-width: 989px) {
+  .facets-vertical .active-facets__button {
+    padding: 1rem;
+    margin-bottom: 0;
+    margin-left: -0.5rem;
+  }
+
+  .facets-vertical .active-facets__button-remove {
+    padding: 1rem;
+  }
+}
diff --git a/assets/component-show-more.css b/assets/component-show-more.css
@@ -0,0 +1,11 @@
+
+.button-show-more {
+  padding-left: 0;
+  justify-content: flex-start;
+  padding-bottom: 1.1rem;
+}
+
+.button-show-more, 
+.button-show-less {
+  margin-top: 1.5rem;
+}
diff --git a/assets/facets.js b/assets/facets.js
@@ -7,7 +7,8 @@ class FacetFiltersForm extends HTMLElement {
       this.onSubmitHandler(event);
     }, 500);
 
-    this.querySelector('form').addEventListener('input', this.debouncedOnSubmit.bind(this));
+    const facetForm = this.querySelector('form');
+    facetForm.addEventListener('input', this.debouncedOnSubmit.bind(this));
 
     const facetWrapper = this.querySelector('#FacetsWrapperDesktop');
     if (facetWrapper) facetWrapper.addEventListener('keyup', onKeyUpEscape);
@@ -92,7 +93,7 @@ class FacetFiltersForm extends HTMLElement {
     const parsedHTML = new DOMParser().parseFromString(html, 'text/html');
 
     const facetDetailsElements =
-      parsedHTML.querySelectorAll('#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter');
+      parsedHTML.querySelectorAll('#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter');
     const matchesIndex = (element) => {
       const jsFilter = event ? event.target.closest('.js-filter') : undefined;
       return jsFilter ? element.dataset.index === jsFilter.dataset.index : false;
@@ -137,9 +138,16 @@ class FacetFiltersForm extends HTMLElement {
     const targetElement = target.querySelector('.facets__selected');
     const sourceElement = source.querySelector('.facets__selected');
 
+    const targetElementAccessibility = target.querySelector('.facets__summary');
+    const sourceElementAccessibility = source.querySelector('.facets__summary');
+
     if (sourceElement && targetElement) {
       target.querySelector('.facets__selected').outerHTML = source.querySelector('.facets__selected').outerHTML;
     }
+
+    if (targetElementAccessibility && sourceElementAccessibility) {
+      target.querySelector('.facets__summary').outerHTML = source.querySelector('.facets__summary').outerHTML;
+    }
   }
 
   static updateURLHash(searchParams) {
@@ -154,11 +162,36 @@ class FacetFiltersForm extends HTMLElement {
     ]
   }
 
+  createSearchParams(form) {
+    const formData = new FormData(form);
+    return new URLSearchParams(formData).toString();
+  }
+
+  onSubmitForm(searchParams, event) {
+    FacetFiltersForm.renderPage(searchParams, event);
+  }
+
   onSubmitHandler(event) {
     event.preventDefault();
-    const formData = new FormData(event.target.closest('form'));
-    const searchParams = new URLSearchParams(formData).toString();
-    FacetFiltersForm.renderPage(searchParams, event);
+    const sortFilterForms = document.querySelectorAll('facet-filters-form form');
+    if (event.srcElement.className == 'mobile-facets__checkbox') {
+      const searchParams = this.createSearchParams(event.target.closest('form'))
+      this.onSubmitForm(searchParams, event)
+    } else {
+      const forms = [];
+      const isMobile = event.target.closest('form').id === 'FacetFiltersFormMobile';
+
+      sortFilterForms.forEach((form) => {
+        if (!isMobile) {
+          if (form.id === 'FacetSortForm' || form.id === 'FacetFiltersForm' || form.id === 'FacetSortDrawerForm') {
+            forms.push(this.createSearchParams(form));
+          }
+        } else if (form.id === 'FacetFiltersFormMobile') {
+          forms.push(this.createSearchParams(form));
+        }
+      });
+      this.onSubmitForm(forms.join('&'), event)
+    }
   }
 
   onActiveFilterClick(event) {
@@ -180,7 +213,6 @@ class PriceRange extends HTMLElement {
     super();
     this.querySelectorAll('input')
       .forEach(element => element.addEventListener('change', this.onRangeChange.bind(this)));
-
     this.setMinAndMaxValues();
   }
 
@@ -214,12 +246,20 @@ customElements.define('price-range', PriceRange);
 class FacetRemove extends HTMLElement {
   constructor() {
     super();
-    this.querySelector('a').addEventListener('click', (event) => {
+    const facetLink = this.querySelector('a');
+    facetLink.setAttribute('role', 'button');
+    facetLink.addEventListener('click', this.closeFilter.bind(this));
+    facetLink.addEventListener('keyup', (event) => {
       event.preventDefault();
-      const form = this.closest('facet-filters-form') || document.querySelector('facet-filters-form');
-      form.onActiveFilterClick(event);
+      if (event.code.toUpperCase() === 'SPACE') this.closeFilter(event);
     });
   }
+
+  closeFilter(event) {
+    event.preventDefault();
+    const form = this.closest('facet-filters-form') || document.querySelector('facet-filters-form');
+    form.onActiveFilterClick(event);
+  }
 }
 
 customElements.define('facet-remove', FacetRemove);
diff --git a/assets/global.js b/assets/global.js
@@ -8,7 +8,7 @@ function getFocusableElements(container) {
 
 document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => {
   summary.setAttribute('role', 'button');
-  summary.setAttribute('aria-expanded', 'false');
+  summary.setAttribute('aria-expanded', summary.parentNode.hasAttribute('open'));
 
   if(summary.nextElementSibling.getAttribute('id')) {
     summary.setAttribute('aria-controls', summary.nextElementSibling.id);