(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);