Untitled
unknown
plain_text
a year ago
5.4 kB
2
Indexable
Never
(async function ($, Drupal) { Drupal.behaviors.blogNodeArticles = { attach(context, settings) { if (context !== document) { return; } const recentArticles = document.querySelector('.container-recent-article'); const articlesBody = document.querySelector('.container-articles'); console.log("🚀 ~ file: blog-node-articles.js:9 ~ attach ~ articlesBody:", articlesBody) console.log("🚀 ~ file: blog-node-articles.js:8 ~ attach ~ recentArticles:", recentArticles) const loader = $(once('blog', '#LoaderPage', context)); const loaderPage = { Hide: () => { loader.fadeOut(300); }, Show: () => { loader.fadeIn(300); }, }; const debounceTime = 3000; const button = $(once('blog', '.js-article-load', context)); const buttonText = button.text(); const textFilter = $(once('blog', '.js-article-filter-text', context)); const tagsFilter = $(once('blog', '.js-article-filter-tags', context)); let page = 1; let tags = []; let text = ''; let articles = {}; const resetTextDisabled = (disableButton) => { if (disableButton) { button.text('Carregando'); } else { button.text(buttonText); } button.attr('disabled', disableButton); }; const debounceCustom = (func) => { let timer; return (...args) => { resetTextDisabled(true); clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, debounceTime); }; } // when is tag filter // reset pages const getByTagNodeArticles = debounceCustom(async () => { tags = []; if (tagsFilter.val() != 0) { tags.push(tagsFilter.val()); } page = 1; await getAndDisabledFields(); }); const getKeyUpNodeArticles = debounceCustom(async (e) => { if (e.which == 13 || textFilter.val().length >= 3 || textFilter.val().length == 0) { const textSearch = textFilter.val().trim().replace(/\./g, ''); text = textSearch; page = 1; await getAndDisabledFields(); } }); // only in button will add pages const getButtonMoreNodeArticles = async () => { page += 1; resetTextDisabled(true); await getAndDisabledFields(); }; // control disabled fields const getAndDisabledFields = async () => { await getNodeArticles(); resetTextDisabled(false); } // first function when load page // because of get in back // need to set loaderPage const getLoadPageNodeArticles = async () => { loaderPage.Show(); $.when(await getNodeArticles()).then(getFirstNodeArticles()); loaderPage.Hide(); }; const getNodeArticles = async () => { try { const response = await fetch(`/blog/node-articles?page=${page}&text=${text}&tags=${tags}`); if (response.ok) { const result = await response.json(); articles = result; articles.forEach(article => { const articleDiv = document.createElement("div"); articleDiv.innerHTML = `entrou<div class="container-imgage"> ${article.field_img_article_value} </div> <div class="container-informations"> <span>${article.field_tag_article_value}</span> <h1>${article.title}<h1> <p>${article.field_date_text_value}</p> <h3>${article.body_summary}</h3> </div>`; articlesBody.appendChild(articleDiv); }) console.log(articles); } } catch (error) { console.log('Error in function getNodeArticles'); } }; // show first article ordered by id desc const getFirstNodeArticles = async () => { console.log('carrega apenas um artigo'); console.log(articles[0]); } button.on('click', getButtonMoreNodeArticles); tagsFilter.on('change', getByTagNodeArticles); textFilter.on('keyup', getKeyUpNodeArticles); textFilter.val(''); tagsFilter.val(0); getLoadPageNodeArticles(); }, }; })(jQuery, Drupal);