https://madamefigaro.jp/wp-content/themes/madamefigaro-jp/assets/js/load-more-init.js?ver=1.0.2

1/**
2 * Load More Auto Initialization
3 *
4 * data属性ベースで自動的にLoadMoreを初期化します
5 *
6 * 使用方法:
7 * <div data-load-more
8 *      data-load-more-api="/wp-json/madamefigaro/v1/tag-posts/fashion"
9 *      data-load-more-template="post-item-template"
10 *      data-load-more-offset="12"
11 *      data-load-more-count="12"
12 *      data-load-more-tag-count="2">
13 *     <!-- 初期投稿 -->
14 * </div>
15 *
16 * <div class="c-btn-more">
17 *     <p class="c-btn-more__link">View More</p>
18 * </div>
19 *
20 * <script id="post-item-template" type="x-tmpl-mustache">
21 *     <!-- Mustacheテンプレート -->
22 * </script>
23 *
24 * @package madameFIGARO.jp
25 */
26
27document.addEventListener('DOMContentLoaded', function() {
28    // 必須ライブラリのチェック
29    if (typeof Mustache === 'undefined' || typeof LoadMore === 'undefined') {
30        console.warn('LoadMore auto initialization: Mustache or LoadMore class not found');
31        return;
32    }
33
34    // data-load-more属性を持つすべての要素を取得
35    const containers = document.querySelectorAll('[data-load-more]');
36
37    containers.forEach(function(container) {
38        // data属性から設定を取得
39        const apiUrl = container.getAttribute('data-load-more-api');
40        const templateId = container.getAttribute('data-load-more-template');
41        const offset = parseInt(container.getAttribute('data-load-more-offset'), 10) || 0;
42        const count = parseInt(container.getAttribute('data-load-more-count'), 10) || 12;
43        const tagCountAttr = container.getAttribute('data-load-more-tag-count');
44        const tagCount = tagCountAttr !== null ? parseInt(tagCountAttr, 10) : 2;
45        const excludeTagsAttr = container.getAttribute('data-load-more-exclude-tags');
46        const excludeTags = excludeTagsAttr ? excludeTagsAttr.split(',').map(s => s.trim()).filter(Boolean) : [];
47        const buttonSelector = container.getAttribute('data-load-more-button');
48
49        // 必須パラメータのチェック
50        if (!apiUrl || !templateId) {
51            console.warn('LoadMore auto initialization: Missing required data attributes (api or template)', container);
52            return;
53        }
54
55        // ボタン要素を取得
56        let button;
57        if (buttonSelector) {
58            button = document.querySelector(buttonSelector);
59        } else {
60            // デフォルト: コンテナの親要素内で.c-btn-more__linkを探す
61            const parentSection = container.closest('.section') || container.closest('.author-posts') || container.parentElement;
62            if (parentSection) {
63                button = parentSection.querySelector('.c-btn-more__link, .load-more-button');
64            }
65        }
66
67        if (!button) {
68            console.warn('LoadMore auto initialization: Button not found', container);
69            return;
70        }
71
72        // Mustacheテンプレートを取得
73        const templateElement = document.getElementById(templateId);
74        if (!templateElement) {
75            console.warn('LoadMore auto initialization: Template not found', templateId);
76            return;
77        }
78
79        const template = templateElement.innerHTML;
80
81        // createItemHTML関数を生成
82        function createItemHTML(post) {
83            // 対象タグを除外してからタグ表示数で制限
84            let filteredTags = post.tags || [];
85            if (excludeTags.length > 0) {
86                filteredTags = filteredTags.filter(tag => !excludeTags.includes(tag.slug));
87            }
88            const postData = {
89                ...post,
90                tags: (tagCount > 0 && filteredTags.length > 0) ? filteredTags.slice(0, tagCount) : []
91            };
92
93            return Mustache.render(template, postData);
94        }
95
96        // LoadMoreクラスを初期化
97        try {
98            new LoadMore({
99                container: container,
100                button: button,
101                apiUrl: apiUrl,
102                createItemHTML: createItemHTML,
103                offset: offset,
104                perPage: count
105            });
106        } catch (error) {
107            console.error('LoadMore initialization failed:', error);
108        }
109    });
110});