https://www.gssilatam.org/sites/gssilatam-org/modules/custom/gssi_blocks/js/pages/sse/index.js?tlw5xb

1import Page from '../page.js'
2import Util from '../../util/util.js';
3import '../../components/filter/filter.js';
4
5export default class SSE extends Page {
6  constructor() {
7    super();
8    this.$template = document.querySelector('#articles .card-main').cloneNode(true);
9    this.$cardsContainer = document.querySelector('#articles-cards');
10    this.$loadMore = document.querySelector('#load-more-sse-items');
11
12    this.setFilterEvents();
13    this.initArticleTracking();
14    this.initFeaturedArticleTracking();
15    this.currentPage = 0;
16  }
17  paralax(data) {
18    super.paralax(data);
19  }
20  initIntro() {
21    super.initIntro();
22  }
23  intro() {
24    super.intro();
25  }
26
27  setFilterEvents() {
28    document.querySelector('#articles-filter select').addEventListener('change', (e) => {
29      this.clearGrid();
30      this.currentPage = -1;
31
32      //let val = e.currentTarget.value;
33      let selected = [];
34      document.querySelectorAll('#articles-filter .filter-options .option.active').forEach((option) => {
35        selected.push(option.getAttribute('data-value'));
36      });
37      this.loadGridContent(selected, false);
38
39    });
40
41    document.querySelector('#load-more-sse-items').addEventListener('click', () => {
42      let selected = [];
43      document.querySelectorAll('#articles-filter .filter-options .option.active').forEach((option) => {
44        selected.push(option.getAttribute('data-value'));
45      });
46      this.loadGridContent(selected, true);
47    });
48  }
49
50  clearGrid() {
51    this.$cardsContainer.style.height = this.$cardsContainer.offsetHeight + 'px';
52    this.currentPage = 0;
53    this.$cardsContainer.innerHTML = '';
54    this.$loadMore.classList.remove('hidden');
55  }
56  loadGridContent(category, isLoadMore = false) {
57    this.currentPage++;
58    const endpoint = '/gssi_blocks/ajax-get-sse-page'; // Replace with your endpoint
59    let pageLimit = 9;
60    let payload = {
61      page: this.currentPage,
62      limit: pageLimit,
63      langcode: drupalSettings.gssiBlocks.langcode
64    };
65    console.log("payload:", payload);
66    if (category && Array.isArray(category) && category.length > 0) {
67      payload['category'] = category;
68
69    }
70    fetch(endpoint, {
71      method: 'POST',
72      headers: {
73        'Content-Type': 'application/json',
74      },
75      body: JSON.stringify(payload), // Send the payload as JSON
76    })
77      .then(response => {
78        if (!response.ok) {
79          throw new Error(`HTTP error! Status: ${response.status}`);
80        }
81        return response.json();
82      })
83      .then(data => {
84        // Handle the server's response
85        if (data.status === 'success') {
86          console.log(data.remaining_count);
87          document.querySelector('#load-more-sse-items').classList.toggle('hidden', !data.remaining_count);
88          console.log('AJAX Response:', data);
89          this.addCards(data.results);
90          this.$loadMore.classList.toggle('hidden', data.remaining_count === 0);
91
92          if (isLoadMore) {
93            this.trackViewMoreArticles("Sports Science Exchange");
94          }
95
96        } else {
97          alert('An error occurred: ' + data.message);
98        }
99      })
100      .catch(error => {
101        console.error('AJAX Error:', error);
102        alert('There was an error processing your request.');
103      });
104
105
106
107  }
108
109  trackViewMoreArticles(sectionName) {
110    const userStatus = (drupalSettings && drupalSettings.user && drupalSettings.user.uid && drupalSettings.user.uid !== 0) ? 'Registrado' : 'Invitado';
111    if (typeof window.triggerDataLayerPush === 'function') {
112      window.triggerDataLayerPush({
113        event: "view_more_articles",
114        optional_text: "Ver más artículos",
115        section_name: Util.toSentenceCase(sectionName),
116        status: userStatus
117      });
118    }
119  }
120  addCards(results) {
121    results.forEach((result) => {
122      console.log('result:', result);
123      let $clone = this.$template.cloneNode(true);
124      $clone.querySelector('.card-main-media img').setAttribute('src', result.media_url);
125      $clone.querySelector('.card-main-info span').textContent = result.category;
126      $clone.querySelector('.card-main-content strong').textContent = result.title;
127      $clone.setAttribute('data-category', result.category);
128      $clone.setAttribute('href', result.url);
129
130      this.attachCardListener($clone, result.title, result.category);
131
132      this.$cardsContainer.appendChild($clone);
133    });
134
135    setTimeout(() => {
136      document.querySelectorAll('.card-main').forEach((card) => {
137        card.classList.remove('hidden');
138      });
139      this.$cardsContainer.style.height = 'auto';
140      window.lenisScroll.callRaf();
141    }, 500);
142  }
143
144  initArticleTracking() {
145    const cards = document.querySelectorAll('#articles-cards .card-main');
146    cards.forEach($card => {
147      const title = $card.querySelector('.card-main-content strong').textContent.trim();
148      const topic = $card.dataset.category || $card.querySelector('.card-main-info span')?.textContent?.trim() || 'Sin categoría';
149      this.attachCardListener($card, title, topic);
150    });
151  }
152
153  attachCardListener($card, title, topic) {
154    if ($card.dataset.trackingAttached) return; // Prevent double attachment
155    $card.dataset.trackingAttached = "true";
156
157    $card.addEventListener('click', (e) => {
158      const el = e.currentTarget;
159      const href = el.getAttribute('href');
160      const isNewTab = el.target === '_blank' || e.metaKey || e.ctrlKey || e.shiftKey;
161      const shouldRedirect = !isNewTab && href && href !== '#' && !href.startsWith('javascript:');
162
163      const userStatus = (drupalSettings && drupalSettings.user && drupalSettings.user.uid && drupalSettings.user.uid !== 0) ? 'Registrado' : 'Invitado';
164      const payload = {
165        event: "view_article",
166        article_name: title,
167        topic_name: [Util.toSentenceCase(topic)],
168        section_name: Util.toSentenceCase("Sports Science Exchange"),
169        status: userStatus
170      };
171
172      if (shouldRedirect) {
173        e.preventDefault();
174        e.stopPropagation();
175        if (typeof window.handleLinkDelay === 'function') {
176          window.handleLinkDelay(e, payload, href);
177        } else {
178          if (typeof window.triggerDataLayerPush === 'function') {
179            window.triggerDataLayerPush(payload);
180          }
181          setTimeout(() => { window.location.href = href; }, 500);
182        }
183      } else {
184        if (typeof window.triggerDataLayerPush === 'function') {
185          window.triggerDataLayerPush(payload);
186        }
187      }
188    });
189  }
190
191  trackArticleView(title, topic) {
192    const userStatus = (drupalSettings && drupalSettings.user && drupalSettings.user.uid && drupalSettings.user.uid !== 0) ? 'Registrado' : 'Invitado';
193    if (typeof window.triggerDataLayerPush === 'function') {
194      window.triggerDataLayerPush({
195        event: "view_article",
196        article_name: title,
197        topic_name: [Util.toSentenceCase(topic)], // Requirement says Array
198        section_name: Util.toSentenceCase("Sports Science Exchange"),
199        status: userStatus
200      });
201    }
202  }
203
204  initFeaturedArticleTracking() {
205    const $featuredCard = document.querySelector('#featured .card-horizontal');
206    if ($featuredCard) {
207      const title = $featuredCard.querySelector('.h4').innerText.trim();
208      const topic = $featuredCard.querySelector('.card-horizontal-info span')?.innerText?.trim() || 'Sin categoría';
209
210      $featuredCard.addEventListener('click', (e) => {
211        const el = e.currentTarget;
212        const href = el.getAttribute('href');
213        const isNewTab = el.target === '_blank' || e.metaKey || e.ctrlKey || e.shiftKey;
214        const shouldRedirect = !isNewTab && href && href !== '#' && !href.startsWith('javascript:');
215
216        const userStatus = (drupalSettings && drupalSettings.user && drupalSettings.user.uid && drupalSettings.user.uid !== 0) ? 'Registrado' : 'Invitado';
217        const payload = {
218          event: "view_featured_article",
219          article_name: title,
220          topic_name: [Util.toSentenceCase(topic)],
221          section_name: Util.toSentenceCase("Sports Science Exchange"),
222          status: userStatus
223        };
224
225        if (shouldRedirect) {
226          e.preventDefault();
227          e.stopPropagation();
228          if (typeof window.handleLinkDelay === 'function') {
229            window.handleLinkDelay(e, payload, href);
230          } else {
231            if (typeof window.triggerDataLayerPush === 'function') {
232              window.triggerDataLayerPush(payload);
233            }
234            setTimeout(() => { window.location.href = href; }, 500);
235          }
236        } else {
237          if (typeof window.triggerDataLayerPush === 'function') {
238            window.triggerDataLayerPush(payload);
239          }
240        }
241      });
242    }
243  }
244
245  trackFeaturedArticleView(title, topic) {
246    const userStatus = (drupalSettings && drupalSettings.user && drupalSettings.user.uid && drupalSettings.user.uid !== 0) ? 'Registrado' : 'Invitado';
247    if (typeof window.triggerDataLayerPush === 'function') {
248      window.triggerDataLayerPush({
249        event: "view_featured_article",
250        article_name: title,
251        topic_name: [Util.toSentenceCase(topic)],
252        section_name: Util.toSentenceCase("Sports Science Exchange"),
253        status: userStatus
254      });
255    }
256  }
257}
258new SSE();
259window.addEventListener("pageshow", function (event) {
260  if (event.persisted) {
261    location.reload();
262  }
263});