${header}
${body}
`,\r\n ResponseStatus: status,\r\n ResponseMessage: statusMessage\r\n };\r\n}\r\n\r\nconst fireSearchAnalyticsEvent = (query, tags) => {\r\n const tagsUsed = Array.isArray(tags) ? tags.join(',') : typeof tags === 'string' ? tags : '';\r\n\r\n const event = {\r\n tag: tagsUsed,\r\n query: query,\r\n event: 'search_query_submitted'\r\n };\r\n console.log(event);\r\n window.dataLayer = window.dataLayer || [];\r\n window.dataLayer.push(event);\r\n};\r\n\r\n/**\r\n * Async function which accepts a set of parameters needed to perform a\r\n * request for content via API fetch. The results of this call will be wrapped to allow for a no search results message\r\n * @param {string} section section param\r\n * @param {string} query query param\r\n * @param {string[]} tags tags param\r\n * @param {string} site The site to search\r\n * @return {Promise} promise which resolves upon completion of fetch\r\n */\r\nexport const searchContent = async (section, query, tags, site) => {\r\n const paramSection = section ? section : 'All';\r\n const paramSite = site ? site.toLowerCase() : 'brand';\r\n let contentSearchEndpoint;\r\n\r\n console.log('Content Search', section, query, tags, site);\r\n\r\n switch (site) {\r\n case 'funds':\r\n contentSearchEndpoint = `FundsSearch/Search`;\r\n break;\r\n default:\r\n contentSearchEndpoint = `contentSearch/search`;\r\n }\r\n\r\n const queryString = new URLSearchParams('');\r\n\r\n queryString.set('section', paramSection);\r\n queryString.set('site', paramSite);\r\n\r\n if (query) {\r\n queryString.set('query', query);\r\n }\r\n\r\n const tagsParam = Array.isArray(tags) ? tags.join(',') : tags;\r\n if (tags && tags.length > 0) {\r\n queryString.set('tag', tagsParam);\r\n }\r\n\r\n // Fire analytics event with query and tags\r\n fireSearchAnalyticsEvent(query, tags);\r\n\r\n let response;\r\n\r\n // Don't call search api on localhost or storybook, it won't work. Instead display a friendly error message\r\n if (window.location.hostname.includes('storybook') || window.location.hostname.includes('localhost')) {\r\n return generateEmptyResponse(\r\n 'Search unavailable in storybook',\r\n 'We apologize. Search is not available in storybook'\r\n );\r\n }\r\n\r\n try {\r\n // Get search results from Sitecore\r\n response = await fetch(`${api}${contentSearchEndpoint}?${queryString}`);\r\n\r\n // Parse successful responses as JSON\r\n if (response && response.status === 200) {\r\n return await response.json();\r\n }\r\n\r\n // Show error on failed responses\r\n return generateEmptyResponse(\r\n 'An Error Has Occurred',\r\n `We apologize. Search is not available at this time. Please try again later.`,\r\n response.status,\r\n response.statusText\r\n );\r\n } catch (err) {\r\n // Log errors to console\r\n console.error(err);\r\n return generateEmptyResponse(\r\n 'An Error Has Occurred',\r\n `We apologize. Search is not available at this time. Please try again later.`,\r\n 500,\r\n 'An error has occurred'\r\n );\r\n }\r\n};\r\n","/* eslint-disable spaced-comment */\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 12/07/2020 HJordan Initial create\r\n// 01/16/2021 HJordan Added timeout to search to allow animation of skeletons\r\n// 01/27/2021 HJordan Refactor method name to getInitialSearchParam for readability\r\n// 01/28/2020 HJordan 51238 Support Show More button if results exceed threshold\r\n// 01/29/2020 HJordan Bugfix to support firstChild selector when generating cards\r\n// 04/18/2022 BBARRON 83828 Add site parameter to search for Funds Search. Refactoring getCardTemplate into seprate method. Cleaned up generateResultsFromTemplates.\r\n// 04/29/2022 BBARRON 84662 Treat null or undefined section as \"all\"\r\n// 08/17/2022 BBARRON 90163 Add podcast as a search result type so results appear\r\n// 12/06/2022 BBARRON 95417 Search alternative endpoint and process NoResultsMessage when attribute is present\r\n// 01/18/2023 BBARRON 97895 Add ability to select and search by multiple tags\r\n// 05/12/2023 BBARRON 105895 Handle video results\r\n// 06/20/2023 GCASEY 107293 Add custom google analytics event for no search results\r\n// 07/12/2023 LBALL 56984 Education page paging should allow fewer items on mobile than for desktop\r\n// 09/20/2023 BBARRON 114362 Check for presence of search results on page before listening for window resize\r\n// 02/20/2025 BBARRON 148963 Cleaned up formatting based on \"prettier js\" formatting rules\r\n// 02/24/2025 GCASEY 148138 Add Evergreen option check to hide publish date\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nimport { searchContent } from '../services/search';\r\nimport { getInitialSearchParams } from '../utils/search-utils';\r\nimport { showMoreCardsInGroup } from '../card-group/CardGroup';\r\n\r\nconst skeletonActiveClass = 'gs-cardGroupSkeleton--active';\r\nconst activeFadeInClass = 'gs-animateIn-bottom';\r\n\r\n/**\r\n * Function which toggles the visibility of skeleton loader based on the toggle flag\r\n *\r\n * @param {boolean} toggle flag which defines if skeleton cards should be hidden or visible\r\n */\r\nconst toggleSkeletonVisibility = toggle => {\r\n const searchSkeletonSection = document.getElementsByClassName('gs-cardGroupSkeleton')[0];\r\n\r\n if (toggle) {\r\n searchSkeletonSection.classList.add(skeletonActiveClass);\r\n searchSkeletonSection.classList.add(activeFadeInClass);\r\n } else {\r\n searchSkeletonSection.classList.remove(skeletonActiveClass);\r\n searchSkeletonSection.classList.remove(activeFadeInClass);\r\n }\r\n};\r\n\r\n/**\r\n * Sends the search_no_results event to google analytics with the information concerning the search query and tag\r\n */\r\nconst fireNoResultsAnalyticsEvent = () => {\r\n const params = new URLSearchParams(window.location.search);\r\n const tag = params.get('tag');\r\n const query = params.get('query');\r\n\r\n window.dataLayer = window.dataLayer || [];\r\n window.dataLayer.push({\r\n tag,\r\n query,\r\n event: 'search_no_results'\r\n });\r\n};\r\n\r\n/**\r\n * Async function which executes the API request for content, and upon response,\r\n * orchestrates the toggling of skeleton cards, and initiates the creation of\r\n * markup based on the results\r\n *\r\n * @param {string} section section param\r\n * @param {string} query query param\r\n * @param {string[]} tags array of tags\r\n * @param {string} site the site to search (funds|brand)\r\n */\r\nconst contentSearch = async (section, query, tags, site) => {\r\n const response = await searchContent(section, query, tags, site);\r\n if (response) {\r\n if (response.SearchResults && response.SearchResults.length > 0) {\r\n toggleSkeletonVisibility(false);\r\n removeNoResultsMessage();\r\n generateResultsFromTemplates(response.SearchResults, site);\r\n } else {\r\n toggleSkeletonVisibility(false);\r\n generateNoResultsMessage(response.NoResultsMessage);\r\n fireNoResultsAnalyticsEvent();\r\n }\r\n } else {\r\n console.error('Failed to get API response');\r\n }\r\n};\r\n\r\n/**\r\n * Function to generate the \"Show More\" button and eventListener registration to\r\n * the \"ShowMore\" script functionality\r\n *\r\n * @return {Node} button and wrapper generated via the template\r\n */\r\nconst generateShowMoreButton = () => {\r\n const showMoreTemplate = document.getElementById('gs-search-showMore-template');\r\n const clone = document.importNode(showMoreTemplate.content, true);\r\n\r\n clone.querySelector('button').addEventListener('click', event => showMoreCardsInGroup(event, 9));\r\n\r\n return clone;\r\n};\r\n\r\n/**\r\n * Function which generates a single Card node based on a dataset\r\n *\r\n * @param {object} data data containing attributes of a card\r\n * @param {boolean} isHidden flag to determine if card should have hidden class applied\r\n * @param {string} linkTarget The link target\r\n * @return {Node} generated markup for a card\r\n */\r\nconst generateCardNode = (data, isHidden, linkTarget) => {\r\n const { Type, Title, ShortDescription, CardImage, Date, Category, Url, Evergreen } = data;\r\n const card = getCardTemplate(Type);\r\n if (!card) {\r\n console.warn(`No card template found for type: ${Type}`);\r\n return null;\r\n }\r\n const subTitleNode = card.querySelector('.gs-card-subtitle');\r\n const svgIcon = card.querySelector('.gs-card-subtitle svg');\r\n\r\n subTitleNode.innerHTML = `${Category} ${Evergreen ? \"\" : \"• \" + Date}`;\r\n subTitleNode.insertBefore(svgIcon, subTitleNode.firstChild);\r\n card.querySelector('a').href = Url;\r\n if (linkTarget) {\r\n card.querySelector('a').target = linkTarget;\r\n }\r\n card.querySelector('img').src = CardImage;\r\n card.querySelector('h6').innerHTML = Title;\r\n card.querySelector('.gs-card-content').innerHTML = ShortDescription;\r\n\r\n if (isHidden) {\r\n card.firstElementChild.classList.add('gs-card--hidden');\r\n }\r\n\r\n return card;\r\n};\r\n\r\nconst getCardTemplate = cardType => {\r\n cardType = cardType.toLowerCase();\r\n let templateId;\r\n switch (cardType) {\r\n case 'video':\r\n case 'webinar':\r\n templateId = 'gs-search-card-webinar-template';\r\n break;\r\n case 'article':\r\n case 'commentary':\r\n case 'podcast':\r\n templateId = 'gs-search-card-article-template';\r\n break;\r\n case 'external link':\r\n templateId = 'gs-search-card-external-link-template';\r\n break;\r\n default:\r\n templateId = null;\r\n break;\r\n }\r\n\r\n if (!templateId) {\r\n return null;\r\n }\r\n\r\n const resultCardTemplate = document.getElementById(templateId);\r\n\r\n if (!templateId) {\r\n return null;\r\n }\r\n return document.importNode(resultCardTemplate.content, true);\r\n};\r\n\r\nconst manageMaxVisibleResultCount = () => {\r\n const maxVisible = getMaxVisibleResultCountFromViewport();\r\n const searchResults = document.getElementById('gs-content-search-results');\r\n if (!searchResults) {\r\n return;\r\n }\r\n\r\n const resultCardGroups = searchResults.querySelectorAll('.gs-cardgroup .gs-container-inner .gs-cardgroup-content');\r\n\r\n if (resultCardGroups.length > 0) {\r\n for (let i = 0; i < resultCardGroups.length; i++) {\r\n const resultCardsVisible = resultCardGroups[i].querySelectorAll('a.gs-card:not(.gs-card--hidden)');\r\n const resultCards = resultCardGroups[i].querySelectorAll('a.gs-card');\r\n let resultVisability = false;\r\n\r\n if (!resultCardsVisible.length) {\r\n continue;\r\n }\r\n\r\n if (resultCardsVisible.length < maxVisible) {\r\n resultVisability = true;\r\n }\r\n\r\n manageResultCardVisbility(maxVisible, resultCards, resultCardsVisible, resultVisability);\r\n }\r\n }\r\n};\r\n\r\n/**\r\n * Function hides or shows search result cards\r\n *\r\n */\r\n\r\nconst manageResultCardVisbility = (maxVisible, resultCards, resultCardsVisible, hide = false) => {\r\n if (!hide) {\r\n for (let i = maxVisible; i <= resultCardsVisible.length; i++) {\r\n if (!resultCards[i].classList.contains('gs-card--hidden')) {\r\n resultCards[i].classList.add('gs-card--hidden');\r\n }\r\n }\r\n } else {\r\n for (let i = 0; i < maxVisible; i++) {\r\n if (resultCards[i].classList.contains('gs-card--hidden')) {\r\n resultCards[i].classList.remove('gs-card--hidden');\r\n }\r\n }\r\n }\r\n};\r\n\r\n/**\r\n * Function outputs the number of results to display based on the viewport\r\n *\r\n */\r\n\r\nconst getMaxVisibleResultCountFromViewport = () => {\r\n return window.innerWidth < 1024 ? 3 : 9;\r\n};\r\n\r\n/**\r\n * Function which generates the Card Group which will contain the list of items generated\r\n * based on the provided data set\r\n *\r\n * @param {string} title title for the card group\r\n * @param {array} data list of data elements needed to generate results\r\n * @param {string} linkTarget The link target\r\n * @return {Node} generated markup of a card group and it's children\r\n */\r\nconst generateSearchResultsNode = (title, data, linkTarget) => {\r\n const resultCardGroupTemplate = document.getElementById('gs-search-card-group-template');\r\n\r\n const resultCount = data.length;\r\n let resultsNode;\r\n let innerResultsNode;\r\n const maxVisible = getMaxVisibleResultCountFromViewport();\r\n\r\n if (resultCount >= 0) {\r\n resultsNode = document.importNode(resultCardGroupTemplate.content, true);\r\n resultsNode.querySelector('h5').innerHTML = `${title} (${resultCount})`;\r\n innerResultsNode = resultsNode.querySelector('.gs-cardgroup-content');\r\n innerResultsNode.classList.add(activeFadeInClass);\r\n\r\n for (let i = 0; i < resultCount; i++) {\r\n const isHidden = i >= maxVisible;\r\n const card = generateCardNode(data[i], isHidden, linkTarget);\r\n if (card) {\r\n innerResultsNode.appendChild(card);\r\n }\r\n }\r\n\r\n if (resultCount > maxVisible) {\r\n innerResultsNode.parentNode.appendChild(generateShowMoreButton());\r\n }\r\n }\r\n\r\n return resultsNode;\r\n};\r\n\r\n/**\r\n * Function targets the results section of a page and removes all nodes\r\n */\r\nconst removeVisibleSearchResultNodes = () => {\r\n const contentResultsSection = document.getElementById('gs-content-search-results');\r\n\r\n while (contentResultsSection.firstChild) {\r\n contentResultsSection.removeChild(contentResultsSection.lastChild);\r\n }\r\n};\r\n\r\n/**\r\n * Function which accepts the JSON results from the Brand or Funds Search API, and uses HTML templates\r\n * to generate the markup needed for the results list. Each type of content gets its own heading and list of cards\r\n *\r\n * @param {object} resultsData JSON payload of results\r\n * @param {string} site The site to search (funds|brand)\r\n */\r\nconst generateResultsFromTemplates = (resultsData, site) => {\r\n const contentResultsSection = document.getElementById('gs-content-search-results');\r\n const { section } = getInitialSearchParams();\r\n\r\n let contentTypes = [];\r\n\r\n if (site == 'funds') {\r\n contentTypes = [\r\n { type: 'commentary', sectionHeading: 'Commentary', section: 'commentary' },\r\n { type: 'external link', sectionHeading: 'News and Media', section: 'newsandmedia' },\r\n { type: 'podcast', sectionHeading: 'Podcasts', section: 'faithinvesting' }\r\n ];\r\n } else {\r\n contentTypes = [\r\n { type: 'article', sectionHeading: 'Articles', section: 'articles' },\r\n { type: 'video', sectionHeading: 'Videos', section: 'videos' },\r\n { type: 'webinar', sectionHeading: 'Webinars', section: 'webinars' }\r\n ];\r\n }\r\n\r\n contentTypes.forEach(c => {\r\n // If section is present it must be \"all\" or match the current content type.\r\n // If section is not present treat it as \"all\"\r\n if (!!section && section.toLowerCase() !== c.section && section.toLowerCase() !== 'all') {\r\n return;\r\n }\r\n\r\n const filteredResults = resultsData.filter(result => result.Type.toLowerCase() === c.type);\r\n const linkTarget = c.type === 'external link' ? '_blank' : null;\r\n const contentNode = generateSearchResultsNode(c.sectionHeading, filteredResults, linkTarget);\r\n if (contentNode) {\r\n contentResultsSection.appendChild(contentNode);\r\n }\r\n });\r\n};\r\n\r\n/**\r\n * Adds the no search results message to the gs-content-search-results container\r\n * @param {string} message The \"no search results found\" message to display\r\n */\r\nconst generateNoResultsMessage = message => {\r\n const resultsSection = document.getElementById('gs-content-search-results');\r\n\r\n const outer = document.createElement('div');\r\n outer.classList.add('gs-container');\r\n outer.classList.add('gs-container-color--primary');\r\n outer.classList.add('gs-section');\r\n outer.classList.add('gs-search--no-results');\r\n\r\n const inner = document.createElement('div');\r\n inner.classList.add('gs-container-inner');\r\n\r\n const content = document.createElement('div');\r\n content.classList.add('gs-section-content');\r\n\r\n const block = document.createElement('div');\r\n block.classList.add('gs-rich-content-block');\r\n block.innerHTML = message;\r\n\r\n content.appendChild(block);\r\n inner.appendChild(content);\r\n outer.appendChild(inner);\r\n resultsSection.appendChild(outer);\r\n};\r\n\r\nconst removeNoResultsMessage = () => {\r\n const contentResultsSection = document.getElementById('gs-content-search-results');\r\n const noResultsContainer = contentResultsSection.querySelector('.gs-search--no-results');\r\n if (noResultsContainer) {\r\n noResultsContainer.remove();\r\n }\r\n};\r\n\r\n/**\r\n * Entry function which orchestrates the execution of an API search, and the update of the DOM\r\n * based on results received from the API request\r\n *\r\n * The request includes a 1 second delay to allow skeleton loaders to animate without a flicker\r\n * in the case that the API returns too quickly\r\n *\r\n * @param {string} section section param\r\n * @param {string} query query param\r\n * @param {string} tags tags param\r\n * @param {string} site the site to search (funds|brand)\r\n */\r\nexport const searchContentAndUpdateResults = (section, query, tags, site) => {\r\n const contentResultsSection = document.getElementById('gs-content-search-results');\r\n\r\n if (contentResultsSection) {\r\n removeVisibleSearchResultNodes();\r\n toggleSkeletonVisibility(true);\r\n\r\n setTimeout(() => {\r\n contentSearch(section, query, tags, site);\r\n }, 1000);\r\n }\r\n};\r\n\r\nconst searchResults = document.getElementById('gs-content-search-results');\r\nif (searchResults) {\r\n window.addEventListener('resize', manageMaxVisibleResultCount);\r\n}\r\n","////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 01/25/2023 BBARRON 98828 Initial Create\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nconst simpleSearchBarValidationClass = 'gs-simple-search-bar-input-wrapper';\r\nconst searchBarValidationClass = 'gs-search-bar-input-wrapper';\r\nconst validationSuffix = '--error';\r\nconst messageValidationClass = 'gs-search-bar-validation--visible';\r\n\r\nconst searchElementIds = {\r\n searchBar: 'gs-content-search-bar',\r\n searchValidation: 'gs-content-search-validation',\r\n searchInput: 'gs-content-search-input'\r\n};\r\n \r\nconst mobileSearchElementIds = {\r\n searchBar: 'gs-content-search-bar-mobile',\r\n searchValidation: 'gs-content-search-validation-mobile',\r\n searchInput: 'gs-content-search-input-mobile'\r\n};\r\n\r\nexport const getSearchBar = (isMobile) => {\r\n return document.getElementById(isMobile ? mobileSearchElementIds.searchBar : searchElementIds.searchBar);\r\n}\r\n\r\nexport const getSearchValidation = (isMobile) => {\r\n return document.getElementById(isMobile ? mobileSearchElementIds.searchValidation : searchElementIds.searchValidation);\r\n}\r\n\r\nexport const getSearchInput = (isMobile) => {\r\n return document.getElementById(isMobile ? mobileSearchElementIds.searchInput : searchElementIds.searchInput);\r\n}\r\n\r\n/**\r\n * Simple validator function which checks if a given value meets the required number\r\n * of characters\r\n * @param {string} queryString Event passed by the listener\r\n * @return {boolean} identifies if queryString is valid or invalid\r\n */\r\nexport const validateSearchQuery = query => {\r\n if (query) {\r\n if (query.length > 2) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n};\r\n\r\n/**\r\n * Function which takes an element, and a validation flag, and toggles the appropriate\r\n * validation classes on elements depending on the state of the validation flag\r\n * @param {boolean} isValid flag which identifies if valid or invalid\r\n * @param {Node} element dom element to be manipulated\r\n * @param {Object} searchIds ids for the search elements (either desktop or mobile)\r\n */\r\nexport const updateSearchValidationVisibility = (isValid, element, isMobile) => {\r\n const contentSearchValidation = getSearchValidation(isMobile);\r\n const searchBar = getSearchBar(isMobile);\r\n const simpleSearch = searchBar.classList.contains(simpleSearchBarValidationClass);\r\n const contentSiteSearch = searchBar.classList.contains(searchBarValidationClass);\r\n\r\n element.setAttribute('aria-invalid', !isValid);\r\n\r\n if (isValid) {\r\n contentSearchValidation.classList.remove(messageValidationClass);\r\n if (simpleSearch) {\r\n searchBar.classList.remove(`${simpleSearchBarValidationClass}${validationSuffix}`);\r\n } else if (contentSiteSearch) {\r\n searchBar.classList.remove(`${searchBarValidationClass}${validationSuffix}`);\r\n }\r\n } else {\r\n contentSearchValidation.classList.add(messageValidationClass);\r\n if (simpleSearch) {\r\n searchBar.classList.add(`${simpleSearchBarValidationClass}${validationSuffix}`);\r\n } else if (contentSiteSearch) {\r\n searchBar.classList.add(`${searchBarValidationClass}${validationSuffix}`);\r\n }\r\n }\r\n};","////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 12/07/2020 HJordan Initial create\r\n// 12/18/2020 HJordan Add initializeContentSearch to fetch content when URL params exist\r\n// 01/27/2021 HJordan Refactor to ensure default tag, and appropriate input validation on submit\r\n// 01/29/2020 HJordan Support mobile / desktop unique IDs needed for successful site search\r\n// 04/18/2022 BBARRON 83828 Check markup for site attribute to call the right search API\r\n// 01/18/2023 BBARRON 97895 Add ability to select multiple tags\r\n// 01/23/2023 BBARRON 98536 Get multiple tags when search button is clicked as well\r\n// 01/25/2023 BBARRON 98828 Move search validation methods and constants to SearchValidation file\r\n// 02/01/2023 BBARRON 99334 Renamd updatePageSearchContent function to initializeContentSearch and fix typo\r\n// 02/07/2023 BBARRON 99963 Don't trigger content search unless content search form exists\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nimport { setSearchQueryParam, getInitialSearchParams, setTagParam } from '../utils/search-utils';\r\nimport { searchContentAndUpdateResults } from '../content-search-results/ContentSearchResults';\r\nimport { showAllTags, selectTag, selectAllTag, getAllSelectedTags } from '../tag-filters/TagFilters';\r\nimport { updateSearchValidationVisibility, validateSearchQuery, getSearchInput } from './SearchValidation';\r\n\r\n/** \r\n * Simple function to set the tag query string to \"all\" if there are no provided tag values.\r\n * Otherwise set the tag query string to all selected tags, separated by commas.\r\n * @param {String[]} tags string values for the tags\r\n */\r\nconst initializeDefaultTag = tags => {\r\n if (typeof tags === undefined || tags === null || tags.length === 0 || !tags.some(tag => tag !== '')) {\r\n selectAllTag();\r\n setTagParam('all');\r\n } else {\r\n setTagParam(tags.join(','));\r\n }\r\n};\r\n\r\n/**\r\n * Scripts which must be executed on page load in order to establish submit\r\n * listeners on the search form used for handling \"Content Search\" functionality.\r\n *\r\n * NOTE: These scripts are assigned to any search form assigned the gs-content-search-form\r\n */\r\nexport const contentSearchScripts = () => {\r\n const contentSearchForm = document.getElementById('gs-content-search-form');\r\n const searchInput = getSearchInput(false);\r\n const searchListenerAdded = contentSearchForm ? contentSearchForm.dataset.searchListener : false;\r\n\r\n /**\r\n * Simple helper function with the responsibility of setting the query url parameter in\r\n * the url if the provided value is valid\r\n *\r\n * @param {String} queryValue value of a search action to be added to the query params\r\n */\r\n const manageSearchQueryParam = queryValue => {\r\n const searchQueryValid = validateSearchQuery(queryValue);\r\n\r\n if (searchQueryValid) {\r\n setSearchQueryParam(queryValue);\r\n } else {\r\n setSearchQueryParam(null);\r\n }\r\n };\r\n\r\n /**\r\n * Form submit handler function which checks the validity of the form values, and\r\n * then executes a request to execute a content search (which subsequently updates\r\n * search results in the view)\r\n *\r\n * @param {EventTarget} event Event passed by the listener\r\n */\r\n const contentSearchClicked = event => {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n const searchInput = getSearchInput(false);\r\n manageSearchQueryParam(searchInput.value);\r\n\r\n const { section, query } = getInitialSearchParams();\r\n const searchQueryValid = validateSearchQuery(query);\r\n const site = contentSearchForm ? contentSearchForm.dataset.site || 'brand' : 'brand';\r\n const tags = getAllSelectedTags();\r\n\r\n if (searchQueryValid) {\r\n initializeDefaultTag(tags);\r\n updateSearchValidationVisibility(searchQueryValid, searchInput, false);\r\n searchContentAndUpdateResults(section, query, tags, site);\r\n } else {\r\n updateSearchValidationVisibility(searchQueryValid, searchInput, false);\r\n }\r\n };\r\n\r\n if (contentSearchForm && !searchListenerAdded) {\r\n contentSearchForm.dataset.searchListener = true;\r\n contentSearchForm.addEventListener('submit', contentSearchClicked);\r\n searchInput.addEventListener('blur', event => manageSearchQueryParam(event.target.value));\r\n }\r\n};\r\n\r\n/**\r\n * Scripts which must be executed on page load in order to establish submit\r\n * listeners on the search form used for handling \"Site Search\" functionality.\r\n *\r\n * NOTE: These scripts are assigned to any search form assigned the gs-site-search-form\r\n */\r\nexport const siteSearchScripts = () => {\r\n const siteSearchForm = document.getElementById('gs-site-search-form');\r\n const mobileSiteSearchForm = document.getElementById('gs-site-search-form-mobile');\r\n const searchListenerAdded = siteSearchForm ? siteSearchForm.dataset.searchListener : false;\r\n const mobileSearchListenerAdded = mobileSiteSearchForm ? mobileSiteSearchForm.dataset.searchListener : false;\r\n\r\n /**\r\n * Form submit handler function which checks the validity of the form values, and\r\n * then executes a redirect to the appropriate URL if the search term is valid\r\n *\r\n * @param {EventTarget} event Event passed by the listener\r\n * @param {Object} isMobile whether the search is mobile\r\n */\r\n const siteSearchSubmitted = (event, isMobile) => {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const activeInput = getSearchInput(isMobile);\r\n const searchQuery = activeInput.value;\r\n const searchQueryValid = validateSearchQuery(searchQuery);\r\n\r\n updateSearchValidationVisibility(searchQueryValid, activeInput, isMobile);\r\n\r\n if (searchQueryValid) {\r\n const origin = window.location.origin;\r\n const searchURL = `/search`;\r\n const newLocation = `${origin}${searchURL}?q=${searchQuery}`;\r\n\r\n window.location.href = newLocation;\r\n }\r\n };\r\n\r\n if (siteSearchForm && !searchListenerAdded) {\r\n siteSearchForm.dataset.searchListener = true;\r\n siteSearchForm.addEventListener('submit', event => siteSearchSubmitted(event, false));\r\n }\r\n\r\n if (mobileSiteSearchForm && !mobileSearchListenerAdded) {\r\n mobileSiteSearchForm.dataset.searchListener = true;\r\n mobileSiteSearchForm.addEventListener('submit', event => siteSearchSubmitted(event, true));\r\n }\r\n};\r\n\r\n/**\r\n * When the page loads, we want to update the state of the UI to match the state indicated in the URL query parms.\r\n * This includes populating the search text and selected tags.\r\n */\r\nexport const initializeContentSearch = () => {\r\n const { section, tags, query } = getInitialSearchParams();\r\n const hasTags = tags && tags.length > 0;\r\n if (!hasTags && !query) {\r\n // if nothing in the query string, then no initial setup needed\r\n return;\r\n }\r\n\r\n const contentSearchForm = document.getElementById('gs-content-search-form');\r\n if (contentSearchForm) {\r\n const site = contentSearchForm ? contentSearchForm.dataset.site || 'brand' : 'brand';\r\n searchContentAndUpdateResults(section, query, tags, site);\r\n }\r\n\r\n if (hasTags) {\r\n // Start with all tags visible if any tag is selected/active based on query string.\r\n // NOTE: if all tags show even when hasTags is false, check session storage.\r\n // DateTagFilters.js for the news-room page stores show more clikc as a user preference for later.\r\n showAllTags();\r\n tags.forEach(tagName => selectTag(tagName));\r\n }\r\n\r\n if (query && contentSearchForm) {\r\n const searchFormInput = contentSearchForm.querySelector('input');\r\n searchFormInput.value = query;\r\n }\r\n \r\n};\r\n","// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 12/09/2020 Jjacob 52558 Initial Create\r\n// 02/04/2021 BBARRON 56210 Updated the handleSelectItem event handler to include an isSimpleLogin parameter\r\n// Added a launch mode (simple) and a login mode (not simple)\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nexport const customSelectScripts = {\r\n loadScripts: () => {\r\n const selectId = 'gs_login_location_select';\r\n const groupName = 'gs-login-group';\r\n const numSelectItems = 3;\r\n const loginSection = 'gs-login-section';\r\n const loginSectionButton = 'gs-login-section-button';\r\n\r\n const handleSelectOpen = () => {\r\n document.getElementById('gs_login_location_select_selector').style.display = 'block';\r\n };\r\n\r\n const handleSelectClose = () => {\r\n document.getElementById('gs_login_location_select_selector').style.display = 'none';\r\n };\r\n\r\n const handleSwitchToLaunchMode = () => {\r\n // Hide form fields\r\n document.querySelectorAll(`.${loginSection}`).forEach(element => {\r\n element.classList.add('--hidden');\r\n });\r\n // Hide signin buttons\r\n document.querySelectorAll(`.${loginSectionButton}`)[0].classList.add('--hidden');\r\n // Show launch buttons\r\n document.querySelectorAll(`.${loginSectionButton}`)[1].classList.remove('--hidden');\r\n };\r\n\r\n const handleSwitchToSignInMode = () => {\r\n // Show form fields\r\n document.querySelectorAll(`.${loginSection}`).forEach(element => {\r\n element.classList.remove('--hidden');\r\n });\r\n // Show signin buttons\r\n document.querySelectorAll(`.${loginSectionButton}`)[0].classList.remove('--hidden');\r\n // Hide launch buttons\r\n document.querySelectorAll(`.${loginSectionButton}`)[1].classList.add('--hidden');\r\n };\r\n\r\n const handleSelectItem = (item, isSimpleLogin) => {\r\n for (let i = 1; i <= numSelectItems; i++) {\r\n const currGroup = document.querySelectorAll('.' + groupName + '-' + i);\r\n \r\n if (item === i) {\r\n // Update the dropdown menu text\r\n const itemName = document.getElementById(selectId + '_item_' + i).innerHTML;\r\n // Show/hide links for the current selection\r\n document.getElementById(selectId + '_input').innerHTML = itemName;\r\n currGroup.forEach(element => {\r\n element.style.display = 'block';\r\n });\r\n } else {\r\n currGroup.forEach(element => {\r\n element.style.display = 'none';\r\n });\r\n }\r\n }\r\n\r\n if(isSimpleLogin) {\r\n handleSwitchToLaunchMode();\r\n } else {\r\n handleSwitchToSignInMode();\r\n }\r\n\r\n handleSelectClose();\r\n };\r\n\r\n if (document.getElementById(selectId + '_input')) {\r\n document.getElementById(selectId + '_input_wrapper').addEventListener('click', () => {\r\n handleSelectOpen();\r\n });\r\n document.getElementById(selectId + '_selector').addEventListener('mouseleave', () => {\r\n handleSelectClose();\r\n });\r\n for (let i = 1; i <= numSelectItems; i++) {\r\n document.getElementById(selectId + '_item_' + i).addEventListener('click', (evt) => {\r\n let isSimpleLogin = evt.target.classList.contains('gs-login-simple')\r\n handleSelectItem(i, isSimpleLogin);\r\n });\r\n }\r\n }\r\n }\r\n};\r\n","/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 01/14/2021 JJacob 52579 Initial Create\r\n// 02/25/2021 KKapoor 56273 Persist filter criteria state\r\n// 04/22/2021 BBARRON 60111 Add a no results message when no cards are visible\r\n/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\nimport { hideAllCardsInGroup, showMoreCardsInGroup } from '../card-group/CardGroup';\r\n\r\n// The ID of the button that shows all hidden tags\r\nconst showMoreTagId = 'gs-tag-filter-show-more';\r\n\r\n// The css class of all hidden tags\r\nconst tagHiddenClass = 'gs-tag-filter-btn--hidden';\r\n\r\n// The css class of the currently selected tag\r\nconst tagSelectedClass = 'gs-tag-filter-btn--selected';\r\n\r\n// In order for this component to work, the results to be filtered must be wrapped in an element with this ID\r\nconst resultsSectionId = 'gs-content-results';\r\n\r\n// The ID of the tag filter control\r\nconst tagFilterID = 'gs-date-tag-filters-tag-filter';\r\n\r\n// The ID of the date filter control\r\nconst dateFilterID = 'gs-date-tag-filters-date-filter';\r\n\r\nconst noResultsClass = 'gs-date-tag-filters--noresults';\r\n\r\n/**\r\n * Function accepts a tag element and persists in session storage\r\n *\r\n * @param {Node} element element to be manipulated\r\n */\r\nconst persistSelectedTag = (element) => {\r\n var selectedTag = element.dataset.tag ? element.dataset.tag : 'all';\r\n window.sessionStorage.setItem(window.location.href + 'Tag', selectedTag); \r\n};\r\n\r\n/**\r\n * Function accepts a date element and persists in session storage\r\n *\r\n * @param {Node} element element to be manipulated\r\n */\r\nconst persistSelectedDate = (element) => {\r\n var selectedDate = element.value ? element.value : 'all';\r\n window.sessionStorage.setItem(window.location.href + 'Date', selectedDate);\r\n};\r\n\r\n/**\r\n * Function to persist state of show more button in session storage\r\n */\r\nconst persistShowMoreTagState = () => {\r\n var isShowMoreTagHidden = true;\r\n window.sessionStorage.setItem(window.location.href + 'ShowMore', isShowMoreTagHidden);\r\n};\r\n\r\n/**\r\n * Function to restore persisted tag filter from session storage\r\n */\r\nconst restoreSelectedTag = () => {\r\n var selectedTag = window.sessionStorage.getItem(window.location.href + 'Tag');\r\n selectedTag = selectedTag ? selectedTag : 'all';\r\n const tagSelector = document.getElementById(tagFilterID);\r\n var targetTag = tagSelector.querySelector(\"button[data-tag='\" + selectedTag + \"']\");\r\n if (targetTag) {\r\n executeFilterByTag(targetTag);\r\n }\r\n};\r\n\r\n/**\r\n * Function to restore persisted date filter from session storage\r\n */\r\nconst restoreSelectedDate = () => {\r\n var selectedDate = window.sessionStorage.getItem(window.location.href + 'Date');\r\n selectedDate = selectedDate ? selectedDate : 'all';\r\n const dateSelector = document.getElementById(dateFilterID);\r\n dateSelector.value = selectedDate;\r\n};\r\n\r\n/**\r\n * Function to restore show more button state from session storage\r\n */\r\nconst restoreShowMoreTagState = () => {\r\n const showMoreTag = document.getElementById(showMoreTagId);\r\n const allHiddenTags = document.getElementsByClassName(tagHiddenClass);\r\n var isShowMoreTagHidden = window.sessionStorage.getItem(window.location.href + 'ShowMore');\r\n if (isShowMoreTagHidden) {\r\n displayHiddenTags(allHiddenTags);\r\n toggleTagHidden(showMoreTag, true);\r\n }\r\n};\r\n\r\n\r\n\r\n\r\n/**\r\n * Function which accepts an element, and a toggle flag and\r\n * toggles the elements \"Hidden\" classes based on the toggle\r\n *\r\n * @param {Node} element The tag element to be shown/hidden\r\n * @param {boolean} hide if true, the tag will be hidden. If false the tag will become visible\r\n */\r\n const toggleTagHidden = (element, hide) => {\r\n if (hide) {\r\n element.classList.add(tagHiddenClass);\r\n } else {\r\n element.classList.remove(tagHiddenClass);\r\n }\r\n};\r\n\r\n/**\r\n * Function which accepts an element, and a toggle flag and\r\n * toggles the elements \"Selected\" classes based on the toggle\r\n *\r\n * @param {Node} element element to be manipulated\r\n * @param {boolean} toggle flag to identify selected or not-selected\r\n */\r\nconst toggleTagSelected = (element, toggle) => {\r\n if (toggle) {\r\n element.classList.add(tagSelectedClass);\r\n } else {\r\n element.classList.remove(tagSelectedClass);\r\n }\r\n};\r\n\r\n/**\r\n * Function which accepts a list of tags which are currently hidden, and\r\n * toggles them to be revealed\r\n *\r\n * @param {Array} hiddenTagList list of hidden Tag nodes\r\n */\r\nconst displayHiddenTags = hiddenTagList => {\r\n if (hiddenTagList && hiddenTagList.length > 0) {\r\n while (hiddenTagList.length > 0) {\r\n toggleTagHidden(hiddenTagList[0], false);\r\n }\r\n }\r\n};\r\n\r\nconst showNoResultsMessage = () => {\r\n const noResultsMessage = document.querySelector(`#${resultsSectionId} .${noResultsClass}`);\r\n const results = document.querySelector(`#${resultsSectionId} > .gs-cardgroup`);\r\n if(noResultsMessage !== null) {\r\n console.log('showing the no results element');\r\n noResultsMessage.classList.remove('--hidden');\r\n results.style.display = \"none\";\r\n }\r\n}\r\n\r\nconst hideNoResultsMessage = () => {\r\n const noResultsMessage = document.querySelector(`#${resultsSectionId} .${noResultsClass}`);\r\n const results = document.querySelector(`#${resultsSectionId} > .gs-cardgroup`);\r\n if(noResultsMessage !== null) {\r\n console.log('hiding the no results element');\r\n noResultsMessage.classList.add('--hidden');\r\n results.style.display = \"block\";\r\n }\r\n}\r\n\r\n/**\r\n * Function which targets any tags marked with \"hidden\" classes to be\r\n * updated so that they are revealed\r\n *\r\n * @param {EventTarget} event event passed by the listener\r\n */\r\nexport const showAllTags = event => {\r\n const showMoreTag = document.getElementById(showMoreTagId);\r\n // const allHiddenTags = document.querySelectorAll('.'+tagHiddenClass);\r\n const allHiddenTags = document.getElementsByClassName(tagHiddenClass);\r\n\r\n if (event) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n }\r\n\r\n if (showMoreTag && allHiddenTags) { \r\n displayHiddenTags(allHiddenTags);\r\n toggleTagHidden(showMoreTag, true);\r\n persistShowMoreTagState();\r\n }\r\n};\r\n\r\n/**\r\n * Function which accepts a tag element and sets the tag to the correct \"selected\"\r\n * classes, and ensures all other tags in the group are NOT marked as selected\r\n *\r\n * @param {Node} tag the clicked tag element\r\n */\r\nexport const setTagSelectedClass = tag => {\r\n const currentlySelectedTags = document.getElementsByClassName(tagSelectedClass);\r\n\r\n if (currentlySelectedTags && currentlySelectedTags.length > 0) {\r\n for(let i = 0; i < currentlySelectedTags.length; i += 1) {\r\n toggleTagSelected(currentlySelectedTags[i], false);\r\n }\r\n }\r\n\r\n tag.classList.add(tagSelectedClass);\r\n};\r\n\r\n/**\r\n * Client-Side Tag click handler which accepts a clicked tag element, and uses the element's\r\n * data-tag attribute to perform the following actions\r\n *\r\n * Set the correct classNames to style the tag as selected\r\n * Set any elements with matching the data-tag attribute to hidden/visible\r\n *\r\n * @param {Node} tag the clicked tag element\r\n */\r\nconst filterResults = () => {\r\n const resultsSection = document.getElementById(resultsSectionId);\r\n const resultCards = resultsSection ? resultsSection.querySelectorAll('.gs-card') : null;\r\n const tagAttributeIndicator = document.querySelector('.gs-tag-filter-btn.gs-tag-filter-btn--selected');\r\n const dateAttributeIndicator = document.getElementById(dateFilterID);\r\n const tagAttribute = tagAttributeIndicator?.dataset.tag ? tagAttributeIndicator?.dataset.tag : 'all';\r\n const dateAttribute = dateAttributeIndicator.value ? dateAttributeIndicator.value : 'all';\r\n let visibleResults = [];\r\n\r\n if(resultCards) {\r\n resultCards.forEach(card => {\r\n if (isDateMatch(card, dateAttribute) && isTagMatch(card, tagAttribute)) {\r\n card.classList.remove('gs-card--filtered-out');\r\n visibleResults.push(card);\r\n } else {\r\n card.classList.add('gs-card--filtered-out');\r\n }\r\n });\r\n\r\n // Show or hide the no results message depending on the number of visible results after filtering\r\n \r\n if(visibleResults.length > 0) {\r\n hideNoResultsMessage();\r\n } else {\r\n showNoResultsMessage();\r\n }\r\n\r\n hideAllCardsInGroup();\r\n showMoreCardsInGroup(null, 6);\r\n }\r\n}\r\n\r\n/**\r\n * Determines whether a given card or article matches the given date filter.\r\n * If the date filter is 'all', it always matches.\r\n * @param {HTMLElement} card The card element which contains a data-date attribute\r\n * @param {string} dateFilter The desired year or 'all'\r\n */\r\nconst isDateMatch = (card, dateFilter) => {\r\n if(dateFilter === 'all') {\r\n return true;\r\n }\r\n const cardDateAttribute = card.dataset.date;\r\n return cardDateAttribute === dateFilter;\r\n}\r\n\r\n/**\r\n * Determines whether a given card or article matches the given tag filter.\r\n * If the tag filter is 'all', it always matches.\r\n * @param {HTMLElement} card The card element which contains a data-tag attribute\r\n * @param {string} tagFilter The desired tag name or 'all'\r\n */\r\nconst isTagMatch = (card, tagFilter) => {\r\n if (tagFilter === 'all') {\r\n return true;\r\n }\r\n const cardTagAttribute = card.dataset.tag;\r\n return cardTagAttribute === tagFilter;\r\n}\r\n\r\n\r\n\r\nconst executeFilterByTag = tag => {\r\n setTagSelectedClass(tag);\r\n persistSelectedTag(tag);\r\n filterResults();\r\n};\r\n\r\nconst executeFilterByDate = dateSelector => {\r\n persistSelectedDate(dateSelector);\r\n filterResults();\r\n};\r\n\r\nexport const dateTagFilterScripts = () => {\r\n const tagSelector = document.getElementById(tagFilterID);\r\n const dateSelector = document.getElementById(dateFilterID);\r\n const showMoreTag = document.getElementById(showMoreTagId);\r\n\r\n if (showMoreTag) {\r\n showMoreTag.addEventListener('click', showAllTags, false);\r\n restoreShowMoreTagState();\r\n }\r\n\r\n if (tagSelector) {\r\n const tags = tagSelector.querySelectorAll('button.gs-tag-filter-btn');\r\n for (let i = 0; i < tags.length; i++) {\r\n if (tags[i].id !== showMoreTagId) {\r\n tags[i].addEventListener('click', () => executeFilterByTag(tags[i]), false);\r\n }\r\n }\r\n restoreSelectedTag();\r\n }\r\n\r\n if (dateSelector) {\r\n dateSelector.addEventListener('change', () => executeFilterByDate(dateSelector), false);\r\n restoreSelectedDate();\r\n }\r\n};","////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 05/16/2022 ZSunOo 83533 Initial Create\r\n// 05/18/2022 ZSunOo 83533 Enhancement for Full factSheetFundHeader\r\n// 05/23/2022 ZSunOo 83533 Mobile Dropdown Enhancement\r\n// 06/02/2022 ZSunOo 86197 Design Revision Updates\r\n// 08/04/2022 BBARRON 89814 Break out of funds header script if key elements are missing\r\n// 09/26/2022 BBARRON 89639 Update mobile expand/collapse script to work with simplified markup\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nexport const factSheetFundHeaderScript = {\r\n loadScripts: () => {\r\n const viewAnotherFund = document.querySelector('.view-another-fund-desktop');\r\n const hamburgerMenu = document.querySelector('.mobile-hamburger-menu');\r\n const mobileFundsNavigation = document.querySelector('.mobile-funds-navigation');\r\n\r\n // Exit if the component is not on the page\r\n if(!viewAnotherFund || !hamburgerMenu || !mobileFundsNavigation) {\r\n return;\r\n }\r\n\r\n if ((hamburgerMenu && mobileFundsNavigation, viewAnotherFund)) {\r\n const mobileFundsNavigationOverlay = mobileFundsNavigation.querySelector('.mobile-funds-navigation-overlay');\r\n const closeButton = mobileFundsNavigation.querySelector('.close-button');\r\n\r\n mobileFundsNavigation.classList.remove('active');\r\n [viewAnotherFund, hamburgerMenu].forEach(element =>\r\n element.addEventListener('click', e => {\r\n e.preventDefault();\r\n mobileFundsNavigation.classList.add('active');\r\n })\r\n );\r\n\r\n const closeNavTriggers = [closeButton, mobileFundsNavigationOverlay];\r\n closeNavTriggers.forEach(element => {\r\n element.classList.remove('active');\r\n element.addEventListener('click', e => {\r\n e.preventDefault();\r\n mobileFundsNavigation.classList.remove('active');\r\n });\r\n });\r\n }\r\n\r\n const bottomLinks = document.querySelectorAll('.bottom-row-list-item-link');\r\n if (!!bottomLinks.length) {\r\n bottomLinks.forEach(link =>\r\n link.addEventListener('click', e => {\r\n bottomLinks.forEach(l => l.classList.remove('active'));\r\n link.classList.add('active');\r\n const target = document.querySelector(e.currentTarget.href);\r\n if (target) target.scrollIntoView();\r\n })\r\n );\r\n }\r\n\r\n const headerBottom = document.querySelector('.header-bottom');\r\n const expandButton = document.querySelector('.expand-button');\r\n const collapseButton = document.querySelector('.collapse-button');\r\n\r\n // logic for if headerBottom, expandButton, and collapseButton exists\r\n const isCollapsible = headerBottom && expandButton && collapseButton;\r\n\r\n if (isCollapsible) {\r\n expandButton.addEventListener('click', () => {\r\n expandButton.classList.remove('active');\r\n collapseButton.classList.add('active');\r\n headerBottom.classList.add('expanded');\r\n });\r\n\r\n collapseButton.addEventListener('click', () => {\r\n expandButton.classList.add('active');\r\n collapseButton.classList.remove('active');\r\n headerBottom.classList.remove('expanded');\r\n });\r\n }\r\n\r\n const accordionLinks = mobileFundsNavigation.querySelectorAll('.is-accordion > a');\r\n if (accordionLinks?.length) {\r\n accordionLinks.forEach(link => {\r\n link.addEventListener('click', e => {\r\n e.preventDefault();\r\n e.target.parentNode.classList.toggle('active');\r\n });\r\n });\r\n }\r\n },\r\n destroyScripts: () => {\r\n const mobileFundsNavigation = document.querySelector('.mobile-funds-navigation');\r\n const mobileFundsNavigationOverlay = mobileFundsNavigation.querySelector('.mobile-funds-navigation-overlay');\r\n const closeButton = mobileFundsNavigation.querySelector('.close-button');\r\n\r\n const closeNavTriggers = [closeButton, mobileFundsNavigationOverlay];\r\n closeNavTriggers.forEach(element => {\r\n element.removeEventListener('click', () => {});\r\n });\r\n\r\n const accordionLinks = mobileFundsNavigation.querySelectorAll('.is-accordion > a');\r\n if (accordionLinks?.length) {\r\n accordionLinks.forEach(link => {\r\n link.removeEventListener('click', () => {});\r\n });\r\n }\r\n }\r\n};\r\n","////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 06/16/2022 BBARRON 86867 Initial create\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nexport const factsheetHorizontalTextScripts = {\r\n loadScripts: () => {\r\n\r\n /**\r\n * Handles a click on the expand button, changing the state of the component to expanded\r\n * @param {ClickEvent} evt \r\n */\r\n const handleExpandClick = (evt) => {\r\n evt.preventDefault();\r\n let parent = evt.currentTarget.parentNode;\r\n if(parent.classList.contains('factsheet-htext-body')) {\r\n parent.classList.remove('factsheet-htext-body--collapsed');\r\n parent.classList.add('factsheet-htext-body--expanded');\r\n }\r\n };\r\n \r\n\r\n /**\r\n * Handles a click on the collapse button, changing the state of the component to collapsed\r\n * @param {ClickEvent} evt \r\n */\r\n const handleCollapseClick = (evt) => {\r\n evt.preventDefault();\r\n let parent = evt.currentTarget.parentNode;\r\n if(parent.classList.contains('factsheet-htext-body')) {\r\n parent.classList.add('factsheet-htext-body--collapsed');\r\n parent.classList.remove('factsheet-htext-body--expanded');\r\n }\r\n };\r\n\r\n \r\n // Get all expand buttons and have them listen for click events\r\n const expandButtons = document.querySelectorAll('.factsheet-htext-controls--collapsed');\r\n expandButtons.forEach(button => {\r\n button.addEventListener('click', handleExpandClick, false);\r\n });\r\n \r\n // Get all collapse buttons and have them listen for click events\r\n const collapseButtons = document.querySelectorAll('.factsheet-htext-controls--expanded');\r\n collapseButtons.forEach(button => {\r\n button.addEventListener('click', handleCollapseClick, false);\r\n });\r\n \r\n const expandCollapseThreshold = 180;\r\n \r\n /**\r\n * Checks the text height and only shows the expand-collapse\r\n * options if height is greater than the expandCollapseThreshold.\r\n */\r\n function resetCollapsing() {\r\n const factsheetBodies = document.querySelectorAll('.factsheet-htext-body');\r\n factsheetBodies.forEach(body => {\r\n if(body.offsetHeight > expandCollapseThreshold) {\r\n body.classList.add('factsheet-htext-body--collapsed');\r\n } else {\r\n body.classList.remove('factsheet-htext-body--collapsed');\r\n body.classList.remove('factsheet-htext-body--expanded');\r\n }\r\n });\r\n }\r\n \r\n resetCollapsing();\r\n \r\n /**\r\n * Re-check whether to show/hide expand-collapse buttons on browser resize\r\n */\r\n window.addEventListener('resize', function() {\r\n this.window.requestAnimationFrame(resetCollapsing);\r\n });\r\n }\r\n};","////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 05/31/2022 BBARRON 86210 Initial Create\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nexport const factsheetOverviewScripts = {\r\n loadScripts: () => {\r\n const expandedClass = \"expanded\";\r\n const headers = document.querySelectorAll('.factsheet-overview-header-mobile');\r\n\r\n function isExpanded(currentHeader) {\r\n var parent = currentHeader.parentNode;\r\n return parent.classList.contains(expandedClass);\r\n }\r\n\r\n function accordionExpand(currentHeader) {\r\n headers.forEach(header => {\r\n var parent = header.parentNode;\r\n if(header === currentHeader) {\r\n parent.classList.add(expandedClass);\r\n } else {\r\n parent.classList.remove(expandedClass);\r\n }\r\n });\r\n }\r\n\r\n function accordionCollapse(currentHeader) {\r\n headers.forEach(header => {\r\n var parent = header.parentNode;\r\n parent.classList.remove(expandedClass);\r\n });\r\n }\r\n\r\n\r\n // Activate each factsheet overview header element\r\n headers.forEach(header => {\r\n var parent = header.parentNode;\r\n header.addEventListener('click', evt => {\r\n if(isExpanded(header)) {\r\n accordionCollapse(header);\r\n } else {\r\n accordionExpand(header);\r\n }\r\n }, false);\r\n });\r\n }\r\n};\r\n","////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 03/31/2022 BBARRON 82812 Initial create\r\n// 04/27/2022 BBARRON 84447 Remove unused variable\r\n// 05/11/2022 BBARRON 85238 Pie chart should correctly handle a single 100% slice\r\n// 05/26/2022 BBARRON 86062 Updated to handle grouped data (arrays of arrays)\r\n// 08/24/2022 BBARRON 90888 Fix iOS bug where transform-origin property not supported\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\n/**\r\n * Creates the pie chart background circle with hatched lines\r\n * @param {number} radius \r\n * @returns \r\n */\r\nconst createChartBackground = (radius) => {\r\n const pattern = document.createElementNS(\"http://www.w3.org/2000/svg\", \"pattern\");\r\n pattern.setAttribute('id', 'diagonalHatch');\r\n pattern.setAttribute('patternUnits', 'userSpaceOnUse');\r\n pattern.setAttribute('width', '8');\r\n pattern.setAttribute('height', '8');\r\n\r\n const rect = document.createElementNS(\"http://www.w3.org/2000/svg\", \"rect\");\r\n rect.setAttribute('x', '0');\r\n rect.setAttribute('y', '0');\r\n rect.setAttribute('width', '8');\r\n rect.setAttribute('height', '8');\r\n rect.setAttribute('fill', '#F2F2F2');\r\n pattern.appendChild(rect);\r\n\r\n const path = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\r\n path.setAttribute('d', 'M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4');\r\n path.setAttribute('stroke', '#A0A0A0');\r\n path.setAttribute('stroke-width', '1');\r\n pattern.appendChild(path);\r\n\r\n const circle = document.createElementNS(\"http://www.w3.org/2000/svg\", \"circle\");\r\n circle.setAttribute('r', `${radius}`);\r\n circle.setAttribute('cx', `${radius}`);\r\n circle.setAttribute('cy', `${radius}`);\r\n circle.setAttribute('fill', `url(#diagonalHatch)`);\r\n return {\r\n pattern: pattern,\r\n circle: circle\r\n };\r\n}\r\n\r\nconst parsePercent = (percent) => {\r\n if(typeof percent === 'number') {\r\n return percent;\r\n } else if (typeof percent === 'string') {\r\n var cleaned = percent.replace(/[^0-9\\.-]/g, '');\r\n return parseFloat(cleaned);\r\n }\r\n return NaN;\r\n}\r\n\r\n/**\r\n * Creates the full pie chart SVG element with the standard colors\r\n * @param {number[]} data The array of percentages\r\n * @returns The SVG element\r\n */\r\nconst createChart = (data) => {\r\n if(Array.isArray(data[0])) {\r\n return createGroupedChart(data);\r\n }\r\n\r\n const radius = 200;\r\n const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\r\n const background = createChartBackground(radius);\r\n svg.setAttribute('width', '100%');\r\n svg.setAttribute('height', '100%');\r\n svg.setAttribute('class', 'gs-piechart');\r\n svg.setAttribute('viewBox', `0 0 ${2 * radius} ${2 * radius}`);\r\n svg.appendChild(background.pattern);\r\n svg.appendChild(background.circle);\r\n \r\n if(data.length === 1 && Math.round(data[0]) === 100) {\r\n let circle = createWholePie(0, radius);\r\n svg.appendChild(circle);\r\n return svg;\r\n }\r\n\r\n let rotation = 0;\r\n data.forEach((percent, index) => {\r\n percent = parsePercent(percent);\r\n if(percent <= 0 || isNaN(percent)) {\r\n return;\r\n }\r\n let slice = createSlice(percent, index, radius, rotation);\r\n rotation += percentToDegrees(percent);\r\n svg.appendChild(slice);\r\n });\r\n return svg;\r\n};\r\n\r\n/**\r\n * Creates the full pie chart SVG element with the standard colors\r\n * @param {number[][]} data The array of arrays percentages\r\n * @returns The SVG element\r\n */\r\nconst createGroupedChart = (groups) => {\r\n const radius = 200;\r\n const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\r\n const background = createChartBackground(radius);\r\n svg.setAttribute('width', '100%');\r\n svg.setAttribute('height', '100%');\r\n svg.setAttribute('class', 'gs-piechart');\r\n svg.setAttribute('viewBox', `0 0 ${2 * radius} ${2 * radius}`);\r\n svg.appendChild(background.pattern);\r\n svg.appendChild(background.circle);\r\n\r\n \r\n if(groups.length === 1 && groups[0].length === 1 && Math.round(groups[0][0]) === 100) {\r\n let circle = createWholePie(0, radius);\r\n svg.appendChild(circle);\r\n return svg;\r\n }\r\n\r\n let rotation = 0;\r\n groups.forEach((group, index) => {\r\n group.forEach(percent => {\r\n if(percent <= 0 || isNaN(percent)) {\r\n return;\r\n }\r\n let slice = createSlice(percent, index, radius, rotation);\r\n rotation += 360 * percent / 100;\r\n svg.appendChild(slice);\r\n });\r\n });\r\n return svg;\r\n};\r\n\r\n/**\r\n * Convert degrees to radians\r\n * @param {number} deg The degrees\r\n * @returns the angle in radians\r\n */\r\nconst degToRadians = (deg) => {\r\n return deg * Math.PI / 180;\r\n}\r\n\r\n/**\r\n * Convert a percent to radians\r\n * @param {number} percent The angle as a percentage\r\n * @returns The angle in radians\r\n */\r\nconst percentToRadians = (percent) => {\r\n return percent * Math.PI / 50;\r\n}\r\n\r\n/**\r\n * Convert a percent to degrees\r\n * @param {number} percent The angle as a percent\r\n * @returns The angle in degrees\r\n */\r\nconst percentToDegrees = (percent) => {\r\n return percent * 180 / 50;\r\n}\r\n\r\n/**\r\n * Handles the math for generating a pie slice and provides arc path parameters\r\n * @param {number} radius the size of the pie chart\r\n * @param {number} percent The percent of the whole pie\r\n * @returns \r\n */\r\nconst getSliceParemeters = (radius, percent, rotation) => {\r\n // Start pie chart at the top rather than the right\r\n const offsetAngle = degToRadians(-90) + degToRadians(rotation);\r\n let arcAngle = percentToRadians(percent);\r\n let endAngle = (offsetAngle + arcAngle) % (2 * Math.PI);\r\n const largeArc = percent > 50 ? '1' : '0';\r\n const startX = radius + radius * Math.cos(offsetAngle);\r\n const startY = radius + radius * Math.sin(offsetAngle);\r\n const endX = radius + radius * Math.cos(endAngle);\r\n const endY = radius + radius * Math.sin(endAngle);\r\n return {\r\n startX: startX,\r\n startY: startY,\r\n endX: endX,\r\n endY: endY,\r\n largeArc: largeArc\r\n };\r\n};\r\n\r\n/**\r\n * Generates an SVG path element representing one pie slice\r\n * @param {*} percent The percent of the pie\r\n * @param {*} index The index/order of this pie slice among all slices\r\n * @param {*} radius The chart size\r\n * @param {*} rotation How much this slice should be rotated based on previous slices\r\n * @returns The SVG Path element (The slice)\r\n */\r\nconst createSlice = (percent, index, radius, rotation) => {\r\n let d = getSliceParemeters(radius, percent, rotation);\r\n const slice = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\r\n \r\n // Start at chart center, draw line to startX,startY, arc to endX, endY and then close the wedge\r\n slice.setAttribute('d', `M${radius} ${radius} L${d.startX} ${d.startY} A${radius} ${radius} 0 ${d.largeArc} 1 ${d.endX} ${d.endY} z`);\r\n slice.setAttribute('class', `gs-piechart-slice-${index + 1}`);\r\n \r\n return slice;\r\n}\r\n\r\n/**\r\n * When there's just a single slice with a value of ~100%, just create a circle instead of a pie wedge\r\n * @param {*} index Determines the pie chart color\r\n * @param {*} radius The pie chart radius\r\n * @returns The SVG circle element\r\n */\r\nconst createWholePie = (index, radius) => {\r\n const circle = document.createElementNS(\"http://www.w3.org/2000/svg\", \"circle\");\r\n circle.setAttribute('r', `${radius}`);\r\n circle.setAttribute('cx', `${radius}`);\r\n circle.setAttribute('cy', `${radius}`);\r\n circle.setAttribute('class', `gs-piechart-slice-${index + 1}`);\r\n return circle;\r\n}\r\n\r\nconst parseChartData = dataStr => {\r\n if(!dataStr || dataStr === '') {\r\n return null;\r\n }\r\n\r\n // Handles legacy parsing when data string is not in json format\r\n if(dataStr.indexOf('[') !== 0) {\r\n return dataStr.split(',').map(d => parsePercent(d));\r\n }\r\n\r\n // Handles json parsing of data string\r\n try {\r\n return JSON.parse(dataStr).map(d => {\r\n if(Array.isArray(d)) {\r\n return d.map(i => parsePercent(i));\r\n }\r\n return parsePercent(d);\r\n });\r\n } catch (err) {\r\n console.log(\"Could not parse chart data: \", err);\r\n return null;\r\n }\r\n};\r\n\r\n/**\r\n * Create a pie chart inside every element with the data-piechart-data attribute.\r\n * Warning: Clears the element contents, so use a container element specifically for your charts\r\n */\r\nexport const factsheetPieChartScripts = {\r\n loadScripts: () => {\r\n let containers = document.querySelectorAll('*[data-piechart-data]');\r\n\r\n containers.forEach(container => {\r\n let dataStr = container.dataset.piechartData;\r\n let data = parseChartData(dataStr);\r\n if(!data || data.length === 0) {\r\n return;\r\n }\r\n\r\n let chart = createChart(data);\r\n container.innerHTML = '';\r\n container.appendChild(chart);\r\n });\r\n }\r\n};","////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 06/01/2022 BBARRON 86205 Initial create\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nexport const factsheetSectionScripts = {\r\n loadScripts: () => {\r\n let headers = document.querySelectorAll('.gs-factsheet-section-heading');\r\n headers.forEach(header => {\r\n let parent = header.parentNode.parentNode;\r\n header.addEventListener('click', evt => {\r\n evt.preventDefault();\r\n parent.classList.toggle('expanded');\r\n });\r\n });\r\n }\r\n};","////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 03/29/2022 BBARRON 82643 Initial create\r\n// 03/31/2022 BBARRON 82812 changed module name to lowercase to match other modules\r\n// 05/26/2022 BBARRON 86063 Fix footer collapsing. Only show controls if footnotes are too tall\r\n// 08/04/2022 GDEME 89643 Fund Details Pages (all) - expand/collapse functionality\r\n// 08/07/2022 BBARRON 89643 Overhaul expanding/collapsing footnotes. Default to expanded, disable collapsing if too short\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nexport const factsheetVerticalTableScripts = {\r\n loadScripts: () => {\r\n\r\n const defaultToCollapsed = false;\r\n const expandCollapseThreshold = 180;\r\n\r\n const handleExpandClick = (evt) => {\r\n evt.preventDefault();\r\n let parent = evt.currentTarget.parentNode;\r\n if(parent.classList.contains('factsheet-vtable-footer')) {\r\n parent.classList.remove('factsheet-vtable-footer--collapsed');\r\n parent.classList.add('factsheet-vtable-footer--expanded');\r\n }\r\n };\r\n\r\n const handleCollapseClick = (evt) => {\r\n evt.preventDefault();\r\n let parent = evt.currentTarget.parentNode;\r\n if(parent.classList.contains('factsheet-vtable-footer')) {\r\n parent.classList.add('factsheet-vtable-footer--collapsed');\r\n parent.classList.remove('factsheet-vtable-footer--expanded');\r\n }\r\n };\r\n \r\n const expandButtons = document.querySelectorAll('.factsheet-vtable-footer-controls--collapsed');\r\n expandButtons.forEach(button => {\r\n button.addEventListener('click', handleExpandClick, false);\r\n });\r\n\r\n const collapseButtons = document.querySelectorAll('.factsheet-vtable-footer-controls--expanded');\r\n collapseButtons.forEach(button => {\r\n button.addEventListener('click', handleCollapseClick, false);\r\n });\r\n\r\n \r\n // Only show expand/collapse controls if footer is high enough to justify this.\r\n // If present, remove these buttons if the footnotes are too short.\r\n function resetFooters() {\r\n const tableFooters = document.querySelectorAll('.factsheet-vtable-footer');\r\n tableFooters.forEach(footer => {\r\n var footnotes = footer.querySelector('.factsheet-vtable-footnotes');\r\n if(footnotes.offsetHeight > expandCollapseThreshold) {\r\n if(defaultToCollapsed){\r\n footer.classList.add('factsheet-vtable-footer--collapsed');\r\n }else{\r\n footer.classList.add('factsheet-vtable-footer--expanded');\r\n } \r\n } else {\r\n footer.classList.remove('factsheet-vtable-footer--collapsed');\r\n footer.classList.remove('factsheet-vtable-footer--expanded');\r\n }\r\n });\r\n }\r\n\r\n resetFooters();\r\n\r\n window.addEventListener('resize', function() {\r\n this.window.requestAnimationFrame(resetFooters);\r\n });\r\n }\r\n};\r\n ","// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 11/02/2020 JJacob 49830 Initial Create\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nexport const FAQScripts = {\r\n loadScripts: () => {\r\n const handleClick = id => {\r\n const active = document.querySelector('.gs-faq-card.--active');\r\n let activeId;\r\n if (active) {\r\n activeId = active.id;\r\n active.classList.remove('--active');\r\n }\r\n if (activeId !== id) {\r\n const selected = document.querySelector('#' + id);\r\n selected.classList.add('--active');\r\n }\r\n };\r\n\r\n const elems = document.querySelectorAll('.gs-faq-card');\r\n elems.forEach(element => {\r\n element.addEventListener('click', () => handleClick(element.id));\r\n });\r\n const stopLink = document.querySelectorAll('.gs-faq-card a');\r\n stopLink.forEach(element => {\r\n element.addEventListener('click', e => {\r\n e.stopPropagation();\r\n });\r\n });\r\n }\r\n};\r\n","// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 10/16/2023 GCASEY 110128 Initial Create\r\n// 10/31/2023 GCASEY 117782 Fix console errors\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\n\r\nexport const formBannerScripts = () => {\r\n const form = document.getElementsByClassName(\"gs-formbanner-form\")[0];\r\n const formBanner = document.getElementsByClassName(\"gs-formbanner\")[0];\r\n const backgroundImage = document.getElementsByClassName(\"gs-formbanner-image\")[0];\r\n const backgroundGraphic = document.getElementsByClassName(\"gs-formbanner-graphic\")[0];\r\n\r\n if(!formBanner) {\r\n return;\r\n }\r\n\r\n // pixel offsets for the background images\r\n const imageHorizontalOffset = 50;\r\n const imageVerticalOffset = 0;\r\n const graphicHorizontalOffset = 50;\r\n const graphicVerticalOffset = 0;\r\n\r\n const initialFormHeight = form?.getBoundingClientRect().height;\r\n\r\n // tablet breakpoint\r\n const widthBreakpoint = 768;\r\n\r\n // sets position of the background image and background graphic \r\n const setBackgroundPosition = (verticalPos) => {\r\n backgroundImage.style.backgroundPosition = `${imageHorizontalOffset}px ${verticalPos + imageVerticalOffset}px`;\r\n backgroundGraphic.style.backgroundPosition = `${graphicHorizontalOffset}px ${verticalPos + graphicVerticalOffset}px`;\r\n };\r\n\r\n // manually sets image positions to emulate scrolling with fixed backgrounds\r\n const scrollImages = () => {\r\n if(window.innerWidth < widthBreakpoint) \r\n return;\r\n\r\n const formHeight = form.getBoundingClientRect().height;\r\n const formHeightChange = formHeight - initialFormHeight;\r\n\r\n // distance of form from top of page\r\n const offset = formBanner.getBoundingClientRect().top;\r\n\r\n if (offset < - formHeightChange) {\r\n setBackgroundPosition(offset + formHeightChange);\r\n } else if (offset < 0) {\r\n setBackgroundPosition(0);\r\n } else {\r\n setBackgroundPosition(offset);\r\n }\r\n\r\n }\r\n\r\n window.addEventListener(\"scroll\", scrollImages);\r\n // recalculate image positions when the form expands/detracts\r\n new ResizeObserver(scrollImages).observe(formBanner);\r\n}\r\n\r\n\r\n","// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 07/01/2024 GCASEY 133318 Initial Create\r\n// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\n\r\nexport const formSelectScripts = () => {\r\n const query = \"select.gs-form-input, select.gs-form-cta-input\";\r\n const selectFields = document.querySelectorAll(query);\r\n\r\n const onSelectChange = (e) => {\r\n e.target.classList.add(\"--selected\");\r\n }\r\n\r\n selectFields.forEach((select) => {\r\n select.addEventListener(\"change\", onSelectChange)\r\n })\r\n}","////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 04/05/2022 BBARRON 83017 Initial create\r\n// 08/16/2022 BBARRON 90362 Fix timestamp parsing. Timestamps were being interpreted as local dates\r\n// rather than UTC dates, throwing off inception dates by one day.\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\n/**\r\n * Filter function that ensures all elements are distinct (no duplicates)\r\n * @param {*} value The value to check\r\n * @param {*} index The value's index\r\n * @param {*} self The full list of values\r\n * @returns \r\n */\r\n export const distinct = (value, index, self) => {\r\n return self.indexOf(value) === index;\r\n};\r\n\r\nexport const formatNumber = (number) => {\r\n if (!number && number != \"0\") {\r\n return \"N/A\";\r\n }\r\n\r\n return number.toFixed(2) + \"%\";\r\n};\r\n\r\nexport const formatAssetValue = (number) => {\r\n if (!number) {\r\n return \"N/A\";\r\n }\r\n\r\n return number.toFixed(2);\r\n};\r\n\r\n/**\r\n * Timestamps are interpreted as local time by default.\r\n * This assumes the timestamp is for a UTC date instead which is what comes from the fund performance API\r\n * @param {number} milliseconds The UTC timestamp\r\n */\r\nexport const parseUtcTimestamp = (milliseconds) => {\r\n // Incorrectly parse the timestamp as if it was local time to get a rough estimate of the date/time.\r\n let localTime = new Date(milliseconds);\r\n // Timezone offset changes throughout the year. Get the specific timezeone offset at the approximate time of the timestamp\r\n let utcOffset = localTime.getTimezoneOffset() * 60000;\r\n // Add the time zone offset to convert it to UTC\r\n return new Date(milliseconds + utcOffset);\r\n}\r\n\r\nexport const formatTimestamp = (date) => {\r\n let pattern = new RegExp(/Date\\((\\d+)\\)/);\r\n let matches = pattern.exec(date);\r\n if (!matches || matches.length < 1) {\r\n return \"\";\r\n }\r\n\r\n let milliseconds = parseInt(matches[1]);\r\n let parsedDate = parseUtcTimestamp(milliseconds);\r\n return formatDate(parsedDate);\r\n}\r\n\r\nexport const formatDate = (date) => {\r\n let parsedDate = new Date(date);\r\n let dd = String(parsedDate.getDate()).padStart(2, '0');\r\n let mm = String(parsedDate.getMonth() + 1).padStart(2, '0'); //January is 0!\r\n let yyyy = parsedDate.getFullYear();\r\n return mm + '/' + dd + '/' + yyyy;\r\n};\r\n\r\nexport const formatMorningstar = (number, siblingNumber) => {\r\n if (!number || !siblingNumber) {\r\n return \"N/A\";\r\n }\r\n\r\n return number;\r\n};","////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Modifications\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// Date Pgmr WR/IR# Description\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n// 04/05/2022 BBARRON 83017 Initial create\r\n// 04/12/2022 BBARRON 83345 Added footnotes and moved as of date out of tables\r\n// 04/13/2022 BBARRON 83018 Added factsheet domain. Can change location of fact sheet links with config variable\r\n// 05/11/2022 BBARRON 85240 Removed factsheet domain. No longer need to redirect fund urls to other domains.\r\n// 07/12/2022 BBARRON 88923 Make fund links bold\r\n// 07/19/2022 BBARRON 88352 For every as of date and every fund category, add anchor ids\r\n// 08/01/2022 BBARRON 89485 Change anchor ids for each fund category to fundcategory-CategoryCD-ActiveTab\r\n// 08/16/2022 BBARRON 90398 Fix three month performance column. Was populating with OneMonth data\r\n// 08/18/2022 BBARRON 90176 Remove duplicate footnote symbols and sort numerically\r\n// 10/13/2022 BBARRON 93634 Overhaul funds listing table for horizontal and vertical scroll on mobile\r\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\r\n\r\nimport { formatAssetValue, formatNumber, formatMorningstar, formatDate, formatTimestamp } from './formatting.js'\r\n\r\n/////////////////////////////////////////\r\n// Daily Performance\r\n/////////////////////////////////////////\r\n\r\nexport const renderDailyPerformanceTable = (data) => {\r\n if(!data) {\r\n return;\r\n }\r\n let headingRow = renderDailyTableHeadingRow();\r\n let bodyRows = [];\r\n data.Categories.forEach(category => {\r\n let newRows = renderDailyFundCategory(category, data);\r\n newRows.forEach(r => bodyRows.push(r)); \r\n });\r\n \r\n let thead = create('thead', {children: [headingRow]});\r\n let tbody = create('tbody', {children: [...bodyRows]});\r\n\r\n return create('table', {\r\n classes: [],\r\n attributes: {'data-type': 'daily'},\r\n children: [thead, tbody]\r\n });\r\n}\r\n\r\nfunction renderDailyTableHeadingRow() {\r\n let html = `