Skip to content

Commit

Permalink
Update from Shopify for theme dawn/test290823
Browse files Browse the repository at this point in the history 
Committed from shop: Nanshy
  • Loading branch information
@shopify
shopify[bot] authored May 2, 2024
1 parent bd4fe27 commit 62d170c
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 30 deletions.
140 changes: 111 additions & 29 deletions assets/facets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ class FacetFiltersForm extends HTMLElement {

this.debouncedOnSubmit = debounce((event) => {
this.onSubmitHandler(event);
}, 500);
}, 800);

const facetForm = this.querySelector('form');
facetForm.addEventListener('input', this.debouncedOnSubmit.bind(this));
Expand Down Expand Up @@ -34,6 +34,10 @@ class FacetFiltersForm extends HTMLElement {
const sections = FacetFiltersForm.getSections();
const countContainer = document.getElementById('ProductCount');
const countContainerDesktop = document.getElementById('ProductCountDesktop');
const loadingSpinners = document.querySelectorAll(
'.facets-container .loading__spinner, facet-filters-form .loading__spinner'
);
loadingSpinners.forEach((spinner) => spinner.classList.remove('hidden'));
document.getElementById('ProductGridContainer').querySelector('.collection').classList.add('loading');
if (countContainer) {
countContainer.classList.add('loading');
Expand Down Expand Up @@ -98,29 +102,78 @@ class FacetFiltersForm extends HTMLElement {
containerDesktop.innerHTML = count;
containerDesktop.classList.remove('loading');
}
const loadingSpinners = document.querySelectorAll(
'.facets-container .loading__spinner, facet-filters-form .loading__spinner'
);
loadingSpinners.forEach((spinner) => spinner.classList.add('hidden'));
}

static renderFilters(html, event) {
const parsedHTML = new DOMParser().parseFromString(html, 'text/html');

const facetDetailsElements = parsedHTML.querySelectorAll(
const facetDetailsElementsFromFetch = parsedHTML.querySelectorAll(
'#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter'
);
const facetDetailsElementsFromDom = document.querySelectorAll(
'#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter'
);
const matchesIndex = (element) => {

// Remove facets that are no longer returned from the server
Array.from(facetDetailsElementsFromDom).forEach((currentElement) => {
if (!Array.from(facetDetailsElementsFromFetch).some(({ id }) => currentElement.id === id)) {
currentElement.remove();
}
});

const matchesId = (element) => {
const jsFilter = event ? event.target.closest('.js-filter') : undefined;
return jsFilter ? element.dataset.index === jsFilter.dataset.index : false;
return jsFilter ? element.id === jsFilter.id : false;
};
const facetsToRender = Array.from(facetDetailsElements).filter((element) => !matchesIndex(element));
const countsToRender = Array.from(facetDetailsElements).find(matchesIndex);

facetsToRender.forEach((element) => {
document.querySelector(`.js-filter[data-index="${element.dataset.index}"]`).innerHTML = element.innerHTML;
const facetsToRender = Array.from(facetDetailsElementsFromFetch).filter((element) => !matchesId(element));
const countsToRender = Array.from(facetDetailsElementsFromFetch).find(matchesId);

facetsToRender.forEach((elementToRender, index) => {
const currentElement = document.getElementById(elementToRender.id);
// Element already rendered in the DOM so just update the innerHTML
if (currentElement) {
document.getElementById(elementToRender.id).innerHTML = elementToRender.innerHTML;
} else {
if (index > 0) {
const { className: previousElementClassName, id: previousElementId } = facetsToRender[index - 1];
// Same facet type (eg horizontal/vertical or drawer/mobile)
if (elementToRender.className === previousElementClassName) {
document.getElementById(previousElementId).after(elementToRender);
return;
}
}

if (elementToRender.parentElement) {
document.querySelector(`#${elementToRender.parentElement.id} .js-filter`).before(elementToRender);
}
}
});

FacetFiltersForm.renderActiveFacets(parsedHTML);
FacetFiltersForm.renderAdditionalElements(parsedHTML);

if (countsToRender) FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
if (countsToRender) {
const closestJSFilterID = event.target.closest('.js-filter').id;

if (closestJSFilterID) {
FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
FacetFiltersForm.renderMobileCounts(countsToRender, document.getElementById(closestJSFilterID));

const newFacetDetailsElement = document.getElementById(closestJSFilterID);
const newElementSelector = newFacetDetailsElement.classList.contains('mobile-facets__details')
? `.mobile-facets__close-button`
: `.facets__summary`;
const newElementToActivate = newFacetDetailsElement.querySelector(newElementSelector);

const isTextInput = event.target.getAttribute('type') === 'text';

if (newElementToActivate && !isTextInput) newElementToActivate.focus();
}
}
}

static renderActiveFacets(html) {
Expand All @@ -147,18 +200,41 @@ class FacetFiltersForm extends HTMLElement {
}

static renderCounts(source, target) {
const targetElement = target.querySelector('.facets__selected');
const sourceElement = source.querySelector('.facets__selected');
const targetSummary = target.querySelector('.facets__summary');
const sourceSummary = source.querySelector('.facets__summary');

if (sourceSummary && targetSummary) {
targetSummary.outerHTML = sourceSummary.outerHTML;
}

const targetElementAccessibility = target.querySelector('.facets__summary');
const sourceElementAccessibility = source.querySelector('.facets__summary');
const targetHeaderElement = target.querySelector('.facets__header');
const sourceHeaderElement = source.querySelector('.facets__header');

if (sourceElement && targetElement) {
target.querySelector('.facets__selected').outerHTML = source.querySelector('.facets__selected').outerHTML;
if (sourceHeaderElement && targetHeaderElement) {
targetHeaderElement.outerHTML = sourceHeaderElement.outerHTML;
}

if (targetElementAccessibility && sourceElementAccessibility) {
target.querySelector('.facets__summary').outerHTML = source.querySelector('.facets__summary').outerHTML;
const targetWrapElement = target.querySelector('.facets-wrap');
const sourceWrapElement = source.querySelector('.facets-wrap');

if (sourceWrapElement && targetWrapElement) {
const isShowingMore = Boolean(target.querySelector('show-more-button .label-show-more.hidden'));
if (isShowingMore) {
sourceWrapElement
.querySelectorAll('.facets__item.hidden')
.forEach((hiddenItem) => hiddenItem.classList.replace('hidden', 'show-more-item'));
}

targetWrapElement.outerHTML = sourceWrapElement.outerHTML;
}
}

static renderMobileCounts(source, target) {
const targetFacetsList = target.querySelector('.mobile-facets__list');
const sourceFacetsList = source.querySelector('.mobile-facets__list');

if (sourceFacetsList && targetFacetsList) {
targetFacetsList.outerHTML = sourceFacetsList.outerHTML;
}
}

Expand Down Expand Up @@ -196,8 +272,6 @@ class FacetFiltersForm extends HTMLElement {
sortFilterForms.forEach((form) => {
if (!isMobile) {
if (form.id === 'FacetSortForm' || form.id === 'FacetFiltersForm' || form.id === 'FacetSortDrawerForm') {
const noJsElements = document.querySelectorAll('.no-js-list');
noJsElements.forEach((el) => el.remove());
forms.push(this.createSearchParams(form));
}
} else if (form.id === 'FacetFiltersFormMobile') {
Expand Down Expand Up @@ -228,9 +302,10 @@ FacetFiltersForm.setListeners();
class PriceRange extends HTMLElement {
constructor() {
super();
this.querySelectorAll('input').forEach((element) =>
element.addEventListener('change', this.onRangeChange.bind(this))
);
this.querySelectorAll('input').forEach((element) => {
element.addEventListener('change', this.onRangeChange.bind(this));
element.addEventListener('keydown', this.onKeyDown.bind(this));
});
this.setMinAndMaxValues();
}

Expand All @@ -239,20 +314,27 @@ class PriceRange extends HTMLElement {
this.setMinAndMaxValues();
}

onKeyDown(event) {
if (event.metaKey) return;

const pattern = /[0-9]|\.|,|'| |Tab|Backspace|Enter|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Delete|Escape/;
if (!event.key.match(pattern)) event.preventDefault();
}

setMinAndMaxValues() {
const inputs = this.querySelectorAll('input');
const minInput = inputs[0];
const maxInput = inputs[1];
if (maxInput.value) minInput.setAttribute('max', maxInput.value);
if (minInput.value) maxInput.setAttribute('min', minInput.value);
if (minInput.value === '') maxInput.setAttribute('min', 0);
if (maxInput.value === '') minInput.setAttribute('max', maxInput.getAttribute('max'));
if (maxInput.value) minInput.setAttribute('data-max', maxInput.value);
if (minInput.value) maxInput.setAttribute('data-min', minInput.value);
if (minInput.value === '') maxInput.setAttribute('data-min', 0);
if (maxInput.value === '') minInput.setAttribute('data-max', maxInput.getAttribute('data-max'));
}

adjustToValidValues(input) {
const value = Number(input.value);
const min = Number(input.getAttribute('min'));
const max = Number(input.getAttribute('max'));
const min = Number(input.getAttribute('data-min'));
const max = Number(input.getAttribute('data-max'));

if (value < min) input.value = min;
if (value > max) input.value = max;
Expand Down
2 changes: 1 addition & 1 deletion assets/magnify.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function prepareOverlay(container, image) {
}

function toggleLoadingSpinner(image) {
const loadingSpinner = image.parentElement.parentElement.querySelector(`.loading-overlay__spinner`);
const loadingSpinner = image.parentElement.parentElement.querySelector(`.loading__spinner`);
loadingSpinner.classList.toggle('hidden');
}

Expand Down

0 comments on commit 62d170c

Please sign in to comment.