\n \n
\n \n
\n `;\n },\n },\n },\n ];\n },\n };\n\n this.autoComplete = autocomplete({\n container: `#${this.id}`,\n translations: {\n submitButtonTitle: \"Search website and forum\"\n },\n plugins: [querySuggestionsPlugin, recentSearchesPlugin, predefinedItemsPlugin],\n id: this.id,\n placeholder: 'Search',\n detachedMediaQuery: 'none',\n initialState: { \n query: new URL(window.location).searchParams.get('searchTerm'),\n },\n onSubmit: (state, event, context) => {\n window.location.href = `${this.path}?${this.queryName}=${encodeURI(state.state.query)}`\n },\n onStateChange: (state) => {\n // console.log(\"onStateChange\", this.id, state.state.isOpen, state)\n },\n getSources: (params) => {\n return [\n {\n sourceId: 'hits',\n getItems: () => {\n return getAlgoliaResults({\n searchClient: searchClient,\n queries: [\n {\n indexName: searchIndex,\n query: params.query,\n params: {\n attributesToHighlight: 'name',\n hitsPerPage : 5,\n snippetEllipsisText : '…',\n filters: 'data.noIndex:false AND NOT url:#'\n },\n }\n ],\n transformResponse: (response) => {\n response.hits.push({\n id: 0,\n \"name\": \"See all results\",\n \"createDate\": \"24/04/2023 09:19:58\",\n \"updateDate\": \"24/04/2023 09:19:58\",\n \"url\": `${this.path}?${this.queryName}=${params.query}`,\n \"objectID\": \"see-all\",\n \"_snippetResult\": {\n \"name\": {\n \"value\": \"See all results >>\",\n \"matchLevel\": \"full\"\n },\n \"data\": {\n \"seoDescription\": {\n \"value\": \"Intro\",\n \"matchLevel\": \"none\"\n }\n }\n },\n \"_highlightResult\": {\n \"name\": {\n \"value\": \"See all results >>\",\n \"matchLevel\": \"full\",\n \"fullyHighlighted\": false,\n \"matchedWords\": [\n \"hell\"\n ]\n }\n },\n \"__autocomplete_indexName\": this.indexName\n })\n\n return response.hits\n }\n })\n },\n\n templates: {\n header({ items, html }) {\n if (items.length === 0) {\n return null;\n }\n return html`Website results\n `;\n },\n item({ item, components, html }) {\n return html`\n ${item.label}
\n \n
`\n }\n },\n getItemUrl: ({ item }) => {\n return item.url\n }\n },\n {\n sourceId: 'forum',\n getItems: () => {\n return getAlgoliaResults({\n searchClient: searchClient,\n queries: [\n {\n indexName: 'discourse-posts',\n query: params.query,\n params: {\n attributesToHighlight: 'name',\n hitsPerPage : 5,\n snippetEllipsisText : '…'\n }\n }\n ],\n transformResponse: (response) => {\n response.hits.push({\n id: 0,\n \"name\": \"See all forum results\",\n \"createDate\": \"24/04/2023 09:19:58\",\n \"updateDate\": \"24/04/2023 09:19:58\",\n \"url\": `${this.forumBaseUrl}/search?q=${params.query}`,\n \"objectID\": \"see-all\",\n \"_snippetResult\": {\n \"name\": {\n \"value\": \"See all forum results >>\",\n \"matchLevel\": \"full\"\n },\n \"data\": {\n \"seoDescription\": {\n \"value\": \"Intro\",\n \"matchLevel\": \"none\"\n }\n }\n },\n \"_highlightResult\": {\n \"name\": {\n \"value\": \"See all forum results >>\",\n \"matchLevel\": \"full\",\n \"fullyHighlighted\": false,\n \"matchedWords\": [\n \"hell\"\n ]\n }\n },\n \"__autocomplete_indexName\": \"discourse-posts\"\n })\n return response.hits\n }\n })\n },\n\n templates: {\n header({ items, html }) {\n if (items.length === 0) {\n return null;\n }\n return html`Forum results\n `;\n },\n item({ item, components, html }) {\n var url = item.url;\n var title = '';\n if(item.topic != undefined)\n {\n url = item.topic.url;\n title = components.Highlight({ hit: item.topic, attribute: 'title' })\n }else{\n //console.log(item);\n title = components.Highlight({ hit: item, attribute: 'name' })\n }\n return html`\n \n
\n \n ${components.Highlight({ hit: item, attribute: 'name' })}\n
\n \n ${item.data && item.data.secDescription != null && components.Snippet({ hit: item.data, attribute: 'seoDescription' })}\n
\n \n
`\n }\n },\n getItemUrl: ({ item }) => {\n return item.url\n }\n }\n ]\n }\n })\n\n const searchBox = this.wrapper.querySelector(('input'))\n\n if (searchBox) {\n searchBox.addEventListener('blur', () => {\n setTimeout(() => {\n this.autoComplete.setIsOpen(false)\n },300)\n })\n }\n }\n}\n\nexport function autoCompleteInit() {\n const searchBoxes = document.querySelectorAll('.m-algolia-autocomplete')\n\n searchBoxes.forEach(searchBox => {\n new AlgoliaAutoComplete(searchBox)\n })\n}\n","/**\n *\n */\nexport class FormDonate {\n\n /**\n * Class constructor.\n *\n * @param {HTMLElement} form\n * The element to bind these actions to.\n */\n constructor(form) {\n\n /**\n * The donation type options\n *\n * @type {HTMLElement} \n */\n this.form = form\n\n /**\n * The donation type \n *\n * @type {HTMLElement} \n */\n this.donationType = this.form.dataset.donationType\n\n /**\n * The donation type options\n *\n * @type {HTMLElement} \n */\n this.donationTypeOptions = this.form.querySelectorAll('.m-form-donate__switch input')\n\n /**\n * The donation price points\n *\n * @type {HTMLElement} \n */\n\n this.pricePoints = this.form.querySelectorAll('.a-form-radios--donate-prices input')\n\n /**\n * The freeform amount inputs\n *\n * @type {HTMLElement} \n */\n\n this.freeformAmountInputs = this.form.querySelectorAll('.m-form-donate__freeform-amount input')\n\n /**\n * The image / description for each price point\n *\n * @type {HTMLElement} \n */\n\n this.pricePointDetails = this.form.querySelectorAll('.m-form-donate__pricepoint-detail, .m-form-donate__freeform-amount-detail')\n \n this.form.setAttribute('data-js-enabled', 'true')\n\n this.registerEvents()\n }\n\n /**\n * Handle donate type selection\n */\n handleDonationType(e) {\n this.donationType = e.target.dataset.value\n this.form.dataset.donationType = this.donationType\n }\n\n /**\n * Clear freeform amount when price point is clicked\n */\n handlePricePointClick(e) {\n this.clearPricePointDetails()\n const freeFormInput = this.form.querySelector(`[data-freeform-type=\"${this.donationType}-amount\"] input`)\n freeFormInput.value = ''\n const relatedDetail = this.form.querySelector(`[data-price-value=\"${this.donationType}-${e.target.dataset.value}\"`)\n if(relatedDetail) {\n relatedDetail.dataset.active = true\n }\n }\n\n /**\n * Clear freeform amount when price point is clicked\n */\n handleFreeFormAmountClick() {\n const pricePoints = this.form.querySelectorAll(`[data-price-point-type=\"${this.donationType}\"] input`)\n pricePoints.forEach(point => {\n point.checked = false;\n })\n this.clearPricePointDetails()\n const relatedDetail = this.form.querySelector(`[data-price-value=\"${this.donationType}-other\"`)\n if(relatedDetail) {\n relatedDetail.dataset.active = true\n }\n }\n\n /**\n * Clear active image/description when pricepoint or freeform entry is clicked\n */\n clearPricePointDetails() {\n if(this.pricePointDetails) {\n this.pricePointDetails.forEach(detail => {\n if(detail.dataset.priceType === this.donationType) {\n detail.dataset.active = false;\n }\n })\n }\n }\n\n /**\n * Register events\n */\n registerEvents() {\n this.donationTypeOptions.forEach(option => {\n option.addEventListener('click', this.handleDonationType.bind(this))\n })\n this.pricePoints.forEach(point => {\n point.addEventListener('click', this.handlePricePointClick.bind(this))\n })\n this.freeformAmountInputs.forEach(input => {\n input.addEventListener('click', this.handleFreeFormAmountClick.bind(this))\n })\n }\n}\n\nexport function formDonateInit() {\n const formDonateInstances = document.querySelectorAll('.m-form-donate')\n\n formDonateInstances.forEach((form) => {\n new FormDonate(form)\n })\n}\n\n","/**\n *\n */\nexport class FundsInMemory {\n /**\n * Class constructor.\n *\n * @param {HTMLElement} component\n * The element to bind these actions to.\n */\n constructor(component) {\n /**\n * The component\n *\n * @type {HTMLElement}\n */\n this.component = component;\n \n /**\n * API url\n *\n * @type {string}\n */\n this.apiUrl = component.getAttribute('data-api');\n\n // Exit component if API url in unavailable\n if (!this.apiUrl) return;\n\n /**\n * Base url\n *\n * @type {string}\n */\n this.baseUrl = component.getAttribute('data-baseurl');\n\n /**\n * The form\n *\n * @type {HTMLElement}\n */\n this.form = component.querySelector('[data-component=\"SearchFundForm\"]');\n\n /**\n * The search button\n *\n * @type {HTMLElement}\n */\n this.searchButton = component.querySelector(\n '[data-button=\"SearchFundSubmit\"]'\n );\n\n /**\n * The clear button\n *\n * @type {HTMLElement}\n */\n this.clearButton = component.querySelector(\n '[data-button=\"SearchFundClear\"]'\n );\n\n /**\n * The input field\n *\n * @type {HTMLElement}\n */\n this.input = component.querySelector('[data-component=\"SearchFundInput\"]');\n\n /**\n * Add button event listeners\n *\n */\n if (this.searchButton) {\n this.searchButton.addEventListener('click', (e) => this.submitSearch(e));\n }\n\n if (this.clearButton) {\n this.clearButton.addEventListener('click', (e) => this.clearSearch(e));\n }\n\n if (this.input) {\n this.input.addEventListener('input', (e) => { \n if (this.input.value.length < 3) {\n return;\n }\n this.submitSearch(e);\n });\n }\n }\n\n /**\n * Get data from URL using fetch\n */\n async getData(url = '') {\n const response = await fetch(url, {\n method: 'GET',\n });\n return response.json();\n }\n\n /**\n * Submit Search\n */\n submitSearch(e) {\n e.preventDefault();\n\n const url = this.apiUrl + this.input.value;\n \n if (this.input.value !== '') {\n this.component.setAttribute('data-loading', 'true');\n\n this.getData(url).then((data) => {\n this.component.removeAttribute('data-loading');\n\n if (data) {\n this.form.classList.add('funds-in-memory__form--is-open');\n\n const oldDropdown = this.form.querySelector(\n '[data-component=\"SearchFundDropdown\"]'\n );\n if (oldDropdown) {\n oldDropdown.remove();\n }\n\n const dropdown = document.createElement('div');\n dropdown.classList.add('funds-in-memory__dropdown');\n dropdown.setAttribute('data-component', 'SearchFundDropdown');\n\n if (data.groupedResults.length > 0) {\n const results = data.groupedResults[0].results;\n const baseUrl = this.baseUrl;\n if (results) {\n dropdown.innerHTML = `\n ${results\n .map(function (result) {\n return `\n \n `;\n })\n .join('')}\n `;\n }\n } else {\n dropdown.innerHTML = `\n \n
\n \n ${title}\n
\n \n ${item.content != null && components.Snippet({ hit: item, attribute: 'content' })}\n
\n \n
\n `;\n }\n this.form.appendChild(dropdown);\n }\n });\n }\n }\n\n /**\n * Clear Search\n */\n clearSearch(e) {\n e.preventDefault();\n this.form.classList.remove('funds-in-memory__form--is-open');\n this.input.value = '';\n const dropdown = this.form.querySelector(\n '[data-component=\"SearchFundDropdown\"]'\n );\n dropdown.remove();\n }\n}\n\nexport function fundsInMemoryInit() {\n const fundsInMemoryInstances = document.querySelectorAll(\n '[data-component=\"FundsInMemory\"]'\n );\n\n fundsInMemoryInstances.forEach((form) => {\n new FundsInMemory(form);\n });\n}\n","/**\n * DropdownToggle class.\n * Handles visibility toggling of dropdown options associated with each button.\n * Uses nextElementSibling to maintain simple DOM structure assumptions.\n */\nexport class DropdownToggle {\n /**\n *\n * @param {HTMLElement} button\n */\n constructor(button) {\n this.button = button;\n this.optionsContainer = button.nextElementSibling;\n\n this.button.setAttribute('aria-expanded', 'false');\n\n /**\n * A boolean indicating if the dropdown is visible.\n *\n * @type {boolean}\n */\n this.isVisible = false;\n\n this.button.addEventListener('click', () => this.toggleDropdown());\n }\n\n /**\n * Toggles the visibility of the dropdown options.\n */\n toggleDropdown() {\n this.isVisible = !this.isVisible;\n this.button.setAttribute('aria-expanded', String(this.isVisible));\n this.optionsContainer.hidden = !this.isVisible;\n }\n}\n\n/**\n * Initializes DropdownToggle for all buttons with the class '.m-card-publications-card__download-button'.\n */\nexport function initToggleVisibility() {\n document.querySelectorAll('.m-card-publications-card__download-button').forEach(button => {\n new DropdownToggle(button);\n });\n}\n","import { glossaryTermsInit } from \"./GlossaryTerm/Js/GlossaryTerm\";\nimport { jumpLinksInit } from \"./JumpLinks/Js/JumpLinks\";\nimport { cardExpandedViewInit } from \"./CardImageGallery/Js/CardExpandedView\";\nimport { autoCompleteInit } from \"./AlgoliaAutocomplete/Js/AlgoliaAutocomplete\";\nimport { formDonateInit } from \"./FormDonate/Js/FormDonate\";\nimport { fundsInMemoryInit } from \"./FundsInMemory/Js/FundsInMemory\";\nimport { initToggleVisibility } from './CardPublicationCard/Js/ToggleVisibility';\n\nconst moleculesInit = () => {\n glossaryTermsInit()\n jumpLinksInit() \n cardExpandedViewInit()\n autoCompleteInit()\n formDonateInit()\n fundsInMemoryInit()\n initToggleVisibility();\n}\n\nif (\n document.readyState === \"complete\" ||\n (document.readyState !== \"loading\" && !document.documentElement.doScroll)\n) {\n moleculesInit()\n} else {\n document.addEventListener(\"DOMContentLoaded\", moleculesInit);\n}\n","/**\n * Animation curves.\n */\nMath.easeInOutQuad = (t, b, c, d) => {\n t /= d/2\n if (t < 1) return c/2*t*t + b\n t--\n return -c/2 * (t*(t-2) - 1) + b\n}\n\n\n\n/**\n* Carousel class.\n*/\nexport class Carousel {\n\n /**\n * Class constructor.\n *\n * @param {HTMLElement} parentElement\n * The element to bind these actions to.\n */\n constructor(parentElement) {\n\n /**\n * The parent element.\n *\n * @type {HTMLElement}\n */\n this.parentElement = parentElement\n\n /**\n * Navigation Next item button\n *\n * @type {HTMLElement}\n */\n this.buttonNext = this.parentElement.querySelector('[data-navigation-next]')\n\n /**\n * Navigation Previous item button\n *\n * @type {HTMLElement}\n */\n this.buttonPrevious = this.parentElement.querySelector('[data-navigation-previous]')\n\n /**\n * The guide element.\n * @type {Element}\n */\n this.guideElement = parentElement.querySelector('.o-carousel__guide')\n\n /**\n * A boolean indicating if the carousel has overflow content.\n *\n * @type {boolean}\n */\n this.hasOverflow = false\n\n /**\n * The items element.\n *\n * @type {Element}\n */\n this.itemsElement = parentElement.querySelector('.o-carousel__track')\n\n /**\n * The carousel items/cards.\n *\n * @type {NodeListOfSorry, we couldn't find a match
\n