Thank you for your submission!
'\n form.classList.add('submitted')\n\n form.reset()\n } else {\n alert('Error: ' + (data.data.message || 'Something went wrong.'))\n }\n })\n .catch(error => console.error('Error:', error))\n })\n }\n}\n\n\nconst handleNotePositions = (container) => {\n placeItems(container);\n\n window.addEventListener('resize', () => {\n placeItems(container);\n });\n}\n\nfunction placeItems(container, gap = 10, maxAttempts = 500) {\n const items = container.querySelectorAll('.note');\n const containerWidth = container.offsetWidth;\n const containerHeight = container.offsetHeight;\n\n const placedPositions = [];\n\n for (const item of items) {\n item.style.opacity = 0;\n item.style.visibility = 'hidden';\n item.style.zIndex = -1;\n const itemWidth = item.offsetWidth;\n const itemHeight = item.offsetHeight;\n let top, left;\n let isValidPosition = false;\n let attempts = 0;\n\n while (!isValidPosition && attempts < maxAttempts) {\n attempts++;\n\n // Y-Axis: Favor positions closer to the vertical center\n top = Math.random() * (containerHeight * 0.5) + (containerHeight * 0.25); // Between 25% and 75% of container height\n left = Math.random() * (containerWidth - itemWidth);\n\n // Check for overlap and maintain a gap\n isValidPosition = placedPositions.every(pos => {\n const xDistance = Math.abs(left - pos.left);\n const yDistance = Math.abs(top - pos.top);\n\n return (\n xDistance >= itemWidth + gap || // Ensure horizontal spacing with gap\n yDistance >= itemHeight + gap // Ensure vertical spacing with gap\n );\n });\n }\n\n if (!isValidPosition) {\n console.log(`Could not place item after ${maxAttempts} attempts.`);\n continue\n }\n\n // Save the position\n placedPositions.push({ left, top, width: itemWidth, height: itemHeight });\n\n // Apply the position\n item.style.visibility = 'visible';\n item.style.position = 'absolute';\n item.style.zIndex = 1;\n item.style.opacity = 1;\n item.style.left = `${(left / containerWidth) * 100}%`; // Percentage-based positioning\n item.style.top = `${(top / containerHeight) * 100}%`; // Percentage-based positioning\n }\n}\n\n\n\n\nfunction getRandomColor() {\n return `hsl(${Math.random() * 360}, 70%, 70%)`;\n}\n","export const NumberAnimationController = () => {\n observeNumbers()\n}\n\n// Function to animate numbers or handle strings\nconst animateNumbers = () => {\n const counters = document.querySelectorAll(\"[data-target]\");\n counters.forEach(counter => {\n const target = counter.getAttribute(\"data-target\");\n\n if (!isNaN(target)) {\n countNumbers(counter);\n } else {\n cycleLetters(counter);\n }\n });\n}\n\nconst observeNumbers = () => {\n const counters = document.querySelectorAll(\"[data-target]\");\n\n const observer = new IntersectionObserver(\n (entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const counter = entry.target;\n counter.closest('.animated-stat').classList.add('show');\n\n const target = counter.getAttribute(\"data-target\");\n if (!isNaN(target)) {\n countNumbers(counter);\n } else {\n cycleLetters(counter);\n }\n observer.unobserve(counter); // Stop observing once animated\n }\n });\n },\n {\n root: null, // Use the viewport as the root\n rootMargin: \"-30% 0px\",\n threshold: 0 // Trigger as soon as the element enters the root margin\n }\n );\n\n counters.forEach(counter => observer.observe(counter));\n};\n\n\nconst countNumbers = (counter) => {\n const target = parseFloat(counter.getAttribute(\"data-target\"));\n const increment = target / 100; // Adjust speed here\n let current = 0;\n\n const hasDecimals = target % 1 !== 0; // Check if the target number has decimals\n\n const updateCounter = () => {\n current += increment;\n if (current >= target) {\n counter.textContent = hasDecimals ? target.toFixed(1) : Math.round(target);\n } else {\n counter.textContent = hasDecimals ? current.toFixed(1) : Math.round(current);\n requestAnimationFrame(updateCounter);\n }\n };\n\n updateCounter();\n};\n\n\nconst cycleLetters = (counter) => {\n\n const targetText = counter.getAttribute(\"data-target\");\n const targetLetters = targetText.split(\"\");\n const placeholders = targetLetters.map(() => \"\"); // Start with empty placeholders\n\n counter.textContent = placeholders.join(\"\");\n\n let cyclingIntervals = [];\n\n\n // Start cycling each letter\n targetLetters.forEach((letter, index) => {\n const isUpperCase = letter === letter.toUpperCase();\n\n cyclingIntervals[index] = setInterval(() => {\n placeholders[index] = getRandomLetter(isUpperCase);\n counter.textContent = placeholders.join(\"\");\n }, 100); // Adjust speed of random cycling here\n\n // Stop cycling the letter after a delay and reveal the correct one\n setTimeout(() => {\n clearInterval(cyclingIntervals[index]);\n placeholders[index] = letter;\n counter.textContent = placeholders.join(\"\");\n }, 500 + index * 300); // Delay each letter's stopping time for a staggered effect\n });\n}\n\n\nconst getRandomLetter = (isUpperCase) => {\n return String.fromCharCode(\n isUpperCase\n ? 65 + Math.floor(Math.random() * 26) // A-Z\n : 97 + Math.floor(Math.random() * 26) // a-z\n );\n};\n","import enquire from 'enquire.js'\n\nexport const OrganizationsController = () => {\n const tabs = document.querySelectorAll('.organizations-tabs-list__item')\n\n if (tabs.length > 0) {\n enquire.register('screen and (max-width:768px)', {\n match: () => {\n countriesFirstLetterNavigationMobile(tabs)\n setFirstToggleActiveMobile()\n countryNavigationSelect()\n countryTabs(tabs)\n },\n\n unmatch: () => {\n destroyMobileCountryTabs()\n },\n })\n }\n}\n\nconst countriesFirstLetterNavigationDesktop = (tabs) => {\n const container = document.querySelector('.country-toggle-nav')\n const list = document.createElement('ul')\n list.classList.add('country-toggle-list')\n container.appendChild(list)\n const letters = []\n\n for (const tab of tabs) {\n const country = tab.getAttribute('data-country-id')\n\n if (letters.indexOf(country.charAt(0)) === -1) {\n letters.push(country.charAt(0))\n }\n }\n\n for (const letter of letters) {\n const listItem = document.createElement('li')\n listItem.classList.add('country-toggle-list__item')\n\n list.appendChild(listItem)\n\n const button = document.createElement('button')\n button.setAttribute('data-countries', letter)\n button.classList.add('country-toggle')\n button.textContent = letter\n listItem.appendChild(button)\n }\n}\n\nconst destroyCountriesFirstLetterNavigationDesktop = (tabs) => {\n const container = document.querySelector('.country-toggle-nav')\n container.innerHTML = ''\n}\n\nconst countriesFirstLetterNavigationMobile = (tabs) => {\n const container = document.querySelector('.country-toggle-nav-mobile__inner')\n\n const selectWrapper = document.createElement('div')\n selectWrapper.classList.add('custom-select')\n container.appendChild(selectWrapper)\n\n const select = document.createElement('select')\n select.classList.add('country-toggle-select')\n selectWrapper.appendChild(select)\n\n const letters = []\n\n for (const tab of tabs) {\n const country = tab.getAttribute('data-country-id')\n\n if (letters.indexOf(country.charAt(0)) === -1) {\n letters.push(country.charAt(0))\n }\n }\n\n for (const letter of letters) {\n const option = document.createElement('option')\n option.classList.add('country-toggle-list__item')\n option.setAttribute('value', letter)\n option.textContent = letter\n select.appendChild(option)\n }\n}\n\nconst destroyMobileCountryTabs = (tabs) => {\n const container = document.querySelector('.country-toggle-nav-mobile__inner')\n container.innerHTML = ''\n\n const hiddenElements = document.querySelectorAll('.organizations-tabs .hide')\n\n for (const el of hiddenElements) {\n el.classList.remove('hide')\n }\n}\n\nconst setFirstToggleActiveDesktop = () => {\n const toggles = document.querySelectorAll('.country-toggle')\n toggles[0].classList.add('active')\n toggleCountries(toggles[0].getAttribute('data-countries'))\n}\n\nconst setFirstToggleActiveMobile = () => {\n const toggles = document.querySelectorAll('.country-toggle-select option')\n toggleCountries(toggles[0].value)\n}\n\nconst countryTabs = (tabs) => {\n for (const tab of tabs) {\n const countryCode = tab.getAttribute('data-country-id')\n tab.addEventListener('click', (e) => {\n toggleOrgsByCountry(countryCode)\n setItemActive(tabs, e.currentTarget)\n })\n }\n}\n\nconst countryNavigationButtons = () => {\n const buttons = document.querySelectorAll('.country-toggle')\n for (const button of buttons) {\n button.addEventListener('click', (e) => {\n toggleCountries(button.getAttribute('data-countries'))\n setItemActive(buttons, e.currentTarget)\n })\n }\n}\n\nconst countryNavigationSelect = () => {\n const selects = document.querySelectorAll('.country-toggle-select')\n for (const select of selects) {\n select.addEventListener('change', (e) => {\n toggleCountries(select.value)\n })\n }\n}\n\nconst toggleCountries = (countriesFirstLetter) => {\n const tabs = document.querySelectorAll('.organizations-tabs-list__item')\n const allowedCountries = []\n\n for (const tab of tabs) {\n const countryCode = tab.getAttribute('data-country-id')\n if (countryCode.charAt(0) === countriesFirstLetter) {\n allowedCountries.push(countryCode)\n }\n }\n\n hideAllTabs(tabs)\n showTabs(tabs, allowedCountries)\n}\n\nconst hideAllTabs = (tabs) => {\n for (const tab of tabs) {\n if (!tab.classList.contains('hide')) {\n tab.classList.add('hide')\n }\n }\n\n hideAllOrgs()\n}\n\nconst showTabs = (tabs, allowedCountries) => {\n for (const tab of tabs) {\n const country_code = tab.getAttribute('data-country-id')\n\n if (allowedCountries.indexOf(country_code) != -1) {\n if (tab.classList.contains('hide')) {\n tab.classList.remove('hide')\n }\n }\n }\n\n showOrgsByCountry(allowedCountries[0])\n setItemActive(\n tabs,\n document.querySelector(\n '.organizations-tabs-list__item[data-country-id=\"' +\n allowedCountries[0] +\n '\"]'\n )\n )\n}\n\nconst toggleOrgsByCountry = (code) => {\n hideAllOrgs()\n showOrgsByCountry(code)\n}\n\nconst hideAllOrgs = () => {\n const countries = document.querySelectorAll(\n '.organizations-tabs .organization'\n )\n for (const country of countries) {\n if (!country.classList.contains('hide')) {\n country.classList.add('hide')\n }\n }\n}\n\nconst showOrgsByCountry = (code) => {\n const countries = document.querySelectorAll(\n '.organizations-tabs .organization[data-country-id=\"' + code + '\"]'\n )\n for (const country of countries) {\n if (country.classList.contains('hide')) {\n country.classList.remove('hide')\n }\n }\n}\n\nconst setItemActive = (buttons, current) => {\n for (const button of buttons) {\n if (button.classList.contains('active')) {\n button.classList.remove('active')\n }\n }\n\n if (!current.classList.contains('active')) {\n current.classList.add('active')\n }\n}\n","export const PublicationsFilterController = () => {\n if (!document.body.classList.contains('post-type-archive-publications'))\n return\n\n filterPublications()\n}\n\nconst addFilter = (filters, key, id) => {\n if (document.getElementById(id)) {\n filters[key] = document.getElementById(id)\n }\n}\n\nconst filterPublications = () => {\n const filterForm = document.getElementById('publications-filter-form')\n const searchSubmit = document.getElementById('filter-search-submit')\n const resetButton = document.getElementById('clear-filters')\n const filters = {}\n\n addFilter(filters, 'yearSelect', 'filter-year')\n addFilter(filters, 'typeSelect', 'filter-type')\n addFilter(filters, 'topicSelect', 'filter-topic')\n addFilter(filters, 'search', 'filter-search')\n\n // getFilteredPublications(0, timber_params.loadmore.current_page, filters)\n\n document.addEventListener(\n 'click',\n (e) => {\n if (e.target.matches('.pagination a')) {\n e.preventDefault()\n let parts = e.target.getAttribute('href').split('/')\n let page = parts.pop() || parts.pop() // handle potential trailing slash\n let offset = 0\n if (page > 1) {\n offset = (page - 1) * timber_params.loadmore.posts_per_page\n }\n\n getFilteredPublications(offset, page, filters)\n }\n },\n false\n )\n\n filterSelectsEventListener(filters)\n\n searchSubmit.addEventListener('click', (e) => {\n getFilteredPublications(0, 1, filters)\n })\n\n if (filterForm.addEventListener) {\n filterForm.addEventListener(\n 'submit',\n (e) => {\n e.preventDefault()\n getFilteredPublications(0, 1, filters)\n },\n true\n )\n } else {\n filterForm.attachEvent('onsubmit', (e) => {\n e.preventDefault()\n getFilteredPublications(0, 1, filters)\n })\n }\n\n resetButton.addEventListener('click', (e) => {\n resetFilters(filters)\n getFilteredPublications(0, 1, filters)\n })\n}\n\nconst filterSelectsEventListener = (filters) => {\n for (const key in filters) {\n if (filters[key].tagName === 'SELECT') {\n filters[key].addEventListener('change', (e) => {\n getFilteredPublications(0, 1, filters)\n })\n }\n }\n}\n\nconst resetFilters = (filters) => {\n for (const key in filters) {\n if (filters[key].tagName === 'SELECT') {\n filters[key].selectedIndex = null\n } else if (filters[key].tagName === 'INPUT') {\n filters[key].value = null\n }\n }\n}\n\nconst setLoadingState = () => {\n const container = document.getElementById('publications-container')\n\n container.style.opacity = 0.2\n container.classList.add('loading')\n}\n\nconst removeLoadingState = () => {\n const container = document.getElementById('publications-container')\n\n container.style.opacity = ''\n container.classList.remove('loading')\n}\n\nconst appendFilter = (filters, data, key, cat) => {\n if (filters[key] !== undefined) {\n data.append(cat, filters[key].value)\n }\n}\n\nconst getFilteredPublications = (offset, page, filters) => {\n setLoadingState()\n const data = new FormData()\n\n data.append('action', 'get_filtered_publications')\n data.append('nonce', timber_params.nonce)\n data.append('query', timber_params.loadmore.posts)\n data.append('page', page)\n data.append('is_search', timber_params.loadmore.is_search)\n data.append('lang', timber_params.loadmore.lang)\n data.append('offset', offset)\n data.append('meta_key', 'publication_date')\n data.append('orderby', 'meta_value')\n\n appendFilter(filters, data, 'yearSelect', 'publication_year')\n appendFilter(filters, data, 'typeSelect', 'publication_cat')\n appendFilter(filters, data, 'topicSelect', 'publication_topic')\n appendFilter(filters, data, 'search', 's')\n\n let params = new URLSearchParams(data)\n\n fetch(timber_params.ajaxurl, {\n method: 'POST',\n credentials: 'same-origin',\n body: params,\n })\n .then((response) => response.text())\n .then((data) => {\n if (data) {\n document.getElementById('publications-container').innerHTML = data\n removeLoadingState()\n }\n })\n .catch((error) => {\n console.error(error)\n })\n}\n","import { getCookie, setCookie, deleteCookie } from \"../utils/Cookies\"\nimport { areArraysEqual, removeClasses, toggleClass } from \"../utils/Utils\"\n\nconst quizBlocks = document.querySelectorAll('.quiz-block, .quiz-modal')\n\nconst c = {\n correct: 'correct',\n incorrect: 'incorrect',\n visuallyCorrect: 'visually-correct',\n visuallyIncorrect: 'visually-incorrect'\n}\n\nlet timeoutId = null\nlet correctAnswersGiven = 0\nlet allAnswersGiven = 0\nlet quizStatus = {\n finished: false,\n allCorrect: false\n}\n\nexport const QuizController = () => {\n window.WhatSub.subscribe('QUIZ:submitted', (event) => {\n quizStatus = event;\n });\n\n for (const quizBlock of quizBlocks) {\n const multiQuizScriptTag = quizBlock.querySelector('script.multi-quiz')\n const multiQuizData = multiQuizScriptTag && multiQuizScriptTag.textContent ? JSON.parse(multiQuizScriptTag.textContent) : {}\n const quizDivs = quizBlock.querySelectorAll('.quiz')\n const submitButton = quizBlock.querySelector('.quiz-block__submit')\n const resultsModal = quizBlock.querySelector('.results-modal')\n\n for (const quizDiv of quizDivs) {\n const quizId = quizDiv.id\n const cookieName = quizDiv ? `quiz-${quizId}` : false\n const foundCookie = cookieName ? getCookie(cookieName) : false\n if(foundCookie) continue\n // if quiz is inside a modal, do modal things\n const quizModal = quizDiv.closest('dialog')\n\n const scripTag = quizDiv.querySelector('script.single-quiz')\n const quizData = scripTag.textContent ? JSON.parse(scripTag.textContent) : {}\n const answers = quizDiv.querySelectorAll('input[type=\"checkbox\"], input[type=\"radio\"]')\n for (const answer of answers) {\n answer.addEventListener('change', (e) => handleAnswerChange(e, answer.value, quizData, quizDiv, cookieName, quizModal, answers))\n }\n\n if(quizModal) handleModal(quizModal, cookieName, quizData)\n }\n\n\n if(submitButton) {\n const allPopupData = multiQuizData.popups\n submitButton.addEventListener('click', (e) => {\n const allCorrect = quizDivs.length === correctAnswersGiven\n\n const popupData = getPopupByCorrectAnswers(correctAnswersGiven, allPopupData)\n const resultsModalInner = resultsModal.querySelector('.modal-inner')\n resultsModalInner.innerHTML = setPopupMessage(popupData)\n if(resultsModal) handleModal(resultsModal, null, null, multiQuizData)\n\n for(const quizDiv of quizDivs) {\n const givenAnswers = quizDiv.querySelectorAll('input.correct, input.incorrect')\n quizDiv.dataset.submitted = true\n\n for (const answer of givenAnswers) {\n if(!answer.classList.contains('submitted')) answer.classList.add('submitted')\n }\n }\n\n window.WhatSub.dispatch('QUIZ:submitted', {\n finished: true,\n allCorrect: allCorrect ? true : false\n })\n\n })\n }\n }\n}\n\nconst setPopupMessage = (data) => {\n const title = {\n text: data?.title?.content || null,\n tag: data?.title?.tag && data?.title?.tag || 'h2',\n size: data?.title?.size && data?.title?.size !== 'default' ? ` ${data?.title?.size}` : '',\n colour: data?.title?.colour && data?.title?.colour !== 'inherit' ? ` clr-${data?.title?.colour}` : '',\n styled: data?.title?.styled ? ' has-border' : '',\n align: data?.title?.align ? ` text-align-${data?.title?.align}` : ''\n }\n const titleClass = `title${title.size}${title.colour}${title.styled}${title.align}`\n const htmlTitle = title?.text ? `<${title.tag} class=\"${titleClass}\">${title.text}` : null\n\n const html = `${htmlTitle}