\r\n ${image}\r\n
\r\n `;\r\n },\r\n\r\n // ====================================================== //\r\n // =========== Lista os posts seção setada ============== //\r\n // ====================================================== //\r\n listPosts(Posts) {\r\n const _this = this;\r\n\r\n // Limpa a lista\r\n document.querySelector('[data-posts-list]').innerHTML = '';\r\n\r\n // document.createDocumentFragment agrupa os elementos para serem inseridos de uma única vez\r\n // Evita que o DOM seja atualizado a cada novo elemento\r\n const fragmentDOM = document.createDocumentFragment();\r\n\r\n if (Posts.length > 0) {\r\n Posts.forEach((post) => {\r\n const template = _this.templatePost(post);\r\n fragmentDOM.appendChild(document.createRange().createContextualFragment(template));\r\n });\r\n\r\n // Insere o fragmento no DOM\r\n document.querySelector('[data-posts-list]').appendChild(fragmentDOM);\r\n\r\n // Atualiza o lazyload\r\n window.lazyLoadInstance.update();\r\n } else {\r\n document.querySelector('[data-posts-list]').innerHTML = `
A sua pesquisa por \"${_this.searchParam}\" não teve resultados :(`;\r\n }\r\n\r\n document.querySelector('.pagination-wrapper').style.display = 'none';\r\n },\r\n\r\n // ====================================================== //\r\n // Responsável por pegar o valor do input e ajustar a regex da busca //\r\n // ====================================================== //\r\n searchRegex(value) {\r\n // Remove os espaços em branco do início e do fim e adiciona o pipe (|)\r\n // Monta a regex da seguinte forma, ex: (palavra1|palavra2|palavra3)\r\n\r\n let regex = `(${value.replace(/( )+/g, '|')})`;\r\n\r\n // Trata a regex da busca\r\n if (regex.charAt(regex.length - 2) == '|') {\r\n // remove o ultimo caracter\r\n regex = regex.replace('|', '');\r\n }\r\n // console.log('REGEX', regex);\r\n this.api(regex);\r\n },\r\n\r\n // ====================================================== //\r\n // =========== FAZ A BUSCA COM O DEBOUNCE ============== //\r\n // ====================================================== //\r\n search() {\r\n const _this = this;\r\n const search = document.getElementById('searchBlog');\r\n\r\n // Listener com o debounce com delay de 1000ms para evitar o carregamento excessivo de requisições\r\n search.addEventListener(\r\n 'input',\r\n this.debounce((e) => {\r\n if (e.target.value !== '') {\r\n // Seta o loading do input para o usuário saber que está sendo feito uma busca\r\n _this.setIsLoading(true);\r\n\r\n // Mostra os posts de acordo com o que o usuário digitou\r\n _this.searchRegex(e.target.value);\r\n _this.searchParam = e.target.value;\r\n } else {\r\n // Se o campo estiver vazio, mostra os posts iniciais\r\n document.querySelector('[data-posts-list]').innerHTML = _this.initialPosts;\r\n document.querySelector('.pagination-wrapper').style.display = 'block';\r\n\r\n window.lazyLoadInstance.update();\r\n }\r\n }, 1000)\r\n );\r\n },\r\n\r\n init() {\r\n // Pega os posts iniciais\r\n this.search();\r\n\r\n window.onload = () => {\r\n this.maintainActualPosts();\r\n };\r\n },\r\n};\r\n\r\nwindow.addEventListener('DOMContentLoaded', () => {\r\n BlogSearch.init();\r\n});\r\n"],"names":[],"sourceRoot":""}
![\"${post.title}\"](\"${post.thumb.path}\"/)
\r\n