Untitled

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