https://www.uu.se/download/18.3f858c3182e8f9dd19195c6/1761548528313/same-margin-for-puffs.js

1/*
2 * This Javascript will add classes to puffs and rows with puffs to be used to reduce the margin of
3 * puffs of the same type
4 *
5 * Source: misc-js/same-margin-for-puffs.js
6 */
7
8function addPuffClasses() {
9  const PAGECONTENT_SELECTOR = '.pagecontent';
10  const PUFF_SELECTOR = '.sv-se-uu-uit-webb-puff';
11  const PUFF_CALL_TO_ACTION_SELECTOR = `${PUFF_SELECTOR} .card.card-call-to-action`;
12  const PUFF_IMAGE_SELECTOR = `${PUFF_SELECTOR} .card.is-no-text-decoration`;
13  const COLUMN_6_SELECTOR = '.sv-column-6';
14  const COLUMN_4_SELECTOR = '.sv-column-4';
15  const COLUMN_3_SELECTOR = '.sv-column-3';
16
17  const LAYOUT_CLASS = 'sv-layout';
18  const ROW_PUFF_CALL_TO_ACTION_CLASS = 'row-puff-call-to-action';
19  const ROW_PUFF_IMAGE_CLASS = 'row-puff-image';
20  const ROW_MIXED_CONTENT_CLASS = 'row-mixed-content';
21  const PUFF_CALL_TO_ACTION_CLASS = 'puff-call-to-action';
22  const PUFF_IMAGE_CLASS = 'puff-image';
23  const PUFF_2_CLASS = 'puff-2';
24  const PUFF_3_CLASS = 'puff-3';
25  const PUFF_4_CLASS = 'puff-4';
26
27  /**
28   * Check if every non-layout node, including children, of given layout node has given type
29   * as a class. Empty layouts are ignored.
30   */
31  function checkContentTypes(layoutNode, type) {
32    // Get all direct children of the layout node
33    const nodes = Array.from(layoutNode.children);
34
35    // Empty layouts should be ignored, not fail the check
36    if (nodes.length === 0) {
37      return true;
38    }
39
40    // Filter out empty layout nodes and check recursively if remaining nodes match the type
41    const nonEmptyNodes = nodes.filter((node) => {
42      if (node.classList.contains(LAYOUT_CLASS)) {
43        return checkContentTypes(node, type) !== true;
44      }
45
46      return true;
47    });
48
49    // If all nodes were empty layouts, consider it a match
50    if (nonEmptyNodes.length === 0) {
51      return true;
52    }
53
54    // Check if every non-layout node has the given type as a class
55    return nonEmptyNodes.every((node) => {
56      if (node.classList.contains(LAYOUT_CLASS)) {
57        return checkContentTypes(node, type);
58      }
59      return node.classList.contains(type);
60    });
61  }
62
63  /**
64   * Add a class for number of puffs in a row
65   */
66  function addNumberOfPuffsClass(row) {
67    if (row.querySelector(COLUMN_6_SELECTOR) !== null) {
68      row.classList.add(PUFF_2_CLASS);
69    } else if (row.querySelector(COLUMN_4_SELECTOR) !== null) {
70      row.classList.add(PUFF_3_CLASS);
71    } else if (row.querySelector(COLUMN_3_SELECTOR) !== null) {
72      row.classList.add(PUFF_4_CLASS);
73    }
74  }
75
76  // First, for every puff, add a class to indicate whether it is a call to action or image puff
77  document.querySelectorAll(PUFF_SELECTOR).forEach((puff) => {
78    if (puff.querySelector(PUFF_CALL_TO_ACTION_SELECTOR) !== null) {
79      puff.classList.add(PUFF_CALL_TO_ACTION_CLASS);
80    }
81    if (puff.querySelector(PUFF_IMAGE_SELECTOR) !== null) {
82      puff.classList.add(PUFF_IMAGE_CLASS);
83    }
84  });
85
86  // Then, for every pagecontent row, add classes to indicate whether it is a row of only
87  // call to action puffs, only image puffs or mixed content. Also, for every row of puffs, add
88  // a class for the number of puffs in the row.
89  document.querySelectorAll(PAGECONTENT_SELECTOR).forEach((pagecontent) => {
90    // Check content types and add classes for every layout child of pagecontent
91    Array.from(pagecontent.children).forEach((row) => {
92      if (row.classList.contains(LAYOUT_CLASS)) {
93        if (checkContentTypes(row, PUFF_CALL_TO_ACTION_CLASS)) {
94          row.classList.add(ROW_PUFF_CALL_TO_ACTION_CLASS);
95          addNumberOfPuffsClass(row);
96        } else if (checkContentTypes(row, PUFF_IMAGE_CLASS)) {
97          row.classList.add(ROW_PUFF_IMAGE_CLASS);
98          addNumberOfPuffsClass(row);
99        } else {
100          row.classList.add(ROW_MIXED_CONTENT_CLASS);
101        }
102      }
103    });
104  });
105}
106
107addPuffClasses();