{"version":3,"file":"magazine_search.js","sources":["../../../../../src/components/Magazine/MagazineResult.jsx","../../../../../src/services/masonry.service.js","../../../../../src/components/Magazine/MagazineSearch.jsx","../../../../../src/components/Magazine/MagazineFilter.jsx","../../../../../src/magazine_search.js"],"sourcesContent":["import {getTranslations} from \"../../services/language.service.js\";\nimport {useState} from \"react\";\nimport {Modal} from \"../Modal.jsx\";\n\nconst LANG = getTranslations()\nexport const MagazineResult = (props) => {\n const [showModal,setShowModal] = useState(false)\n let download = false;\n\n const onClick = (e) => {\n if (showModal) {\n return\n }\n e.preventDefault()\n setShowModal(true)\n }\n\n if (props.result.magazineType === 'completeEdition' || props.result.magazineType === 'longArticle') {\n download = props.result.filename;\n }\n return
\n}\n","export const calculatePosition = (items) => {\n let lowestDivPosition = 0;\n let highestDivPosition = 0;\n let lowestDivCol = 0;\n let highestDivCol = 0;\n let lowestDivHeight = 0;\n let highestDivHeight = 0;\n let cols = 0;\n let highestElement;\n let lowestElement;\n let sortedItems = items;\n document.querySelectorAll(\".masonry > div > div > div:last-child\").forEach((element, index) => {\n cols = index + 1;\n if (element.getBoundingClientRect().bottom > lowestDivPosition) {\n lowestDivPosition = element.getBoundingClientRect().bottom;\n lowestDivHeight = element.offsetHeight;\n lowestDivCol = index + 1;\n lowestElement = element;\n }\n if (element.getBoundingClientRect().bottom < highestDivPosition || highestDivPosition === 0) {\n highestDivPosition = element.getBoundingClientRect().bottom;\n highestDivHeight = element.offsetHeight;\n highestDivCol = index + 1;\n highestElement = element;\n }\n })\n if (highestDivPosition < lowestDivPosition - lowestDivHeight) {\n let indexFrom = findLastIndexInColumn(items.length,cols, lowestDivCol);\n let indexTo = findLastIndexInColumn(items.length,cols, highestDivCol);\n if (lowestDivHeight < highestDivHeight) {\n if (lowestElement.previousSibling.offsetHeight > highestDivHeight) {\n indexFrom = indexFrom - cols;\n } else {\n indexTo = indexTo - cols;\n }\n }\n sortedItems = array_move(items, indexFrom,indexTo)\n if (indexFrom > indexTo) {\n sortedItems = array_move(items,indexTo + 1, indexFrom);\n }\n }\n return sortedItems;\n\n}\n\nconst findLastIndexInColumn = (length, numColumns, column) => {\n if (column > numColumns) {\n throw new Error(\"Column index is out of bounds.\");\n }\n\n // Initialize variables to track the index and count of elements per column\n let lastIndex = -1;\n\n // Iterate through the array and track indices in the specified column\n for (let i = 0; i < length; i++) {\n // Determine the current column based on the index\n let currentColumn = i % numColumns + 1;\n\n // If the current column matches the specified column, update lastIndex\n if (currentColumn === column) {\n lastIndex = i;\n }\n }\n\n return lastIndex;\n}\n\nconst array_move = (arr, old_index, new_index) => {\n if (new_index >= arr.length) {\n var k = new_index - arr.length + 1;\n while (k--) {\n arr.push(undefined);\n }\n }\n arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);\n return arr; // for testing\n};","import {useCallback, useEffect, useRef, useState} from \"react\"\nimport Masonry, {ResponsiveMasonry} from \"react-responsive-masonry\"\nimport {loadSolrResults} from \"../../services/solr.service.js\"\nimport {MagazineResult} from \"./MagazineResult.jsx\"\nimport {calculatePosition} from \"../../services/masonry.service.js\";\nimport {getTranslations} from \"../../services/language.service.js\";\n\nexport const MagazineSearch = () => {\n const [search, setSearch] = useState('')\n const [filter, setFilter] = useState({})\n const [items, setItems] = useState([])\n const [isLoading, setIsLoading] = useState(true);\n const [hasMore, setHasMore] = useState(true);\n const [currentPage, setCurrentPage] = useState(1);\n const container = useRef(null);\n const LANG = getTranslations()\n\n const mapResults = {\n tags: (element) => {\n const tags = []\n\n for (const e of element.children) {\n tags.push(e.textContent)\n }\n\n return tags\n },\n magazineType: 'string',\n url: 'string',\n filename: 'string',\n title: 'string',\n teaser: 'string',\n content: 'string',\n image: 'string',\n score: 'number',\n readingTime: 'string',\n publishedAt: 'string',\n category: 'string',\n locked: 'boolean',\n stickyNews: 'boolean',\n userRoles: (element) => {\n const userRoles = []\n\n if (element === undefined) {\n return userRoles\n }\n\n for (const e of element.children) {\n userRoles.push(e.textContent)\n }\n\n return userRoles\n },\n loginUrl: 'string'\n }\n\n useEffect(() => {\n document.addEventListener('filter', (e) => {\n setFilter(e.detail)\n setCurrentPage(1);\n setItems([])\n setHasMore(true)\n })\n\n document.addEventListener('search', (e) => {\n setSearch(e.detail)\n setCurrentPage(1);\n setItems([])\n setHasMore(true)\n })\n\n document.addEventListener('reset', () => {\n setSearch('')\n setCurrentPage(1);\n setItems([])\n setHasMore(true)\n loadResponse()\n })\n },[])\n\n useEffect(() => {\n setIsLoading(true);\n loadResponse()\n }, [search, filter]);\n\n useEffect(() => {\n setIsLoading(true);\n }, []);\n\n const loadNextItems = useCallback(async () => {\n\n if (isLoading) return;\n\n setIsLoading(true);\n loadResponse()\n }, [currentPage,isLoading]);\n\n useEffect(() => {\n const handleScroll = () => {\n const { clientHeight } =\n document.documentElement;\n const { top,height } =\n container.current.getBoundingClientRect();\n if (top + height - clientHeight < 400) {\n void loadNextItems();\n\n }\n };\n if (hasMore) {\n window.addEventListener(\"scroll\", handleScroll);\n }\n return () => {\n window.removeEventListener(\"scroll\", handleScroll);\n };\n }, [loadNextItems]);\n\n const loadResponse = () => {\n if (!hasMore) {\n return\n }\n const solrParams = {\n q: search === '' ? '*' : search.replace('*', ''),\n page: currentPage\n }\n\n const filters = {\n ...filter,\n type: '20'\n }\n\n\n loadSolrResults(solrParams, filters, mapResults).then((response) => {\n setItems((prevItems) => [...prevItems, ...response.results]);\n setCurrentPage((prevIndex) => prevIndex + 1);\n if (!response.hasMore) {\n setHasMore(false)\n }\n document.dispatchEvent(new CustomEvent('facets', {\n detail: response.facets\n }))\n setIsLoading(false)\n })\n }\n\n useEffect(() => {\n if (!isLoading && items.length > 4) {\n setItems(() => [...calculatePosition(items)]);\n\n }\n },[isLoading])\n\n return (\n{LANG.noResults}
}\n {isLoading && }\n