Projects<\/title>  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script>  <style> \/* LinkedIn Icon *\/ .et_pb_linkedin_icon { display: inline-block; background-color: #0077B5; \/* LinkedIn blue *\/ color: #FFFFFF !important; \/* White icon *\/ width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 4px; font-size: 16px; font-weight: bold; transition: background-color 0.3s ease; } .et_pb_linkedin_icon:hover { background-color: #005983; \/* Darker LinkedIn blue *\/ } \/* Contact card styling *\/ .contact-card { max-width: 20rem; background: #fff; border: 1px solid #ddd; border-radius: 0.5rem; overflow: hidden; margin: 1rem auto; text-align: center; } .contact-card img { width: 100%; height: auto; object-fit: contain; } <\/style><\/head><body class=\"min-h-screen bg-gradient-to-b from-gray-100 to-white text-gray-900\">  <div class=\"w-full max-w-screen-xl mx-auto py-8 px-4\">  <div id=\"filtersAndProjects\">  <div class=\"flex flex-col md:flex-row md:items-center md:justify-between mb-6 gap-4\">  <h1 id=”page-title” class=”text-3xl font-bold uppercase tracking-wide text-center md:text-left” ><\/h1>  <div class=\"flex flex-col sm:flex-row items-center gap-2\">  <select id=”productenFilter” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” > <option value=\"\" id=\"productenDefaultOption\"><\/option> <\/select>  <select id=”landFilter” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” > <option value=\"\" id=\"landDefaultOption\"><\/option> <\/select>  <input type=”text” id=”searchInput” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” \/>  <button id=”resetBtn” class=”border border-gray-300 rounded px-4 py-2 bg-gray-200 hover:bg-gray-300 text-sm font-medium transition-colors” > <\/button> <\/div> <\/div>  <div id=”projectsContainer” class=”grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6″ >  <\/div> <\/div>   <div id=”myModal” class=”hidden w-full bg-white rounded-lg mt-8 px-4 py-6″ >  <button id=”closeModalBtn” class=”bg-gray-200 hover:bg-gray-300 rounded px-3 py-1 text-lg transition-colors float-right” aria-label=”Close Modal” > Sluiten <\/button>  <div class=\"flex flex-col md:flex-row mt-2 md:mt-0\">  <div class=\"md:w-1\/2 md:pr-6 mb-6 md:mb-0\"> <h2 id=”modalTitle” class=”text-3xl font-bold mb-2 text-blue-600 tracking-wide” ><\/h2>  <pee class=\"text-gray-700 mb-1\"> <strong id=\"modalLandLabel\"><\/strong> <span id=\"modalLandValue\" class=\"ml-1\"><\/span> <\/pee>  <pee class=\"text-gray-700 mb-4\"> <strong id=\"modalProductLabel\"><\/strong> <span id=\"modalProductValue\" class=\"ml-1\"><\/span> <\/pee>  <div class=\"mb-6\"> <h3 id=\"modalAssignmentHeading\" class=\"text-lg font-semibold\"><\/h3> <pee id=\"modalAssignment\" class=\"text-gray-700 italic\"><\/pee> <\/div> <div class=\"mb-6\"> <h3 id=\"modalDescriptionHeading\" class=\"text-lg font-semibold\"><\/h3> <pee id=\"modalDescription\" class=\"text-gray-700\"><\/pee> <\/div> <\/div>  <div class=\"md:w-1\/2 md:pl-6 flex flex-col items-center\">  <div id=\"modalContact\" class=\"mx-auto w-full mb-4\" style=\"max-width: 14rem;\">  <\/div>  <div class=\"relative w-full flex justify-center overflow-hidden mb-4\"> <img id=”modalMainImage” src=”” alt=”Main Image” class=”rounded shadow-md max-h-[500px] object-contain” \/> <\/div>  <div id=”modalThumbnails” class=”grid grid-cols-4 grid-rows-2 gap-2 w-full” >  <\/div> <\/div> <\/div> <\/div> <\/div> <script> \/\/ 0) Utility to check if we are on English page function isEnglishPage() { return window.location.pathname.includes('\/en\/'); } \/\/ 0.1) Provide text in both languages const textContent = { en: { pageTitle: 'Projects', productenDefault: 'Products', landDefault: 'Country', searchPlaceholder: 'Search projects...', resetButton: 'Reset', noProjectsFound: 'No projects found.', modalLandLabel: 'Country:', modalProductLabel: 'Products:', assignmentHeading: 'Assignment Description', descriptionHeading: 'Project Description' }, nl: { pageTitle: 'Projecten', productenDefault: 'Producten', landDefault: 'Land', searchPlaceholder: 'Zoeken naar projecten...', resetButton: 'Reset', noProjectsFound: 'Geen projecten gevonden.', modalLandLabel: 'Land:', modalProductLabel: 'Producten:', assignmentHeading: 'Opdracht omschrijving', descriptionHeading: 'Project Omschrijving' } }; \/\/ 0.2) Set the main UI text based on language function setLanguageContent() { const lang = isEnglishPage() ? 'en' : 'nl'; const t = textContent[lang]; \/\/ Page Title document.getElementById('page-title').textContent = t.pageTitle; \/\/ Filter placeholders document.getElementById('productenDefaultOption').textContent = t.productenDefault; document.getElementById('landDefaultOption').textContent = t.landDefault; document.getElementById('searchInput').placeholder = t.searchPlaceholder; \/\/ Reset button text document.getElementById('resetBtn').textContent = t.resetButton; \/\/ Modal labels document.getElementById('modalLandLabel').textContent = t.modalLandLabel; document.getElementById('modalProductLabel').textContent = t.modalProductLabel; document.getElementById('modalAssignmentHeading').textContent = t.assignmentHeading; document.getElementById('modalDescriptionHeading').textContent = t.descriptionHeading; } \/\/ Global arrays for all projects and the filtered subset let projects = []; let filteredProjects = []; \/\/ We'll keep track of currently displayed images and the index let displayedImages = []; let currentImageIndex = 0; \/\/ DOM references const filtersAndProjects = document.getElementById('filtersAndProjects'); const projectsContainer = document.getElementById('projectsContainer'); const myModal = document.getElementById('myModal'); const closeModalBtn = document.getElementById('closeModalBtn'); \/\/ Modal elements const modalTitle = document.getElementById('modalTitle'); const modalAssignment = document.getElementById('modalAssignment'); const modalDescription = document.getElementById('modalDescription'); const modalContact = document.getElementById('modalContact'); const modalMainImage = document.getElementById('modalMainImage'); const modalThumbnails = document.getElementById('modalThumbnails'); const modalLandValue = document.getElementById('modalLandValue'); const modalProductValue = document.getElementById('modalProductValue'); \/\/ Filter elements const productenFilter = document.getElementById('productenFilter'); const landFilter = document.getElementById('landFilter'); const searchInput = document.getElementById('searchInput'); const resetBtn = document.getElementById('resetBtn'); \/\/ 1) Load projects with language param function loadProjects() { \/\/ Switch 'lang' param based on English or Dutch fetch(`https:\/\/es8.nl\/project\/projects.php?lang=${isEnglishPage() ? 'en' : 'nl'}`) .then((response) => response.json()) .then((data) => { if (data.error) { console.error('Error from server:', data.error); projectsContainer.innerHTML = `<pee class=\"text-red-500\">${data.error}<\/pee>`; return; } projects = data.projects || []; populateFiltersFromProjects(); filteredProjects = [...projects]; renderProjects(filteredProjects); }) .catch((err) => { console.error('Fetch error:', err); projectsContainer.innerHTML = `<pee class=\"text-red-500\">Error loading projects. Check console.<\/pee>`; }); } \/\/ 2) Build filter dropdowns with counts function populateFiltersFromProjects() { const productCount = {}; const landCount = {}; projects.forEach((project) => { \/\/ Producten if (project.producten) { if (!productCount[project.producten]) { productCount[project.producten] = 0; } productCount[project.producten]++; } \/\/ Land if (project.land) { if (!landCount[project.land]) { landCount[project.land] = 0; } landCount[project.land]++; } }); \/\/ Sort them const sortedProducts = Object.keys(productCount).sort(); const sortedLands = Object.keys(landCount).sort(); populateDropdown(productenFilter, sortedProducts, productCount); populateDropdown(landFilter, sortedLands, landCount); } \/\/ Helper: populate a dropdown with \"key (count)\" function populateDropdown(dropdownElement, keysArray, countObject) { \/\/ Remove existing dynamic options first, but leave the default <option> while (dropdownElement.children.length > 1) { dropdownElement.removeChild(dropdownElement.lastChild); } \/\/ Then add new ones keysArray.forEach((key) => { const opt = document.createElement('option'); opt.value = key; opt.textContent = `${key} (${countObject[key]})`; dropdownElement.appendChild(opt); }); } \/\/ 3) Apply filters function applyFilters() { const selectedProduct = productenFilter.value.trim().toLowerCase(); const selectedLand = landFilter.value.trim().toLowerCase(); const searchTerm = searchInput.value.trim().toLowerCase(); filteredProjects = projects.filter((project) => { let matches = true; const projectProduct = (project.producten || '').toLowerCase(); const projectLand = (project.land || '').toLowerCase(); const projectTitle = (project.title || '').toLowerCase(); if (selectedProduct) { matches = matches && projectProduct === selectedProduct; } if (selectedLand) { matches = matches && projectLand === selectedLand; } if (searchTerm) { matches = matches && projectTitle.includes(searchTerm); } return matches; }); renderProjects(filteredProjects); } \/\/ 4) Render the filtered projects function renderProjects(projectList) { projectsContainer.innerHTML = ''; if (!projectList.length) { const lang = isEnglishPage() ? 'en' : 'nl'; const noProjectsText = textContent[lang].noProjectsFound; projectsContainer.innerHTML = `<pee class=\"text-gray-500\">${noProjectsText}<\/pee>`; return; } projectList.forEach((proj) => { let images = []; try { images = JSON.parse(proj.images) || []; } catch (err) { images = []; } const mainImage = images.length ? images[0] : 'placeholder.jpg'; const card = document.createElement('div'); card.className = ` bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow duration-300 cursor-pointer `; card.innerHTML = ` <img src=\"https:\/\/es8.nl\/project\/uploads\/${mainImage}\" alt=\"${proj.title || 'Project Image'}\" class=\"w-full h-48 object-cover rounded-md\" \/> <h2 class=\"text-xl font-semibold mt-2 line-clamp-2\"> ${proj.title || 'Untitled Project'} <\/h2> <pee class=\"text-gray-700\"> <strong>${proj.producten ? 'Producten:' : ''}<\/strong> ${proj.producten || '-'} <\/pee> <pee class=\"text-gray-700\"> <strong>${proj.land ? 'Land:' : ''}<\/strong> ${proj.land || '-'} <\/pee> `; card.addEventListener('click', () => { showProjectModal(proj, images); }); projectsContainer.appendChild(card); }); } \/\/ 5) Show project details in the \"modal\" section function showProjectModal(project, imagesArray) { \/\/ Fill text fields modalTitle.textContent = project.title || ''; modalAssignment.textContent = project.assignment || '(Geen omschrijving)'; modalDescription.textContent = project.description || ''; modalLandValue.textContent = project.land || '-'; modalProductValue.textContent = project.producten || '-'; \/\/ Contact card modalContact.innerHTML = buildContactCard(project); \/\/ Store images for the modal displayedImages = imagesArray.length ? imagesArray : ['placeholder.jpg']; currentImageIndex = 0; \/\/ Show the initial main image modalMainImage.src = 'https:\/\/es8.nl\/project\/uploads\/' + displayedImages[currentImageIndex]; \/\/ Thumbnails modalThumbnails.innerHTML = ''; displayedImages.forEach((img, idx) => { const thumb = document.createElement('img'); thumb.src = 'https:\/\/es8.nl\/project\/uploads\/' + img; thumb.classList.add( 'h-20', 'object-cover', 'cursor-pointer', 'rounded', 'border', 'border-gray-300' ); thumb.addEventListener('click', () => { currentImageIndex = idx; modalMainImage.src = 'https:\/\/es8.nl\/project\/uploads\/' + displayedImages[currentImageIndex]; }); modalThumbnails.appendChild(thumb); }); \/\/ Hide the filters + projects, show the detail filtersAndProjects.classList.add('hidden'); myModal.classList.remove('hidden'); window.scrollTo({ top: 0, behavior: 'smooth' }); } \/\/ 6) Build contact card function buildContactCard(project) { const isEnglish = isEnglishPage(); const contactFunctie = project.contact_functie || 'Functie'; const contactOmschrijving = isEnglish ? project.contact_omschrijving_en : project.contact_omschrijving_nl; const contactImage = project.contact_image || 'default-profile.png'; const contactName = project.contact_name || 'Naam'; \/\/ Fallback if no text is provided const fallbackText = isEnglish ? 'Short description (EN)' : 'Korte omschrijving (NL)'; return ` <div class=\"contact-card\"> <img src=\"https:\/\/es8.nl\/project\/uploads\/${contactImage}\" alt=\"${contactName}\" \/> <div class=\"p-3\"> <h2 class=\"text-blue-600 text-lg font-bold\"> ${contactName} <\/h2> <pee class=\"text-red-500 font-medium mt-1 text-sm\"> ${contactFunctie} <\/pee> <pee class=\"text-gray-700 mt-2 text-xs\"> ${contactOmschrijving || fallbackText} <\/pee>  <a href=\"${project.contact_linkedin || '#'}\" target=\"_blank\" class=\"${ project.contact_linkedin ? 'et_pb_linkedin_icon inline-block mt-3' : 'hidden' }\" > in <\/a> <\/div> <\/div> `; } \/\/ Hide the modal & show the projects\/filters again function hideModal() { myModal.classList.add('hidden'); filtersAndProjects.classList.remove('hidden'); } \/\/ Close modal on clicking the close button closeModalBtn.addEventListener('click', hideModal); \/\/ We removed the overlay approach since we want normal flow, so no overlay click needed. \/\/ 7) Filter events productenFilter.addEventListener('change', applyFilters); landFilter.addEventListener('change', applyFilters); searchInput.addEventListener('input', applyFilters); \/\/ Reset filters resetBtn.addEventListener('click', () => { productenFilter.value = ''; landFilter.value = ''; searchInput.value = ''; filteredProjects = [...projects]; renderProjects(filteredProjects); }); \/\/ 8) On page load document.addEventListener('DOMContentLoaded', () => { setLanguageContent(); loadProjects(); }); <\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]","protected":false},"excerpt":{"rendered":"<p>Projects id=”page-title” class=”text-3xl font-bold uppercase tracking-wide text-center md:text-left” id=”productenFilter” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” id=”landFilter” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” type=”text” id=”searchInput” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” \/ id=”resetBtn” class=”border border-gray-300 rounded px-4 py-2 bg-gray-200 hover:bg-gray-300 text-sm font-medium transition-colors” id=”projectsContainer” class=”grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6″ id=”myModal” class=”hidden w-full bg-white rounded-lg mt-8 px-4 […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-541","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/pages\/541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/comments?post=541"}],"version-history":[{"count":204,"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/pages\/541\/revisions"}],"predecessor-version":[{"id":2113,"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/pages\/541\/revisions\/2113"}],"wp:attachment":[{"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/media?parent=541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":541,"date":"2025-01-13T09:00:34","date_gmt":"2025-01-13T09:00:34","guid":{"rendered":"https:\/\/concept.burocite.nl\/?page_id=541"},"modified":"2025-03-31T14:21:16","modified_gmt":"2025-03-31T14:21:16","slug":"projecten","status":"publish","type":"page","link":"https:\/\/es8.nl\/en\/projecten\/","title":{"rendered":"PROJECTS"},"content":{"rendered":"[et_pb_section fb_built=”1″ _builder_version=”4.27.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.27.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.3″ _module_preset=”default” global_colors_info=”{}”] Projects<\/title>  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script>  <style> \/* LinkedIn Icon *\/ .et_pb_linkedin_icon { display: inline-block; background-color: #0077B5; \/* LinkedIn blue *\/ color: #FFFFFF !important; \/* White icon *\/ width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 4px; font-size: 16px; font-weight: bold; transition: background-color 0.3s ease; } .et_pb_linkedin_icon:hover { background-color: #005983; \/* Darker LinkedIn blue *\/ } \/* Contact card styling *\/ .contact-card { max-width: 20rem; background: #fff; border: 1px solid #ddd; border-radius: 0.5rem; overflow: hidden; margin: 1rem auto; text-align: center; } .contact-card img { width: 100%; height: auto; object-fit: contain; } <\/style><\/head><body class=\"min-h-screen bg-gradient-to-b from-gray-100 to-white text-gray-900\">  <div class=\"w-full max-w-screen-xl mx-auto py-8 px-4\">  <div id=\"filtersAndProjects\">  <div class=\"flex flex-col md:flex-row md:items-center md:justify-between mb-6 gap-4\">  <h1 id=”page-title” class=”text-3xl font-bold uppercase tracking-wide text-center md:text-left” ><\/h1>  <div class=\"flex flex-col sm:flex-row items-center gap-2\">  <select id=”productenFilter” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” > <option value=\"\" id=\"productenDefaultOption\"><\/option> <\/select>  <select id=”landFilter” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” > <option value=\"\" id=\"landDefaultOption\"><\/option> <\/select>  <input type=”text” id=”searchInput” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” \/>  <button id=”resetBtn” class=”border border-gray-300 rounded px-4 py-2 bg-gray-200 hover:bg-gray-300 text-sm font-medium transition-colors” > <\/button> <\/div> <\/div>  <div id=”projectsContainer” class=”grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6″ >  <\/div> <\/div>   <div id=”myModal” class=”hidden w-full bg-white rounded-lg mt-8 px-4 py-6″ >  <button id=”closeModalBtn” class=”bg-gray-200 hover:bg-gray-300 rounded px-3 py-1 text-lg transition-colors float-right” aria-label=”Close Modal” > Sluiten <\/button>  <div class=\"flex flex-col md:flex-row mt-2 md:mt-0\">  <div class=\"md:w-1\/2 md:pr-6 mb-6 md:mb-0\"> <h2 id=”modalTitle” class=”text-3xl font-bold mb-2 text-blue-600 tracking-wide” ><\/h2>  <pee class=\"text-gray-700 mb-1\"> <strong id=\"modalLandLabel\"><\/strong> <span id=\"modalLandValue\" class=\"ml-1\"><\/span> <\/pee>  <pee class=\"text-gray-700 mb-4\"> <strong id=\"modalProductLabel\"><\/strong> <span id=\"modalProductValue\" class=\"ml-1\"><\/span> <\/pee>  <div class=\"mb-6\"> <h3 id=\"modalAssignmentHeading\" class=\"text-lg font-semibold\"><\/h3> <pee id=\"modalAssignment\" class=\"text-gray-700 italic\"><\/pee> <\/div> <div class=\"mb-6\"> <h3 id=\"modalDescriptionHeading\" class=\"text-lg font-semibold\"><\/h3> <pee id=\"modalDescription\" class=\"text-gray-700\"><\/pee> <\/div> <\/div>  <div class=\"md:w-1\/2 md:pl-6 flex flex-col items-center\">  <div id=\"modalContact\" class=\"mx-auto w-full mb-4\" style=\"max-width: 14rem;\">  <\/div>  <div class=\"relative w-full flex justify-center overflow-hidden mb-4\"> <img id=”modalMainImage” src=”” alt=”Main Image” class=”rounded shadow-md max-h-[500px] object-contain” \/> <\/div>  <div id=”modalThumbnails” class=”grid grid-cols-4 grid-rows-2 gap-2 w-full” >  <\/div> <\/div> <\/div> <\/div> <\/div> <script> \/\/ 0) Utility to check if we are on English page function isEnglishPage() { return window.location.pathname.includes('\/en\/'); } \/\/ 0.1) Provide text in both languages const textContent = { en: { pageTitle: 'Projects', productenDefault: 'Products', landDefault: 'Country', searchPlaceholder: 'Search projects...', resetButton: 'Reset', noProjectsFound: 'No projects found.', modalLandLabel: 'Country:', modalProductLabel: 'Products:', assignmentHeading: 'Assignment Description', descriptionHeading: 'Project Description' }, nl: { pageTitle: 'Projecten', productenDefault: 'Producten', landDefault: 'Land', searchPlaceholder: 'Zoeken naar projecten...', resetButton: 'Reset', noProjectsFound: 'Geen projecten gevonden.', modalLandLabel: 'Land:', modalProductLabel: 'Producten:', assignmentHeading: 'Opdracht omschrijving', descriptionHeading: 'Project Omschrijving' } }; \/\/ 0.2) Set the main UI text based on language function setLanguageContent() { const lang = isEnglishPage() ? 'en' : 'nl'; const t = textContent[lang]; \/\/ Page Title document.getElementById('page-title').textContent = t.pageTitle; \/\/ Filter placeholders document.getElementById('productenDefaultOption').textContent = t.productenDefault; document.getElementById('landDefaultOption').textContent = t.landDefault; document.getElementById('searchInput').placeholder = t.searchPlaceholder; \/\/ Reset button text document.getElementById('resetBtn').textContent = t.resetButton; \/\/ Modal labels document.getElementById('modalLandLabel').textContent = t.modalLandLabel; document.getElementById('modalProductLabel').textContent = t.modalProductLabel; document.getElementById('modalAssignmentHeading').textContent = t.assignmentHeading; document.getElementById('modalDescriptionHeading').textContent = t.descriptionHeading; } \/\/ Global arrays for all projects and the filtered subset let projects = []; let filteredProjects = []; \/\/ We'll keep track of currently displayed images and the index let displayedImages = []; let currentImageIndex = 0; \/\/ DOM references const filtersAndProjects = document.getElementById('filtersAndProjects'); const projectsContainer = document.getElementById('projectsContainer'); const myModal = document.getElementById('myModal'); const closeModalBtn = document.getElementById('closeModalBtn'); \/\/ Modal elements const modalTitle = document.getElementById('modalTitle'); const modalAssignment = document.getElementById('modalAssignment'); const modalDescription = document.getElementById('modalDescription'); const modalContact = document.getElementById('modalContact'); const modalMainImage = document.getElementById('modalMainImage'); const modalThumbnails = document.getElementById('modalThumbnails'); const modalLandValue = document.getElementById('modalLandValue'); const modalProductValue = document.getElementById('modalProductValue'); \/\/ Filter elements const productenFilter = document.getElementById('productenFilter'); const landFilter = document.getElementById('landFilter'); const searchInput = document.getElementById('searchInput'); const resetBtn = document.getElementById('resetBtn'); \/\/ 1) Load projects with language param function loadProjects() { \/\/ Switch 'lang' param based on English or Dutch fetch(`https:\/\/es8.nl\/project\/projects.php?lang=${isEnglishPage() ? 'en' : 'nl'}`) .then((response) => response.json()) .then((data) => { if (data.error) { console.error('Error from server:', data.error); projectsContainer.innerHTML = `<pee class=\"text-red-500\">${data.error}<\/pee>`; return; } projects = data.projects || []; populateFiltersFromProjects(); filteredProjects = [...projects]; renderProjects(filteredProjects); }) .catch((err) => { console.error('Fetch error:', err); projectsContainer.innerHTML = `<pee class=\"text-red-500\">Error loading projects. Check console.<\/pee>`; }); } \/\/ 2) Build filter dropdowns with counts function populateFiltersFromProjects() { const productCount = {}; const landCount = {}; projects.forEach((project) => { \/\/ Producten if (project.producten) { if (!productCount[project.producten]) { productCount[project.producten] = 0; } productCount[project.producten]++; } \/\/ Land if (project.land) { if (!landCount[project.land]) { landCount[project.land] = 0; } landCount[project.land]++; } }); \/\/ Sort them const sortedProducts = Object.keys(productCount).sort(); const sortedLands = Object.keys(landCount).sort(); populateDropdown(productenFilter, sortedProducts, productCount); populateDropdown(landFilter, sortedLands, landCount); } \/\/ Helper: populate a dropdown with \"key (count)\" function populateDropdown(dropdownElement, keysArray, countObject) { \/\/ Remove existing dynamic options first, but leave the default <option> while (dropdownElement.children.length > 1) { dropdownElement.removeChild(dropdownElement.lastChild); } \/\/ Then add new ones keysArray.forEach((key) => { const opt = document.createElement('option'); opt.value = key; opt.textContent = `${key} (${countObject[key]})`; dropdownElement.appendChild(opt); }); } \/\/ 3) Apply filters function applyFilters() { const selectedProduct = productenFilter.value.trim().toLowerCase(); const selectedLand = landFilter.value.trim().toLowerCase(); const searchTerm = searchInput.value.trim().toLowerCase(); filteredProjects = projects.filter((project) => { let matches = true; const projectProduct = (project.producten || '').toLowerCase(); const projectLand = (project.land || '').toLowerCase(); const projectTitle = (project.title || '').toLowerCase(); if (selectedProduct) { matches = matches && projectProduct === selectedProduct; } if (selectedLand) { matches = matches && projectLand === selectedLand; } if (searchTerm) { matches = matches && projectTitle.includes(searchTerm); } return matches; }); renderProjects(filteredProjects); } \/\/ 4) Render the filtered projects function renderProjects(projectList) { projectsContainer.innerHTML = ''; if (!projectList.length) { const lang = isEnglishPage() ? 'en' : 'nl'; const noProjectsText = textContent[lang].noProjectsFound; projectsContainer.innerHTML = `<pee class=\"text-gray-500\">${noProjectsText}<\/pee>`; return; } projectList.forEach((proj) => { let images = []; try { images = JSON.parse(proj.images) || []; } catch (err) { images = []; } const mainImage = images.length ? images[0] : 'placeholder.jpg'; const card = document.createElement('div'); card.className = ` bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow duration-300 cursor-pointer `; card.innerHTML = ` <img src=\"https:\/\/es8.nl\/project\/uploads\/${mainImage}\" alt=\"${proj.title || 'Project Image'}\" class=\"w-full h-48 object-cover rounded-md\" \/> <h2 class=\"text-xl font-semibold mt-2 line-clamp-2\"> ${proj.title || 'Untitled Project'} <\/h2> <pee class=\"text-gray-700\"> <strong>${proj.producten ? 'Producten:' : ''}<\/strong> ${proj.producten || '-'} <\/pee> <pee class=\"text-gray-700\"> <strong>${proj.land ? 'Land:' : ''}<\/strong> ${proj.land || '-'} <\/pee> `; card.addEventListener('click', () => { showProjectModal(proj, images); }); projectsContainer.appendChild(card); }); } \/\/ 5) Show project details in the \"modal\" section function showProjectModal(project, imagesArray) { \/\/ Fill text fields modalTitle.textContent = project.title || ''; modalAssignment.textContent = project.assignment || '(Geen omschrijving)'; modalDescription.textContent = project.description || ''; modalLandValue.textContent = project.land || '-'; modalProductValue.textContent = project.producten || '-'; \/\/ Contact card modalContact.innerHTML = buildContactCard(project); \/\/ Store images for the modal displayedImages = imagesArray.length ? imagesArray : ['placeholder.jpg']; currentImageIndex = 0; \/\/ Show the initial main image modalMainImage.src = 'https:\/\/es8.nl\/project\/uploads\/' + displayedImages[currentImageIndex]; \/\/ Thumbnails modalThumbnails.innerHTML = ''; displayedImages.forEach((img, idx) => { const thumb = document.createElement('img'); thumb.src = 'https:\/\/es8.nl\/project\/uploads\/' + img; thumb.classList.add( 'h-20', 'object-cover', 'cursor-pointer', 'rounded', 'border', 'border-gray-300' ); thumb.addEventListener('click', () => { currentImageIndex = idx; modalMainImage.src = 'https:\/\/es8.nl\/project\/uploads\/' + displayedImages[currentImageIndex]; }); modalThumbnails.appendChild(thumb); }); \/\/ Hide the filters + projects, show the detail filtersAndProjects.classList.add('hidden'); myModal.classList.remove('hidden'); window.scrollTo({ top: 0, behavior: 'smooth' }); } \/\/ 6) Build contact card function buildContactCard(project) { const isEnglish = isEnglishPage(); const contactFunctie = project.contact_functie || 'Functie'; const contactOmschrijving = isEnglish ? project.contact_omschrijving_en : project.contact_omschrijving_nl; const contactImage = project.contact_image || 'default-profile.png'; const contactName = project.contact_name || 'Naam'; \/\/ Fallback if no text is provided const fallbackText = isEnglish ? 'Short description (EN)' : 'Korte omschrijving (NL)'; return ` <div class=\"contact-card\"> <img src=\"https:\/\/es8.nl\/project\/uploads\/${contactImage}\" alt=\"${contactName}\" \/> <div class=\"p-3\"> <h2 class=\"text-blue-600 text-lg font-bold\"> ${contactName} <\/h2> <pee class=\"text-red-500 font-medium mt-1 text-sm\"> ${contactFunctie} <\/pee> <pee class=\"text-gray-700 mt-2 text-xs\"> ${contactOmschrijving || fallbackText} <\/pee>  <a href=\"${project.contact_linkedin || '#'}\" target=\"_blank\" class=\"${ project.contact_linkedin ? 'et_pb_linkedin_icon inline-block mt-3' : 'hidden' }\" > in <\/a> <\/div> <\/div> `; } \/\/ Hide the modal & show the projects\/filters again function hideModal() { myModal.classList.add('hidden'); filtersAndProjects.classList.remove('hidden'); } \/\/ Close modal on clicking the close button closeModalBtn.addEventListener('click', hideModal); \/\/ We removed the overlay approach since we want normal flow, so no overlay click needed. \/\/ 7) Filter events productenFilter.addEventListener('change', applyFilters); landFilter.addEventListener('change', applyFilters); searchInput.addEventListener('input', applyFilters); \/\/ Reset filters resetBtn.addEventListener('click', () => { productenFilter.value = ''; landFilter.value = ''; searchInput.value = ''; filteredProjects = [...projects]; renderProjects(filteredProjects); }); \/\/ 8) On page load document.addEventListener('DOMContentLoaded', () => { setLanguageContent(); loadProjects(); }); <\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]","protected":false},"excerpt":{"rendered":"<p>Projects id=”page-title” class=”text-3xl font-bold uppercase tracking-wide text-center md:text-left” id=”productenFilter” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” id=”landFilter” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” type=”text” id=”searchInput” class=”border border-gray-300 rounded px-3 py-2 focus:outline-none” \/ id=”resetBtn” class=”border border-gray-300 rounded px-4 py-2 bg-gray-200 hover:bg-gray-300 text-sm font-medium transition-colors” id=”projectsContainer” class=”grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6″ id=”myModal” class=”hidden w-full bg-white rounded-lg mt-8 px-4 […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-541","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/pages\/541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/comments?post=541"}],"version-history":[{"count":204,"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/pages\/541\/revisions"}],"predecessor-version":[{"id":2113,"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/pages\/541\/revisions\/2113"}],"wp:attachment":[{"href":"https:\/\/es8.nl\/en\/wp-json\/wp\/v2\/media?parent=541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}