https://rondell.ru/js/news.js?239732

1const loadNews = () => {
2    let archiveYears = [];
3    let newsWithinPeriod = [];
4    let offset = 14;
5    let startPointToSliceArray = 0;
6    let endPointToSliceArray = 0;
7    let scrollableItems = [];
8    let newsRowBlock = document.querySelector('.news-row');
9    let yearsListBlock = document.querySelector('.archive ul');
10    let button = document.querySelector('.archive button');
11
12
13    /*рендер одного блока с новостью*/
14    const renderNewsBlock = (elem, index) => {
15        const item = {
16            id: elem.id,
17            alias: elem.alias,
18            title: elem.title,
19            date: elem.newsdate,
20            day: elem.day,
21            month: elem.month,
22            year: elem.year,
23            preview: elem.preview_img,
24        }
25
26        let block = document.createElement('a');
27        block.classList.add('news-block');
28        block.setAttribute('href', `/news/${item.alias}/`);
29        if(index !== 0 && (index+1)%7 === 0) {
30            block.classList.add('large');
31        }
32        if(index !== 0 && (index+1)%14 === 0) {
33            block.classList.add('left-text');
34        }
35
36        block.innerHTML = `<div class="preview">
37                                <img src="${item.preview}" alt="${item.title}">
38                            </div>
39                            <div class="info">
40                                <div class="title">${item.title}</div>
41                                <time datetime="${item.date}" class="date">${item.day} ${item.month} ${item.year}</time>
42                            </div>`;
43
44        newsRowBlock.append(block);
45
46    }
47
48
49    /*рендер одного блока с годом в выпадающем списке*/
50    const renderYearsBlock = (elem, json) => {
51        let block = document.createElement('li');
52        block.innerText = elem;
53        yearsListBlock.append(block);
54    }
55
56
57    /*вывод активного года в блок*/
58    const setYearToButton = () => {
59        button.setAttribute('data-year', yearsListBlock.querySelector('li.active').innerText);
60        button.innerText = button.getAttribute('data-year');
61    }
62
63
64    /*открытие выпадающего спсика с годами по клику*/
65    const clickOnYearsButton = () => {
66        let yearsListInnerBlocks = yearsListBlock.querySelectorAll('li');
67        let yearsListHeight = 0;
68
69        button.classList.toggle('active');
70
71        if(button.classList.contains('active')) {
72            yearsListBlock.classList.add('active');
73            yearsListInnerBlocks.forEach((el) => {
74                yearsListHeight += el.offsetHeight;
75            })
76            yearsListHeight += 30;
77        } else {
78            yearsListHeight = 0;
79            yearsListBlock.classList.remove('active');
80        }
81
82        yearsListBlock.style.height =  `${yearsListHeight}px`;
83
84        setYearToButton();
85    }
86
87
88    /*рендер новостей за определенный период после клика по году в выпадающем списке*/
89    const clickOnYearsInnerBlocks = (el, json) => {
90        yearsListBlock.querySelectorAll('li').forEach(elem => elem.classList.remove('active'));
91        el.classList.add('active');
92        setYearToButton();
93        button.classList.remove('active');
94        yearsListBlock.classList.remove('active');
95        yearsListBlock.style.height = '0px';
96
97        renderNewsWithinPeriod(json)
98    }
99
100
101    /*рендер одного блока с новостью за определенный год*/
102    const renderNewsWithinPeriod = (json) => {
103        let year = button.getAttribute('data-year');
104        newsWithinPeriod = [];
105
106        json.forEach((el) => {
107            if(el['year'] === year) {
108                newsWithinPeriod.push(el);
109            }
110        })
111
112        newsRowBlock.innerHTML = '';
113        newsWithinPeriod.forEach((el, index) => renderNewsBlock(el, index));
114
115        loadNewsOnScroll(newsWithinPeriod);
116    }
117
118
119    /*рендер новостей по скроллу, бесконечная прокрутка*/
120    const loadNewsOnScroll = (json) => {
121        scrollableItems = [];
122        scrollableItems=json;
123        window.addEventListener('scroll', () => {
124            if(document.querySelector('footer').getBoundingClientRect().top <= screen.height) {
125                startPointToSliceArray += offset;
126                endPointToSliceArray = startPointToSliceArray + offset;
127

128                scrollableItems.forEach((el, index) => {
129                    if (index >= startPointToSliceArray && index < endPointToSliceArray && index <= scrollableItems.length) {
130                        renderNewsBlock(el, index);
131                    }
132                })
133            }
134        }, { passive: true });
135    }
136
137
138    try {
139        fetch('/news/getnews',)
140            .then((response) => response.json())
141            .then((json) => {
142                json.forEach((el, index) => {
143                    archiveYears.push(+el['year']);
144
145                    if(index < offset) {
146                        renderNewsBlock(el, index);
147                    }
148                })
149
150                archiveYears = [...new Set(archiveYears)];
151                archiveYears.sort((a, b) => b - a);
152                archiveYears.forEach((el) => {
153                    renderYearsBlock(el);
154                })
155
156                yearsListBlock.querySelector('li').classList.add('active');
157
158                yearsListBlock.querySelectorAll('li').forEach((li) => {
159                    li.addEventListener('click', (e) => {
160                        clickOnYearsInnerBlocks(e.target, json);
161                    })
162                });
163
164                setYearToButton();
165
166
167                button.addEventListener('click', clickOnYearsButton);
168
169                loadNewsOnScroll(json);
170            })
171    } catch (e) {
172        console.log(e.message)
173    }
174}
175
176document.addEventListener('DOMContentLoaded', () => {
177    if(document.querySelector('.news-list')) {
178        loadNews();
179    }
180})