{"version":3,"sources":["template-blogs-landing.js"],"names":["TemplateBlogsLanding","constructor","container","apiEndpoint","redirectUrlIfNoResults","options","this","Object","assign","itemsContainer","featuredContainer","paginationContainer","paginationItemsContainer","paginationNextButton","paginationPreviousButton","filteredByContainer","tagsContainer","itemsPerPage","itemsOnPageOne","paginationScrollAmount","allBlogs","sortedBlogs","tags","filterValues","tag","page","document","querySelector","init","initEvents","fetch","then","response","json","items","syncFilterValuesFromQuerystring","filterAndSortBlogs","displayBlogs","renderPagination","setPaginationScolling","renderFilterTags","renderSelectedFilterTag","classList","remove","addEventListener","e","removeTag","urlParams","URLSearchParams","window","location","search","get","parseInt","filteredItems","filter","blogItem","shouldDisplayBlog","sort","a","b","Date","date","disableScrollingToTop","paginatedItems","paginateItems","length","scrollTo","top","behavior","renderFeaturedItem","renderItems","slice","style","display","some","blogTag","key","let","skip","take","diff","item","innerHTML","renderItem","images","featuredImageUrl","text","html","forEach","listImageUrl","substring","imageUrl","url","imageAltText","dateFormatted","renderBlogTags","name","index","comma","scrollAmount","totalPages","getTotalPages","activeClass","add","querySelectorAll","paginationElem","changePage","scrollLeft","elem","target","contains","innerText","scrollIntoView","block","updateQueryStrings","paginationScrollRight","paginationScrollLeft","paginationChangeScroll","reachEnd","offsetWidth","scrollWidth","totalItems","Math","ceil","getDistinctTags","tagElem","changeTag","selectedTag","dataset","allTags","blog","push","queries","history","pushState","join"],"mappings":"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","file":"template-blogs-landing.min.js","sourcesContent":["export default class TemplateBlogsLanding {\r\n constructor(container, apiEndpoint, redirectUrlIfNoResults, options) {\r\n \r\n const defaultOptions = { \r\n itemsContainer: '.blog-items',\r\n featuredContainer: '.blog-featured',\r\n paginationContainer: '.blog-pagination',\r\n paginationItemsContainer: '.blog-pagination ul',\r\n paginationNextButton: '.blog-pagination .next',\r\n paginationPreviousButton: '.blog-pagination .previous',\r\n filteredByContainer: '.blog-filtered-by',\r\n tagsContainer: '.blog-tags-filter',\r\n itemsPerPage: 9,\r\n itemsOnPageOne: 7,\r\n paginationScrollAmount: 43.5\r\n };\r\n\r\n this.options = Object.assign({}, defaultOptions, options);\r\n this.allBlogs = [];\r\n this.sortedBlogs = [];\r\n this.tags = [];\r\n\r\n this.filterValues = {\r\n tag: '',\r\n page: 1\r\n };\r\n\r\n this.apiEndpoint = apiEndpoint; \r\n this.redirectUrlIfNoResults = redirectUrlIfNoResults;\r\n\r\n this.container = document.querySelector(container);\r\n this.itemsContainer = this.container.querySelector(this.options.itemsContainer);\r\n this.featuredContainer = this.container.querySelector(this.options.featuredContainer);\r\n this.paginationItemsContainer = this.container.querySelector(this.options.paginationItemsContainer);\r\n this.paginationNextButton = this.container.querySelector(this.options.paginationNextButton);\r\n this.paginationPreviousButton = this.container.querySelector(this.options.paginationPreviousButton);\r\n this.tagsContainer = this.container.querySelector(this.options.tagsContainer);\r\n this.filteredByContainer = this.container.querySelector(this.options.filteredByContainer);\r\n\r\n this.init();\r\n this.initEvents();\r\n }\r\n\r\n init() {\r\n \r\n fetch(this.apiEndpoint)\r\n .then(response => response.json())\r\n .then(items => {\r\n \r\n this.allBlogs = items;\r\n\r\n this.syncFilterValuesFromQuerystring();\r\n\r\n this.filterAndSortBlogs();\r\n\r\n this.displayBlogs();\r\n\r\n this.renderPagination();\r\n\r\n this.setPaginationScolling();\r\n\r\n this.renderFilterTags();\r\n\r\n this.renderSelectedFilterTag();\r\n\r\n this.container.classList.remove('loading');\r\n\r\n });\r\n }\r\n \r\n initEvents(){\r\n\r\n this.filteredByContainer.querySelector(\".remove-filter\").addEventListener(\"click\", e => this.removeTag(e));\r\n\r\n }\r\n\r\n syncFilterValuesFromQuerystring(){\r\n\r\n const urlParams = new URLSearchParams(window.location.search);\r\n \r\n const tag = urlParams.get('tag');\r\n const page = urlParams.get('page');\r\n\r\n this.filterValues.tag = tag !== null ? tag : '';\r\n this.filterValues.page = page !== null ? parseInt(page) : 1;\r\n\r\n }\r\n\r\n filterAndSortBlogs(){\r\n\r\n const filteredItems = this.allBlogs.filter(blogItem => this.shouldDisplayBlog(blogItem));\r\n\r\n this.sortedBlogs = filteredItems.sort((a, b) => new Date(b.date) - new Date(a.date))\r\n\r\n }\r\n\r\n\r\n displayBlogs(disableScrollingToTop){\r\n\r\n const paginatedItems = this.paginateItems(this.sortedBlogs);\r\n\r\n if (paginatedItems.length === 0){\r\n\r\n window.location = this.redirectUrlIfNoResults;\r\n return; \r\n\r\n }\r\n\r\n if(!disableScrollingToTop){\r\n window.scrollTo({ top: 0, behavior: 'smooth'});\r\n }\r\n \r\n\r\n if(this.filterValues.page === 1)\r\n {\r\n this.renderFeaturedItem(paginatedItems[0]);\r\n \r\n this.renderItems(paginatedItems.slice(1)); \r\n }\r\n else\r\n {\r\n this.featuredContainer.style.display = 'none';\r\n\r\n this.renderItems(paginatedItems); \r\n }\r\n\r\n }\r\n\r\n shouldDisplayBlog(blogItem){\r\n \r\n if (this.filterValues.tag === '')\r\n return true;\r\n\r\n return blogItem.tags\r\n .some(blogTag => this.filterValues.tag == blogTag.key);\r\n\r\n }\r\n\r\n\r\n paginateItems(items){\r\n\r\n let skip = 0;\r\n let take = 0;\r\n\r\n if(this.filterValues.page === 1)\r\n {\r\n skip = 0;\r\n take = this.options.itemsOnPageOne;\r\n }\r\n else\r\n {\r\n var diff = this.options.itemsPerPage - this.options.itemsOnPageOne;\r\n skip = ((this.filterValues.page - 1) * this.options.itemsPerPage) - diff;\r\n take = this.options.itemsPerPage + skip;\r\n }\r\n \r\n return items.slice(skip, take); \r\n\r\n }\r\n\r\n renderFeaturedItem(item){\r\n\r\n this.featuredContainer.innerHTML = this.renderItem(item, item.images.featuredImageUrl, item.text);\r\n\r\n this.featuredContainer.style.display = 'flex';\r\n }\r\n\r\n renderItems(items){\r\n\r\n let html = \"\";\r\n\r\n items.forEach(item=> {\r\n\r\n html+= `
\r\n ${this.renderItem(item, item.images.listImageUrl, item.text.substring(0, 100))}\r\n
`;\r\n \r\n });\r\n\r\n this.itemsContainer.innerHTML = html; \r\n\r\n }\r\n\r\n renderItem(item, imageUrl, text){\r\n\r\n return `\r\n \r\n \"${item.imageAltText}\"\r\n \r\n \r\n
\r\n \r\n ${item.dateFormatted} | ${this.renderBlogTags(item)} \r\n \r\n \r\n

${item.name}

\r\n

${text}...

\r\n \r\n
`;\r\n }\r\n\r\n\r\n renderBlogTags(blogItem){\r\n if (blogItem.tags === null || blogItem.tags.length === 0)\r\n return ''\r\n\r\n let html = ''\r\n const lastTagKey = blogItem.tags[blogItem.tags.length - 1].key\r\n\r\n blogItem.tags.forEach((tag, index) => {\r\n const comma = index !== blogItem.tags.length - 1 ? ',' : ''\r\n html += `\r\n ${tag.name}${comma}\r\n `\r\n })\r\n\r\n return html\r\n }\r\n\r\n\r\n renderPagination(){\r\n\r\n const totalPages = this.getTotalPages();\r\n\r\n let html = '';\r\n\r\n for(let page = 1; page <= totalPages; page++){\r\n\r\n const activeClass = this.filterValues.page === page ? 'active' : '';\r\n \r\n html+= `
  • ${page}
    • `;\r\n\r\n }\r\n\r\n this.paginationItemsContainer.innerHTML = html;\r\n\r\n if(totalPages > 5){\r\n\r\n this.paginationItemsContainer.classList.remove(\"less-than-6\");\r\n this.paginationNextButton.style.display = 'block';\r\n this.paginationPreviousButton.style.display = 'block';\r\n this.paginationPreviousButton.classList.add(\"disabled\");\r\n\r\n }\r\n else\r\n {\r\n this.paginationItemsContainer.classList.add(\"less-than-6\");\r\n this.paginationNextButton.style.display = 'none';\r\n this.paginationPreviousButton.style.display = 'none'\r\n }\r\n\r\n // Add events\r\n this.paginationItemsContainer.querySelectorAll('li')\r\n .forEach(paginationElem => {\r\n\r\n paginationElem.addEventListener('click', e => this.changePage(e) );\r\n\r\n });\r\n\r\n // Scroll to the active pagination item\r\n const activePageItem = this.paginationItemsContainer.querySelector(\".active\");\r\n if(activePageItem){ \r\n const scrollAmount = this.options.paginationScrollAmount * (this.filterValues.page - 1);\r\n this.paginationItemsContainer.scrollLeft = scrollAmount - 10;\r\n }\r\n \r\n }\r\n\r\n changePage(e){\r\n\r\n const elem = e.target;\r\n\r\n if(elem.classList.contains('active'))\r\n return;\r\n\r\n this.filterValues.page = parseInt(elem.innerText);\r\n \r\n this.displayBlogs(true);\r\n \r\n this.paginationItemsContainer.scrollIntoView(\r\n {\r\n block: \"center\", \r\n behavior: \"smooth\"\r\n }); \r\n\r\n this.updateQueryStrings();\r\n\r\n this.paginationItemsContainer.querySelector('.active').classList.remove('active');\r\n elem.classList.add('active');\r\n }\r\n\r\n\r\n setPaginationScolling(){\r\n\r\n this.paginationNextButton\r\n .addEventListener('click', (e) => this.paginationScrollRight(e));\r\n \r\n this.paginationPreviousButton\r\n .addEventListener('click', (e) => this.paginationScrollLeft(e));\r\n\r\n this.paginationItemsContainer\r\n .addEventListener('scrollend', (e) => this.paginationChangeScroll(e));\r\n\r\n }\r\n\r\n paginationChangeScroll(e){\r\n\r\n const elem = e.target;\r\n \r\n const reachEnd = (elem.scrollLeft + elem.offsetWidth) >= (elem.scrollWidth - 1);\r\n const reachStart = elem.scrollLeft === 0; \r\n\r\n if(reachStart){\r\n this.paginationPreviousButton.classList.add(\"disabled\");\r\n this.paginationNextButton.classList.remove(\"disabled\");\r\n }\r\n else if (reachEnd){\r\n this.paginationPreviousButton.classList.remove(\"disabled\");\r\n this.paginationNextButton.classList.add(\"disabled\");\r\n }\r\n else{\r\n this.paginationPreviousButton.classList.remove(\"disabled\");\r\n this.paginationNextButton.classList.remove(\"disabled\");\r\n }\r\n\r\n }\r\n\r\n paginationScrollRight(){\r\n \r\n this.paginationItemsContainer.scrollLeft += this.options.paginationScrollAmount;\r\n\r\n }\r\n\r\n paginationScrollLeft(){\r\n \r\n this.paginationItemsContainer.scrollLeft -= this.options.paginationScrollAmount;\r\n\r\n }\r\n\r\n\r\n getTotalPages(){\r\n\r\n var totalItems = this.sortedBlogs.length;\r\n \r\n if(totalItems > this.options.itemsOnPageOne){\r\n\r\n totalItems -= this.options.itemsOnPageOne;\r\n\r\n var totalPages = Math.ceil(totalItems/this.options.itemsPerPage);\r\n\r\n return totalPages + 1; // Adds one for the X number of item on page one\r\n }\r\n\r\n return 1;\r\n\r\n }\r\n\r\n\r\n renderFilterTags(){\r\n\r\n this.tags = this.getDistinctTags();\r\n\r\n let html = '';\r\n\r\n this.tags.forEach(tag=> {\r\n\r\n html+= `
  • ${tag.name}
    • `;\r\n\r\n });\r\n\r\n this.tagsContainer.querySelector(\"ul\").innerHTML = html;\r\n this.tagsContainer.style.display = 'flex';\r\n\r\n // Add events\r\n this.tagsContainer.querySelectorAll('li')\r\n .forEach(tagElem => {\r\n\r\n tagElem.addEventListener('click', e => this.changeTag(e) );\r\n\r\n });\r\n\r\n }\r\n\r\n renderSelectedFilterTag(){\r\n\r\n if(!this.filterValues.tag){\r\n this.filteredByContainer.style.display = 'none';\r\n return;\r\n }\r\n\r\n const selectedTag = this.tags.filter(tag => tag.key === this.filterValues.tag)[0];\r\n if(!selectedTag){\r\n this.filteredByContainer.style.display = 'none';\r\n return;\r\n }\r\n \r\n this.filteredByContainer.querySelector(\"strong\").innerHTML = selectedTag.name;\r\n this.filteredByContainer.style.display = 'block';\r\n }\r\n\r\n changeTag(e){\r\n\r\n const elem = e.target;\r\n\r\n this.filterValues.tag = elem.dataset.key;\r\n this.filterValues.page = 1;\r\n\r\n this.filterAndSortBlogs();\r\n\r\n this.displayBlogs();\r\n\r\n this.renderPagination();\r\n\r\n this.updateQueryStrings();\r\n\r\n this.renderSelectedFilterTag();\r\n }\r\n\r\n removeTag(){\r\n\r\n this.filterValues.tag = '';\r\n this.filterValues.page = 1;\r\n\r\n this.filterAndSortBlogs();\r\n\r\n this.displayBlogs();\r\n\r\n this.renderPagination();\r\n\r\n this.updateQueryStrings();\r\n\r\n this.renderSelectedFilterTag();\r\n }\r\n\r\n getDistinctTags(){\r\n\r\n const allTags = [];\r\n\r\n this.allBlogs.forEach(blog=> {\r\n\r\n blog.tags.forEach(blogTag => {\r\n\r\n const tagExist = allTags.some(tag=> tag.key == blogTag.key);\r\n if(!tagExist){\r\n\r\n allTags.push(blogTag);\r\n\r\n }\r\n \r\n });\r\n\r\n });\r\n\r\n return allTags;\r\n }\r\n\r\n\r\n updateQueryStrings(){\r\n\r\n const queries = [];\r\n\r\n if(this.filterValues.tag !== ''){\r\n queries.push(`tag=${this.filterValues.tag}`);\r\n }\r\n\r\n queries.push(`page=${this.filterValues.page}`);\r\n\r\n history.pushState(null, null, `?${queries.join('&')}`);\r\n }\r\n}"]}