https://coolubg2.github.io/js/list/new-list.js

1function generateNewPageList() {
2    const pageList = document.getElementById('pageListNEW');
3    pageList.innerHTML = ""; // Clear previous content
4
5    // Sort pages by date (newest first)
6    pagesData.sort((a, b) => {
7      const dateA = new Date(a.date.split('-').reverse().join('-'));
8      const dateB = new Date(b.date.split('-').reverse().join('-'));
9      if (dateA.getTime() === dateB.getTime()) {
10        return a.name.localeCompare(b.name);
11      }
12      return dateB.getTime() - dateA.getTime();
13    });
14
15    // Limit to the first 15 items after sorting
16    const itemsToShow = pagesData.slice(0, 5);
17
18    itemsToShow.forEach((page, index) => {
19      // Format the full name
20      const formattedName = page.formatted_Name;
21
22const li = document.createElement('li');
23li.innerHTML = `
24  <div class="suggest-game" onmouseover="highlightImageL('suggest-imgN${index + 1}', 'suggest-textN${index + 1}')" 
25       onmouseout="removeHighlightL('suggest-imgN${index + 1}', 'suggest-textN${index + 1}')">
26    <a href="games/?${page.name}">
27      <div class="suggest-text-back-container" 
28           style="position: absolute; margin: 0.6vh; width: 16.8vw; height: calc(20.3vw * 9 / 16); overflow: hidden; z-index: 2;">
29        <div class="suggest-text-back" 
30             style="position: absolute; width: 300%; height: 300%; left: -5vw; top: 0vw; background-color: black; opacity: 0;"></div>
31      </div>
32      <img id="suggest-imgN${index + 1}" 
33           src="/images/games-512/${page.name}.png" 
34           alt="${page.name}" 
35           style="margin: 0.6vh; border-radius: 0.4vw; position: relative; width: 16.8vw; height: auto;" />
36      <p id="suggest-textN${index + 1}" 
37         style="position: absolute; z-index: 999; left: 1.25vw; top: calc(100% - 4.75vw); opacity: 0;">
38        ${formattedName}
39      </p>
40    </a>
41  </div>
42`;
43
44pageList.appendChild(li);
45
46const textElement = li.querySelector(`#suggest-textN${index + 1}`);
47const imageElement = li.querySelector(`#suggest-imgN${index + 1}`);
48
49const prevOpacity = textElement.style.opacity;
50textElement.style.opacity = '1';
51
52const imageWidth = imageElement.getBoundingClientRect().width;
53
54// Padding offset in pixels
55const paddingOffset = 22;
56
57const maxWidth = imageWidth - paddingOffset;
58
59const textWidth = textElement.getBoundingClientRect().width;
60
61if (textWidth > maxWidth) {
62  const scaleX = maxWidth / textWidth;
63  textElement.style.transformOrigin = 'left center';  // scale vertically from center, horizontally from left
64  textElement.style.transform = `scale(${scaleX}, ${scaleX})`;
65  textElement.style.letterSpacing = 'normal';
66} else {
67  textElement.style.transform = 'scale(1, 1)';
68  textElement.style.letterSpacing = 'normal';
69}
70
71textElement.style.opacity = prevOpacity;
72
73    });
74  }