Skip to content

Commit 604fd07

Browse files
Anton-88Anton-88
committed
Excluded barba rerender on case studies page
1 parent 9ec6a27 commit 604fd07

4 files changed

Lines changed: 189 additions & 0 deletions

File tree

‎website/modules/asset/ui/src/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import barba from '@barba/core';
22
import { gsap } from 'gsap';
3+
34
import { initAllSwipers } from './swipers';
5+
import { initCaseStudiesFilter } from '../../../case-studies-page/lib/index.js';
46
import { initSmoothCounters } from './smoothCounters';
57
import lozad from 'lozad';
68

@@ -46,18 +48,33 @@ function initializeAllComponents() {
4648
initAllSwipers();
4749
initSmoothCounters();
4850
initFontChanger();
51+
initCaseStudiesFilter();
4952
}
5053

5154
// Barba pages
5255
function initBarbaPageTransitions() {
5356
if (!document.querySelector('[data-barba="container"]')) return;
5457

58+
// Disable Barba when user is logged in as admin to prevent page rerendering
59+
if (apos.user) return;
60+
61+
// Disable Barba on cases page to prevent rerendering issues
62+
if (window.location.pathname.includes('/cases')) return;
63+
5564
apos.util.onReady(() => {
5665
barba.init({
5766
prefetchIgnore: false,
5867
cacheIgnore: false,
5968
preventRunning: true,
6069
timeout: 10000,
70+
prevent: ({ el }) => {
71+
// Prevent Barba from handling admin links and certain elements
72+
return (
73+
el.hasAttribute('data-no-barba') ||
74+
el.closest('.apos-admin-bar') ||
75+
(el.href && el.href.includes('/admin'))
76+
);
77+
},
6178
transitions: [
6279
{
6380
sync: false,

‎website/modules/case-studies-page/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,11 @@ module.exports = {
9999
};
100100
}
101101
};
102+
103+
// Handle AJAX requests
104+
self.addAjaxRoute = (method, path, fn) => {
105+
self.apos.routing.add(method, path, fn);
106+
};
102107
},
103108

104109
methods(self) {

‎website/modules/case-studies-page/lib/case-studies-filter.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Initialize case studies filter functionality
2+
apos.util.onReady(() => {
3+
// Check if we're on a cases page
4+
if (window.location.pathname.includes('/cases')) {
5+
// Get the module and initialize the filter
6+
const caseStudiesModule = apos.modules['case-studies-page'];
7+
if (caseStudiesModule && caseStudiesModule.initCaseStudiesFilter) {
8+
caseStudiesModule.initCaseStudiesFilter();
9+
}
10+
}
11+
});
12+
13+
// Also initialize after Barba transitions (if Barba is active)
14+
if (typeof window !== 'undefined' && window.barba) {
15+
window.barba.hooks.after(() => {
16+
if (window.location.pathname.includes('/cases')) {
17+
const caseStudiesModule = apos.modules['case-studies-page'];
18+
if (caseStudiesModule && caseStudiesModule.initCaseStudiesFilter) {
19+
caseStudiesModule.initCaseStudiesFilter();
20+
}
21+
}
22+
});
23+
}

‎website/modules/case-studies-page/lib/index.js‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
// Case Studies Filter - Update filters and grid
2+
const updateFiltersAndGrid = function (doc, filterContainer, gridContainer) {
3+
const newFilters = doc.querySelector('.tags-filter');
4+
if (newFilters && filterContainer) {
5+
filterContainer.replaceChildren(...newFilters.children);
6+
}
7+
8+
const newGrid = doc.querySelector('.cs_grid');
9+
if (newGrid && gridContainer) {
10+
gridContainer.replaceChildren(...newGrid.children);
11+
}
12+
};
13+
14+
// Case Studies Filter - Update filter info
15+
const updateFilterInfo = function (doc) {
16+
const newFilterInfo = doc.querySelector('.cs_filter-info');
17+
const currentFilterInfo = document.querySelector('.cs_filter-info');
18+
19+
if (currentFilterInfo) {
20+
if (newFilterInfo) {
21+
currentFilterInfo.replaceChildren(...newFilterInfo.children);
22+
currentFilterInfo.style.display = 'flex';
23+
} else {
24+
currentFilterInfo.style.display = 'none';
25+
}
26+
} else if (newFilterInfo) {
27+
const parentContainer = document.querySelector('.cs_content');
28+
const searchForm = document.querySelector('.cs_search-form');
29+
if (parentContainer && searchForm) {
30+
newFilterInfo.style.display = 'flex';
31+
parentContainer.insertBefore(newFilterInfo, searchForm);
32+
}
33+
}
34+
};
35+
36+
// Case Studies Filter - Update pagination
37+
const updatePagination = function (doc, paginationContainer) {
38+
const newPagination = doc.querySelector('.pagination-container');
39+
if (paginationContainer) {
40+
if (newPagination) {
41+
paginationContainer.replaceChildren(...newPagination.children);
42+
} else {
43+
paginationContainer.replaceChildren();
44+
}
45+
}
46+
};
47+
48+
// Case Studies Filter - Handle scroll behavior
49+
const handleFilterScroll = function (url) {
50+
const hasActiveFilters =
51+
url.includes('industry=') ||
52+
url.includes('stack=') ||
53+
url.includes('caseStudyType=');
54+
if (hasActiveFilters) {
55+
const tagsFilterContainer = document.querySelector('.tags-filter');
56+
if (tagsFilterContainer) {
57+
tagsFilterContainer.scrollIntoView({
58+
behavior: 'smooth',
59+
block: 'start',
60+
inline: 'nearest',
61+
});
62+
}
63+
}
64+
};
65+
66+
// Case Studies Filter - Attach event listeners
67+
const attachFilterListeners = function (handleFilterRequest) {
68+
const newFilterContainer = document.querySelector('.tags-filter');
69+
const newFilterInfoContainer = document.querySelector('.cs_filter-info');
70+
const newPaginationContainer = document.querySelector(
71+
'.pagination-container',
72+
);
73+
74+
if (newFilterContainer) {
75+
const tagLinks = newFilterContainer.querySelectorAll('.tag-link');
76+
tagLinks.forEach(function (link) {
77+
link.addEventListener('click', function (event) {
78+
event.preventDefault();
79+
handleFilterRequest(link.getAttribute('href'));
80+
});
81+
});
82+
}
83+
84+
if (newFilterInfoContainer) {
85+
const clearLinks = newFilterInfoContainer.querySelectorAll(
86+
'.clear-all-link, .remove-tag',
87+
);
88+
clearLinks.forEach(function (link) {
89+
link.addEventListener('click', function (event) {
90+
event.preventDefault();
91+
handleFilterRequest(link.getAttribute('href'));
92+
});
93+
});
94+
}
95+
96+
if (newPaginationContainer) {
97+
const pagerLinks = newPaginationContainer.querySelectorAll('.cs-pager a');
98+
pagerLinks.forEach(function (link) {
99+
link.addEventListener('click', function (event) {
100+
event.preventDefault();
101+
handleFilterRequest(link.getAttribute('href'));
102+
});
103+
});
104+
}
105+
};
106+
107+
// Case Studies Filter - Main initialization
108+
const initCaseStudiesFilter = function () {
109+
if (!window.location.pathname.includes('/cases')) {
110+
return;
111+
}
112+
113+
const filterContainer = document.querySelector('.tags-filter');
114+
const gridContainer = document.querySelector('.cs_grid');
115+
const paginationContainer = document.querySelector('.pagination-container');
116+
117+
if (!filterContainer || !gridContainer) {
118+
return;
119+
}
120+
121+
const handleFilterRequest = async function (url) {
122+
try {
123+
const response = await fetch(url);
124+
const html = await response.text();
125+
const parser = new DOMParser();
126+
const doc = parser.parseFromString(html, 'text/html');
127+
128+
updateFiltersAndGrid(doc, filterContainer, gridContainer);
129+
updateFilterInfo(doc);
130+
updatePagination(doc, paginationContainer);
131+
history.pushState(null, '', url);
132+
handleFilterScroll(url);
133+
attachFilterListeners(handleFilterRequest);
134+
} catch {
135+
window.location.href = url;
136+
}
137+
};
138+
139+
attachFilterListeners(handleFilterRequest);
140+
};
141+
142+
module.exports = {
143+
initCaseStudiesFilter,
144+
};

0 commit comments

Comments
 (0)