dropdown -- native

never closes on // outside click by itself, only via clicking its own

. document.querySelectorAll('.site-header__country').forEach(function (details) { details.addEventListener('toggle', function () { if (details.open) { document.querySelectorAll('.site-header__country').forEach(function (other) { if (other !== details) { other.removeAttribute('open'); } }); } }); }); document.addEventListener('click', function (e) { document.querySelectorAll('.site-header__country[open]').forEach(function (details) { if (!details.contains(e.target)) { details.removeAttribute('open'); } }); }); document.querySelectorAll('.mp__search').forEach(function (searchBox) { var mp = searchBox.closest('.mp'); var input = searchBox.querySelector('.mp__search-input'); var dataEl = searchBox.querySelector('.mp__search-data'); if (!mp || !input || !dataEl) { return; } var resultsCount = mp.querySelector('.mp__results-count'); var resultsGrid = mp.querySelector('.mp__results-grid'); var items = []; try { items = JSON.parse(dataEl.textContent || '[]'); } catch (e) { items = []; } input.addEventListener('input', function () { var query = input.value.trim().toLowerCase(); if (!query) { mp.classList.remove('is-searching'); return; } var matches = items.filter(function (it) { return it.label.toLowerCase().indexOf(query) !== -1; }).slice(0, 24); mp.classList.add('is-searching'); resultsCount.textContent = matches.length; if (!matches.length) { resultsGrid.innerHTML = '

No matching pages or services

'; return; } resultsGrid.innerHTML = matches.map(function (m) { var parts = m.label.split(' > '); var title = parts.pop(); var breadcrumb = parts.join(' → '); var a = document.createElement('a'); a.className = 'mp__result-card'; a.href = m.url; var bc = document.createElement('span'); bc.className = 'mp__result-breadcrumb'; bc.textContent = breadcrumb; var ti = document.createElement('span'); ti.className = 'mp__result-title'; ti.textContent = title; a.appendChild(bc); a.appendChild(ti); return a.outerHTML; }).join(''); }); }); var siteHeaderEl = document.querySelector('.site-header'); var menuToggle = document.querySelector('.site-header__menu-toggle'); var mobileNavClose = document.querySelector('.site-header__mobile-nav-close'); function closeMobileAccordions() { document.querySelectorAll('.site-header__mobile-accordion-toggle.is-open').forEach(function (b) { b.classList.remove('is-open'); }); document.querySelectorAll('.site-header__mobile-accordion-panel.is-open').forEach(function (p) { p.classList.remove('is-open'); }); } document.querySelectorAll('.site-header__mobile-accordion-toggle').forEach(function (btn) { var itemId = btn.getAttribute('data-item'); var panel = document.querySelector('.site-header__mobile-accordion-panel[data-panel="' + itemId + '"]'); if (!panel) { return; } btn.addEventListener('click', function () { var wasOpen = btn.classList.contains('is-open'); var parentList = btn.closest('li').parentElement; parentList.querySelectorAll(':scope > li > .site-header__mobile-accordion-toggle.is-open').forEach(function (b) { b.classList.remove('is-open'); var p = document.querySelector('.site-header__mobile-accordion-panel[data-panel="' + b.getAttribute('data-item') + '"]'); if (p) { p.classList.remove('is-open'); } }); btn.classList.toggle('is-open', !wasOpen); panel.classList.toggle('is-open', !wasOpen); }); }); if (siteHeaderEl && menuToggle && mobileNavClose) { menuToggle.addEventListener('click', function (e) { e.stopPropagation(); siteHeaderEl.classList.add('is-mobile-nav-open'); }); mobileNavClose.addEventListener('click', function () { siteHeaderEl.classList.remove('is-mobile-nav-open'); closeMobileAccordions(); }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { siteHeaderEl.classList.remove('is-mobile-nav-open'); closeMobileAccordions(); } }); // Close the mobile nav drawer when clicking/tapping anywhere outside it. document.addEventListener('click', function (e) { if (!siteHeaderEl.classList.contains('is-mobile-nav-open')) { return; } var mobileNav = siteHeaderEl.querySelector('.site-header__mobile-nav'); if (mobileNav && !mobileNav.contains(e.target) && e.target !== menuToggle && !menuToggle.contains(e.target)) { siteHeaderEl.classList.remove('is-mobile-nav-open'); closeMobileAccordions(); } }); } var searchBtn = document.querySelector('.site-header__search'); var searchOverlay = document.querySelector('.site-header__search-overlay'); if (siteHeaderEl && searchBtn && searchOverlay) { var searchInput = searchOverlay.querySelector('.site-header__search-input'); var searchClose = searchOverlay.querySelector('.site-header__search-close'); var resultsBox = searchOverlay.querySelector('.site-header__search-results'); var country = searchOverlay.getAttribute('data-search-country') || 'au'; var searchTimer = null; function openSearch() { siteHeaderEl.classList.add('is-searching'); setTimeout(function () { searchInput.focus(); }, 50); } function closeSearch() { siteHeaderEl.classList.remove('is-searching'); resultsBox.classList.remove('is-active'); resultsBox.innerHTML = ''; searchInput.value = ''; } searchBtn.addEventListener('click', openSearch); searchClose.addEventListener('click', closeSearch); document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && siteHeaderEl.classList.contains('is-searching')) { closeSearch(); } }); searchInput.addEventListener('input', function () { var query = searchInput.value.trim(); clearTimeout(searchTimer); if (!query) { resultsBox.classList.remove('is-active'); resultsBox.innerHTML = ''; return; } searchTimer = setTimeout(function () { fetch('/wp-json/exigo/v1/search?q=' + encodeURIComponent(query) + '&country=' + encodeURIComponent(country)) .then(function (r) { return r.json(); }) .then(function (data) { var results = data.results || []; var html = '

'; if (!results.length) { html += '

No results for "' + query.replace(/'; } else { var typeLabels = { page: 'Page', post: 'Blog', event: 'Event', casestudy: 'Case Study', campaign: 'Campaign' }; results.forEach(function (r) { var typeLabel = typeLabels[r.type] || r.type || ''; html += '' + (typeLabel ? '' + typeLabel + '' : '') + '' + r.title + '' + (r.excerpt ? '' + r.excerpt + '' : '') + ''; }); } html += '

dropdown -- native

never closes on // outside click by itself, only via clicking its own

No matching pages or services

'; return; } resultsGrid.innerHTML = matches.map(function (m) { var parts = m.label.split(' > '); var title = parts.pop(); var breadcrumb = parts.join(' → '); var a = document.createElement('a'); a.className = 'mp__result-card'; a.href = m.url; var bc = document.createElement('span'); bc.className = 'mp__result-breadcrumb'; bc.textContent = breadcrumb; var ti = document.createElement('span'); ti.className = 'mp__result-title'; ti.textContent = title; a.appendChild(bc); a.appendChild(ti); return a.outerHTML; }).join(''); }); }); var siteHeaderEl = document.querySelector('.site-header'); var menuToggle = document.querySelector('.site-header__menu-toggle'); var mobileNavClose = document.querySelector('.site-header__mobile-nav-close'); // FAQ-style accordion: tapping a top-level (or nested) item with children // expands it inline, pushing the rest of the list down, instead of // drilling into a separate full-screen panel. Only one item per level // stays open at a time, matching typical FAQ behaviour. function closeMobileAccordions() { document.querySelectorAll('.site-header__mobile-accordion-toggle.is-open').forEach(function (b) { b.classList.remove('is-open'); }); document.querySelectorAll('.site-header__mobile-accordion-panel.is-open').forEach(function (p) { p.classList.remove('is-open'); }); } document.querySelectorAll('.site-header__mobile-accordion-toggle').forEach(function (btn) { var itemId = btn.getAttribute('data-item'); var panel = document.querySelector('.site-header__mobile-accordion-panel[data-panel="' + itemId + '"]'); if (!panel) { return; } var depth = panel.getAttribute('data-depth'); btn.addEventListener('click', function () { var wasOpen = btn.classList.contains('is-open'); // Close sibling accordions at the same depth first. var parentList = btn.closest('li').parentElement; parentList.querySelectorAll(':scope > li > .site-header__mobile-accordion-toggle.is-open').forEach(function (b) { b.classList.remove('is-open'); var p = document.querySelector('.site-header__mobile-accordion-panel[data-panel="' + b.getAttribute('data-item') + '"]'); if (p) { p.classList.remove('is-open'); } }); btn.classList.toggle('is-open', !wasOpen); panel.classList.toggle('is-open', !wasOpen); }); }); if (siteHeaderEl && menuToggle && mobileNavClose) { menuToggle.addEventListener('click', function (e) { e.stopPropagation(); siteHeaderEl.classList.add('is-mobile-nav-open'); }); mobileNavClose.addEventListener('click', function () { siteHeaderEl.classList.remove('is-mobile-nav-open'); closeMobileAccordions(); }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { siteHeaderEl.classList.remove('is-mobile-nav-open'); closeMobileAccordions(); } }); // Close the mobile nav drawer when clicking/tapping anywhere outside it. document.addEventListener('click', function (e) { if (!siteHeaderEl.classList.contains('is-mobile-nav-open')) { return; } var mobileNav = siteHeaderEl.querySelector('.site-header__mobile-nav'); if (mobileNav && !mobileNav.contains(e.target) && e.target !== menuToggle && !menuToggle.contains(e.target)) { siteHeaderEl.classList.remove('is-mobile-nav-open'); closeMobileAccordions(); } }); } var searchBtn = document.querySelector('.site-header__search'); var searchOverlay = document.querySelector('.site-header__search-overlay'); if (siteHeaderEl && searchBtn && searchOverlay) { var searchInput = searchOverlay.querySelector('.site-header__search-input'); var searchClose = searchOverlay.querySelector('.site-header__search-close'); var resultsBox = searchOverlay.querySelector('.site-header__search-results'); var country = searchOverlay.getAttribute('data-search-country') || 'au'; var searchTimer = null; function openSearch() { siteHeaderEl.classList.add('is-searching'); setTimeout(function () { searchInput.focus(); }, 50); } function closeSearch() { siteHeaderEl.classList.remove('is-searching'); resultsBox.classList.remove('is-active'); resultsBox.innerHTML = ''; searchInput.value = ''; } searchBtn.addEventListener('click', openSearch); searchClose.addEventListener('click', closeSearch); document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && siteHeaderEl.classList.contains('is-searching')) { closeSearch(); } }); searchInput.addEventListener('input', function () { var query = searchInput.value.trim(); clearTimeout(searchTimer); if (!query) { resultsBox.classList.remove('is-active'); resultsBox.innerHTML = ''; return; } searchTimer = setTimeout(function () { fetch('/wp-json/exigo/v1/search?q=' + encodeURIComponent(query) + '&country=' + encodeURIComponent(country)) .then(function (r) { return r.json(); }) .then(function (data) { var results = data.results || []; var html = '

'; if (!results.length) { html += '

'; resultsBox.innerHTML = html; resultsBox.classList.add('is-active'); }) .catch(function () {}); }, 300); }); } document.querySelectorAll('.mp').forEach(function (mp) { mp.querySelectorAll('[data-mp-tab]').forEach(function (tab) { tab.addEventListener('mouseenter', function () { var id = tab.getAttribute('data-mp-tab'); mp.querySelectorAll('[data-mp-tab]').forEach(function (t) { t.classList.toggle('is-active', t === tab); }); mp.querySelectorAll('[data-mp-list]').forEach(function (l) { l.classList.toggle('is-active', l.getAttribute('data-mp-list') === id); }); mp.querySelectorAll('[data-mp-list] [data-mp-item]').forEach(function (i) { i.classList.remove('is-active'); }); mp.querySelectorAll('[data-mp-groups]').forEach(function (g) { g.classList.remove('is-active'); }); }); }); mp.querySelectorAll('[data-mp-item]').forEach(function (item) { item.addEventListener('mouseenter', function () { var id = item.getAttribute('data-mp-item'); var list = item.closest('[data-mp-list]'); if (list) { list.querySelectorAll('[data-mp-item]').forEach(function (i) { i.classList.toggle('is-active', i === item); }); } mp.querySelectorAll('[data-mp-groups]').forEach(function (g) { g.classList.toggle('is-active', g.getAttribute('data-mp-groups') === id); }); }); }); }); })(); (function () { function autoExpand(el) { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; } document.querySelectorAll('.cu-form-grid textarea').forEach(function (el) { autoExpand(el); el.addEventListener('input', function () { autoExpand(el); }); }); document.querySelectorAll('.cu-form-grid .cu-field').forEach(function (field) { var control = field.querySelector('input, textarea, select'); if (!control) { return; } function update() { var hasValue = control.tagName === 'SELECT' ? (control.selectedIndex > 0) : (control.value.trim() !== ''); field.classList.toggle('is-active', hasValue || document.activeElement === control); } control.addEventListener('focus', update); control.addEventListener('blur', update); control.addEventListener('input', update); control.addEventListener('change', update); update(); }); })(); (function () { document.querySelectorAll('.faqs__question').forEach(function (btn) { btn.addEventListener('click', function () { var item = btn.closest('.faqs__item'); var list = item.parentElement; var wasOpen = item.classList.contains('is-open'); list.querySelectorAll(':scope > .faqs__item.is-open').forEach(function (el) { el.classList.remove('is-open'); }); item.classList.toggle('is-open', !wasOpen); }); }); })(); (function () { var PER_PAGE = 10; var searchInput = document.getElementById('jb-search-input'); var locationSelect = document.getElementById('jb-location-select'); var departmentSelect = document.getElementById('jb-department-select'); var cards = Array.prototype.slice.call(document.querySelectorAll('#jb-list .jb__card')); var emptyEl = document.getElementById('jb-empty'); var paginationEl = document.getElementById('jb-pagination'); var modalOverlay = document.getElementById('jb-modal-overlay'); var modalBody = document.getElementById('jb-modal-body'); var modalClose = document.getElementById('jb-modal-close'); var state = { search: '', location: '', department: '' }; var currentPage = 1; function currentVisible() { return cards.filter(function (card) { if (state.search && card.getAttribute('data-search').indexOf(state.search) === -1) { return false; } if (state.location && card.getAttribute('data-location') !== state.location) { return false; } if (state.department && card.getAttribute('data-department') !== state.department) { return false; } return true; }); } function applyFilters() { currentPage = 1; renderPage(); } function renderPage() { var visible = currentVisible(); cards.forEach(function (card) { card.style.display = 'none'; }); var totalPages = Math.max(1, Math.ceil(visible.length / PER_PAGE)); if (currentPage > totalPages) { currentPage = totalPages; } visible.forEach(function (card, i) { if (i >= (currentPage - 1) * PER_PAGE && i < currentPage * PER_PAGE) { card.style.display = ''; } }); emptyEl.style.display = visible.length === 0 ? '' : 'none'; paginationEl.innerHTML = ''; if (totalPages <= 1) { return; } var prev = document.createElement('button'); prev.textContent = '‹'; prev.disabled = currentPage === 1; prev.addEventListener('click', function () { currentPage--; renderPage(); }); paginationEl.appendChild(prev); for (var p = 1; p <= totalPages; p++) { (function (p) { var btn = document.createElement('button'); btn.textContent = p; btn.className = p === currentPage ? 'is-active' : ''; btn.addEventListener('click', function () { currentPage = p; renderPage(); }); paginationEl.appendChild(btn); })(p); } var next = document.createElement('button'); next.textContent = '›'; next.disabled = currentPage === totalPages; next.addEventListener('click', function () { currentPage++; renderPage(); }); paginationEl.appendChild(next); } searchInput.addEventListener('input', function () { state.search = searchInput.value.trim().toLowerCase(); applyFilters(); }); locationSelect.addEventListener('change', function () { state.location = locationSelect.value.toLowerCase(); applyFilters(); }); departmentSelect.addEventListener('change', function () { state.department = departmentSelect.value.toLowerCase(); applyFilters(); }); document.querySelectorAll('.jb__more-btn').forEach(function (btn) { btn.addEventListener('click', function () { var target = document.getElementById(btn.getAttribute('data-job-target')); if (!target) { return; } modalBody.innerHTML = target.innerHTML; modalOverlay.classList.add('is-active'); }); }); document.querySelectorAll('.jb__share-btn').forEach(function (btn) { btn.addEventListener('click', function () { var url = btn.getAttribute('data-share-url'); window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url), '_blank', 'noopener,noreferrer'); }); }); modalClose.addEventListener('click', function () { modalOverlay.classList.remove('is-active'); }); modalOverlay.addEventListener('click', function (e) { if (e.target === modalOverlay) { modalOverlay.classList.remove('is-active'); } }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { modalOverlay.classList.remove('is-active'); } }); renderPage(); })(); (function () { function exigoJumpNavInit() { var links = Array.prototype.slice.call(document.querySelectorAll('.jn__link')); if (!links.length) { return; } var nav = document.querySelector('.jn'); var pairs = []; links.forEach(function (l) { var t = document.getElementById(l.getAttribute('data-jn-target')); if (t) { pairs.push({ link: l, target: t }); } }); if (!pairs.length) { return; } function setActive(target) { pairs.forEach(function (p) { p.link.classList.toggle('is-active', p.target === target); }); } function getOffset() { return (nav ? nav.offsetHeight : 0) + 40; } // Click listeners are attached FIRST, before anything that could throw -- // if the scrollspy calc below ever errors, clicking a link must still work. pairs.forEach(function (p) { p.link.addEventListener('click', function (e) { e.preventDefault(); setActive(p.target); try { var offset = getOffset(); var top = p.target.getBoundingClientRect().top + window.pageYOffset - offset + 1; window.scrollTo({ top: top, behavior: 'smooth' }); } catch (err) { p.target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Scrollspy: the active section is the last one whose top has scrolled // past the offset line -- not "whichever section is intersecting", since // with short sections more than one can be intersecting at once and a // naive IntersectionObserver pass ends up highlighting the wrong one. var ticking = false; function updateActive() { ticking = false; try { var offset = getOffset(); var current = pairs[0].target; for (var i = 0; i < pairs.length; i++) { if (pairs[i].target.getBoundingClientRect().top - offset <= 0) { current = pairs[i].target; } } setActive(current); } catch (err) { /* never let a scrollspy calc error break the page or future scroll updates */ } } function onScroll() { if (ticking) { return; } ticking = true; window.requestAnimationFrame(updateActive); } window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); updateActive(); } // This script tag is emitted right after Hero Banner, so it runs before // the browser has parsed the later sections further down the page -- // getElementById() for their anchors would return null at that point. // Defer init until the full document (all sections) is actually parsed. if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', exigoJumpNavInit); } else { exigoJumpNavInit(); } })(); (function () { var topicFilter = document.getElementById('evh-topic-filter'); var regionFilter = document.getElementById('evh-region-filter'); var searchInput = document.getElementById('evh-search-input'); var tabs = document.querySelectorAll('.evh-tab'); var cards = document.querySelectorAll('#evh-grid .evh-card'); var activeFilterDim = ''; var activeFilterValue = ''; function applyFilters() { var topic = topicFilter ? topicFilter.value : ''; var region = regionFilter ? regionFilter.value : ''; var search = searchInput ? searchInput.value.trim().toLowerCase() : ''; var visibleCount = 0; cards.forEach(function (card) { var matches = true; if (activeFilterDim === 'status' && card.getAttribute('data-status') !== activeFilterValue) { matches = false; } if (activeFilterDim === 'temporal' && card.getAttribute('data-temporal') !== activeFilterValue) { matches = false; } if (topic && card.getAttribute('data-topics').indexOf(topic) === -1) { matches = false; } if (region && card.getAttribute('data-region').indexOf(region) === -1) { matches = false; } if (search && card.getAttribute('data-search').indexOf(search) === -1) { matches = false; } card.style.display = matches ? '' : 'none'; if (matches) { visibleCount++; } }); var noResults = document.getElementById('evh-no-results'); if (noResults) { noResults.style.display = (cards.length && visibleCount === 0) ? '' : 'none'; } } tabs.forEach(function (tab) { tab.addEventListener('click', function () { tabs.forEach(function (t) { t.classList.remove('is-active'); }); tab.classList.add('is-active'); activeFilterDim = tab.getAttribute('data-filter-dim'); activeFilterValue = tab.getAttribute('data-filter-value'); applyFilters(); }); }); if (topicFilter) { topicFilter.addEventListener('change', applyFilters); } if (regionFilter) { regionFilter.addEventListener('change', applyFilters); } if (searchInput) { searchInput.addEventListener('input', applyFilters); } // Replace the native as the source of truth so the filtering logic above needs no // changes -- clicking a custom option just sets select.value and fires // a real 'change' event. document.querySelectorAll('.evh-filter-select select').forEach(function (select) { var btn = document.createElement('button'); btn.type = 'button'; btn.className = 'evh-custom-select-btn'; btn.textContent = select.options[select.selectedIndex].textContent; var list = document.createElement('div'); list.className = 'evh-custom-select-list'; Array.prototype.forEach.call(select.options, function (opt) { var item = document.createElement('button'); item.type = 'button'; item.textContent = opt.textContent; if (opt.value === select.value) { item.classList.add('is-selected'); } item.addEventListener('click', function () { select.value = opt.value; btn.textContent = opt.textContent; list.querySelectorAll('button').forEach(function (b) { b.classList.remove('is-selected'); }); item.classList.add('is-selected'); list.classList.remove('is-open'); select.dispatchEvent(new Event('change', { bubbles: true })); }); list.appendChild(item); }); var wrapper = document.createElement('div'); wrapper.className = 'evh-custom-select'; wrapper.appendChild(btn); wrapper.appendChild(list); btn.addEventListener('click', function (e) { e.stopPropagation(); document.querySelectorAll('.evh-custom-select-list.is-open').forEach(function (l) { if (l !== list) { l.classList.remove('is-open'); } }); list.classList.toggle('is-open'); }); select.parentNode.insertBefore(wrapper, select); select.style.display = 'none'; }); document.addEventListener('click', function () { document.querySelectorAll('.evh-custom-select-list.is-open').forEach(function (l) { l.classList.remove('is-open'); }); }); })(); var ExigoSpeakerModal = (function () { var overlay, lastFocused; function esc(s) { var d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; } function open(el) { var sp; try { sp = JSON.parse(el.getAttribute('data-speaker')); } catch (e) { return; } overlay = document.getElementById('exigo-sp-overlay'); lastFocused = document.activeElement; var photo = document.getElementById('exigo-sp-photo'); if (sp.photo && sp.photo.url) { photo.src = sp.photo.url; photo.style.display = ''; } else { photo.style.display = 'none'; } var nameEl = document.getElementById('exigo-sp-name'); nameEl.innerHTML = esc(sp.name) + (sp.linkedin_url ? ' ' : ''); document.getElementById('exigo-sp-title').textContent = sp.title || ''; document.getElementById('exigo-sp-company').textContent = sp.company || ''; document.getElementById('exigo-sp-bio').innerHTML = sp.bio || ''; document.getElementById('exigo-sp-email').textContent = sp.email || ''; overlay.classList.add('is-open'); overlay.querySelector('.exigo-sp-close').focus(); document.addEventListener('keydown', onKeydown); } function close() { if (!overlay) { return; } overlay.classList.remove('is-open'); document.removeEventListener('keydown', onKeydown); if (lastFocused) { lastFocused.focus(); } } function onKeydown(e) { if (e.key === 'Escape') { close(); } } document.addEventListener('DOMContentLoaded', function () { var ov = document.getElementById('exigo-sp-overlay'); if (ov) { ov.addEventListener('click', function (e) { if (e.target === ov) { close(); } }); } }); return { open: open, close: close }; })(); (function () { var PER_PAGE = 8; var industryPills = document.querySelectorAll('#csh-industry-pills .csh-pill'); var industrySelect = document.getElementById('csh-industry-select'); var serviceSelect = document.getElementById('csh-service-select'); var searchInput = document.getElementById('csh-search-input'); var searchBtn = document.getElementById('csh-search-btn'); var resetBtn = document.getElementById('csh-reset'); var chipsWrap = document.getElementById('csh-active-chips'); var cards = Array.prototype.slice.call(document.querySelectorAll('#csh-grid .csh-card')); var emptyEl = document.getElementById('csh-empty'); var paginationEl = document.getElementById('csh-pagination'); var state = { industry: '', service: '', search: '' }; var currentPage = 1; function renderChips() { chipsWrap.innerHTML = ''; if (state.industry) { var opt = industrySelect.querySelector('option[value="' + state.industry + '"]'); chipsWrap.innerHTML += '' + (opt ? opt.textContent : state.industry) + ''; } if (state.service) { var opt2 = serviceSelect.querySelector('option[value="' + state.service + '"]'); chipsWrap.innerHTML += '' + (opt2 ? opt2.textContent : state.service) + ''; } chipsWrap.querySelectorAll('[data-clear]').forEach(function (btn) { btn.addEventListener('click', function () { var key = btn.getAttribute('data-clear'); state[key] = ''; if (key === 'industry') { industrySelect.value = ''; industryPills.forEach(function (p) { p.classList.toggle('is-active', p.getAttribute('data-industry') === ''); }); } if (key === 'service') { serviceSelect.value = ''; } applyFilters(); }); }); } function applyFilters() { var visible = []; cards.forEach(function (card) { var matches = true; if (state.industry && card.getAttribute('data-industry').indexOf(state.industry) === -1) { matches = false; } if (state.service && card.getAttribute('data-service').indexOf(state.service) === -1) { matches = false; } if (state.search && card.getAttribute('data-search').indexOf(state.search) === -1) { matches = false; } card.style.display = 'none'; if (matches) { visible.push(card); } }); emptyEl.style.display = visible.length === 0 ? '' : 'none'; renderChips(); currentPage = 1; renderPage(visible); } function renderPage(visible) { var totalPages = Math.max(1, Math.ceil(visible.length / PER_PAGE)); if (currentPage > totalPages) { currentPage = totalPages; } visible.forEach(function (card, i) { card.style.display = (i >= (currentPage - 1) * PER_PAGE && i < currentPage * PER_PAGE) ? '' : 'none'; }); paginationEl.innerHTML = ''; if (totalPages <= 1) { return; } var prev = document.createElement('button'); prev.textContent = '‹'; prev.disabled = currentPage === 1; prev.addEventListener('click', function () { currentPage--; renderPage(visible); }); paginationEl.appendChild(prev); for (var p = 1; p <= totalPages; p++) { (function (p) { var btn = document.createElement('button'); btn.textContent = p; btn.className = p === currentPage ? 'is-active' : ''; btn.addEventListener('click', function () { currentPage = p; renderPage(visible); }); paginationEl.appendChild(btn); })(p); } var next = document.createElement('button'); next.textContent = '›'; next.disabled = currentPage === totalPages; next.addEventListener('click', function () { currentPage++; renderPage(visible); }); paginationEl.appendChild(next); } function currentVisibleForPaging() { return cards.filter(function (card) { var matches = true; if (state.industry && card.getAttribute('data-industry').indexOf(state.industry) === -1) { matches = false; } if (state.service && card.getAttribute('data-service').indexOf(state.service) === -1) { matches = false; } if (state.search && card.getAttribute('data-search').indexOf(state.search) === -1) { matches = false; } return matches; }); } industryPills.forEach(function (pill) { pill.addEventListener('click', function () { industryPills.forEach(function (p) { p.classList.remove('is-active'); }); pill.classList.add('is-active'); state.industry = pill.getAttribute('data-industry'); industrySelect.value = state.industry; applyFilters(); }); }); industrySelect.addEventListener('change', function () { state.industry = industrySelect.value; industryPills.forEach(function (p) { p.classList.toggle('is-active', p.getAttribute('data-industry') === state.industry); }); applyFilters(); }); serviceSelect.addEventListener('change', function () { state.service = serviceSelect.value; applyFilters(); }); searchBtn.addEventListener('click', function () { state.search = searchInput.value.trim().toLowerCase(); applyFilters(); }); searchInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') { state.search = searchInput.value.trim().toLowerCase(); applyFilters(); } }); resetBtn.addEventListener('click', function () { state = { industry: '', service: '', search: '' }; searchInput.value = ''; industrySelect.value = ''; serviceSelect.value = ''; industryPills.forEach(function (p) { p.classList.toggle('is-active', p.getAttribute('data-industry') === ''); }); applyFilters(); }); renderPage(currentVisibleForPaging()); })(); (function () { var PER_PAGE = 12; var categoryPills = document.querySelectorAll('#bh-category-pills .bh-pill'); var tagSelect = document.getElementById('bh-tag-select'); var searchInput = document.getElementById('bh-search-input'); var searchBtn = document.getElementById('bh-search-btn'); var resetBtn = document.getElementById('bh-reset'); var chipsWrap = document.getElementById('bh-active-chips'); var cards = Array.prototype.slice.call(document.querySelectorAll('#bh-grid .bh-card')); var emptyEl = document.getElementById('bh-empty'); var paginationEl = document.getElementById('bh-pagination'); var countEl = document.getElementById('bh-count'); var state = { category: '', tag: '', search: '' }; var currentPage = 1; function renderChips() { chipsWrap.innerHTML = ''; if (state.tag) { var opt = tagSelect.querySelector('option[value="' + state.tag + '"]'); chipsWrap.innerHTML += '' + (opt ? opt.textContent : state.tag) + ''; } chipsWrap.querySelectorAll('[data-clear]').forEach(function (btn) { btn.addEventListener('click', function () { var key = btn.getAttribute('data-clear'); state[key] = ''; if (key === 'tag') { tagSelect.value = ''; } applyFilters(); }); }); } function applyFilters() { var visible = []; cards.forEach(function (card) { var matches = true; if (state.category && card.getAttribute('data-category').indexOf(state.category) === -1) { matches = false; } if (state.tag && card.getAttribute('data-tag').indexOf(state.tag) === -1) { matches = false; } if (state.search && card.getAttribute('data-search').indexOf(state.search) === -1) { matches = false; } card.style.display = 'none'; if (matches) { visible.push(card); } }); emptyEl.style.display = visible.length === 0 ? '' : 'none'; renderChips(); currentPage = 1; renderPage(visible); } function renderPage(visible) { var totalPages = Math.max(1, Math.ceil(visible.length / PER_PAGE)); if (currentPage > totalPages) { currentPage = totalPages; } visible.forEach(function (card, i) { card.style.display = (i >= (currentPage - 1) * PER_PAGE && i < currentPage * PER_PAGE) ? '' : 'none'; }); var shown = Math.min(PER_PAGE, Math.max(0, visible.length - (currentPage - 1) * PER_PAGE)); countEl.textContent = 'Showing ' + shown + ' of ' + visible.length + ' articles'; paginationEl.innerHTML = ''; if (totalPages <= 1) { return; } var prev = document.createElement('button'); prev.textContent = '‹'; prev.disabled = currentPage === 1; prev.addEventListener('click', function () { currentPage--; renderPage(visible); }); paginationEl.appendChild(prev); for (var p = 1; p <= totalPages; p++) { (function (p) { var btn = document.createElement('button'); btn.textContent = p; btn.className = p === currentPage ? 'is-active' : ''; btn.addEventListener('click', function () { currentPage = p; renderPage(visible); }); paginationEl.appendChild(btn); })(p); } var next = document.createElement('button'); next.textContent = '›'; next.disabled = currentPage === totalPages; next.addEventListener('click', function () { currentPage++; renderPage(visible); }); paginationEl.appendChild(next); } function currentVisibleForPaging() { return cards.filter(function (card) { var matches = true; if (state.category && card.getAttribute('data-category').indexOf(state.category) === -1) { matches = false; } if (state.tag && card.getAttribute('data-tag').indexOf(state.tag) === -1) { matches = false; } if (state.search && card.getAttribute('data-search').indexOf(state.search) === -1) { matches = false; } return matches; }); } categoryPills.forEach(function (pill) { pill.addEventListener('click', function () { categoryPills.forEach(function (p) { p.classList.remove('is-active'); }); pill.classList.add('is-active'); state.category = pill.getAttribute('data-category'); applyFilters(); }); }); tagSelect.addEventListener('change', function () { state.tag = tagSelect.value; applyFilters(); }); searchBtn.addEventListener('click', function () { state.search = searchInput.value.trim().toLowerCase(); applyFilters(); }); searchInput.addEventListener('keydown', function (e) { if (e.key === 'Enter') { state.search = searchInput.value.trim().toLowerCase(); applyFilters(); } }); resetBtn.addEventListener('click', function () { state = { category: '', tag: '', search: '' }; searchInput.value = ''; tagSelect.value = ''; categoryPills.forEach(function (p) { p.classList.toggle('is-active', p.getAttribute('data-category') === ''); }); applyFilters(); }); renderPage(currentVisibleForPaging()); })(); (function () { var tabs = document.querySelectorAll('.csd-screenshot-tab'); var images = document.querySelectorAll('[data-shot-image]'); tabs.forEach(function (tab) { tab.addEventListener('click', function () { tabs.forEach(function (t) { t.classList.remove('is-active'); }); tab.classList.add('is-active'); var idx = tab.getAttribute('data-shot-tab'); images.forEach(function (img) { img.classList.toggle('is-active', img.getAttribute('data-shot-image') === idx); }); }); }); })();

Let's Talk About Your IT Challenges

Get in Touch With Our Team