https://www.er500.ee/themes/er500/assets/js/teema-single-pealkirjad.js?v=1.x

1document.addEventListener("DOMContentLoaded", function () {
2  const colors = ['#83D0E2', '#7952C6', '#D1FB57', '#FF6B4A'];
3  const shapes = ['ellipse', 'circle', 'rounded', 'ellipse-wide', 'ellipse-tall', 'ellipse-squish', 'ellipse-rounded'];
4
5  let shapeData = [];
6  let lastColors = []; // Queue to track last 3 used colors
7
8  // Function to get a unique color that wasn't used in the last 3 elements
9  function getUniqueColor() {
10    let availableColors = colors.filter(color => !lastColors.includes(color));
11
12    if (availableColors.length === 0) {
13      lastColors.shift(); // Remove oldest color to make space
14      availableColors = [...colors]; // Reset available colors
15    }
16
17    const color = availableColors[Math.floor(Math.random() * availableColors.length)];
18
19    lastColors.push(color);
20    if (lastColors.length > 2) {
21      lastColors.shift(); // Keep only the last 2 colors in memory
22    }
23
24    return color;
25  }
26
27  function generateShapes() {
28    document.querySelectorAll(".views-field-title").forEach((title, index) => {
29      let shape, color;
30
31      if (!shapeData[index]) {
32        shape = shapes[Math.floor(Math.random() * shapes.length)];
33        color = getUniqueColor();
34        shapeData[index] = { shape, color };
35      } else {
36        shape = shapeData[index].shape;
37        color = shapeData[index].color;
38      }
39
40      const link = title.querySelector("a");
41      const parentRow = title.closest(".views-row");
42
43      let parentWidth = parentRow ? parentRow.offsetWidth : 300;
44      let shapeWidth = Math.min(parentWidth * 1.5, 320);
45
46      let linkHeight = link ? link.offsetHeight : 16;
47      let bottomPosition = '-60px';
48
49      if (linkHeight > 50) {
50        bottomPosition = '-20px';
51      } else if (linkHeight > 35) {
52        bottomPosition = '-40px';
53      }
54
55      let shapeWrapper = title.querySelector('.generated-shape-wrapper');
56      if (!shapeWrapper) {
57        shapeWrapper = document.createElement("div");
58        shapeWrapper.classList.add("generated-shape-wrapper");
59        shapeWrapper.style.position = 'relative';
60        shapeWrapper.style.overflow = 'hidden';
61        shapeWrapper.style.borderRadius = '15px';
62        shapeWrapper.style.height = '120px';
63        shapeWrapper.style.width = `calc(100% + 30px)`;
64        title.appendChild(shapeWrapper);
65      }
66
67      const shapeElement = shapeWrapper.querySelector('.generated-shape') || document.createElement("div");
68      shapeElement.classList.add("generated-shape");
69      shapeElement.style.backgroundColor = color;
70      shapeElement.style.position = 'absolute';
71      shapeElement.style.left = '-20px';
72      shapeElement.style.bottom = bottomPosition;
73      shapeElement.style.width = `${shapeWidth}px`;
74      shapeElement.style.height = '120px';
75
76      if (shape === 'ellipse') shapeElement.style.borderRadius = '50% 30%';
77      else if (shape === 'circle') shapeElement.style.borderRadius = '50%';
78      else if (shape === 'rounded') shapeElement.style.borderRadius = '25px';
79      else if (shape === 'ellipse-wide') shapeElement.style.borderRadius = '60% 30%';
80      else if (shape === 'ellipse-tall') shapeElement.style.borderRadius = '30% 60%';
81      else if (shape === 'ellipse-squish') shapeElement.style.borderRadius = '30% 50%';
82      else if (shape === 'ellipse-rounded') shapeElement.style.borderRadius = '40% 40%';
83
84      if (color === '#D1FB57') {
85        link.style.color = 'black';
86      }
87
88      const oldShape = shapeWrapper.querySelector('.generated-shape');
89      if (oldShape) oldShape.remove();
90
91      shapeWrapper.appendChild(shapeElement);
92    });
93  }
94
95  generateShapes();
96
97  let resizeTimeout;
98  window.addEventListener('resize', function () {
99    clearTimeout(resizeTimeout);
100    resizeTimeout = setTimeout(function () {
101      generateShapes();
102    }, 200);
103  });
104});