https://taitsu.co.jp/assets/front/js/news/index.js

1const news = {
2    currentPage: 1,
3    lastPage: 1,
4    filters: {},
5
6    init: function(page = 1, filters = {}) {
7        this.currentPage = page;
8        this.filters = filters;
9        const slug = getQueryParam('slug');
10        if (
11            Object.keys(this.filters).length === 0 &&
12            slug !== null &&
13            slug !== ''
14        ) {
15            this.filters = {
16                category: slug
17            };
18        }
19
20        let formData = new FormData();
21        formData.append('method', 'get_notices_latest');
22        formData.append('page', page);
23
24        for (let key in this.filters) {
25            let filterValue = Array.isArray(this.filters[key]) ? this.filters[key].join(",") : this.filters[key];
26            formData.append(key, filterValue);
27        }
28
29        $.ajax({
30            url: $('#ct_url_news').val(),
31            type: 'POST',
32            data: formData,
33            contentType: false,
34            processData: false,
35            dataType: 'json',
36            success: function(response) {
37                if (response.status === 'success') {
38                    $('#news-container').empty();
39
40                    let categoriesSet = new Map();
41                    categoriesSet.set("1", "ALL");
42
43                    Object.entries(response.categories).forEach(([key, label]) => {
44                        categoriesSet.set(key.toLowerCase(), label);
45                    });
46
47                    let categories = Array.from(categoriesSet, ([id, label]) => ({
48                        id,
49                        label,
50                        isActive:  String(id) === String(response.isActive)
51                    }));
52
53                    news.renderCategories(categories);
54                    news.renderNews(response.data);
55
56                    news.currentPage = response.current_page;
57                    news.lastPage = response.last_page;
58
59                    news.totalRecords = response.total;
60                    news.perPage = response.per_page;
61
62                    news.renderPagination();
63                    news.updateRecordInfo();
64                }
65            },
66            error: function(xhr, status, error) {
67                console.error('Error loading news:', error);
68            }
69        });
70    },
71
72    renderCategories: function (categories) {
73        const newsCatContainer = $('.p-catBox__list');
74        newsCatContainer.empty();
75
76        categories.forEach(category => {
77            const tabId = category.id.toLowerCase();
78            const isActive = category.isActive ? "active" : "";
79            const catItem = `<li data-tab="${tabId}" class="p-catBox__item ${isActive}">${category.label?.toLowerCase() || 'unknown'}</li>`;
80            newsCatContainer.append(catItem);
81        });
82
83        $(".p-catBox__item").on("click", function() {
84            const category = $(this).attr("data-tab");
85
86            $(".p-catBox__item").removeClass("active");
87            $(this).addClass("active");
88
89            news.filterNews(category);
90        });
91    },
92
93    filterNews: function (category) {
94        let params = {
95            category : category
96        };
97
98        news.filters = params;
99        news.init(1, params);
100    },
101
102    renderNews: function (newsList) {
103        const newsContainer = $('#news-container');
104        newsContainer.empty();
105
106        if (newsList && newsList.length > 0) {
107            newsList.forEach(function(notice) {
108                const date = new Date(notice.disp_date);
109                const formattedDate = date.getFullYear() + 'å¹´' +
110                    String(date.getMonth() + 1).padStart(2, '0') + '月' +
111                    String(date.getDate()).padStart(2, '0') + '日';
112
113                const newsItem = `

114            <a href="./detail.php?id=${notice.notice_id}" class="p-news__item" ${notice.auto_translate != 1 ? 'data-stt-changelang="ja" data-stt-ignore' : ''} data-category="${notice.category.toLowerCase()}">
115                <div class="p-news__info">
116                 
117                    <p class="p-news__date">${formattedDate}</p>
118                    <p class="p-news__label">${notice.category_name}</p>
119                    <p class="p-news__title">${notice.title}</p>
120                </div>
121                <div class="p-news__action">
122                    <span>view more</span>
123                </div>
124            </a>
125        `;
126
127                newsContainer.append(newsItem);
128            });
129        } else {
130            newsContainer.append('<div>現在、お知らせはありません。</div>');
131        }
132    },
133
134    renderPagination: function() {
135        let pagination = $(".pagination");
136        pagination.empty();
137
138        let current = news.currentPage;
139        let last = news.lastPage;
140
141        let prevDisabled = current === 1 ? "disabled" : "";
142        let nextDisabled = current === last ? "disabled" : "";
143
144        pagination.append(`<li class="prev ${prevDisabled}" data-page="${current - 1}">Prev</li>`);
145
146        if (current <= 4) {
147            for (let i = 1; i <= Math.min(5, last); i++) {
148                let active = i === current ? "active" : "";
149                pagination.append(`<li class="${active}" data-page="${i}">${i}</li>`);
150            }
151            if (last > 5) {
152                pagination.append(`<li class="dots">...</li>`);
153                pagination.append(`<li data-page="${last}">${last}</li>`);
154            }
155        } else if (current >= last - 3) {
156            pagination.append(`<li data-page="1">1</li>`);
157            pagination.append(`<li class="dots">...</li>`);
158            for (let i = last - 4; i <= last; i++) {
159                let active = i === current ? "active" : "";
160                pagination.append(`<li class="${active}" data-page="${i}">${i}</li>`);
161            }
162        } else {
163            pagination.append(`<li data-page="1">1</li>`);
164            pagination.append(`<li class="dots">...</li>`);
165            pagination.append(`<li data-page="${current - 1}">${current - 1}</li>`);
166            pagination.append(`<li class="active" data-page="${current}">${current}</li>`);
167            pagination.append(`<li data-page="${current + 1}">${current + 1}</li>`);
168            pagination.append(`<li class="dots">...</li>`);
169            pagination.append(`<li data-page="${last}">${last}</li>`);
170        }
171
172        pagination.append(`<li class="next ${nextDisabled}" data-page="${current + 1}">Next</li>`);
173
174        $(".pagination li").not(".dots, .disabled").on("click", function() {
175            let page = $(this).data("page");
176            if (page) {
177                news.init(page, news.filters);
178            }
179        });
180    },
181
182    updateRecordInfo: function() {
183        let start = (this.currentPage - 1) * this.perPage + 1;
184        let end = Math.min(this.currentPage * this.perPage, this.totalRecords);
185
186        let formattedStart = start.toLocaleString("en-US");
187        let formattedEnd = end.toLocaleString("en-US");
188        let formattedTotal = this.totalRecords.toLocaleString("en-US");
189
190        $(".record-info").html(`Showing ${formattedStart} to ${formattedEnd} of ${formattedTotal} records`);
191    },
192};
193
194function getQueryParam(param) {
195    const urlParams = new RegExp('[?&]' + param + '=([^&#]*)').exec(window.location.href);
196    return urlParams ? decodeURIComponent(urlParams[1]) : null;
197}
198
199$(document).ready(function() {
200    news.init();
201});