https://www.parquelapaz.com/static/dist/blog.js

1function applyMasonry(container, rowHeight) {
2  container.style.gridAutoRows = `${rowHeight}px`;
3  const items = container.querySelectorAll(".card__image");
4  items.forEach((item) => {
5    item.style.height = "auto";
6    const itemHeight = item.offsetHeight;
7    const computed = window.getComputedStyle(container);
8    const gapValue = computed.getPropertyValue("row-gap") || computed.getPropertyValue("grid-row-gap");
9    const rowGap = parseFloat(gapValue) || 0;
10    const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap));
11    item.style.gridRowEnd = `span ${rowSpan}`;
12    item.style.height = "100%";
13  });
14}
15function elementControl(element, value, skeleton) {
16  let plainText = value;
17  const target = skeleton.querySelector(element);
18  if (target) {
19    const truncateWords = target.dataset.truncatewords;
20    const truncateChars = target.dataset.truncatechars;
21    if (truncateWords && plainText) {
22      const truncatedValue = value.split(" ").slice(0, Number(truncateWords));
23      plainText = value.replace(/(<([^>]+)>)/gi, "");
24      if (element !== ".js-paragraph") {
25        target.title = plainText;
26      }
27      plainText = plainText.length > Number(truncateWords) ? `${truncatedValue.join(" ")}…` : plainText;
28    }
29    if (truncateChars && plainText) {
30      plainText = value.slice(0, Number(truncateChars));
31    }
32    plainText ? target.innerHTML = plainText : target.remove();
33  }
34}
35function listControl(element, value, skeleton) {
36  const itemList = skeleton.querySelector(element);
37  if (!itemList)
38    return;
39  const list = itemList.parentElement;
40  if (!list)
41    return;
42  if (value.length > 0) {
43    value.forEach((el) => {
44      const item = itemList.cloneNode(true);
45      item.innerHTML = el.name;
46      list.appendChild(item);
47    });
48  }
49  itemList.remove();
50}
51function imageControl(element, value, skeleton, title = false) {
52  const img = skeleton.querySelector(element);
53  if (img) {
54    if (value) {
55      img.src = value;
56      if (title) {
57        img.alt = title;
58      }
59    } else {
60      img.remove();
61    }
62  }
63}
64function linkControl(element, value, skeleton) {
65  const links = skeleton.querySelectorAll(element);
66  if (links) {
67    links.forEach((el) => {
68      el ? el.href = value : el == null ? void 0 : el.remove();
69    });
70  }
71}
72function modalControl(element, value, skeleton) {
73  const target = skeleton.querySelector(element);
74  if (target) {
75    value ? target.dataset.target = value : target.remove();
76  }
77}
78function addToWrapper(items, skeleton, wrapper) {
79  wrapper.innerHTML = "";
80  items.forEach((el) => {
81    createCard(el, skeleton, wrapper);
82  });
83}
84function appendToWrapper(items, skeleton, wrapper, sliceStart) {
85  const visibleItems = sliceStart + items.length;
86  items.forEach((el) => {
87    createCard(el, skeleton, wrapper);
88  });
89  wrapper.dataset.visibleItems = String(visibleItems);
90}
91function createCard(el, skeleton, wrapper) {
92  const card = skeleton.cloneNode(true);
93  wrapper.appendChild(card);
94  elementControl(".js-title", el.title ?? "", card);
95  elementControl(".js-subtitle", el.subtitle ?? "", card);
96  if (el.summary) {
97    elementControl(".js-paragraph", el.summary ?? "", card);
98  } else {
99    if (el.text) {
100      el.text = el.text.replace(/(?:\r\n|\r|\n)/g, "<br>");
101    }
102    elementControl(".js-paragraph", el.text ?? "", card);
103  }
104  listControl(".js-badge", el.category ?? [], card);
105  imageControl(".js-img--image", el.image ?? "", card, el.title ?? false);
106  if (el.modal_target) {
107    modalControl(".js-sd-modal__button", el.modal_target, card);
108  } else {
109    linkControl(".js-cta", el.link ?? "", card);
110    linkControl(".js-card__wrapper-link", el.link ?? "", card);
111  }
112  card.offsetHeight;
113  card.classList.add("card__image--visible");
114}
115function initBlog() {
116  const container = document.querySelector(".js-blog-andromeda__list");
117  if (!container)
118    return;
119  const skeletonElement = container.querySelector(".js-card--skeleton");
120  if (!skeletonElement)
121    return;
122  const skeleton = skeletonElement.cloneNode(true);
123  const categoryFilter = document.querySelectorAll(".js-blog-andromeda__categories-item");
124  const items = JSON.parse(
125    container.dataset.dynamicItemsJson ?? "[]"
126  );
127  let filteredItems = items;
128  skeletonElement.classList.add("hide");
129  const categoryParam = getParamFromUrl("category");
130  if (categoryParam && categoryParam != 0) {
131    filteredItems = filterCategories(items, categoryParam);
132    const filterTab = document.querySelector(`.js-blog-andromeda__categories-item[data-code="${categoryParam}"]`);
133    if (filterTab)
134      filterTab.classList.add("active");
135    addToWrapper(
136      filteredItems.slice(0, 12),
137      skeleton,
138      container
139    );
140    if (container.classList.contains("js-masonry-list")) {
141      applyMasonry(container, 1);
142    }
143  }
144  if (container.classList.contains("js-masonry-list")) {
145    applyMasonry(container, 1);
146  }
147  categoryFilter.forEach((el) => {
148    el.addEventListener("click", () => {
149      const categoryId = el.dataset.code;
150      const visibleItems = parseInt(container.dataset.visibleItems ?? "0", 10);
151      const activeCategory = document.querySelector(
152        ".js-blog-andromeda__categories-item.active"
153      );
154      if (activeCategory) {
155        activeCategory.classList.remove("active");
156      }
157      if (categoryId) {
158        filteredItems = filterCategories(items, parseInt(categoryId, 10));
159        el.classList.add("active");
160        addToWrapper(
161          filteredItems.slice(0, visibleItems),
162          skeleton,
163          container
164        );
165        if (container.classList.contains("js-masonry-list")) {
166          applyMasonry(container, 1);
167        }
168      }
169    });
170  });
171  if (container.classList.contains("js-masonry-list")) {
172    window.addEventListener("resize", () => {
173      applyMasonry(container, 1);
174    });
175  }
176  window.addEventListener("scroll", () => {
177    const scrollTop = container.getBoundingClientRect().top;
178    const clientHeight = window.innerHeight;
179    const scrollHeight = container.scrollHeight;
180    const visibleItems = parseInt(container.dataset.visibleItems ?? "0", 10);
181    if (visibleItems !== filteredItems.length) {
182      if (scrollTop < 0 && scrollTop <= clientHeight - scrollHeight) {
183        const sliceEnd = visibleItems + 12;
184        const slicedItems = filteredItems.slice(visibleItems, sliceEnd);
185        if (slicedItems.length > 0) {
186          appendToWrapper(
187            slicedItems,
188            skeleton,
189            container,
190            visibleItems
191          );
192          if (container.classList.contains("js-masonry-list")) {
193            applyMasonry(container, 1);
194          }
195        }
196      }
197    }
198  });
199}
200function filterCategories(items, id) {
201  paramsToUrl("category", id);
202  if (id == 0) {
203    return items;
204  }
205  return items.filter(
206    (item) => item.category.some((category) => category.id === id)
207  );
208}
209function paramsToUrl(param, id) {
210  let url = new URL(window.location.href);
211  url.searchParams.delete(param);
212  if (id && id !== 0) {
213    url.searchParams.append(param, id.toString());
214  }
215  window.history.pushState({}, "", url);
216}
217function getParamFromUrl(param) {
218  const url = new URL(window.location.href);
219  const value = url.searchParams.get(param);
220  if (value === null) {
221    return void 0;
222  }
223  const parsed = Number(value);
224  return isNaN(parsed) ? void 0 : parsed;
225}
226export {
227  initBlog as i
228};
229//# sourceMappingURL=blog.js.map